alias.js 6.8 KB

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