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 }; /** * 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; }