@fle-ui/next 3.0.0-alpha.2 → 3.0.0

package/es/theme/themes/seed.js

@@ -0,0 +1,67 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+export var defaultPresetColors = {
+  blue: '#2c68ff',
+  purple: '#722ED1',
+  cyan: '#13C2C2',
+  green: '#52C41A',
+  magenta: '#EB2F96',
+  pink: '#eb2f96',
+  red: '#F5222D',
+  orange: '#FA8C16',
+  yellow: '#FADB14',
+  volcano: '#FA541C',
+  geekblue: '#2F54EB',
+  gold: '#FAAD14',
+  lime: '#A0D911'
+};
+
+var seedToken = _objectSpread(_objectSpread({}, defaultPresetColors), {}, {
+  // Color
+  colorPrimary: '#2c68ff',
+  colorSuccess: '#52c41a',
+  colorWarning: '#faad14',
+  colorError: '#ff4d4f',
+  colorInfo: '#2c68ff',
+  colorTextBase: '',
+  colorBgBase: '',
+  // Font
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,\n'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',\n'Noto Color Emoji'",
+  fontSize: 14,
+  // Line
+  lineWidth: 1,
+  lineType: 'solid',
+  // Motion
+  motionUnit: 0.1,
+  // @ts-ignore
+  motionBase: 0,
+  motionEaseOutCirc: "cubic-bezier(0.08, 0.82, 0.17, 1)",
+  motionEaseInOutCirc: "cubic-bezier(0.78, 0.14, 0.15, 0.86)",
+  motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
+  motionEaseInOut: "cubic-bezier(0.645, 0.045, 0.355, 1)",
+  motionEaseOutBack: "cubic-bezier(0.12, 0.4, 0.29, 1.46)",
+  motionEaseInBack: "cubic-bezier(0.71, -0.46, 0.88, 0.6)",
+  motionEaseInQuint: "cubic-bezier(0.645, 0.045, 0.355, 1)",
+  motionEaseOutQuint: "cubic-bezier(0.23, 1, 0.32, 1)",
+  // Radius
+  borderRadius: 6,
+  // Size
+  sizeUnit: 4,
+  sizeStep: 4,
+  sizePopupArrow: 16,
+  // Control Base
+  controlHeight: 32,
+  // zIndex
+  zIndexBase: 0,
+  zIndexPopupBase: 1000,
+  // Image
+  opacityImage: 1,
+  // Wireframe
+  wireframe: false
+});
+
+export default seedToken;

package/es/theme/themes/shared/genColorMapToken.d.ts

