1
This commit is contained in:
+183
@@ -0,0 +1,183 @@
|
||||
import { FastColor } from '@ant-design/fast-color';
|
||||
import seedToken from '../themes/seed';
|
||||
import getAlphaColor from './getAlphaColor';
|
||||
/**
|
||||
* Seed (designer) > Derivative (designer) > Alias (developer).
|
||||
*
|
||||
* Merge seed & derivative & override token and generate alias token for developer.
|
||||
*/
|
||||
export default function formatToken(derivativeToken) {
|
||||
const {
|
||||
override,
|
||||
...restToken
|
||||
} = derivativeToken;
|
||||
const overrideTokens = {
|
||||
...override
|
||||
};
|
||||
Object.keys(seedToken).forEach(token => {
|
||||
delete overrideTokens[token];
|
||||
});
|
||||
const mergedToken = {
|
||||
...restToken,
|
||||
...overrideTokens
|
||||
};
|
||||
const shadowBaseColor = new FastColor(mergedToken.colorShadow);
|
||||
const shadowBaseAlpha = shadowBaseColor.a;
|
||||
const getShadowColor = alpha => shadowBaseColor.clone().setA(shadowBaseAlpha * alpha).toRgbString();
|
||||
const screenXS = 480;
|
||||
const screenSM = 576;
|
||||
const screenMD = 768;
|
||||
const screenLG = 992;
|
||||
const screenXL = 1200;
|
||||
const screenXXL = 1600;
|
||||
const screenXXXL = 1920;
|
||||
// Motion
|
||||
if (mergedToken.motion === false) {
|
||||
const fastDuration = '0s';
|
||||
mergedToken.motionDurationFast = fastDuration;
|
||||
mergedToken.motionDurationMid = fastDuration;
|
||||
mergedToken.motionDurationSlow = fastDuration;
|
||||
}
|
||||
// Generate alias token
|
||||
const aliasToken = {
|
||||
...mergedToken,
|
||||
// ============== 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
|
||||
fontSizeIcon: mergedToken.fontSizeSM,
|
||||
// Line
|
||||
lineWidthFocus: mergedToken.lineWidth * 3,
|
||||
// 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: `
|
||||
0 6px 16px 0 ${getShadowColor(0.08)},
|
||||
0 3px 6px -4px ${getShadowColor(0.12)},
|
||||
0 9px 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowSecondary: `
|
||||
0 6px 16px 0 ${getShadowColor(0.08)},
|
||||
0 3px 6px -4px ${getShadowColor(0.12)},
|
||||
0 9px 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowTertiary: `
|
||||
0 1px 2px 0 ${getShadowColor(0.03)},
|
||||
0 1px 6px -1px ${getShadowColor(0.02)},
|
||||
0 2px 4px 0 ${getShadowColor(0.02)}
|
||||
`,
|
||||
screenXS,
|
||||
screenXSMin: screenXS,
|
||||
screenXSMax: screenSM - 1,
|
||||
screenSM,
|
||||
screenSMMin: screenSM,
|
||||
screenSMMax: screenMD - 1,
|
||||
screenMD,
|
||||
screenMDMin: screenMD,
|
||||
screenMDMax: screenLG - 1,
|
||||
screenLG,
|
||||
screenLGMin: screenLG,
|
||||
screenLGMax: screenXL - 1,
|
||||
screenXL,
|
||||
screenXLMin: screenXL,
|
||||
screenXLMax: screenXXL - 1,
|
||||
screenXXL,
|
||||
screenXXLMin: screenXXL,
|
||||
screenXXLMax: screenXXXL - 1,
|
||||
screenXXXL,
|
||||
screenXXXLMin: screenXXXL,
|
||||
boxShadowPopoverArrow: `2px 2px 5px ${getShadowColor(0.05)}`,
|
||||
boxShadowCard: `
|
||||
0 1px 2px -2px ${getShadowColor(0.16)},
|
||||
0 3px 6px 0 ${getShadowColor(0.12)},
|
||||
0 5px 12px 4px ${getShadowColor(0.09)}
|
||||
`,
|
||||
boxShadowDrawerRight: `
|
||||
-6px 0 16px 0 ${getShadowColor(0.08)},
|
||||
-3px 0 6px -4px ${getShadowColor(0.12)},
|
||||
-9px 0 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowDrawerLeft: `
|
||||
6px 0 16px 0 ${getShadowColor(0.08)},
|
||||
3px 0 6px -4px ${getShadowColor(0.12)},
|
||||
9px 0 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowDrawerUp: `
|
||||
0 6px 16px 0 ${getShadowColor(0.08)},
|
||||
0 3px 6px -4px ${getShadowColor(0.12)},
|
||||
0 9px 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowDrawerDown: `
|
||||
0 -6px 16px 0 ${getShadowColor(0.08)},
|
||||
0 -3px 6px -4px ${getShadowColor(0.12)},
|
||||
0 -9px 28px 8px ${getShadowColor(0.05)}
|
||||
`,
|
||||
boxShadowTabsOverflowLeft: `inset 10px 0 8px -8px ${getShadowColor(0.08)}`,
|
||||
boxShadowTabsOverflowRight: `inset -10px 0 8px -8px ${getShadowColor(0.08)}`,
|
||||
boxShadowTabsOverflowTop: `inset 0 10px 8px -8px ${getShadowColor(0.08)}`,
|
||||
boxShadowTabsOverflowBottom: `inset 0 -10px 8px -8px ${getShadowColor(0.08)}`,
|
||||
// Override AliasToken
|
||||
...overrideTokens
|
||||
};
|
||||
return aliasToken;
|
||||
}
|
||||
Reference in New Issue
Block a user