mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-14 17:01:17 +08:00
200 lines
6.5 KiB
TypeScript
200 lines
6.5 KiB
TypeScript
import { TinyColor } from '@ctrl/tinycolor';
|
|
import type { AliasToken, MapToken, OverrideToken, SeedToken } from '../interface';
|
|
import getAlphaColor from './getAlphaColor';
|
|
import seedToken from '../themes/seed';
|
|
|
|
/** 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 {
|
|
const { override, ...restToken } = derivativeToken;
|
|
const overrideTokens = { ...override };
|
|
|
|
Object.keys(seedToken).forEach((token) => {
|
|
delete overrideTokens[token as keyof SeedToken];
|
|
});
|
|
|
|
const mergedToken = {
|
|
...restToken,
|
|
...overrideTokens,
|
|
};
|
|
|
|
const screenXS = 480;
|
|
const screenSM = 576;
|
|
const screenMD = 768;
|
|
const screenLG = 992;
|
|
const screenXL = 1200;
|
|
const screenXXL = 1600;
|
|
|
|
// Generate alias token
|
|
const aliasToken: AliasToken = {
|
|
...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
|
|
fontSizeIcon: mergedToken.fontSizeSM,
|
|
|
|
// Line
|
|
lineWidthFocus: mergedToken.lineWidth * 4,
|
|
|
|
// 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 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
boxShadowSecondary: `
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
boxShadowTertiary: `
|
|
0 1px 2px 0 rgba(0, 0, 0, 0.03),
|
|
0 1px 6px -1px rgba(0, 0, 0, 0.02),
|
|
0 2px 4px 0 rgba(0, 0, 0, 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,
|
|
|
|
boxShadowPopoverArrow: '2px 2px 5px rgba(0, 0, 0, 0.05)',
|
|
boxShadowCard: `
|
|
0 1px 2px -2px ${new TinyColor('rgba(0, 0, 0, 0.16)').toRgbString()},
|
|
0 3px 6px 0 ${new TinyColor('rgba(0, 0, 0, 0.12)').toRgbString()},
|
|
0 5px 12px 4px ${new TinyColor('rgba(0, 0, 0, 0.09)').toRgbString()}
|
|
`,
|
|
boxShadowDrawerRight: `
|
|
-6px 0 16px 0 rgba(0, 0, 0, 0.08),
|
|
-3px 0 6px -4px rgba(0, 0, 0, 0.12),
|
|
-9px 0 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
boxShadowDrawerLeft: `
|
|
6px 0 16px 0 rgba(0, 0, 0, 0.08),
|
|
3px 0 6px -4px rgba(0, 0, 0, 0.12),
|
|
9px 0 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
boxShadowDrawerUp: `
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 9px 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
boxShadowDrawerDown: `
|
|
0 -6px 16px 0 rgba(0, 0, 0, 0.08),
|
|
0 -3px 6px -4px rgba(0, 0, 0, 0.12),
|
|
0 -9px 28px 8px rgba(0, 0, 0, 0.05)
|
|
`,
|
|
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)',
|
|
|
|
// Override AliasToken
|
|
...overrideTokens,
|
|
};
|
|
|
|
return aliasToken;
|
|
}
|