@@ -0,0 +1,8 @@
+import type { ColorMapToken, SeedToken } from 'antd/es/theme/interface';
+import type { GenerateColorMap, GenerateNeutralColorMap } from '../ColorMap';
+interface PaletteGenerators {
+    generateColorPalettes: GenerateColorMap;
+    generateNeutralColorPalettes: GenerateNeutralColorMap;
+}
+export default function genColorMapToken(seed: SeedToken, { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators): ColorMapToken;
+export {};

package/es/theme/themes/shared/genColorMapToken.js

@@ -0,0 +1,78 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import { TinyColor } from '@ctrl/tinycolor';
+export default function genColorMapToken(seed, _ref) {
+  var generateColorPalettes = _ref.generateColorPalettes,
+      generateNeutralColorPalettes = _ref.generateNeutralColorPalettes;
+  var colorSuccessBase = seed.colorSuccess,
+      colorWarningBase = seed.colorWarning,
+      colorErrorBase = seed.colorError,
+      colorInfoBase = seed.colorInfo,
+      colorPrimaryBase = seed.colorPrimary,
+      colorBgBase = seed.colorBgBase,
+      colorTextBase = seed.colorTextBase;
+  var primaryColors = generateColorPalettes(colorPrimaryBase);
+  var successColors = generateColorPalettes(colorSuccessBase);
+  var warningColors = generateColorPalettes(colorWarningBase);
+  var errorColors = generateColorPalettes(colorErrorBase);
+  var infoColors = generateColorPalettes(colorInfoBase);
+  var neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
+  return _objectSpread(_objectSpread({}, neutralColors), {}, {
+    colorPrimaryBg: primaryColors[1],
+    colorPrimaryBgHover: primaryColors[2],
+    colorPrimaryBorder: primaryColors[3],
+    colorPrimaryBorderHover: primaryColors[4],
+    colorPrimaryHover: primaryColors[5],
+    colorPrimary: primaryColors[6],
+    colorPrimaryActive: primaryColors[7],
+    colorPrimaryTextHover: primaryColors[8],
+    colorPrimaryText: primaryColors[9],
+    colorPrimaryTextActive: primaryColors[10],
+    colorSuccessBg: successColors[1],
+    colorSuccessBgHover: successColors[2],
+    colorSuccessBorder: successColors[3],
+    colorSuccessBorderHover: successColors[4],
+    colorSuccessHover: successColors[4],
+    colorSuccess: successColors[6],
+    colorSuccessActive: successColors[7],
+    colorSuccessTextHover: successColors[8],
+    colorSuccessText: successColors[9],
+    colorSuccessTextActive: successColors[10],
+    colorErrorBg: errorColors[1],
+    colorErrorBgHover: errorColors[2],
+    colorErrorBorder: errorColors[3],
+    colorErrorBorderHover: errorColors[4],
+    colorErrorHover: errorColors[5],
+    colorError: errorColors[6],
+    colorErrorActive: errorColors[7],
+    colorErrorTextHover: errorColors[8],
+    colorErrorText: errorColors[9],
+    colorErrorTextActive: errorColors[10],
+    colorWarningBg: warningColors[1],
+    colorWarningBgHover: warningColors[2],
+    colorWarningBorder: warningColors[3],
+    colorWarningBorderHover: warningColors[4],
+    colorWarningHover: warningColors[4],
+    colorWarning: warningColors[6],
+    colorWarningActive: warningColors[7],
+    colorWarningTextHover: warningColors[8],
+    colorWarningText: warningColors[9],
+    colorWarningTextActive: warningColors[10],
+    colorInfoBg: infoColors[1],
+    colorInfoBgHover: infoColors[2],
+    colorInfoBorder: infoColors[3],
+    colorInfoBorderHover: infoColors[4],
+    colorInfoHover: infoColors[4],
+    colorInfo: infoColors[6],
+    colorInfoActive: infoColors[7],
+    colorInfoTextHover: infoColors[8],
+    colorInfoText: infoColors[9],
+    colorInfoTextActive: infoColors[10],
+    colorBgMask: new TinyColor('#000').setAlpha(0.45).toRgbString(),
+    colorWhite: '#fff'
+  });
+}

package/es/theme/themes/shared/genCommonMapToken.d.ts

@@ -0,0 +1,2 @@
+import type { CommonMapToken, SeedToken } from 'antd/es/theme/interface';
+export default function genCommonMapToken(token: SeedToken): CommonMapToken;

package/es/theme/themes/shared/genCommonMapToken.js

@@ -0,0 +1,33 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import genFontSizes from "./genFontSizes";
+import genRadius from "./genRadius";
+export default function genCommonMapToken(token) {
+  // @ts-ignore
+  var motionUnit = token.motionUnit,
+      motionBase = token.motionBase,
+      fontSize = token.fontSize,
+      borderRadius = token.borderRadius,
+      lineWidth = token.lineWidth;
+  var fontSizes = genFontSizes(fontSize);
+  return _objectSpread({
+    // motion
+    motionDurationFast: "".concat((motionBase + motionUnit).toFixed(1), "s"),
+    motionDurationMid: "".concat((motionBase + motionUnit * 2).toFixed(1), "s"),
+    motionDurationSlow: "".concat((motionBase + motionUnit * 3).toFixed(1), "s"),
+    // font
+    // @ts-ignore
+    fontSizes: fontSizes.map(function (fs) {
+      return fs.size;
+    }),
+    lineHeights: fontSizes.map(function (fs) {
+      return fs.lineHeight;
+    }),
+    // line
+    lineWidthBold: lineWidth + 1
+  }, genRadius(borderRadius));
+}

package/es/theme/themes/shared/genControlHeight.d.ts

@@ -0,0 +1,3 @@
+import type { HeightMapToken, SeedToken } from 'antd/es/theme/interface';
+declare const genControlHeight: (token: SeedToken) => HeightMapToken;
+export default genControlHeight;

package/es/theme/themes/shared/genControlHeight.js

@@ -0,0 +1,10 @@
+var genControlHeight = function genControlHeight(token) {
+  var controlHeight = token.controlHeight;
+  return {
+    controlHeightSM: controlHeight * 0.75,
+    controlHeightXS: controlHeight * 0.5,
+    controlHeightLG: controlHeight * 1.25
+  };
+};
+
+export default genControlHeight;

package/es/theme/themes/shared/genFontSizes.d.ts

@@ -0,0 +1,4 @@
+export default function getFontSizes(base: number): {
+    size: number;
+    lineHeight: number;
+}[];

package/es/theme/themes/shared/genFontSizes.js

@@ -0,0 +1,18 @@
+// https://zhuanlan.zhihu.com/p/32746810
+export default function getFontSizes(base) {
+  var fontSizes = new Array(10).fill(null).map(function (_, index) {
+    var i = index - 1;
+    var baseSize = base * Math.pow(2.71828, i / 5);
+    var intSize = index > 1 ? Math.floor(baseSize) : Math.ceil(baseSize); // Convert to even
+
+    return Math.floor(intSize / 2) * 2;
+  });
+  fontSizes[1] = base;
+  return fontSizes.map(function (size) {
+    var height = size + 8;
+    return {
+      size: size,
+      lineHeight: height / size
+    };
+  });
+}

package/es/theme/themes/shared/genRadius.d.ts

@@ -0,0 +1,3 @@
+import type { MapToken } from 'antd/es/theme/interface';
+declare const genRadius: (radiusBase: number) => Pick<MapToken, 'borderRadiusXS' | 'borderRadiusSM' | 'borderRadiusLG' | 'borderRadius' | 'borderRadiusOuter'>;
+export default genRadius;

package/es/theme/themes/shared/genRadius.js

@@ -0,0 +1,51 @@
+var genRadius = function genRadius(radiusBase) {
+  var radiusLG = radiusBase;
+  var radiusSM = radiusBase;
+  var radiusXS = radiusBase;
+  var radiusOuter = radiusBase; // radiusLG
+
+  if (radiusBase < 6 && radiusBase >= 5) {
+    radiusLG = radiusBase + 1;
+  } else if (radiusBase < 16 && radiusBase >= 6) {
+    radiusLG = radiusBase + 2;
+  } else if (radiusBase >= 16) {
+    radiusLG = 16;
+  } // radiusSM
+
+
+  if (radiusBase < 7 && radiusBase >= 5) {
+    radiusSM = 4;
+  } else if (radiusBase < 8 && radiusBase >= 7) {
+    radiusSM = 5;
+  } else if (radiusBase < 14 && radiusBase >= 8) {
+    radiusSM = 6;
+  } else if (radiusBase < 16 && radiusBase >= 14) {
+    radiusSM = 7;
+  } else if (radiusBase >= 16) {
+    radiusSM = 8;
+  } // radiusXS
+
+
+  if (radiusBase < 6 && radiusBase >= 2) {
+    radiusXS = 1;
+  } else if (radiusBase >= 6) {
+    radiusXS = 2;
+  } // radiusOuter
+
+
+  if (radiusBase > 4 && radiusBase < 8) {
+    radiusOuter = 4;
+  } else if (radiusBase >= 8) {
+    radiusOuter = 6;
+  }
+
+  return {
+    borderRadius: radiusBase > 16 ? 16 : radiusBase,
+    borderRadiusXS: radiusXS,
+    borderRadiusSM: radiusSM,
+    borderRadiusLG: radiusLG,
+    borderRadiusOuter: radiusOuter
+  };
+};
+
+export default genRadius;

package/es/theme/themes/shared/genSizeMapToken.d.ts

@@ -0,0 +1,2 @@
+import type { SeedToken, SizeMapToken } from 'antd/es/theme/interface';
+export default function genSizeMapToken(token: SeedToken): SizeMapToken;

package/es/theme/themes/shared/genSizeMapToken.js

@@ -0,0 +1,24 @@
+export default function genSizeMapToken(token) {
+  var sizeUnit = token.sizeUnit,
+      sizeStep = token.sizeStep;
+  return {
+    sizeXXL: sizeUnit * (sizeStep + 8),
+    // 48
+    sizeXL: sizeUnit * (sizeStep + 4),
+    // 32
+    sizeLG: sizeUnit * (sizeStep + 2),
+    // 24
+    sizeMD: sizeUnit * (sizeStep + 1),
+    // 20
+    sizeMS: sizeUnit * sizeStep,
+    // 16
+    size: sizeUnit * sizeStep,
+    // 16
+    sizeSM: sizeUnit * (sizeStep - 1),
+    // 12
+    sizeXS: sizeUnit * (sizeStep - 2),
+    // 8
+    sizeXXS: sizeUnit * (sizeStep - 3) // 4
+
+  };
+}

package/es/theme/util/alias.d.ts

@@ -0,0 +1,12 @@
+import type { AliasToken, MapToken, OverrideToken } from '../interface';
+/** Raw merge of `@ant-design/cssinjs` token. Which need additional process */
+type RawMergedToken = MapToken & OverrideToken & {
+    override: Partial<AliasToken>;
+};
+/**
+ * Seed (designer) > Derivative (designer) > Alias (developer).
+ *
+ * Merge seed & derivative & override token and generate alias token for developer.
+ */
+export default function formatToken(derivativeToken: RawMergedToken): AliasToken;
+export {};

package/es/theme/util/alias.js

@@ -0,0 +1,169 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+import { TinyColor } from '@ctrl/tinycolor';
+import getAlphaColor from "./getAlphaColor";
+import seedToken from "../themes/seed";
+/**
+ * Seed (designer) > Derivative (designer) > Alias (developer).
+ *
+ * Merge seed & derivative & override token and generate alias token for developer.
+ */
+
+export default function formatToken(derivativeToken) {
+  var override = derivativeToken.override,
+      restToken = __rest(derivativeToken, ["override"]);
+
+  var overrideTokens = _extends({}, override);
+
+  Object.keys(seedToken).forEach(function (token) {
+    delete overrideTokens[token];
+  });
+
+  var mergedToken = _extends(_extends({}, restToken), overrideTokens);
+
+  var fontSizes = mergedToken.fontSizes,
+      lineHeights = mergedToken.lineHeights;
+  var screenXS = 480;
+  var screenSM = 576;
+  var screenMD = 768;
+  var screenLG = 992;
+  var screenXL = 1200;
+  var screenXXL = 1600;
+  var fontSizeSM = fontSizes[0]; // Generate alias token
+
+  var aliasToken = _extends(_extends(_extends({}, mergedToken), {
+    colorLink: mergedToken.colorInfoText,
+    colorLinkHover: mergedToken.colorInfoHover,
+    colorLinkActive: mergedToken.colorInfoActive,
+    // ============== Background ============== //
+    colorFillContent: mergedToken.colorFillSecondary,
+    colorFillContentHover: mergedToken.colorFill,
+    colorFillAlter: mergedToken.colorFillQuaternary,
+    colorBgContainerDisabled: mergedToken.colorFillTertiary,
+    // ============== Split ============== //
+    colorBorderBg: mergedToken.colorBgContainer,
+    colorSplit: getAlphaColor(mergedToken.colorBorderSecondary, mergedToken.colorBgContainer),
+    // ============== Text ============== //
+    colorTextPlaceholder: mergedToken.colorTextQuaternary,
+    colorTextDisabled: mergedToken.colorTextQuaternary,
+    colorTextHeading: mergedToken.colorText,
+    colorTextLabel: mergedToken.colorTextSecondary,
+    colorTextDescription: mergedToken.colorTextTertiary,
+    colorTextLightSolid: mergedToken.colorWhite,
+    colorHighlight: mergedToken.colorError,
+    colorBgTextHover: mergedToken.colorFillSecondary,
+    colorBgTextActive: mergedToken.colorFill,
+    colorIcon: mergedToken.colorTextTertiary,
+    colorIconHover: mergedToken.colorText,
+    colorErrorOutline: getAlphaColor(mergedToken.colorErrorBg, mergedToken.colorBgContainer),
+    colorWarningOutline: getAlphaColor(mergedToken.colorWarningBg, mergedToken.colorBgContainer),
+    // Font
+    fontSizeSM: fontSizeSM,
+    fontSize: fontSizes[1],
+    fontSizeLG: fontSizes[2],
+    fontSizeXL: fontSizes[3],
+    fontSizeHeading1: fontSizes[6],
+    fontSizeHeading2: fontSizes[5],
+    fontSizeHeading3: fontSizes[4],
+    fontSizeHeading4: fontSizes[3],
+    fontSizeHeading5: fontSizes[2],
+    fontSizeIcon: fontSizeSM,
+    lineHeight: lineHeights[1],
+    lineHeightLG: lineHeights[2],
+    lineHeightSM: lineHeights[0],
+    lineHeightHeading1: lineHeights[6],
+    lineHeightHeading2: lineHeights[5],
+    lineHeightHeading3: lineHeights[4],
+    lineHeightHeading4: lineHeights[3],
+    lineHeightHeading5: lineHeights[2],
+    // Control
+    lineWidth: mergedToken.lineWidth,
+    controlOutlineWidth: mergedToken.lineWidth * 2,
+    // Checkbox size and expand icon size
+    controlInteractiveSize: mergedToken.controlHeight / 2,
+    controlItemBgHover: mergedToken.colorFillTertiary,
+    controlItemBgActive: mergedToken.colorPrimaryBg,
+    controlItemBgActiveHover: mergedToken.colorPrimaryBgHover,
+    controlItemBgActiveDisabled: mergedToken.colorFill,
+    controlTmpOutline: mergedToken.colorFillQuaternary,
+    controlOutline: getAlphaColor(mergedToken.colorPrimaryBg, mergedToken.colorBgContainer),
+    lineType: mergedToken.lineType,
+    borderRadius: mergedToken.borderRadius,
+    borderRadiusXS: mergedToken.borderRadiusXS,
+    borderRadiusSM: mergedToken.borderRadiusSM,
+    borderRadiusLG: mergedToken.borderRadiusLG,
+    fontWeightStrong: 600,
+    opacityLoading: 0.65,
+    linkDecoration: 'none',
+    linkHoverDecoration: 'none',
+    linkFocusDecoration: 'none',
+    controlPaddingHorizontal: 12,
+    controlPaddingHorizontalSM: 8,
+    paddingXXS: mergedToken.sizeXXS,
+    paddingXS: mergedToken.sizeXS,
+    paddingSM: mergedToken.sizeSM,
+    padding: mergedToken.size,
+    paddingMD: mergedToken.sizeMD,
+    paddingLG: mergedToken.sizeLG,
+    paddingXL: mergedToken.sizeXL,
+    paddingContentHorizontalLG: mergedToken.sizeLG,
+    paddingContentVerticalLG: mergedToken.sizeMS,
+    paddingContentHorizontal: mergedToken.sizeMS,
+    paddingContentVertical: mergedToken.sizeSM,
+    paddingContentHorizontalSM: mergedToken.size,
+    paddingContentVerticalSM: mergedToken.sizeXS,
+    marginXXS: mergedToken.sizeXXS,
+    marginXS: mergedToken.sizeXS,
+    marginSM: mergedToken.sizeSM,
+    margin: mergedToken.size,
+    marginMD: mergedToken.sizeMD,
+    marginLG: mergedToken.sizeLG,
+    marginXL: mergedToken.sizeXL,
+    marginXXL: mergedToken.sizeXXL,
+    boxShadow: "\n      0 1px 2px 0 rgba(0, 0, 0, 0.03),\n      0 1px 6px -1px rgba(0, 0, 0, 0.02),\n      0 2px 4px 0 rgba(0, 0, 0, 0.02)\n    ",
+    boxShadowSecondary: "\n      0 6px 16px 0 rgba(0, 0, 0, 0.08),\n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    ",
+    screenXS: screenXS,
+    screenXSMin: screenXS,
+    screenXSMax: screenSM - 1,
+    screenSM: screenSM,
+    screenSMMin: screenSM,
+    screenSMMax: screenMD - 1,
+    screenMD: screenMD,
+    screenMDMin: screenMD,
+    screenMDMax: screenLG - 1,
+    screenLG: screenLG,
+    screenLGMin: screenLG,
+    screenLGMax: screenXL - 1,
+    screenXL: screenXL,
+    screenXLMin: screenXL,
+    screenXLMax: screenXXL - 1,
+    screenXXL: screenXXL,
+    screenXXLMin: screenXXL,
+    // FIXME: component box-shadow, should be removed
+    boxShadowPopoverArrow: "3px 3px 7px rgba(0, 0, 0, 0.1)",
+    boxShadowCard: "\n      0 1px 2px -2px " + new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString() + ",\n      0 3px 6px 0 " + new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString() + ",\n      0 5px 12px 4px " + new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString() + "\n    ",
+    boxShadowDrawerRight: "\n      -6px 0 16px 0 rgba(0, 0, 0, 0.08),\n      -3px 0 6px -4px rgba(0, 0, 0, 0.12),\n      -9px 0 28px 8px rgba(0, 0, 0, 0.05)\n    ",
+    boxShadowDrawerLeft: "\n      6px 0 16px 0 rgba(0, 0, 0, 0.08),\n      3px 0 6px -4px rgba(0, 0, 0, 0.12),\n      9px 0 28px 8px rgba(0, 0, 0, 0.05)\n    ",
+    boxShadowDrawerUp: "\n      0 6px 16px 0 rgba(0, 0, 0, 0.08),\n      0 3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 9px 28px 8px rgba(0, 0, 0, 0.05)\n    ",
+    boxShadowDrawerDown: "\n      0 -6px 16px 0 rgba(0, 0, 0, 0.08),\n      0 -3px 6px -4px rgba(0, 0, 0, 0.12),\n      0 -9px 28px 8px rgba(0, 0, 0, 0.05)\n    ",
+    boxShadowTabsOverflowLeft: "inset 10px 0 8px -8px rgba(0, 0, 0, 0.08)",
+    boxShadowTabsOverflowRight: "inset -10px 0 8px -8px rgba(0, 0, 0, 0.08)",
+    boxShadowTabsOverflowTop: "inset 0 10px 8px -8px rgba(0, 0, 0, 0.08)",
+    boxShadowTabsOverflowBottom: "inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08)"
+  }), overrideTokens);
+
+  return aliasToken;
+}

package/es/theme/util/genComponentStyleHook.d.ts

@@ -0,0 +1,25 @@
+import type { CSSInterpolation } from '@ant-design/cssinjs';
+import type { UseComponentStyleResult } from '../internal';
+import type { ComponentTokenMap, GlobalToken } from '../interface';
+export type OverrideTokenWithoutDerivative = ComponentTokenMap;
+export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
+export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken & ComponentTokenMap[ComponentName];
+export interface StyleInfo<ComponentName extends OverrideComponent> {
+    hashId: string;
+    prefixCls: string;
+    rootPrefixCls: string;
+    iconPrefixCls: string;
+    overrideComponentToken: ComponentTokenMap[ComponentName];
+}
+export type TokenWithCommonCls<T> = T & {
+    /** Wrap component class with `.` prefix */
+    componentCls: string;
+    /** Origin prefix which do not have `.` prefix */
+    prefixCls: string;
+    /** Wrap icon class with `.` prefix */
+    iconCls: string;
+    /** Wrap ant prefixCls class with `.` prefix */
+    antCls: string;
+};
+export type FullToken<ComponentName extends OverrideComponent> = TokenWithCommonCls<GlobalTokenWithComponent<ComponentName>>;
+export default function genComponentStyleHook<ComponentName extends OverrideComponent>(component: ComponentName, styleFn: (token: FullToken<ComponentName>, info: StyleInfo<ComponentName>) => CSSInterpolation, getDefaultToken?: OverrideTokenWithoutDerivative[ComponentName] | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName])): (prefixCls: string) => UseComponentStyleResult;

