alias.js 6.8 KB

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