alias.js 7.1 KB

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