package/es/theme/util/genComponentStyleHook.js

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { useContext } from 'react';
+import { genCommonStyle, genLinkStyle } from "../../style";
+import { ConfigContext } from "../../config-provider/context";
+import { mergeToken, statisticToken, useToken } from "../internal";
+export default function genComponentStyleHook(component, styleFn, getDefaultToken) {
+  return function (prefixCls) {
+    var _useToken = useToken(),
+        _useToken2 = _slicedToArray(_useToken, 3),
+        theme = _useToken2[0],
+        token = _useToken2[1],
+        hashId = _useToken2[2];
+
+    var _useContext = useContext(ConfigContext),
+        getPrefixCls = _useContext.getPrefixCls,
+        iconPrefixCls = _useContext.iconPrefixCls;
+
+    var rootPrefixCls = getPrefixCls(); // Generate style for all a tags in antd component.
+
+    useStyleRegister({
+      theme: theme,
+      token: token,
+      hashId: hashId,
+      path: ['Shared', rootPrefixCls]
+    }, function () {
+      return [{
+        // Link
+        '&': genLinkStyle(token)
+      }];
+    });
+    return [useStyleRegister({
+      theme: theme,
+      token: token,
+      hashId: hashId,
+      path: [component, prefixCls, iconPrefixCls]
+    }, function () {
+      var _statisticToken = statisticToken(token),
+          proxyToken = _statisticToken.token,
+          flush = _statisticToken.flush;
+
+      var defaultComponentToken = typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
+
+      var mergedComponentToken = _extends(_extends({}, defaultComponentToken), token[component]);
+
+      var componentCls = "." + prefixCls;
+      var mergedToken = mergeToken(proxyToken, {
+        componentCls: componentCls,
+        prefixCls: prefixCls,
+        iconCls: "." + iconPrefixCls,
+        antCls: "." + rootPrefixCls
+      }, mergedComponentToken);
+      var styleInterpolation = styleFn(mergedToken, {
+        hashId: hashId,
+        prefixCls: prefixCls,
+        rootPrefixCls: rootPrefixCls,
+        iconPrefixCls: iconPrefixCls,
+        overrideComponentToken: token[component]
+      });
+      flush(component, mergedComponentToken);
+      return [genCommonStyle(token, prefixCls), styleInterpolation];
+    }), hashId];
+  };
+}

