From b967f9eb8161a3bcde8ec7c8c56bd637859f8860 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Tue, 22 Mar 2022 20:02:04 +0800 Subject: [PATCH] refactor: More alias token (#34658) * chore: rm disabled color * chore: color heading * chore: shows tokn * chore: fix color mapping * chore: status colors * chore: durations * chore: outline color * chore: comment info * chore: background color * chore: merge nexr --- components/_util/theme/interface.ts | 47 +++++-------- components/_util/theme/themes/default.ts | 18 ++--- components/_util/theme/util/alias.ts | 44 ++++--------- components/_util/theme/util/operationUnit.tsx | 2 +- components/_util/theme/util/slide.tsx | 2 +- components/alert/style/index.tsx | 6 +- components/badge/style/index.tsx | 20 +++--- components/button/style/index.tsx | 44 ++++++------- components/cascader/style/index.tsx | 6 +- components/checkbox/style/index.tsx | 14 ++-- components/config-provider/index.tsx | 4 +- components/divider/style/index.tsx | 2 +- components/image/style/index.tsx | 16 +++-- components/input-number/style/index.tsx | 8 +-- components/input/style/index.tsx | 30 ++++----- components/mentions/style/index.tsx | 6 +- components/rate/style/index.tsx | 4 +- components/result/style/index.tsx | 2 +- components/select/style/dropdown.tsx | 10 +-- components/select/style/index.tsx | 30 ++++----- components/select/style/multiple.tsx | 10 +-- components/select/style/single.tsx | 4 +- components/slider/style/index.tsx | 30 ++++----- components/statistic/style/index.tsx | 2 +- components/switch/style/index.tsx | 2 +- components/tag/style/index.tsx | 6 +- components/tree/style/index.tsx | 24 +++---- components/typography/style/index.tsx | 2 +- components/typography/style/mixins.tsx | 4 +- .../template/Layout/DynamicTheme/Preview.tsx | 66 ++++++++++++++++++- 30 files changed, 254 insertions(+), 211 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index 2334986815..fddebba533 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -44,6 +44,7 @@ export interface SeedToken extends PresetColorType { colorInfo: string; colorText: string; colorTextLightSolid: string; + /** Base component background color. Will derivative container background color with this */ colorBg: string; // Font @@ -59,7 +60,7 @@ export interface SeedToken extends PresetColorType { // Motion motionUnit: number; - motionBaseStep: number; + motionBase: number; motionEaseInOutCirc: string; motionEaseInOut: string; motionEaseOutBack: string; @@ -85,10 +86,15 @@ export interface DerivativeToken extends SeedToken, ColorPalettes { // Color colorPrimaryHover: string; colorPrimaryActive: string; + colorPrimaryOutline: string; + colorWarningHover: string; colorWarningActive: string; + colorWarningOutline: string; + colorErrorHover: string; colorErrorActive: string; + colorErrorOutline: string; colorText2: string; colorTextBelow: string; @@ -116,9 +122,8 @@ export interface DerivativeToken extends SeedToken, ColorPalettes { gridSpaceXXL: number; // Motion - motionDurationBase: string; - motionDurationMd: string; motionDurationFast: string; + motionDurationMid: string; motionDurationSlow: string; // Radius @@ -164,49 +169,35 @@ export interface AliasToken extends DerivativeToken { controlLineType: string; controlRadius: number; controlOutlineWidth: number; + controlItemBgHover: string; // Note. It also is a color + controlItemBgActive: string; // Note. It also is a color // Color colorBorder: string; colorSplit: string; colorTextSecondary: string; colorTextDisabled: string; + /** Placeholder text color */ + colorPlaceholder: string; + colorTextHeading: string; + colorBgContainer: string; + colorBgComponent: string; + colorBgComponentDisabled: string; // =============== Legacy: should be remove =============== - placeholderColor: string; - - disabledColor: string; - iconColorHover: string; - headingColor: string; - - itemHoverBackground: string; - padding: number; margin: number; - background: string; backgroundLight: string; - componentBackground: string; - componentBackgroundDisabled: string; - zIndexDropdown: number; zIndexAffix: number; - boxShadow?: string; + boxShadow: string; // =============== Legacy: should be remove =============== - primaryHoverColor: string; - primaryActiveColor: string; - primaryOutlineColor: string; - errorHoverColor: string; - errorActiveColor: string; - errorOutlineColor: string; - warningHoverColor: string; - warningOutlineColor: string; - itemActiveBackground: string; - highlightColor: string; linkColor: string; @@ -226,10 +217,6 @@ export interface AliasToken extends DerivativeToken { marginLG: number; marginXXS: number; - duration: string; - durationMid: string; - durationFast: string; - primaryColors: string[]; errorColors: string[]; warningColors: string[]; diff --git a/components/_util/theme/themes/default.ts b/components/_util/theme/themes/default.ts index 700d457052..9357a0be5f 100644 --- a/components/_util/theme/themes/default.ts +++ b/components/_util/theme/themes/default.ts @@ -27,7 +27,7 @@ export function derivative(token: SeedToken): DerivativeToken { colorWarning, colorError, motionUnit, - motionBaseStep, + motionBase, fontSizeBase, sizeUnit, sizeBaseStep, @@ -65,10 +65,9 @@ export function derivative(token: SeedToken): DerivativeToken { ...colorPalettes, // motion - motionDurationBase: `${motionUnit * motionBaseStep}s`, - motionDurationMd: `${motionUnit * (motionBaseStep - 1)}s`, - motionDurationFast: `${motionUnit * (motionBaseStep - 2)}s`, - motionDurationSlow: `${motionUnit * (motionBaseStep + 1)}s`, + motionDurationFast: `${motionBase + motionUnit * 1}s`, + motionDurationMid: `${motionBase + motionUnit * 2}s`, + motionDurationSlow: `${motionBase + motionUnit * 3}s`, // font fontSizes: fontSizes.map(fs => fs.size), @@ -96,12 +95,15 @@ export function derivative(token: SeedToken): DerivativeToken { colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(), - colorErrorActive: errorColors[6], - colorErrorHover: errorColors[4], colorPrimaryActive: primaryColors[6], colorPrimaryHover: primaryColors[4], + colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), + colorErrorActive: errorColors[6], + colorErrorHover: errorColors[4], + colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), colorWarningActive: warningColors[6], colorWarningHover: warningColors[4], + colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), // text color colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(), @@ -147,7 +149,7 @@ const seedToken: SeedToken = { // Motion motionUnit: 0.1, - motionBaseStep: 3, + motionBase: 0, motionEaseInOutCirc: `cubic-bezier(0.78, 0.14, 0.15, 0.86)`, motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`, motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`, diff --git a/components/_util/theme/util/alias.ts b/components/_util/theme/util/alias.ts index b52c3a78e7..8b51c9c790 100644 --- a/components/_util/theme/util/alias.ts +++ b/components/_util/theme/util/alias.ts @@ -32,14 +32,14 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken ...mergedToken, // Colors - primaryHoverColor: mergedToken.colorPrimaryHover, - primaryActiveColor: mergedToken.colorPrimaryActive, - errorHoverColor: mergedToken.colorErrorHover, - errorActiveColor: mergedToken.colorErrorActive, - warningHoverColor: mergedToken.colorWarningHover, - colorTextSecondary: mergedToken.colorTextBelow, colorTextDisabled: mergedToken.colorTextBelow2, + colorPlaceholder: mergedToken.colorTextBelow2, + colorTextHeading: mergedToken.colorText, + + colorBgContainer: mergedToken.colorBgBelow2, + colorBgComponent: mergedToken.colorBg, + colorBgComponentDisabled: mergedToken.colorBgBelow2, // Font fontSizeSM: fontSizes[0], @@ -64,6 +64,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // Control controlLineWidth: mergedToken.lineWidth, controlOutlineWidth: mergedToken.lineWidth * 2, + controlItemBgHover: mergedToken.colorBgBelow2, // 👀👀👀👀👀👀👀👀👀 Not align with Derivative 👀👀👀👀👀👀👀👀👀 // FIXME: @arvinxx handle this @@ -71,6 +72,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken controlRadius: mergedToken.radiusBase, colorBorder: new TinyColor({ h: 0, s: 0, v: 85 }).toHexString(), colorSplit: new TinyColor({ h: 0, s: 0, v: 94 }).toHexString(), + controlItemBgActive: primaryColors[0], // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 // FIXME: Handle this when derivative is ready @@ -93,12 +95,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken tmpErrorColorDeprecatedBorder: errorColors[2], tmpInfoColorDeprecatedBorder: infoColors[2], - primaryOutlineColor: new TinyColor(mergedToken.colorPrimary).setAlpha(0.2).toRgbString(), - errorOutlineColor: new TinyColor(mergedToken.colorError).setAlpha(0.2).toRgbString(), - warningOutlineColor: new TinyColor(mergedToken.colorWarning).setAlpha(0.2).toRgbString(), - - itemActiveBackground: primaryColors[0], - highlightColor: errorColors[5], // FIXME: Should not align with error color // FIXME: fix2 badge-color @@ -109,16 +105,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken linkHoverDecoration: 'none', linkFocusDecoration: 'none', - placeholderColor: new TinyColor({ h: 0, s: 0, v: 75 }).setAlpha(0.5).toRgbString(), - - disabledColor: new TinyColor('#000').setAlpha(0.25).toRgbString(), - - headingColor: new TinyColor('#000').setAlpha(0.85).toRgbString(), - iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(), - itemHoverBackground: '#f5f5f5', - controlPaddingHorizontal: 16, controlPaddingHorizontalSM: 12, @@ -135,21 +123,17 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // marginSM: 8, marginLG: 32, - // Default grey background color - background: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(), - // background of header and selected item backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), - componentBackground: '#fff', - componentBackgroundDisabled: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(), - - duration: '0.3s', - durationMid: '0.2s', - durationFast: '0.1s', - zIndexDropdown: 1050, zIndexAffix: 10, + + boxShadow: ` + 0 3px 6px -4px rgba(0, 0, 0, 0.12), + 0 6px 16px 0 rgba(0, 0, 0, 0.08), + 0 9px 28px 8px rgba(0, 0, 0, 0.05) + `, }; return aliasToken; diff --git a/components/_util/theme/util/operationUnit.tsx b/components/_util/theme/util/operationUnit.tsx index 558baa68a8..43256a0974 100644 --- a/components/_util/theme/util/operationUnit.tsx +++ b/components/_util/theme/util/operationUnit.tsx @@ -7,7 +7,7 @@ export const operationUnit = (token: DerivativeToken): CSSObject => ({ textDecoration: 'none', outline: 'none', cursor: 'pointer', - transition: `color ${token.duration}`, + transition: `color ${token.motionDurationSlow}`, '&:focus, &:hover': { color: token.linkHoverColor, diff --git a/components/_util/theme/util/slide.tsx b/components/_util/theme/util/slide.tsx index c970b1e2a1..15632cd7c1 100644 --- a/components/_util/theme/util/slide.tsx +++ b/components/_util/theme/util/slide.tsx @@ -14,7 +14,7 @@ export const initSlideMotion = ( const motionCls = `.${rootMotionName}`; return [ - initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.durationMid), + initMotion(hashId, rootMotionName, inKeyframes, outKeyframes, token.motionDurationMid), { [` diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 47d0f9d9ea..2b97973dcd 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -61,7 +61,7 @@ const genAlertTypeStyle = ( export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSObject => { const { alertCls, - duration, + motionDurationSlow: duration, marginXS, fontSize, fontSizeLG, @@ -222,7 +222,7 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS const { alertCls, iconPrefixCls, - duration, + motionDurationSlow: duration, marginXS, fontSizeSM, alertCloseColor, @@ -280,7 +280,7 @@ export default function useStyle( const alertCls = `.${prefixCls}`; - const alertMessageColor = token.headingColor; + const alertMessageColor = token.colorTextHeading; const alertCloseColor = token.colorTextSecondary; const alertCloseHoverColor = token.iconColorHover; // FIXME diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index 59e1495a4f..0ed4079563 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -111,7 +111,7 @@ const genSharedBadgeStyle: GenerateStyle = ( textAlign: 'center', background: token.badgeColor, borderRadius: token.badgeHeight / 2, - boxShadow: `0 0 0 1px ${token.componentBackground}`, + boxShadow: `0 0 0 1px ${token.colorBgComponent}`, a: { color: token.badgeTextColor, }, @@ -139,7 +139,7 @@ const genSharedBadgeStyle: GenerateStyle = ( height: token.badgeDotSize, background: token.badgeColor, borderRadius: '100%', - boxShadow: `0 0 0 1px ${token.componentBackground}`, + boxShadow: `0 0 0 1px ${token.colorBgComponent}`, }, [`.${badgePrefixCls}-dot.${numberPrefixCls}`]: { transition: 'background 1.5s', // FIXME: hard code, copied from old less file @@ -152,7 +152,7 @@ const genSharedBadgeStyle: GenerateStyle = ( transformOrigin: '100% 0%', [`.${iconPrefixCls}-spin`]: { animation: `${antBadgeLoadingCircle.getName(hashId)} ${ - token.durationFast + token.motionDurationFast } infinite linear`, }, }, @@ -208,24 +208,26 @@ const genSharedBadgeStyle: GenerateStyle = ( }, }, [`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: { - animation: `${antZoomBadgeIn.getName(hashId)} ${token.duration} ${token.motionEaseOutBack}`, + animation: `${antZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${ + token.motionEaseOutBack + }`, animationFillMode: 'both', }, [`.${badgePrefixCls}-zoom-leave`]: { - animation: `${antZoomBadgeOut.getName(hashId)} ${token.duration} ${ + animation: `${antZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${ token.motionEaseOutBack }`, animationFillMode: 'both', }, [`&.${badgePrefixCls}-not-a-wrapper`]: { [`.${badgePrefixCls}-zoom-appear, .${badgePrefixCls}-zoom-enter`]: { - animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.duration} ${ + animation: `${antNoWrapperZoomBadgeIn.getName(hashId)} ${token.motionDurationSlow} ${ token.motionEaseOutBack }`, }, [`.${badgePrefixCls}-zoom-leave`]: { - animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.duration} ${ + animation: `${antNoWrapperZoomBadgeOut.getName(hashId)} ${token.motionDurationSlow} ${ token.motionEaseOutBack }`, }, @@ -249,7 +251,7 @@ const genSharedBadgeStyle: GenerateStyle = ( position: 'relative', display: 'inline-block', height: token.badgeHeight, - transition: `all ${token.duration} ${token.motionEaseOutBack}`, + transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`, WebkitTransformStyle: 'preserve-3d', WebkitBackfaceVisibility: 'hidden', [`> p.${numberPrefixCls}-only-unit`]: { @@ -332,7 +334,7 @@ export default function useStyle( const badgeZIndex = 'auto'; const badgeHeight = 20; // FIXME: hard code - const badgeTextColor = token.componentBackground; + const badgeTextColor = token.colorBgComponent; const badgeFontWeight = 'normal'; const badgeFontSize = token.fontSizeSM; const badgeColor = token.highlightColor; diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 19923e6746..347f5258d2 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -25,7 +25,7 @@ const genSharedButtonStyle = ( backgroundColor: 'transparent', border: `${token.controlLineWidth}px ${token.controlLineType} transparent`, cursor: 'pointer', - transition: `all ${token.duration} ${token.motionEaseInOut}`, + transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, userSelect: 'none', touchAction: 'manipulation', lineHeight: token.lineHeight, @@ -93,7 +93,7 @@ const genSolidDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({ cursor: 'not-allowed', borderColor: token.colorBorder, color: token.colorTextDisabled, - backgroundColor: token.componentBackgroundDisabled, + backgroundColor: token.colorBgComponentDisabled, boxShadow: 'none', }, }); @@ -115,26 +115,26 @@ const genPureDisabledButtonStyle = (token: DerivativeToken): CSSObject => ({ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({ ...genSolidButtonStyle(token), - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, borderColor: token.colorBorder, boxShadow: '0 2px 0 rgba(0, 0, 0, 0.015)', ...genHoverActiveButtonStyle( { - color: token.primaryHoverColor, - borderColor: token.primaryHoverColor, + color: token.colorPrimaryHover, + borderColor: token.colorPrimaryHover, }, { - color: token.primaryActiveColor, - borderColor: token.primaryActiveColor, + color: token.colorPrimaryActive, + borderColor: token.colorPrimaryActive, }, ), ...genGhostButtonStyle( prefixCls, - token.componentBackground, - token.componentBackground, + token.colorBgComponent, + token.colorBgComponent, token.colorTextDisabled, token.colorBorder, ), @@ -145,12 +145,12 @@ const genDefaultButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb ...genHoverActiveButtonStyle( { - color: token.errorHoverColor, - borderColor: token.errorHoverColor, + color: token.colorErrorHover, + borderColor: token.colorErrorHover, }, { - color: token.errorActiveColor, - borderColor: token.errorActiveColor, + color: token.colorErrorActive, + borderColor: token.colorErrorActive, }, ), @@ -176,10 +176,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb ...genHoverActiveButtonStyle( { - backgroundColor: token.primaryHoverColor, + backgroundColor: token.colorPrimaryHover, }, { - backgroundColor: token.primaryActiveColor, + backgroundColor: token.colorPrimaryActive, }, ), @@ -196,10 +196,10 @@ const genPrimaryButtonStyle = (prefixCls: string, token: DerivativeToken): CSSOb ...genHoverActiveButtonStyle( { - backgroundColor: token.errorHoverColor, + backgroundColor: token.colorErrorHover, }, { - backgroundColor: token.errorActiveColor, + backgroundColor: token.colorErrorActive, }, ), @@ -227,10 +227,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec ...genHoverActiveButtonStyle( { - color: token.primaryHoverColor, + color: token.colorPrimaryHover, }, { - color: token.primaryActiveColor, + color: token.colorPrimaryActive, }, ), @@ -241,10 +241,10 @@ const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObjec ...genHoverActiveButtonStyle( { - color: token.errorHoverColor, + color: token.colorErrorHover, }, { - color: token.errorActiveColor, + color: token.colorErrorActive, }, ), @@ -327,7 +327,7 @@ const genSizeButtonStyle = ( }, [`.${prefixCls}-loading-icon`]: { - transition: `width ${token.duration} ${token.motionEaseInOut}, opacity ${token.duration} ${token.motionEaseInOut}`, + transition: `width ${token.motionDurationSlow} ${token.motionEaseInOut}, opacity ${token.motionDurationSlow} ${token.motionEaseInOut}`, }, [`&:not(${iconOnlyCls}) .${prefixCls}-loading-icon > .${iconPrefixCls}`]: { diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index a7832d9451..529125498f 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -103,10 +103,10 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'pointer', - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, '&:hover': { - background: token.itemHoverBackground, + background: token.controlItemBgHover, }, ' &-disabled': { color: token.colorTextDisabled, @@ -124,7 +124,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { [`&-active:not(${cascaderMenuItemCls}-disabled)`]: { [`&, &:hover`]: { fontWeight: 600, // FIXME: hardcode - backgroundColor: token.itemActiveBackground, + backgroundColor: token.controlItemBgActive, }, }, diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx index 1e7800a71f..8d4c050058 100644 --- a/components/checkbox/style/index.tsx +++ b/components/checkbox/style/index.tsx @@ -94,11 +94,11 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => width: token.fontSizeLG, height: token.fontSizeLG, direction: 'ltr', - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.controlRadius, borderCollapse: 'separate', - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, '&:after': { position: 'absolute', @@ -107,12 +107,12 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => display: 'table', width: (token.fontSizeLG / 14) * 5, height: (token.fontSizeLG / 14) * 8, - border: `2px solid ${token.componentBackground}`, + border: `2px solid ${token.colorBgComponent}`, borderTop: 0, borderInlineStart: 0, transform: 'rotate(45deg) scale(0) translate(-50%,-50%)', opacity: 0, - transition: `all ${token.durationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.durationFast}`, + transition: `all ${token.motionDurationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.motionDurationFast}`, content: '""', }, }, @@ -177,7 +177,7 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => '&:after': { opacity: 1, transform: 'rotate(45deg) scale(1) translate(-50%,-50%)', - transition: `all ${token.duration} ${token.motionEaseOutBack} 0.1s`, + transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} 0.1s`, }, }, @@ -191,7 +191,7 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorPrimary}`, borderRadius: token.controlRadius, visibility: 'hidden', - animation: `${antCheckboxEffect.getName(hashId)} ${token.duration} ease-in-out`, + animation: `${antCheckboxEffect.getName(hashId)} ${token.motionDurationSlow} ease-in-out`, animationFillMode: 'backwards', content: '""', }, @@ -214,7 +214,7 @@ export const genCheckboxStyle: GenerateStyle = (token, hashId) => // Wrapper > Checkbox > inner [`${checkboxCls}-inner`]: { - background: token.background, + background: token.colorBgContainer, borderColor: token.colorBorder, '&:after': { diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 3f2577180d..1519ec9a2a 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -21,7 +21,7 @@ import notification from '../notification'; import { RequiredMark } from '../form/Form'; import { registerTheme } from './cssVariables'; import defaultLocale from '../locale/default'; -import { SeedToken, DesignTokenContext } from '../_util/theme'; +import { SeedToken, DesignTokenContext, useToken } from '../_util/theme'; import defaultSeedToken from '../_util/theme/themes/default'; export { @@ -284,6 +284,7 @@ const ConfigProvider: React.FC & { ConfigContext: typeof ConfigContext; SizeContext: typeof SizeContext; config: typeof setGlobalConfig; + useToken: typeof useToken; } = props => { React.useEffect(() => { if (props.direction) { @@ -316,5 +317,6 @@ const ConfigProvider: React.FC & { ConfigProvider.ConfigContext = ConfigContext; ConfigProvider.SizeContext = SizeContext; ConfigProvider.config = setGlobalConfig; +ConfigProvider.useToken = useToken; export default ConfigProvider; diff --git a/components/divider/style/index.tsx b/components/divider/style/index.tsx index e37970c5ef..a289a17288 100644 --- a/components/divider/style/index.tsx +++ b/components/divider/style/index.tsx @@ -54,7 +54,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => '&-horizontal&-with-text': { display: 'flex', margin: `${token.dividerHorizontalWithTextGutterMargin}px 0`, - color: token.headingColor, + color: token.colorTextHeading, fontWeight: 500, fontSize: token.fontSizeLG, whiteSpace: 'nowrap', diff --git a/components/image/style/index.tsx b/components/image/style/index.tsx index bb5c60c443..605dbebe8a 100644 --- a/components/image/style/index.tsx +++ b/components/image/style/index.tsx @@ -45,7 +45,8 @@ export const genBoxStyle = (position?: PositionType): CSSObject => ({ }); export const genImageMaskStyle = (token: ImageToken): CSSObject => { - const { iconPrefixCls, white, black, duration, paddingXXS, marginXXS, prefixCls } = token; + const { iconPrefixCls, white, black, motionDurationSlow, paddingXXS, marginXXS, prefixCls } = + token; return { position: 'absolute', inset: 0, @@ -56,7 +57,7 @@ export const genImageMaskStyle = (token: ImageToken): CSSObject => { background: new TinyColor(black).setAlpha(0.5).toRgbString(), // FIXME: hard code in v4 cursor: 'pointer', opacity: 0, - transition: `opacity ${duration}`, + transition: `opacity ${motionDurationSlow}`, [`.${prefixCls}-mask-info`]: { padding: `0 ${paddingXXS}`, @@ -158,7 +159,8 @@ export const genPreviewSwitchStyle = (token: ImageToken): CSSObject => { }; export const genImagePreviewStyle = (token: ImageToken): CSSObject => { - const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, duration } = token; + const { motionEaseOut, previewPrefixCls, switchRight, switchLeft, width1px, motionDurationSlow } = + token; return { height: '100%', textAlign: 'center', @@ -173,13 +175,13 @@ export const genImagePreviewStyle = (token: ImageToken): CSSObject => { verticalAlign: 'middle', transform: 'scale3d(1, 1, 1)', cursor: 'grab', - transition: `transform ${duration} ${motionEaseOut} 0s`, + transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`, userSelect: 'none', pointerEvents: 'auto', '&-wrapper': { ...genBoxStyle(), - transition: `transform ${duration} ${motionEaseOut} 0s`, + transition: `transform ${motionDurationSlow} ${motionEaseOut} 0s`, '&::before': { display: 'inline-block', @@ -227,7 +229,7 @@ const genImageStyle: GenerateStyle = (token: ImageToken) => { previewPrefixCls, imageBg, zIndexImage, - duration, + motionDurationSlow, } = token; return { // ============================== image ============================== @@ -264,7 +266,7 @@ const genImageStyle: GenerateStyle = (token: ImageToken) => { { transform: 'none', opacity: 0, - animationDuration: duration, + animationDuration: motionDurationSlow, userSelect: 'none', // https://github.com/ant-design/ant-design/issues/11777 }, [`.${previewPrefixCls}-root`]: { diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index 0ef76976bb..44dbbe3629 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -37,15 +37,15 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe colorError, paddingXS, colorTextSecondary: textColorSecondary, - durationFast, + motionDurationFast: durationFast, inputNumberHandlerActiveBgColor, colorPrimary, marginXXS, controlHeight, inputPaddingHorizontal, - duration, - componentBackground, - durationMid, + motionDurationSlow: duration, + colorBgComponent: componentBackground, + motionDurationMid: durationMid, colorTextDisabled: textColorDisabled, } = token; diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index cea618649a..5074f05545 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -47,14 +47,14 @@ export const genHoverStyle = (token: InputToken): CSSObject => ({ export const genActiveStyle = (token: InputToken) => ({ borderColor: token.inputBorderHoverColor, - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.primaryOutlineColor}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`, borderInlineEndWidth: token.controlLineWidth, outline: 0, }); export const genDisabledStyle = (token: InputToken): CSSObject => ({ color: token.colorTextDisabled, - backgroundColor: token.componentBackgroundDisabled, + backgroundColor: token.colorBgComponentDisabled, borderColor: token.colorBorder, boxShadow: 'none', cursor: 'not-allowed', @@ -79,7 +79,7 @@ const genInputSmallStyle = (token: InputToken): CSSObject => ({ }); export const genStatusStyle = (token: InputToken): CSSObject => { - const { prefixCls, colorError, colorWarning, errorOutlineColor, warningOutlineColor } = token; + const { prefixCls, colorError, colorWarning, colorErrorOutline, colorWarningOutline } = token; return { '&-status-error:not(&-disabled):not(&-borderless)&': { @@ -92,7 +92,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => { ...token, inputBorderActiveColor: colorError, inputBorderHoverColor: colorError, - primaryOutlineColor: errorOutlineColor, + colorPrimaryOutline: colorErrorOutline, }), }, @@ -110,7 +110,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => { ...token, inputBorderActiveColor: colorWarning, inputBorderHoverColor: colorWarning, - primaryOutlineColor: warningOutlineColor, + colorPrimaryOutline: colorWarningOutline, }), }, @@ -130,13 +130,13 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ color: token.colorText, fontSize: token.fontSize, lineHeight: token.lineHeight, - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, backgroundImage: 'none', borderWidth: token.controlLineWidth, borderStyle: token.controlLineType, borderColor: token.colorBorder, borderRadius: token.controlRadius, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, ...genPlaceholderStyle(), '&:hover': { @@ -166,7 +166,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ minHeight: token.controlHeight, lineHeight: token.lineHeight, verticalAlign: 'bottom', - transition: `all ${token.duration}, height 0s`, + transition: `all ${token.motionDurationSlow}, height 0s`, }, '&-textarea': { @@ -259,7 +259,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { backgroundColor: token.backgroundLight, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.controlRadius, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, // Reset Select's style in addon '.ant-select': { @@ -542,7 +542,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => { // https://github.com/ant-design/ant-design/pull/18151 // https://codesandbox.io/s/wizardly-sun-u10br cursor: 'pointer', - transition: `color ${token.duration}`, + transition: `color ${token.motionDurationSlow}`, '&:hover': { color: token.colorTextSecondary, @@ -582,7 +582,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { iconPrefixCls, inputAffixMargin, colorTextSecondary: textColorSecondary, - duration, + motionDurationSlow: duration, iconColorHover, colorPrimary, colorSuccess, @@ -730,11 +730,11 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { [searchPrefixCls]: { [`.${prefixCls}`]: { '&:hover, &:focus': { - borderColor: token.primaryHoverColor, + borderColor: token.colorPrimaryHover, [`+ .${prefixCls}-group-addon ${searchPrefixCls}-button:not(.@{ant-prefix}-btn-primary)`]: { - borderInlineStartColor: token.primaryHoverColor, + borderInlineStartColor: token.colorPrimaryHover, }, }, }, @@ -823,8 +823,8 @@ export const initInputToken = ( 0, ), inputPaddingHorizontal: token.paddingSM - token.controlLineWidth, - inputBorderHoverColor: token.primaryHoverColor, - inputBorderActiveColor: token.primaryHoverColor, + inputBorderHoverColor: token.colorPrimaryHover, + inputBorderActiveColor: token.colorPrimaryHover, }); const genTextAreaStyle: GenerateStyle = token => { diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx index e81c38e199..8dac8cf339 100644 --- a/components/mentions/style/index.tsx +++ b/components/mentions/style/index.tsx @@ -24,16 +24,16 @@ const genMentionsStyle: GenerateStyle = token => { mentionsCls, backgroundLight, colorTextDisabled: textColorDisabled, - itemHoverBackground, + controlItemBgHover: itemHoverBackground, controlPaddingHorizontal, colorText: textColor, - duration, + motionDurationSlow: duration, lineHeight, controlHeight, inputPaddingHorizontal, inputPaddingVertical, fontSize, - componentBackground, + colorBgComponent: componentBackground, controlRadius: borderRadius, boxShadow, } = token; diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index bc966e2754..6049363ded 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -32,7 +32,7 @@ const genRateStarStyle: GenerateStyle = token => { }, '> div': { - transition: `all ${token.duration}, outline 0s`, + transition: `all ${token.motionDurationSlow}, outline 0s`, '&:hover': { transform: token.rateStarHoverScale, @@ -50,7 +50,7 @@ const genRateStarStyle: GenerateStyle = token => { '&-first, &-second': { color: token.colorSplit, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, userSelect: 'none', [token.iconPrefixCls]: { diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 0a86b7de86..7f9ddfe14d 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -57,7 +57,7 @@ const genBaseStyle: GenerateStyle = (token): CSSObject => { }, [`${resultCls} ${resultCls}-title`]: { - color: token.headingColor, + color: token.colorTextHeading, fontSize: token.resultTitleFontSize, // FIXME: hard code lineHeight: 1.8, diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx index 2f195315d7..302ccf6f97 100644 --- a/components/select/style/dropdown.tsx +++ b/components/select/style/dropdown.tsx @@ -49,7 +49,7 @@ const genSingleStyle: GenerateStyle = (token, hashId) => { // https://github.com/ant-design/ant-design/issues/11456 // https://github.com/ant-design/ant-design/issues/11843 fontVariant: 'initial', - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, borderRadius: token.controlRadius, outline: 'none', boxShadow: token.boxShadow, @@ -93,7 +93,7 @@ const genSingleStyle: GenerateStyle = (token, hashId) => { [`${selectItemCls}`]: { ...genItemStyle(token), cursor: 'pointer', - transition: `background ${token.duration} ease`, + transition: `background ${token.motionDurationSlow} ease`, // =========== Group ============ '&-group': { @@ -118,13 +118,13 @@ const genSingleStyle: GenerateStyle = (token, hashId) => { }, [`&-active:not(${selectItemCls}-option-disabled)`]: { - backgroundColor: token.itemHoverBackground, + backgroundColor: token.controlItemBgHover, }, [`&-selected:not(${selectItemCls}-option-disabled)`]: { color: token.colorText, fontWeight: 600, // FIXME: Need design token? - backgroundColor: token.itemActiveBackground, + backgroundColor: token.controlItemBgActive, [`${selectItemCls}-option-state`]: { color: token.colorPrimary, @@ -132,7 +132,7 @@ const genSingleStyle: GenerateStyle = (token, hashId) => { }, '&-disabled': { [`&${selectItemCls}-option-selected`]: { - backgroundColor: token.componentBackgroundDisabled, + backgroundColor: token.colorBgComponentDisabled, }, color: token.colorTextDisabled, diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 1779885f61..325baec4f7 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -33,10 +33,10 @@ const genSelectorStyle: GenerateStyle = token => { return { position: 'relative', - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.controlRadius, - transition: `all ${token.duration} ${token.motionEaseInOut}`, + transition: `all ${token.motionDurationSlow} ${token.motionEaseInOut}`, input: { cursor: 'pointer', @@ -52,11 +52,11 @@ const genSelectorStyle: GenerateStyle = token => { [`${selectCls}-disabled&`]: { color: token.colorTextDisabled, - background: token.componentBackgroundDisabled, + background: token.colorBgComponentDisabled, cursor: 'not-allowed', [`${selectCls}-multiple&`]: { - background: token.componentBackgroundDisabled, + background: token.colorBgComponentDisabled, }, input: { @@ -165,7 +165,7 @@ const genBaseStyle: GenerateStyle = token => { [`${selectCls}-selection-placeholder`]: { flex: 1, overflow: 'hidden', - color: token.placeholderColor, + color: token.colorPlaceholder, whiteSpace: 'nowrap', textOverflow: 'ellipsis', pointerEvents: 'none', @@ -189,7 +189,7 @@ const genBaseStyle: GenerateStyle = token => { [`.${iconPrefixCls}`]: { verticalAlign: 'top', - transition: `transform ${token.duration}`, + transition: `transform ${token.motionDurationSlow}`, '> svg': { verticalAlign: 'top', @@ -222,10 +222,10 @@ const genBaseStyle: GenerateStyle = token => { lineHeight: 1, textAlign: 'center', textTransform: 'none', - background: token.componentBackground, + background: token.colorBgComponent, cursor: 'pointer', opacity: 0, - transition: `color ${token.duration} ease, opacity ${token.duration} ease`, + transition: `color ${token.motionDurationSlow} ease, opacity ${token.motionDurationSlow} ease`, textRendering: 'auto', '&:before': { @@ -257,7 +257,7 @@ const genBaseStyle: GenerateStyle = token => { fontSize: token.fontSize, textAlign: 'center', visibility: 'visible', - animation: `zoomIn ${token.duration} ${token.motionEaseOutBack}`, + animation: `zoomIn ${token.motionDurationSlow} ${token.motionEaseOutBack}`, pointerEvents: 'none', '&:not(:first-child)': { @@ -331,15 +331,15 @@ const genSelectStyle = ( // ===================================================== genStatusStyle(selectCls, { ...selectToken, - borderHoverColor: token.primaryHoverColor, - outlineColor: token.primaryOutlineColor, + borderHoverColor: token.colorPrimaryHover, + outlineColor: token.colorPrimaryOutline, }), genStatusStyle( `${selectCls}-status-error`, { ...selectToken, - borderHoverColor: token.errorHoverColor, - outlineColor: token.errorOutlineColor, + borderHoverColor: token.colorErrorHover, + outlineColor: token.colorErrorOutline, }, true, ), @@ -347,8 +347,8 @@ const genSelectStyle = ( `${selectCls}-status-warning`, { ...selectToken, - borderHoverColor: token.warningHoverColor, - outlineColor: token.warningOutlineColor, + borderHoverColor: token.colorWarningHover, + outlineColor: token.colorWarningOutline, }, true, ), diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index 669886a5e0..dc3a02d82c 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -61,7 +61,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }, [`${selectCls}-disabled&`]: { - background: token.componentBackgroundDisabled, + background: token.colorBgComponentDisabled, cursor: 'not-allowed', }, @@ -92,11 +92,11 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { marginTop: FIXED_ITEM_MARGIN, marginBottom: FIXED_ITEM_MARGIN, lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`, - background: token.background, + background: token.colorBgContainer, border: `${token.controlLineWidth}px solid ${token.colorSplit}`, borderRadius: token.controlRadius, cursor: 'default', - transition: `font-size ${token.duration}, line-height ${token.duration}, height ${token.duration}`, + transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, userSelect: 'none', marginInlineEnd: FIXED_ITEM_MARGIN * 2, paddingInlineStart: token.paddingXS, @@ -158,7 +158,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { height: selectItemHeight, fontFamily: token.fontFamily, lineHeight: `${selectItemHeight}px`, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, }, '&-input': { @@ -184,7 +184,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { insetInlineStart: token.inputPaddingHorizontalBase, insetInlineEnd: token.inputPaddingHorizontalBase, transform: 'translateY(-50%)', - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, }, }, }; diff --git a/components/select/style/single.tsx b/components/select/style/single.tsx index c2beb29e4d..6a2047284b 100644 --- a/components/select/style/single.tsx +++ b/components/select/style/single.tsx @@ -35,7 +35,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { `]: { padding: 0, lineHeight: `${selectHeightWithoutBorder}px`, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, // Firefox inline-block position calculation is not same as Chrome & Safari. Patch this: '@supports (-moz-appearance: meterbar) &': { @@ -77,7 +77,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { // Opacity selection if open [`&${selectCls}-open ${selectCls}-selection-item`]: { - color: token.placeholderColor, + color: token.colorPlaceholder, }, // ========================== Input ========================== diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index c8d9dcbd05..a2ece22732 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -46,31 +46,31 @@ const genBaseStyle: GenerateStyle = token => { [`${sliderCls}-rail`]: { position: 'absolute', - backgroundColor: token.background, + backgroundColor: token.colorBgContainer, borderRadius: token.controlRadius, - transition: `background-color ${token.duration}`, + transition: `background-color ${token.motionDurationSlow}`, }, [`${sliderCls}-track`]: { position: 'absolute', backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3 borderRadius: token.controlRadius, - transition: `background-color ${token.duration}`, + transition: `background-color ${token.motionDurationSlow}`, }, [`${sliderCls}-handle`]: { position: 'absolute', width: token.handleSize, height: token.handleSize, - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, border: `2px solid ${token.tmpPrimaryColorWeak}`, borderRadius: '50%', boxShadow: 'none', cursor: 'pointer', transition: ` - border-color ${token.duration}, - box-shadow ${token.duration}, - transform ${token.duration} cubic-bezier(0.18, 0.89, 0.32, 1.28) + border-color ${token.motionDurationSlow}, + box-shadow ${token.motionDurationSlow}, + transform ${token.motionDurationSlow} cubic-bezier(0.18, 0.89, 0.32, 1.28) `, outline: 'none', @@ -79,13 +79,13 @@ const genBaseStyle: GenerateStyle = token => { }, '&:focus': { - borderColor: token.primaryHoverColor, + borderColor: token.colorPrimaryHover, boxShadow: 'none', }, '&:focus-visible': { // FIXME: This is a inline color calculation - boxShadow: `0 0 0 5px ${new TinyColor(token.primaryHoverColor) + boxShadow: `0 0 0 5px ${new TinyColor(token.colorPrimaryHover) .setAlpha(0.2) .toRgbString()}`, }, @@ -102,7 +102,7 @@ const genBaseStyle: GenerateStyle = token => { }, [`${sliderCls}-track`]: { - backgroundColor: token.primaryHoverColor, // FIXME: origin primary-4 + backgroundColor: token.colorPrimaryHover, // FIXME: origin primary-4 }, [`${sliderCls}-dot`]: { @@ -118,7 +118,7 @@ const genBaseStyle: GenerateStyle = token => { ${sliderCls}-handle, ${sliderCls}-dot-active `]: { - borderColor: token.primaryHoverColor, + borderColor: token.colorPrimaryHover, }, }, @@ -151,11 +151,11 @@ const genBaseStyle: GenerateStyle = token => { position: 'absolute', width: dotSize, height: dotSize, - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, border: `2px solid ${token.colorSplit}`, // FIXME: hardcode in v4 borderRadius: '50%', cursor: 'pointer', - transition: `border-color ${token.duration}`, + transition: `border-color ${token.motionDurationSlow}`, '&-active': { borderColor: token.tmpPrimaryColorWeak, @@ -166,7 +166,7 @@ const genBaseStyle: GenerateStyle = token => { cursor: 'not-allowed', [`${sliderCls}-rail`]: { - backgroundColor: `${token.background} !important`, + backgroundColor: `${token.colorBgContainer} !important`, }, [`${sliderCls}-track`]: { @@ -177,7 +177,7 @@ const genBaseStyle: GenerateStyle = token => { ${sliderCls}-handle, ${sliderCls}-dot `]: { - backgroundColor: token.componentBackground, + backgroundColor: token.colorBgComponent, borderColor: `${token.colorTextDisabled} !important`, boxShadow: 'none', cursor: 'not-allowed', diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx index 0011e3e7e4..97985b60df 100644 --- a/components/statistic/style/index.tsx +++ b/components/statistic/style/index.tsx @@ -25,7 +25,7 @@ const genStatisticStyle: GenerateStyle = (token: StatisticToken) fontSize: token.statisticTitleFontSize, }, [`${token.statisticCls}-content`]: { - color: token.headingColor, + color: token.colorTextHeading, fontSize: token.statisticContentFontSize, fontFamily: token.statisticFontFamily, [`${token.statisticCls}-content-value`]: { diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx index e3e3451672..d956e2ed7c 100644 --- a/components/switch/style/index.tsx +++ b/components/switch/style/index.tsx @@ -241,7 +241,7 @@ export default function useStyle( switchInnerMarginMax: Math.ceil(switchHeight * 1.1), switchPadding: 2, switchPinSize: switchHeight - 4, - switchBg: token.componentBackground, + switchBg: token.colorBgComponent, switchShadowColor: new TinyColor('#00230b').setAlpha(0.2).toRgbString(), switchMinWidthSM: 28, switchHeightSM, diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index 0500c91be9..e2988ff8ed 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -81,7 +81,7 @@ const genBaseStyle = ( borderRadius: token.controlRadius, // FIXME: hard code opacity: 1, - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, // RTL '&&-rtl': { @@ -100,10 +100,10 @@ const genBaseStyle = ( // FIXME: hard code fontSize: 10, cursor: 'pointer', - transition: `all ${token.duration}`, + transition: `all ${token.motionDurationSlow}`, '&:hover': { - color: token.headingColor, + color: token.colorTextHeading, }, }, diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index 630d1cedf7..cf58594f2b 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -30,7 +30,7 @@ const getSwitchStyle = (prefixCls: string, token: DerivativeToken): CSSObject => verticalAlign: 'baseline', svg: { - transition: `transform ${token.duration}`, + transition: `transform ${token.motionDurationSlow}`, }, }, }); @@ -77,9 +77,9 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string return { [treeCls]: { ...resetComponent(token), - background: token.componentBackground, + background: token.colorBgComponent, borderRadius: token.controlRadius, - transition: `background-color ${token.duration}`, + transition: `background-color ${token.motionDurationSlow}`, '&&-rtl': { // >>> Switcher @@ -124,7 +124,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string insetInlineStart: 0, border: `1px solid ${token.colorPrimary}`, opacity: 0, - animation: `${treeNodeFX.getName(hashId)} ${token.duration}`, + animation: `${treeNodeFX.getName(hashId)} ${token.motionDurationSlow}`, animationPlayState: 'running', animationFillMode: 'forwards', content: '""', @@ -158,7 +158,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string }, [`&-active ${treeCls}-node-content-wrapper`]: { - background: token.itemHoverBackground, + background: token.controlItemBgHover, }, [`&:not(&-disabled).filter-node ${treeCls}-title`]: { @@ -184,7 +184,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string lineHeight: `${treeTitleHeight}px`, textAlign: 'center', opacity: 0.2, - transition: `opacity ${token.duration}`, + transition: `opacity ${token.motionDurationSlow}`, [`${treeNodeCls}:hover &`]: { opacity: 0.45, @@ -269,10 +269,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string background: 'transparent', borderRadius: token.controlRadius, cursor: 'pointer', - transition: `all ${token.duration}, border 0s, line-height 0s, box-shadow 0s`, + transition: `all ${token.motionDurationSlow}, border 0s, line-height 0s, box-shadow 0s`, '&:hover': { - backgroundColor: token.itemHoverBackground, + backgroundColor: token.controlItemBgHover, }, [`&${treeCls}-node-selected`]: { @@ -340,7 +340,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string // ============== Cover Background ============== [`${treeCls}-switcher`]: { - background: token.componentBackground, + background: token.colorBgComponent, '&-line-icon': { // https://github.com/ant-design/ant-design/issues/32813 @@ -381,14 +381,14 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { insetInlineEnd: 0, bottom: treeNodePadding, insetInlineStart: 0, - transition: `background-color ${token.duration}`, + transition: `background-color ${token.motionDurationSlow}`, content: '""', pointerEvents: 'none', }, '&:hover': { '&:before': { - background: token.itemHoverBackground, + background: token.controlItemBgHover, }, }, @@ -399,7 +399,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { // >>> Switcher [`${treeCls}-switcher`]: { - transition: `color ${token.duration}`, + transition: `color ${token.motionDurationSlow}`, }, // >>> Title diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx index 6e4a7064dc..0aade818e9 100644 --- a/components/typography/style/index.tsx +++ b/components/typography/style/index.tsx @@ -39,7 +39,7 @@ const genTypographyStyle: GenerateStyle = token => { }, '&&-disabled': { - color: token.disabledColor, + color: token.colorTextDisabled, cursor: 'not-allowed', userSelect: 'none', }, diff --git a/components/typography/style/mixins.tsx b/components/typography/style/mixins.tsx index 6a6c819e33..73c16129b9 100644 --- a/components/typography/style/mixins.tsx +++ b/components/typography/style/mixins.tsx @@ -57,7 +57,7 @@ export const getTitleStyles: GenerateStyle = token = ] = getTitleStyle({ fontSize: token[`fontSizeHeading${headingLevel}`], lineHeight: token[`lineHeightHeading${headingLevel}`], - color: token.headingColor, + color: token.colorTextHeading, typographyToken: token.typography, }); }); @@ -74,7 +74,7 @@ export const getLinkStyles: GenerateStyle = token => }, [`&[disabled], &.${token.typography.prefixCls}-disabled`]: { - color: token.disabledColor, + color: token.colorTextDisabled, cursor: 'not-allowed', '&:active, &:hover': { diff --git a/site/theme/template/Layout/DynamicTheme/Preview.tsx b/site/theme/template/Layout/DynamicTheme/Preview.tsx index bd0159b686..4f187b2298 100644 --- a/site/theme/template/Layout/DynamicTheme/Preview.tsx +++ b/site/theme/template/Layout/DynamicTheme/Preview.tsx @@ -3,11 +3,52 @@ import * as React from 'react'; import hljs from 'highlight.js'; import css from 'highlight.js/lib/languages/css'; import 'highlight.js/styles/github.css'; -import { Drawer, Typography, Alert, Space, Tabs } from 'antd'; +import { Drawer, Typography, Alert, Space, Tabs, ConfigProvider, Table, TableProps } from 'antd'; import getValidateStatus, { STATUS, PASS } from './validateCheck'; hljs.registerLanguage('css', css); +const columns: TableProps<{ name: string; value: any }>['columns'] = [ + { + dataIndex: 'name', + title: 'Name', + width: 1, + }, + { + dataIndex: 'value', + title: 'Value', + render: (value: string) => { + let content: React.ReactNode = value; + + switch (typeof value) { + case 'object': { + if (Array.isArray(value)) { + content = ( +
    + {(value as string[]).map((val, index) => ( +
  • + + [{index}] + {val} + +
  • + ))} +
+ ); + break; + } + } + + // eslint-disable-next-line no-fallthrough + default: + content = String(value); + } + + return {content}; + }, + }, +]; + export interface PreviewProps { visible: boolean; componentName: string; @@ -17,6 +58,19 @@ export interface PreviewProps { export default function Preview({ visible, onClose }: PreviewProps) { const [styleList, setStyleList] = React.useState([]); + // Full token + const [, token] = ConfigProvider.useToken(); + const tokenList = React.useMemo( + () => + Object.keys(token) + .filter(name => !name.startsWith('_')) + .map((name: keyof typeof token) => ({ + name, + value: token[name], + })), + [token], + ); + React.useEffect(() => { const observer = new MutationObserver(() => { const latestStyles = Array.from(document.querySelectorAll('style[data-css-hash]')) @@ -134,6 +188,16 @@ export default function Preview({ visible, onClose }: PreviewProps) { ))} + + + {invalidateStyles.map(({ status, line, source }, index) => (