alias.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = formatToken;
  7. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  8. var _tinycolor = require("@ctrl/tinycolor");
  9. var _getAlphaColor = _interopRequireDefault(require("./getAlphaColor"));
  10. var _seed = _interopRequireDefault(require("../themes/seed"));
  11. var __rest = void 0 && (void 0).__rest || function (s, e) {
  12. var t = {};
  13. for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  14. if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
  15. if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  16. }
  17. return t;
  18. };
  19. /**
  20. * Seed (designer) > Derivative (designer) > Alias (developer).
  21. *
  22. * Merge seed & derivative & override token and generate alias token for developer.
  23. */
  24. function formatToken(derivativeToken) {
  25. const {
  26. override
  27. } = derivativeToken,
  28. restToken = __rest(derivativeToken, ["override"]);
  29. const overrideTokens = (0, _extends2.default)({}, override);
  30. Object.keys(_seed.default).forEach(token => {
  31. delete overrideTokens[token];
  32. });
  33. const mergedToken = (0, _extends2.default)((0, _extends2.default)({}, restToken), overrideTokens);
  34. const screenXS = 480;
  35. const screenSM = 576;
  36. const screenMD = 768;
  37. const screenLG = 992;
  38. const screenXL = 1200;
  39. const screenXXL = 1600;
  40. const screenXXXL = 2000;
  41. // Generate alias token
  42. const aliasToken = (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, mergedToken), {
  43. colorLink: mergedToken.colorInfoText,
  44. colorLinkHover: mergedToken.colorInfoHover,
  45. colorLinkActive: mergedToken.colorInfoActive,
  46. // ============== Background ============== //
  47. colorFillContent: mergedToken.colorFillSecondary,
  48. colorFillContentHover: mergedToken.colorFill,
  49. colorFillAlter: mergedToken.colorFillQuaternary,
  50. colorBgContainerDisabled: mergedToken.colorFillTertiary,
  51. // ============== Split ============== //
  52. colorBorderBg: mergedToken.colorBgContainer,
  53. colorSplit: (0, _getAlphaColor.default)(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
  54. // ============== Text ============== //
  55. colorTextPlaceholder: mergedToken.colorTextQuaternary,
  56. colorTextDisabled: mergedToken.colorTextQuaternary,
  57. colorTextHeading: mergedToken.colorText,
  58. colorTextLabel: mergedToken.colorTextSecondary,
  59. colorTextDescription: mergedToken.colorTextTertiary,
  60. colorTextLightSolid: mergedToken.colorWhite,
  61. colorHighlight: mergedToken.colorError,
  62. colorBgTextHover: mergedToken.colorFillSecondary,
  63. colorBgTextActive: mergedToken.colorFill,
  64. colorIcon: mergedToken.colorTextTertiary,
  65. colorIconHover: mergedToken.colorText,
  66. colorErrorOutline: (0, _getAlphaColor.default)(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
  67. colorWarningOutline: (0, _getAlphaColor.default)(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
  68. // Font
  69. fontSizeIcon: mergedToken.fontSizeSM,
  70. // Control
  71. lineWidth: mergedToken.lineWidth,
  72. controlOutlineWidth: mergedToken.lineWidth * 2,
  73. // Checkbox size and expand icon size
  74. controlInteractiveSize: mergedToken.controlHeight / 2,
  75. controlItemBgHover: mergedToken.colorFillTertiary,
  76. controlItemBgActive: mergedToken.colorPrimaryBg,
  77. controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
  78. controlItemBgActiveDisabled: mergedToken.colorFill,
  79. controlTmpOutline: mergedToken.colorFillQuaternary,
  80. controlOutline: (0, _getAlphaColor.default)(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
  81. lineType: mergedToken.lineType,
  82. borderRadius: mergedToken.borderRadius,
  83. borderRadiusXS: mergedToken.borderRadiusXS,
  84. borderRadiusSM: mergedToken.borderRadiusSM,
  85. borderRadiusLG: mergedToken.borderRadiusLG,
  86. fontWeightStrong: 600,
  87. opacityLoading: 0.65,
  88. linkDecoration: 'none',
  89. linkHoverDecoration: 'none',
  90. linkFocusDecoration: 'none',
  91. controlPaddingHorizontal: 12,
  92. controlPaddingHorizontalSM: 8,
  93. paddingXXS: mergedToken.sizeXXS,
  94. paddingXS: mergedToken.sizeXS,
  95. paddingSM: mergedToken.sizeSM,
  96. padding: mergedToken.size,
  97. paddingMD: mergedToken.sizeMD,
  98. paddingLG: mergedToken.sizeLG,
  99. paddingXL: mergedToken.sizeXL,
  100. paddingContentHorizontalLG: mergedToken.sizeLG,
  101. paddingContentVerticalLG: mergedToken.sizeMS,
  102. paddingContentHorizontal: mergedToken.sizeMS,
  103. paddingContentVertical: mergedToken.sizeSM,
  104. paddingContentHorizontalSM: mergedToken.size,
  105. paddingContentVerticalSM: mergedToken.sizeXS,
  106. marginXXS: mergedToken.sizeXXS,
  107. marginXS: mergedToken.sizeXS,
  108. marginSM: mergedToken.sizeSM,
  109. margin: mergedToken.size,
  110. marginMD: mergedToken.sizeMD,
  111. marginLG: mergedToken.sizeLG,
  112. marginXL: mergedToken.sizeXL,
  113. marginXXL: mergedToken.sizeXXL,
  114. boxShadow: `
  115. 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  116. 0 1px 6px -1px rgba(0, 0, 0, 0.02),
  117. 0 2px 4px 0 rgba(0, 0, 0, 0.02)
  118. `,
  119. boxShadowSecondary: `
  120. 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  121. 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  122. 0 9px 28px 8px rgba(0, 0, 0, 0.05)
  123. `,
  124. boxShadowTertiary: `
  125. 0 1px 2px 0 rgba(0, 0, 0, 0.03),
  126. 0 1px 6px -1px rgba(0, 0, 0, 0.02),
  127. 0 2px 4px 0 rgba(0, 0, 0, 0.02)
  128. `,
  129. screenXS,
  130. screenXSMin: screenXS,
  131. screenXSMax: screenSM - 1,
  132. screenSM,
  133. screenSMMin: screenSM,
  134. screenSMMax: screenMD - 1,
  135. screenMD,
  136. screenMDMin: screenMD,
  137. screenMDMax: screenLG - 1,
  138. screenLG,
  139. screenLGMin: screenLG,
  140. screenLGMax: screenXL - 1,
  141. screenXL,
  142. screenXLMin: screenXL,
  143. screenXLMax: screenXXL - 1,
  144. screenXXL,
  145. screenXXLMin: screenXXL,
  146. screenXXLMax: screenXXXL - 1,
  147. screenXXXL,
  148. screenXXXLMin: screenXXXL,
  149. // FIXME: component box-shadow, should be removed
  150. boxShadowPopoverArrow: '3px 3px 7px rgba(0, 0, 0, 0.1)',
  151. boxShadowCard: `
  152. 0 1px 2px -2px ${new _tinycolor.TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
  153. 0 3px 6px 0 ${new _tinycolor.TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
  154. 0 5px 12px 4px ${new _tinycolor.TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
  155. `,
  156. boxShadowDrawerRight: `
  157. -6px 0 16px 0 rgba(0, 0, 0, 0.08),
  158. -3px 0 6px -4px rgba(0, 0, 0, 0.12),
  159. -9px 0 28px 8px rgba(0, 0, 0, 0.05)
  160. `,
  161. boxShadowDrawerLeft: `
  162. 6px 0 16px 0 rgba(0, 0, 0, 0.08),
  163. 3px 0 6px -4px rgba(0, 0, 0, 0.12),
  164. 9px 0 28px 8px rgba(0, 0, 0, 0.05)
  165. `,
  166. boxShadowDrawerUp: `
  167. 0 6px 16px 0 rgba(0, 0, 0, 0.08),
  168. 0 3px 6px -4px rgba(0, 0, 0, 0.12),
  169. 0 9px 28px 8px rgba(0, 0, 0, 0.05)
  170. `,
  171. boxShadowDrawerDown: `
  172. 0 -6px 16px 0 rgba(0, 0, 0, 0.08),
  173. 0 -3px 6px -4px rgba(0, 0, 0, 0.12),
  174. 0 -9px 28px 8px rgba(0, 0, 0, 0.05)
  175. `,
  176. boxShadowTabsOverflowLeft: 'inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)',
  177. boxShadowTabsOverflowRight: 'inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)',
  178. boxShadowTabsOverflowTop: 'inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)',
  179. boxShadowTabsOverflowBottom: 'inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)'
  180. }), overrideTokens);
  181. return aliasToken;
  182. }