package/es/theme/util/getAlphaColor.d.ts

@@ -0,0 +1,2 @@
+declare function getAlphaColor(frontColor: string, backgroundColor: string): string;
+export default getAlphaColor;

package/es/theme/util/getAlphaColor.js

@@ -0,0 +1,46 @@
+import { TinyColor } from '@ctrl/tinycolor';
+
+function isStableColor(color) {
+  return color >= 0 && color <= 255;
+}
+
+function getAlphaColor(frontColor, backgroundColor) {
+  var _TinyColor$toRgb = new TinyColor(frontColor).toRgb(),
+      fR = _TinyColor$toRgb.r,
+      fG = _TinyColor$toRgb.g,
+      fB = _TinyColor$toRgb.b,
+      originAlpha = _TinyColor$toRgb.a;
+
+  if (originAlpha < 1) {
+    return frontColor;
+  }
+
+  var _TinyColor$toRgb2 = new TinyColor(backgroundColor).toRgb(),
+      bR = _TinyColor$toRgb2.r,
+      bG = _TinyColor$toRgb2.g,
+      bB = _TinyColor$toRgb2.b;
+
+  for (var fA = 0.01; fA <= 1; fA += 0.01) {
+    var r = Math.round((fR - bR * (1 - fA)) / fA);
+    var g = Math.round((fG - bG * (1 - fA)) / fA);
+    var b = Math.round((fB - bB * (1 - fA)) / fA);
+    if (isStableColor(r) && isStableColor(g) && isStableColor(b)) return new TinyColor({
+      r: r,
+      g: g,
+      b: b,
+      a: Math.round(fA * 100) / 100
+    }).toRgbString();
+  } // fallback
+
+  /* istanbul ignore next */
+
+
+  return new TinyColor({
+    r: fR,
+    g: fG,
+    b: fB,
+    a: 1
+  }).toRgbString();
+}
+
+export default getAlphaColor;

package/es/theme/util/statistic.d.ts

@@ -0,0 +1,18 @@
+/**
+ * This function will do as `Object.assign` in production. But will use Object.defineProperty:get to
+ * pass all value access in development. To support statistic field usage with alias token.
+ */
+export declare function merge<T extends object>(...objs: Partial<T>[]): T;
+/** @private Internal Usage. Not use in your production. */
+export declare const statistic: Record<string, {
+    global: string[];
+    component: Record<string, string | number>;
+}>;
+/** @private Internal Usage. Not use in your production. */
+export declare const _statistic_build_: typeof statistic;
+/** Statistic token usage case. Should use `merge` function if you do not want spread record. */
+export default function statisticToken<T extends object>(token: T): {
+    token: T;
+    keys: Set<string> | undefined;
+    flush: (componentName: string, componentToken: Record<string, string | number>) => void;
+};