mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
ffc09a2a0d
* feat: compact theme * chore: code clean * chore: code clean * chore: show dynamic theme in preview * chore: code clean * feat: compact algorithm
215 lines
7.0 KiB
TypeScript
215 lines
7.0 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 { fontSizes, lineHeights } = mergedToken;
|
|
const screenXS = 480;
|
|
const screenSM = 576;
|
|
const screenMD = 768;
|
|
const screenLG = 992;
|
|
const screenXL = 1200;
|
|
const screenXXL = 1600;
|
|
|
|
const fontSizeSM = fontSizes[0];
|
|
|
|
// 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,
|
|
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,
|
|
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
|
|
controlLineWidth: 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),
|
|
|
|
controlLineType: mergedToken.lineType,
|
|
controlRadius: mergedToken.radiusBase,
|
|
controlRadiusXS: mergedToken.radiusXS,
|
|
controlRadiusSM: mergedToken.radiusSM,
|
|
controlRadiusLG: mergedToken.radiusLG,
|
|
|
|
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 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)
|
|
`,
|
|
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)
|
|
`,
|
|
|
|
screenXS,
|
|
screenXSMin: screenXS,
|
|
screenXSMax: screenXS - 1,
|
|
screenSM,
|
|
screenSMMin: screenSM,
|
|
screenSMMax: screenSM - 1,
|
|
screenMD,
|
|
screenMDMin: screenMD,
|
|
screenMDMax: screenMD - 1,
|
|
screenLG,
|
|
screenLGMin: screenLG,
|
|
screenLGMax: screenLG - 1,
|
|
screenXL,
|
|
screenXLMin: screenXL,
|
|
screenXLMax: screenXL - 1,
|
|
screenXXL,
|
|
screenXXLMin: screenXXL,
|
|
screenXXLMax: screenXXL - 1,
|
|
|
|
// FIXME: component box-shadow, should be removed
|
|
boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`,
|
|
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;
|
|
}
|