From d952088650f1ac8769cc275a1f41a9147105857e 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: Thu, 24 Mar 2022 14:30:48 +0800 Subject: [PATCH] refactor: More alias token (#34681) * chore: colorHighlight * chore: bgSecondary * chore: colorLink * chore: link style * chore: rm fly variables * chore: colorAction * chore: add warning comment * chore: token outline * chore: colorBgXXX * chore: alert * rm: zIndex * chore: rm zIndexComponent * fix: tag color checkabl * chore: tags tmp --- components/_util/theme/interface.ts | 74 ++++++------ components/_util/theme/themes/default.ts | 24 ++++ components/_util/theme/util/alias.ts | 50 +++----- components/_util/theme/util/operationUnit.tsx | 8 +- components/affix/style/index.tsx | 2 + components/alert/style/index.tsx | 107 ++++-------------- components/badge/style/index.tsx | 2 +- components/button/style/index.tsx | 6 +- components/cascader/style/index.tsx | 2 +- components/input/style/index.tsx | 17 +-- components/mentions/style/index.tsx | 43 ++++--- components/result/style/index.tsx | 2 +- components/select/style/index.tsx | 2 + components/select/style/multiple.tsx | 4 +- components/slider/style/index.tsx | 6 +- components/switch/style/index.tsx | 13 +-- components/tag/style/index.tsx | 14 +-- components/tree/style/index.tsx | 4 +- components/typography/style/index.tsx | 3 +- 19 files changed, 164 insertions(+), 219 deletions(-) diff --git a/components/_util/theme/interface.ts b/components/_util/theme/interface.ts index fddebba533..16131b6abd 100644 --- a/components/_util/theme/interface.ts +++ b/components/_util/theme/interface.ts @@ -34,7 +34,7 @@ export interface OverrideToken { // ====================================================================== // == Seed Token == // ====================================================================== - +// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface SeedToken extends PresetColorType { // Color colorPrimary: string; @@ -56,6 +56,7 @@ export interface SeedToken extends PresetColorType { gridBaseStep: number; // Line + /** Border width of base components */ lineWidth: number; // Motion @@ -76,34 +77,54 @@ export interface SeedToken extends PresetColorType { // Control Base controlHeight: number; + + // zIndex + /** Base zIndex of component like BackTop, Affix which can be cover by large popup */ + zIndexBase: number; + /** Base popup component zIndex */ + zIndexPopup: number; } // ====================================================================== // == Derivative Token == // ====================================================================== - +// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface DerivativeToken extends SeedToken, ColorPalettes { // Color colorPrimaryHover: string; colorPrimaryActive: string; colorPrimaryOutline: string; + colorPrimarySecondary: string; // primary[2] + + colorSuccessSecondary: string; + colorBgSuccess: string; // success[0] colorWarningHover: string; colorWarningActive: string; colorWarningOutline: string; + colorWarningSecondary: string; + colorBgWarning: string; colorErrorHover: string; colorErrorActive: string; colorErrorOutline: string; + colorErrorSecondary: string; + colorBgError: string; + + colorInfoSecondary: string; + colorBgInfo: string; colorText2: string; colorTextBelow: string; colorTextBelow2: string; colorTextBelow3: string; + colorBg2: string; colorBgBelow: string; colorBgBelow2: string; + colorHighlight: string; + // Font fontSizes: number[]; lineHeights: number[]; @@ -131,6 +152,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes { radiusLG: number; radiusXL: number; + // Control /** @private Only Used for control inside component like Multiple Select inner selection item */ controlHeightXS: number; controlHeightSM: number; @@ -140,7 +162,7 @@ export interface DerivativeToken extends SeedToken, ColorPalettes { // ====================================================================== // == Alias Token == // ====================================================================== -// FIXME: DerivativeToken should part pick +// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface AliasToken extends DerivativeToken { // Font fontSizeSM: number; @@ -180,29 +202,27 @@ export interface AliasToken extends DerivativeToken { /** Placeholder text color */ colorPlaceholder: string; colorTextHeading: string; + + /** Weak action. Such as `allowClear` or Alert close button */ + colorAction: string; + /** Weak action hover color. Such as `allowClear` or Alert close button */ + colorActionHover: string; + + colorLink: string; + colorLinkHover: string; + colorLinkActive: string; + colorBgContainer: string; colorBgComponent: string; + colorBgComponentSecondary: string; colorBgComponentDisabled: string; // =============== Legacy: should be remove =============== - iconColorHover: string; - padding: number; margin: number; - backgroundLight: string; - - zIndexDropdown: number; - zIndexAffix: number; - boxShadow: string; - // =============== Legacy: should be remove =============== - highlightColor: string; - - linkColor: string; - linkHoverColor: string; - linkActiveColor: string; linkDecoration: React.CSSProperties['textDecoration']; linkHoverDecoration: React.CSSProperties['textDecoration']; linkFocusDecoration: React.CSSProperties['textDecoration']; @@ -216,26 +236,4 @@ export interface AliasToken extends DerivativeToken { marginXS: number; marginLG: number; marginXXS: number; - - primaryColors: string[]; - errorColors: string[]; - warningColors: string[]; - - // TMP - tmpPrimaryColorWeak: string; - tmpPrimaryHoverColorWeak: string; - // Checked background for Checkable Tag - tmpPrimaryColor6: string; - // Active background for Checkable Tag - tmpPrimaryColor7: string; - - tmpSuccessColorDeprecatedBg: string; - tmpWarningColorDeprecatedBg: string; - tmpErrorColorDeprecatedBg: string; - tmpInfoColorDeprecatedBg: string; - - tmpSuccessColorDeprecatedBorder: string; - tmpWarningColorDeprecatedBorder: string; - tmpErrorColorDeprecatedBorder: string; - tmpInfoColorDeprecatedBorder: string; } diff --git a/components/_util/theme/themes/default.ts b/components/_util/theme/themes/default.ts index 9357a0be5f..6cab5792a5 100644 --- a/components/_util/theme/themes/default.ts +++ b/components/_util/theme/themes/default.ts @@ -24,8 +24,10 @@ const defaultPresetColors: PresetColorType = { export function derivative(token: SeedToken): DerivativeToken { const { colorPrimary, + colorSuccess, colorWarning, colorError, + colorInfo, motionUnit, motionBase, fontSizeBase, @@ -38,8 +40,10 @@ export function derivative(token: SeedToken): DerivativeToken { } = token; const primaryColors = generate(colorPrimary); + const successColors = generate(colorSuccess); const warningColors = generate(colorWarning); const errorColors = generate(colorError); + const infoColors = generate(colorInfo); const colorPalettes = Object.keys(defaultPresetColors) .map((colorKey: keyof PresetColorType) => { @@ -92,18 +96,34 @@ export function derivative(token: SeedToken): DerivativeToken { radiusXL: radiusBase * 4, // color + colorBg2: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), colorBgBelow: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), colorBgBelow2: new TinyColor({ h: 0, s: 0, v: 96 }).toHexString(), colorPrimaryActive: primaryColors[6], colorPrimaryHover: primaryColors[4], colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), + colorPrimarySecondary: primaryColors[2], + + colorSuccessSecondary: successColors[2], + colorBgSuccess: successColors[0], + colorErrorActive: errorColors[6], colorErrorHover: errorColors[4], colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), + colorErrorSecondary: errorColors[2], + colorBgError: errorColors[0], + colorWarningActive: warningColors[6], colorWarningHover: warningColors[4], colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), + colorWarningSecondary: warningColors[2], + colorBgWarning: warningColors[0], + + colorInfoSecondary: infoColors[2], + colorBgInfo: infoColors[0], + + colorHighlight: errorColors[4], // text color colorText2: new TinyColor('#000').setAlpha(0.85).toRgbString(), @@ -165,6 +185,10 @@ const seedToken: SeedToken = { // Control Base controlHeight: 32, + + // zIndex + zIndexBase: 0, + zIndexPopup: 1000, }; export default seedToken; diff --git a/components/_util/theme/util/alias.ts b/components/_util/theme/util/alias.ts index 8b51c9c790..f3aa9edc56 100644 --- a/components/_util/theme/util/alias.ts +++ b/components/_util/theme/util/alias.ts @@ -39,8 +39,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken colorBgContainer: mergedToken.colorBgBelow2, colorBgComponent: mergedToken.colorBg, + colorBgComponentSecondary: mergedToken.colorBg2, colorBgComponentDisabled: mergedToken.colorBgBelow2, + colorLink: mergedToken.colorPrimary, + colorLinkHover: primaryColors[4], + colorLinkActive: primaryColors[6], + + colorAction: mergedToken.colorTextBelow, + colorActionHover: mergedToken.colorText, + // Font fontSizeSM: fontSizes[0], fontSize: fontSizes[1], @@ -76,37 +84,19 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // 🔥🔥🔥🔥🔥🔥🔥🔥🔥 All TMP Token leaves here 🔥🔥🔥🔥🔥🔥🔥🔥🔥 // FIXME: Handle this when derivative is ready - primaryColors, - warningColors, - errorColors, - - tmpPrimaryColorWeak: primaryColors[2], - tmpPrimaryHoverColorWeak: primaryColors[0], - tmpPrimaryColor6: primaryColors[5], - tmpPrimaryColor7: primaryColors[6], - - tmpSuccessColorDeprecatedBg: successColors[0], - tmpWarningColorDeprecatedBg: warningColors[0], - tmpErrorColorDeprecatedBg: errorColors[0], - tmpInfoColorDeprecatedBg: infoColors[0], - - tmpSuccessColorDeprecatedBorder: successColors[2], - tmpWarningColorDeprecatedBorder: warningColors[2], - tmpErrorColorDeprecatedBorder: errorColors[2], - tmpInfoColorDeprecatedBorder: infoColors[2], - - highlightColor: errorColors[5], // FIXME: Should not align with error color - // FIXME: fix2 badge-color - - linkColor: mergedToken.colorPrimary, - linkHoverColor: primaryColors[4], - linkActiveColor: primaryColors[6], + // primaryColors, + // warningColors, + // errorColors, + + colorSuccessSecondary: successColors[2], + colorWarningSecondary: warningColors[2], + colorErrorSecondary: errorColors[2], + colorInfoSecondary: infoColors[2], + linkDecoration: 'none', linkHoverDecoration: 'none', linkFocusDecoration: 'none', - iconColorHover: new TinyColor('#000').setAlpha(0.75).toRgbString(), - controlPaddingHorizontal: 16, controlPaddingHorizontalSM: 12, @@ -123,12 +113,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // marginSM: 8, marginLG: 32, - // background of header and selected item - backgroundLight: new TinyColor({ h: 0, s: 0, v: 98 }).toHexString(), - - 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), diff --git a/components/_util/theme/util/operationUnit.tsx b/components/_util/theme/util/operationUnit.tsx index 43256a0974..515a75bdd7 100644 --- a/components/_util/theme/util/operationUnit.tsx +++ b/components/_util/theme/util/operationUnit.tsx @@ -3,17 +3,19 @@ import { DerivativeToken } from '..'; // eslint-disable-next-line import/prefer-default-export export const operationUnit = (token: DerivativeToken): CSSObject => ({ - color: token.linkColor, + // FIXME: This use link but is a operation unit. Seems should be a colorPrimary. + // And Typography use this to generate link style which should not do this. + color: token.colorLink, textDecoration: 'none', outline: 'none', cursor: 'pointer', transition: `color ${token.motionDurationSlow}`, '&:focus, &:hover': { - color: token.linkHoverColor, + color: token.colorLinkHover, }, '&:active': { - color: token.linkActiveColor, + color: token.colorLinkActive, }, }); diff --git a/components/affix/style/index.tsx b/components/affix/style/index.tsx index e4c7224709..138bee71af 100644 --- a/components/affix/style/index.tsx +++ b/components/affix/style/index.tsx @@ -10,6 +10,7 @@ import { interface AffixToken extends DerivativeToken { affixCls: string; + zIndexAffix: number; } // ============================== Shared ============================== @@ -32,6 +33,7 @@ export default function useStyle(prefixCls: string): UseComponentStyleResult { ...token, affixCls: `.${prefixCls}`, + zIndexAffix: token.zIndexBase + 10, }; return [ diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 2b97973dcd..35eb4e797b 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -2,7 +2,6 @@ // import './index.less'; // deps-lint-skip-all -import { generate } from '@ant-design/colors'; import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; import { @@ -23,22 +22,6 @@ type AlertToken = DerivativeToken & { alertCloseColor: string; alertCloseHoverColor: string; - alertInfoBgColor: string; - alertInfoIconColor: string; - alertInfoBorderColor: string; - - alertSuccessBgColor: string; - alertSuccessIconColor: string; - alertSuccessBorderColor: string; - - alertWarningBgColor: string; - alertWarningIconColor: string; - alertWarningBorderColor: string; - - alertErrorBgColor: string; - alertErrorIconColor: string; - alertErrorBorderColor: string; - alertWithDescriptionIconSize: number; alertWithDescriptionPaddingVertical: number; alertWithDescriptionNoIconPaddingVertical: number; @@ -161,54 +144,43 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO export const genTypeStyle: GenerateStyle = (token: AlertToken): CSSObject => { const { alertCls, - alertInfoBgColor, - alertInfoIconColor, - alertInfoBorderColor, - alertSuccessBgColor, - alertSuccessIconColor, - alertSuccessBorderColor, + colorSuccess, + colorSuccessSecondary, + colorBgSuccess, + + colorWarning, + colorWarningSecondary, + colorBgWarning, - alertWarningBgColor, - alertWarningIconColor, - alertWarningBorderColor, + colorError, + colorErrorSecondary, + colorBgError, - alertErrorBgColor, - alertErrorIconColor, - alertErrorBorderColor, + colorInfo, + colorInfoSecondary, + colorBgInfo, } = token; return { [alertCls]: { '&-success': genAlertTypeStyle( - alertSuccessBgColor, - alertSuccessBorderColor, - alertSuccessIconColor, - token, - alertCls, - ), - '&-info': genAlertTypeStyle( - alertInfoBgColor, - alertInfoBorderColor, - alertInfoIconColor, + colorBgSuccess, + colorSuccessSecondary, + colorSuccess, token, alertCls, ), + '&-info': genAlertTypeStyle(colorBgInfo, colorInfoSecondary, colorInfo, token, alertCls), '&-warning': genAlertTypeStyle( - alertWarningBgColor, - alertWarningBorderColor, - alertWarningIconColor, + colorBgWarning, + colorWarningSecondary, + colorWarning, token, alertCls, ), '&-error': { - ...genAlertTypeStyle( - alertErrorBgColor, - alertErrorBorderColor, - alertErrorIconColor, - token, - alertCls, - ), + ...genAlertTypeStyle(colorBgError, colorErrorSecondary, colorError, token, alertCls), [`${alertCls}-description > pre`]: { margin: 0, padding: 0, @@ -281,50 +253,17 @@ export default function useStyle( const alertCls = `.${prefixCls}`; const alertMessageColor = token.colorTextHeading; - const alertCloseColor = token.colorTextSecondary; - const alertCloseHoverColor = token.iconColorHover; + const alertCloseColor = token.colorAction; + const alertCloseHoverColor = token.colorActionHover; // FIXME const alertWithDescriptionIconSize = 24; const alertWithDescriptionPaddingVertical = token.padding - 1; const alertWithDescriptionNoIconPaddingVertical = token.padding - 1; - // FIXME - const infoColors = generate(token.colorInfo); - const alertInfoBgColor = infoColors[0]; - const alertInfoIconColor = token.colorInfo; - const alertInfoBorderColor = infoColors[2]; - - const successColors = generate(token.colorSuccess); - const alertSuccessBgColor = successColors[0]; - const alertSuccessIconColor = token.colorSuccess; - const alertSuccessBorderColor = successColors[2]; - - const warningColors = generate(token.colorWarning); - const alertWarningBgColor = warningColors[0]; - const alertWarningIconColor = token.colorWarning; - const alertWarningBorderColor = warningColors[2]; - - const errorColors = generate(token.colorError); - const alertErrorBgColor = errorColors[0]; - const alertErrorIconColor = token.colorError; - const alertErrorBorderColor = errorColors[2]; - const alertToken: AlertToken = { ...token, alertCls, iconPrefixCls, - alertInfoBgColor, - alertInfoIconColor, - alertInfoBorderColor, - alertSuccessBgColor, - alertSuccessIconColor, - alertSuccessBorderColor, - alertWarningBgColor, - alertWarningIconColor, - alertWarningBorderColor, - alertErrorBgColor, - alertErrorIconColor, - alertErrorBorderColor, alertMessageColor, alertCloseColor, alertCloseHoverColor, diff --git a/components/badge/style/index.tsx b/components/badge/style/index.tsx index 0ed4079563..14fdeac022 100644 --- a/components/badge/style/index.tsx +++ b/components/badge/style/index.tsx @@ -337,7 +337,7 @@ export default function useStyle( const badgeTextColor = token.colorBgComponent; const badgeFontWeight = 'normal'; const badgeFontSize = token.fontSizeSM; - const badgeColor = token.highlightColor; + const badgeColor = token.colorHighlight; const badgeHeightSm = 14; // FIXME: hard code const badgeDotSize = 6; // FIXME: hard code const badgeFontSizeSm = token.fontSizeSM; diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 347f5258d2..b6937258b0 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -223,14 +223,14 @@ const genDashedButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObj // Type: Link const genLinkButtonStyle = (prefixCls: string, token: DerivativeToken): CSSObject => ({ - color: token.linkColor, + color: token.colorLink, ...genHoverActiveButtonStyle( { - color: token.colorPrimaryHover, + color: token.colorLinkHover, }, { - color: token.colorPrimaryActive, + color: token.colorLinkActive, }, ), diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index 529125498f..40ad4a3e3c 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -139,7 +139,7 @@ const genBaseStyle: GenerateStyle = (token, hashId) => { }, '&-keyword': { - color: token.highlightColor, + color: token.colorHighlight, }, }, }, diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index 5074f05545..d502e655ca 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -256,7 +256,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { fontWeight: 'normal', fontSize: token.fontSize, textAlign: 'center', - backgroundColor: token.backgroundLight, + backgroundColor: token.colorBgComponentSecondary, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.controlRadius, transition: `all ${token.motionDurationSlow}`, @@ -581,9 +581,10 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { prefixCls, iconPrefixCls, inputAffixMargin, - colorTextSecondary: textColorSecondary, - motionDurationSlow: duration, - iconColorHover, + colorTextSecondary, + motionDurationSlow, + colorAction, + colorActionHover, colorPrimary, colorSuccess, } = token; @@ -635,7 +636,7 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { }, '&-show-count-suffix': { - color: textColorSecondary, + color: colorTextSecondary, }, '&-show-count-has-suffix': { @@ -655,12 +656,12 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { // password [`.${iconPrefixCls}.${prefixCls}-password-icon`]: { - color: textColorSecondary, + color: colorAction, cursor: 'pointer', - transition: `all ${duration}`, + transition: `all ${motionDurationSlow}`, '&:hover': { - color: iconColorHover, + color: colorActionHover, }, }, diff --git a/components/mentions/style/index.tsx b/components/mentions/style/index.tsx index 8dac8cf339..9f7fe4b15c 100644 --- a/components/mentions/style/index.tsx +++ b/components/mentions/style/index.tsx @@ -22,19 +22,18 @@ interface MentionsToken extends InputToken { const genMentionsStyle: GenerateStyle = token => { const { mentionsCls, - backgroundLight, - colorTextDisabled: textColorDisabled, - controlItemBgHover: itemHoverBackground, + colorTextDisabled, + controlItemBgHover, controlPaddingHorizontal, - colorText: textColor, - motionDurationSlow: duration, + colorText, + motionDurationSlow, lineHeight, controlHeight, inputPaddingHorizontal, inputPaddingVertical, fontSize, - colorBgComponent: componentBackground, - controlRadius: borderRadius, + colorBgComponent, + controlRadius, boxShadow, } = token; @@ -124,8 +123,8 @@ const genMentionsStyle: GenerateStyle = token => { boxSizing: 'border-box', fontSize, fontVariant: 'initial', - backgroundColor: componentBackground, - borderRadius, + backgroundColor: colorBgComponent, + borderRadius: controlRadius, outline: 'none', boxShadow, @@ -147,21 +146,21 @@ const genMentionsStyle: GenerateStyle = token => { minWidth: 100, // FIXME: magic padding: `5px ${controlPaddingHorizontal}px`, // FIXME: magic overflow: 'hidden', - color: textColor, + color: colorText, fontWeight: 'normal', lineHeight, whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'pointer', - transition: `background ${duration} ease`, + transition: `background ${motionDurationSlow} ease`, '&:hover': { - backgroundColor: itemHoverBackground, + backgroundColor: controlItemBgHover, }, '&:first-child': { - borderStartStartRadius: borderRadius, - borderStartEndRadius: borderRadius, + borderStartStartRadius: controlRadius, + borderStartEndRadius: controlRadius, borderEndStartRadius: 0, borderEndEndRadius: 0, }, @@ -169,29 +168,29 @@ const genMentionsStyle: GenerateStyle = token => { '&:last-child': { borderStartStartRadius: 0, borderStartEndRadius: 0, - borderEndStartRadius: borderRadius, - borderEndEndRadius: borderRadius, + borderEndStartRadius: controlRadius, + borderEndEndRadius: controlRadius, }, '&-disabled': { - color: textColorDisabled, + color: colorTextDisabled, cursor: 'not-allowed', '&:hover': { - color: textColorDisabled, - backgroundColor: itemHoverBackground, + color: colorTextDisabled, + backgroundColor: controlItemBgHover, cursor: 'not-allowed', }, }, '&-selected': { - color: textColor, + color: colorText, fontWeight: 600, // FIXME: Need design token? - backgroundColor: backgroundLight, + backgroundColor: controlItemBgHover, }, '&-active': { - backgroundColor: itemHoverBackground, + backgroundColor: controlItemBgHover, }, }, }, diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 7f9ddfe14d..44f4166d9d 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -75,7 +75,7 @@ const genBaseStyle: GenerateStyle = (token): CSSObject => { [`${resultCls} ${resultCls}-content`]: { marginTop: token.padding * 1.5, padding: `${token.padding * 1.5}px ${token.padding * 2.5}px`, - backgroundColor: token.backgroundLight, + backgroundColor: token.colorBgComponentSecondary, }, [`${resultCls} ${resultCls}-extra`]: { diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 325baec4f7..de33e52e73 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -25,6 +25,7 @@ export type SelectToken = DerivativeToken & { selectCls: string; iconPrefixCls: string; inputPaddingHorizontalBase: number; + zIndexDropdown: number; }; // ============================= Selector ============================= @@ -288,6 +289,7 @@ const genSelectStyle = ( selectCls, iconPrefixCls, inputPaddingHorizontalBase, + zIndexDropdown: token.zIndexPopup + 50, }; return [ diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index dc3a02d82c..071412f976 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -121,7 +121,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { ...resetIcon(), display: 'inline-block', - color: token.colorTextSecondary, + color: token.colorAction, fontWeight: 'bold', fontSize: 10, lineHeight: 'inherit', @@ -132,7 +132,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }, '&:hover': { - color: token.iconColorHover, + color: token.colorActionHover, }, }, }, diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index a2ece22732..0220cb5aa1 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -53,7 +53,7 @@ const genBaseStyle: GenerateStyle = token => { [`${sliderCls}-track`]: { position: 'absolute', - backgroundColor: token.tmpPrimaryColorWeak, // FIXME: Origin @primary-3 + backgroundColor: token.colorPrimarySecondary, borderRadius: token.controlRadius, transition: `background-color ${token.motionDurationSlow}`, }, @@ -63,7 +63,7 @@ const genBaseStyle: GenerateStyle = token => { width: token.handleSize, height: token.handleSize, backgroundColor: token.colorBgComponent, - border: `2px solid ${token.tmpPrimaryColorWeak}`, + border: `2px solid ${token.colorPrimarySecondary}`, borderRadius: '50%', boxShadow: 'none', cursor: 'pointer', @@ -158,7 +158,7 @@ const genBaseStyle: GenerateStyle = token => { transition: `border-color ${token.motionDurationSlow}`, '&-active': { - borderColor: token.tmpPrimaryColorWeak, + borderColor: token.colorPrimarySecondary, }, }, diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx index d956e2ed7c..013a95b21c 100644 --- a/components/switch/style/index.tsx +++ b/components/switch/style/index.tsx @@ -163,23 +163,18 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { verticalAlign: 'middle', backgroundColor: token.colorTextDisabled, border: '0', - // FIXME borderRadius: 100, cursor: 'pointer', transition: `all ${token.switchDuration}`, userSelect: 'none', - '&:focus': { + '&:focus-visible': { outline: 0, - // FIXME - boxShadow: `0 0 0 2px ${new TinyColor(token.colorTextDisabled) - .setAlpha(0.1) - .toRgbString()}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorBgComponentDisabled}`, }, - [`&${token.switchCls}-checked:focus`]: { - // FIXME - boxShadow: `0 0 0 2px ${token.tmpPrimaryHoverColorWeak}`, + [`&${token.switchCls}-checked:focus-visible`]: { + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`, }, '&:focus:hover': { diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index e2988ff8ed..1df13952da 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -32,8 +32,8 @@ const genTagStatusStyle = ( return { [`.${prefixCls}-${status}`]: { color: token[`color${cssVariableType}`], - background: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBg`], - borderColor: token[`tmp${capitalizedCssVariableType}ColorDeprecatedBorder`], + background: token[`colorBg${capitalizedCssVariableType}`], + borderColor: token[`color${capitalizedCssVariableType}Secondary`], }, }; }; @@ -115,7 +115,7 @@ const genBaseStyle = ( }, }, - [`.${prefixCls}-checkable`]: { + [`&-checkable`]: { backgroundColor: 'transparent', borderColor: 'transparent', cursor: 'pointer', @@ -129,15 +129,15 @@ const genBaseStyle = ( }, '&-checked': { - backgroundColor: token.tmpPrimaryColor6, + backgroundColor: token.colorPrimary, }, '&:active': { - backgroundColor: token.tmpPrimaryColor7, + backgroundColor: token.colorPrimaryActive, }, }, - [`.${prefixCls}-hidden`]: { + [`&-hidden`]: { display: 'none', }, @@ -157,7 +157,7 @@ export const genTagStyle = ( const tagFontSize = token.fontSizeSM; // FIXME: hard code const tagLineHeight = '18px'; - const tagDefaultBg = token.backgroundLight; + const tagDefaultBg = token.colorBgComponentSecondary; const tagDefaultColor = token.colorText; const tagToken = { diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index cf58594f2b..b2a1c96926 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -95,7 +95,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string }, '&-focused:not(:hover):not(&-active-focused)': { - background: token.tmpPrimaryHoverColorWeak, + background: token.colorPrimaryOutline, }, // =================== Virtual List =================== @@ -276,7 +276,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken, hashId: string }, [`&${treeCls}-node-selected`]: { - backgroundColor: token.tmpPrimaryHoverColorWeak, + backgroundColor: token.colorPrimaryOutline, }, // Icon diff --git a/components/typography/style/index.tsx b/components/typography/style/index.tsx index 0aade818e9..a4f1ed2fbd 100644 --- a/components/typography/style/index.tsx +++ b/components/typography/style/index.tsx @@ -33,8 +33,7 @@ const genTypographyStyle: GenerateStyle = token => { '&&-danger': { color: token.colorError, 'a&:active, a&:focus, a&:hover': { - // FIXME: need new token like errorColorHover - color: token.errorColors[4], + color: token.colorErrorHover, }, },