From 1ad05532497f71ca020df5ea0ae655ceed31970a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 21 Jul 2022 17:00:42 +0800 Subject: [PATCH] refactor: token update (#36637) * refactor: token update * refactor: token * chore: error color * fix: menu danger --- components/alert/style/index.tsx | 12 +- components/button/style/index.tsx | 8 +- components/card/style/index.tsx | 4 +- components/collapse/style/index.tsx | 2 +- components/date-picker/style/index.tsx | 8 +- components/descriptions/style/index.tsx | 2 +- components/drawer/style/index.tsx | 4 +- components/form/style/index.tsx | 2 +- components/input-number/style/index.tsx | 2 +- components/input/style/index.tsx | 18 +-- components/menu/style/index.tsx | 14 +- components/modal/style/index.tsx | 2 +- components/notification/style/index.tsx | 4 +- components/pagination/style/index.tsx | 2 +- components/progress/style/index.tsx | 2 +- components/radio/style/index.tsx | 4 +- components/rate/style/index.tsx | 4 +- components/result/style/index.tsx | 2 +- components/segmented/style/index.tsx | 51 ++++---- components/select/style/index.tsx | 2 +- components/select/style/multiple.tsx | 6 +- components/skeleton/style/index.tsx | 4 +- components/slider/style/index.tsx | 10 +- components/switch/style/index.tsx | 2 +- components/table/style/index.tsx | 32 ++--- components/tabs/style/index.tsx | 2 +- components/tag/style/index.tsx | 2 +- components/theme/interface.ts | 122 ++++++++++-------- components/theme/themes/IPalettes.ts | 49 +------ components/theme/themes/dark/palettes.ts | 85 ++++++------ components/theme/themes/default/palettes.ts | 41 +++--- .../theme/themes/shared/genColorMapToken.ts | 102 ++++----------- components/theme/util/alias.ts | 40 +++++- components/tooltip/style/index.tsx | 4 +- components/tree/style/index.tsx | 4 +- components/upload/style/dragger.tsx | 2 +- components/upload/style/picture.tsx | 4 +- 37 files changed, 301 insertions(+), 359 deletions(-) diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 0de0bb184c..18baf9c3fd 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -179,8 +179,8 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS motionDurationSlow: duration, marginXS, fontSizeIcon, - colorAction, - colorActionHover, + colorIcon, + colorIconHover, } = token; return { @@ -201,19 +201,19 @@ export const genActionStyle: GenerateStyle = (token: AlertToken): CS cursor: 'pointer', [`${iconCls}-close`]: { - color: colorAction, + color: colorIcon, transition: `color ${duration}`, '&:hover': { - color: colorActionHover, + color: colorIconHover, }, }, }, '&-close-text': { - color: colorAction, + color: colorIcon, transition: `color ${duration}`, '&:hover': { - color: colorActionHover, + color: colorIconHover, }, }, }, diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index cdfcd6c123..a8a9a4a130 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -183,7 +183,7 @@ const genPrimaryButtonStyle: GenerateStyle = token => ({ color: token.colorTextLightSolid, backgroundColor: token.colorPrimary, - boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorPrimaryOutline}`, + boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`, ...genHoverActiveButtonStyle( { @@ -376,11 +376,11 @@ const genSizeLargeButtonStyle: GenerateStyle = token => { // ============================== Export ============================== export default genComponentStyleHook('Button', token => { - const { buttonColorBgTextHover, buttonColorBgTextActive, controlTmpOutline } = token; + const { controlTmpOutline, colorTextQuaternary, colorTextTertiary } = token; const buttonToken = mergeToken(token, { - colorBgTextHover: buttonColorBgTextHover, - colorBgTextActive: buttonColorBgTextActive, + colorBgTextHover: colorTextQuaternary, + colorBgTextActive: colorTextTertiary, colorOutlineDefault: controlTmpOutline, }); diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 947fa48121..3676718012 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -193,12 +193,12 @@ const genCardMetaStyle: GenerateStyle = (token): CSSObject => ({ // ============================== Inner ============================== const genCardTypeInnerStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingBase, colorBgContainerSecondary, cardInnerHeadPadding } = token; + const { componentCls, cardPaddingBase, colorFillAlter, cardInnerHeadPadding } = token; return { [`${componentCls}-head`]: { padding: `0 ${cardPaddingBase}px`, - background: colorBgContainerSecondary, + background: colorFillAlter, '&-title': { padding: `${cardInnerHeadPadding}px 0`, diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx index 764968e04e..842d2ecd9c 100644 --- a/components/collapse/style/index.tsx +++ b/components/collapse/style/index.tsx @@ -238,7 +238,7 @@ export default genComponentStyleHook('Collapse', token => { const collapseToken = mergeToken(token, { collapseContentBg: token.colorBgContainer, collapseContentPadding: token.padding, - collapseHeaderBg: token.colorBgContainerSecondary, + collapseHeaderBg: token.colorFillAlter, collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, collapsePanelBorderRadius: token.radiusBase, }); diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index fe15d23ae0..6e40a1b69c 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -315,7 +315,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { button: { padding: 0, - color: token.colorAction, + color: token.colorIcon, lineHeight: `${token.pickerTextHeight}px`, background: 'transparent', border: 0, @@ -328,7 +328,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { fontSize: token.fontSize, '&:hover': { - color: token.colorActionHover, + color: token.colorIconHover, }, }, @@ -788,7 +788,7 @@ const genPickerStatusStyle: GenerateStyle = token => { mergeToken(token, { inputBorderActiveColor: token.colorError, inputBorderHoverColor: token.colorError, - colorPrimaryOutline: token.colorErrorOutline, + controlOutline: token.colorErrorOutline, }), ), }, @@ -809,7 +809,7 @@ const genPickerStatusStyle: GenerateStyle = token => { mergeToken(token, { inputBorderActiveColor: token.colorWarning, inputBorderHoverColor: token.colorWarning, - colorPrimaryOutline: token.colorWarningOutline, + controlOutline: token.colorWarningOutline, }), ), }, diff --git a/components/descriptions/style/index.tsx b/components/descriptions/style/index.tsx index c17218f108..483d407f49 100644 --- a/components/descriptions/style/index.tsx +++ b/components/descriptions/style/index.tsx @@ -184,7 +184,7 @@ const genDescriptionStyles: GenerateStyle = (token: Descripti }; // ============================== Export ============================== export default genComponentStyleHook('Descriptions', token => { - const descriptionsBg = token.colorBgContainerSecondary; + const descriptionsBg = token.colorFillAlter; const descriptionsTitleMarginBottom = token.fontSizeSM * token.lineHeightSM; const descriptionsExtraColor = token.colorText; const descriptionsSmallPadding = `${token.paddingXS}px ${token.padding}px`; diff --git a/components/drawer/style/index.tsx b/components/drawer/style/index.tsx index 70a523780e..f74e4223b2 100644 --- a/components/drawer/style/index.tsx +++ b/components/drawer/style/index.tsx @@ -87,7 +87,7 @@ const genBaseStyle: GenerateStyle = (token: DrawerToken): CSSObject [`${componentCls}-close`]: { display: 'inline-block', marginInlineEnd: token.marginSM, - color: token.colorAction, + color: token.colorIcon, fontWeight: token.fontWeightStrong, fontSize: fontSizeLG, fontStyle: 'normal', @@ -103,7 +103,7 @@ const genBaseStyle: GenerateStyle = (token: DrawerToken): CSSObject textRendering: 'auto', [`&:focus, &:hover`]: { - color: token.colorActionHover, + color: token.colorIconHover, textDecoration: 'none', }, }, diff --git a/components/form/style/index.tsx b/components/form/style/index.tsx index c941bbfe65..1784352dca 100644 --- a/components/form/style/index.tsx +++ b/components/form/style/index.tsx @@ -55,7 +55,7 @@ const resetForm = (token: AliasToken): CSSObject => ({ input[type='radio']:focus, input[type='checkbox']:focus`]: { outline: 0, - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, }, // Adjust output element diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index 6409db2ef1..4296f400d0 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -204,7 +204,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe borderInlineStart: `${controlLineWidth}px ${controlLineType} ${colorBorder}`, transition: `all ${motionDurationFast} linear`, '&:active': { - background: token.colorBgContainerSecondary, + background: token.colorFillAlter, }, // Hover diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index 12222aa096..0fc84c45c6 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -36,7 +36,7 @@ export const genHoverStyle = (token: InputToken): CSSObject => ({ export const genActiveStyle = (token: InputToken) => ({ borderColor: token.inputBorderHoverColor, - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, borderInlineEndWidth: token.controlLineWidth, outline: 0, }); @@ -81,7 +81,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => { mergeToken(token, { inputBorderActiveColor: colorError, inputBorderHoverColor: colorError, - colorPrimaryOutline: colorErrorOutline, + controlOutline: colorErrorOutline, }), ), }, @@ -100,7 +100,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => { mergeToken(token, { inputBorderActiveColor: colorWarning, inputBorderHoverColor: colorWarning, - colorPrimaryOutline: colorWarningOutline, + controlOutline: colorWarningOutline, }), ), }, @@ -247,7 +247,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { fontWeight: 'normal', fontSize: token.fontSize, textAlign: 'center', - backgroundColor: token.colorBgContainerSecondary, + backgroundColor: token.colorFillAlter, border: `${token.controlLineWidth}px ${token.controlLineType} ${token.colorBorder}`, borderRadius: token.controlRadius, transition: `all ${token.motionDurationSlow}`, @@ -515,7 +515,7 @@ const genAllowClearStyle = (token: InputToken): CSSObject => { // ========================= Input ========================= [`.${prefixCls}-clear-icon`]: { margin: 0, - color: token.colorAction, + color: token.colorIcon, fontSize: token.fontSizeIcon, verticalAlign: -1, // https://github.com/ant-design/ant-design/pull/18151 @@ -561,8 +561,8 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { inputAffixPadding, colorTextSecondary, motionDurationSlow, - colorAction, - colorActionHover, + colorIcon, + colorIconHover, iconCls, } = token; @@ -637,12 +637,12 @@ const genAffixStyle: GenerateStyle = (token: InputToken) => { // password [`${iconCls}.${prefixCls}-password-icon`]: { - color: colorAction, + color: colorIcon, cursor: 'pointer', transition: `all ${motionDurationSlow}`, '&:hover': { - color: colorActionHover, + color: colorIconHover, }, }, diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index 8320a6abad..f84d2733ee 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -72,7 +72,7 @@ const getBaseStyle: GenerateStyle = token => { lineHeight, paddingXS, padding, - colorBorderSecondary, + colorSplit, lineWidth, iconCls, zIndexPopup, @@ -182,7 +182,7 @@ const getBaseStyle: GenerateStyle = token => { [`${componentCls}-item-divider`]: { overflow: 'hidden', lineHeight: 0, - borderColor: colorBorderSecondary, + borderColor: colorSplit, borderStyle: lineType, borderTopWidth: lineWidth, marginBlock: lineWidth, @@ -398,12 +398,12 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul colorError, colorTextDisabled, colorErrorHover, - colorErrorOutline, + colorErrorBg, colorText, colorTextLightSolid, colorTextSecondary, colorBgContainer, - colorBgContainerSecondary, + colorFillAlter, controlHeightLG, fontSize, controlItemBgActive, @@ -430,7 +430,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul themeColorTextSecondary: colorTextSecondary, themeColorTextSelect: colorPrimary, themeColorBg: colorBgContainer, - themeColorBgSecondary: colorBgContainerSecondary, + themeColorBgSecondary: colorFillAlter, themeColorBgActive: controlItemBgActive, themeColorBgSelect: controlItemBgActive, themeInkBarWidth: lineWidthBold + lineWidth, @@ -444,8 +444,8 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul themeColorDangerText: colorError, themeColorDangerTextHover: colorError, themeColorDangerTextSelect: colorError, - themeColorDangerBgActive: colorErrorOutline, - themeColorDangerBgSelect: colorErrorOutline, + themeColorDangerBgActive: colorErrorBg, + themeColorDangerBgSelect: colorErrorBg, }); const menuDarkToken = mergeToken(menuToken, { diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index ae351a297c..03dd4dd2bc 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -368,7 +368,7 @@ export default genComponentStyleHook('Modal', token => { modalFooterPaddingHorizontal: token.padding, modalFooterBorderWidth: token.controlLineWidth, modalConfirmTitleFontSize: token.fontSizeLG, - modalIconHoverColor: token.colorActionHover, + modalIconHoverColor: token.colorIconHover, modalConfirmIconSize: token.fontSize * token.lineHeight, }); return [ diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 84fa3c019e..6f0d73f2e4 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -222,11 +222,11 @@ const genNotificationStyle: GenerateStyle = token => { position: 'absolute', top: token.notificationPaddingVertical, insetInlineEnd: token.notificationPaddingHorizontal, - color: token.colorAction, + color: token.colorIcon, outline: 'none', '&:hover': { - color: token.colorActionHover, + color: token.colorIconHover, }, }, diff --git a/components/pagination/style/index.tsx b/components/pagination/style/index.tsx index d93fe0e099..472854dbab 100644 --- a/components/pagination/style/index.tsx +++ b/components/pagination/style/index.tsx @@ -222,7 +222,7 @@ const genPaginationSimpleStyle: GenerateStyle = toke '&:focus': { borderColor: token.colorPrimaryHover, - boxShadow: `${token.inputOutlineOffset} 0 ${token.controlOutlineWidth} ${token.colorPrimaryOutline}`, + boxShadow: `${token.inputOutlineOffset} 0 ${token.controlOutlineWidth} ${token.controlOutline}`, }, '&[disabled]': { diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx index 913974bcab..a13eb2611f 100644 --- a/components/progress/style/index.tsx +++ b/components/progress/style/index.tsx @@ -259,7 +259,7 @@ export default genComponentStyleHook('Progress', token => { progressLineRadius: 100, // magic for capsule shape, should be a very large number progressInfoTextColor: token.colorText, progressDefaultColor: token.colorInfo, - progressRemainingColor: token.colorBgContent, + progressRemainingColor: token.colorFillSecondary, progressStepMarginInlineEnd, progressStepMinWidth: progressStepMarginInlineEnd, progressActiveMotionDuration: '2.4s', diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 45760ac4dd..2e2abd3a2e 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -463,7 +463,7 @@ export default genComponentStyleHook('Radio', token => { fontSize, lineHeight, fontSizeLG, - colorPrimaryOutline, + controlOutline, colorPrimaryHover, colorPrimaryActive, colorText, @@ -473,7 +473,7 @@ export default genComponentStyleHook('Radio', token => { } = token; // Radio - const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${colorPrimaryOutline}`; + const radioFocusShadow = `0 0 0 ${controlOutlineWidth}px ${controlOutline}`; const radioButtonFocusShadow = radioFocusShadow; const radioSize = fontSizeLG; diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 83dedcc560..c99b335c57 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -123,13 +123,13 @@ const genRateStyle: GenerateStyle = token => { // ============================== Export ============================== export default genComponentStyleHook('Rate', token => { - const { colorBgFillTmp } = token; + const { colorFillContent } = token; const rateToken = mergeToken(token, { rateStarColor: token['yellow-6'], rateStarSize: token.controlHeightLG * 0.5, rateStarHoverScale: 'scale(1.1)', - defaultColor: colorBgFillTmp, + defaultColor: colorFillContent, }); return [genRateStyle(rateToken)]; }); diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index a5dffe5b2e..2d44e09b4f 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -79,7 +79,7 @@ const genBaseStyle: GenerateStyle = (token): CSSObject => { [`${componentCls} ${componentCls}-content`]: { marginTop: paddingLG, padding: `${paddingLG}px ${padding * 2.5}px`, - backgroundColor: token.colorBgContainerSecondary, + backgroundColor: token.colorFillAlter, }, [`${componentCls} ${componentCls}-extra`]: { diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index f81aadabca..52ac7c7f2f 100644 --- a/components/segmented/style/index.tsx +++ b/components/segmented/style/index.tsx @@ -3,12 +3,7 @@ import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; import { resetComponent } from '../../style'; -export interface ComponentToken { - // FIXME: need to be removed - bgColor: string; - bgColorHover: string; - bgColorSelected: string; -} +export interface ComponentToken {} interface SegmentedToken extends FullToken<'Segmented'> { segmentedPaddingHorizontal: number; @@ -16,6 +11,9 @@ interface SegmentedToken extends FullToken<'Segmented'> { segmentedContainerPadding: number; labelColor: string; labelColorHover: string; + bgColor: string; + bgColorHover: string; + bgColorSelected: string; } // ============================== Mixins ============================== @@ -168,23 +166,26 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) }; // ============================== Export ============================== -export default genComponentStyleHook( - 'Segmented', - token => { - const { lineWidthBold, controlLineWidth, colorTextLabel, colorText } = token; +export default genComponentStyleHook('Segmented', token => { + const { + lineWidthBold, + controlLineWidth, + colorTextLabel, + colorText, + colorFillSecondary, + colorFill, + colorBgContainer, + } = token; - const segmentedToken = mergeToken(token, { - segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth, - segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth, - segmentedContainerPadding: lineWidthBold, - labelColor: colorTextLabel, - labelColorHover: colorText, - }); - return [genSegmentedStyle(segmentedToken)]; - }, - ({ segmentedBgColor, segmentedBgColorActive, segmentedBgColorHover }) => ({ - bgColor: segmentedBgColor, - bgColorHover: segmentedBgColorHover, - bgColorSelected: segmentedBgColorActive, - }), -); + const segmentedToken = mergeToken(token, { + segmentedPaddingHorizontal: token.controlPaddingHorizontal - controlLineWidth, + segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - controlLineWidth, + segmentedContainerPadding: lineWidthBold, + labelColor: colorTextLabel, + labelColorHover: colorText, + bgColor: colorFillSecondary, + bgColorHover: colorFill, + bgColorSelected: colorBgContainer, + }); + return [genSegmentedStyle(segmentedToken)]; +}); diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 37a4197cc4..eeef3df8a0 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -297,7 +297,7 @@ const genSelectStyle: GenerateStyle = token => { componentCls, mergeToken(token, { borderHoverColor: token.colorPrimaryHover, - outlineColor: token.colorPrimaryOutline, + outlineColor: token.controlOutline, }), ), genStatusStyle( diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index bc8fb7469f..d0b3215bf9 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -93,7 +93,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { marginTop: FIXED_ITEM_MARGIN, marginBottom: FIXED_ITEM_MARGIN, lineHeight: `${selectItemHeight - token.controlLineWidth * 2}px`, - background: token.colorBgContent, + background: token.colorFillSecondary, border: `${token.controlLineWidth}px solid ${token.colorSplit}`, borderRadius: token.controlRadius, cursor: 'default', @@ -122,7 +122,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { ...resetIcon(), display: 'inline-block', - color: token.colorAction, + color: token.colorIcon, fontWeight: 'bold', fontSize: 10, lineHeight: 'inherit', @@ -133,7 +133,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }, '&:hover': { - color: token.colorActionHover, + color: token.colorIconHover, }, }, }, diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx index f6e73c7f99..c5c4a9df0e 100644 --- a/components/skeleton/style/index.tsx +++ b/components/skeleton/style/index.tsx @@ -363,10 +363,10 @@ export default genComponentStyleHook( return [genBaseStyle(skeletonToken)]; }, token => { - const { colorBgFillTmp, colorTextPlaceholder } = token; + const { colorFillContent, colorTextPlaceholder } = token; return { - color: colorBgFillTmp, + color: colorFillContent, colorGradientEnd: colorTextPlaceholder, }; }, diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index bc462bf3bf..505f1c520f 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -34,7 +34,7 @@ const genBaseStyle: GenerateStyle = token => { dotSize, marginFull, marginPart, - colorBgContentHover, + colorFillContentHover, antCls, } = token; @@ -55,7 +55,7 @@ const genBaseStyle: GenerateStyle = token => { [`${componentCls}-rail`]: { position: 'absolute', - backgroundColor: token.colorBgContent, + backgroundColor: token.colorFillSecondary, borderRadius: token.controlRadius, transition: `background-color ${token.motionDurationSlow}`, }, @@ -96,7 +96,7 @@ const genBaseStyle: GenerateStyle = token => { '&:hover': { [`${componentCls}-rail`]: { - backgroundColor: colorBgContentHover, + backgroundColor: colorFillContentHover, }, [`${componentCls}-track`]: { @@ -104,7 +104,7 @@ const genBaseStyle: GenerateStyle = token => { }, [`${componentCls}-dot`]: { - borderColor: colorBgContentHover, + borderColor: colorFillContentHover, }, [`${componentCls}-handle${antCls}-tooltip-open`]: { @@ -168,7 +168,7 @@ const genBaseStyle: GenerateStyle = token => { cursor: 'not-allowed', [`${componentCls}-rail`]: { - backgroundColor: `${token.colorBgContent} !important`, + backgroundColor: `${token.colorFillSecondary} !important`, }, [`${componentCls}-track`]: { diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx index ddbb6b3f75..f04fc02c48 100644 --- a/components/switch/style/index.tsx +++ b/components/switch/style/index.tsx @@ -165,7 +165,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { }, [`&${token.componentCls}-checked:focus-visible`]: { - boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.colorPrimaryOutline}`, + boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, }, '&:focus:hover': { diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 667427d082..bd5d112233 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -233,19 +233,19 @@ export default genComponentStyleHook('Table', token => { paddingXS, paddingSM, controlHeight, - colorBgContainerSecondary, - colorAction, - colorActionHover, + colorFillAlter, + colorIcon, + colorIconHover, opacityLoading, colorBgContainer, - colorBgContent, + colorFillSecondary, radiusBase, - colorBgFillTmp, + colorFillContent, controlInteractiveSize: checkboxSize, } = token; - const baseColorAction = new TinyColor(colorAction); - const baseColorActionHover = new TinyColor(colorActionHover); + const baseColorAction = new TinyColor(colorIcon); + const baseColorActionHover = new TinyColor(colorIconHover); const tableSelectedRowBg = controlItemBgActive; const zIndexTableFixed: number = 2; @@ -263,12 +263,12 @@ export default genComponentStyleHook('Table', token => { tablePaddingHorizontalSmall: paddingXS, tableBorderColor: colorSplit, tableHeaderTextColor: colorTextHeading, - tableHeaderBg: colorBgContainerSecondary, + tableHeaderBg: colorFillAlter, tableFooterTextColor: colorTextHeading, - tableFooterBg: colorBgContainerSecondary, + tableFooterBg: colorFillAlter, tableHeaderCellSplitColor: colorSplit, - tableHeaderSortBg: colorBgContent, - tableHeaderSortHoverBg: colorBgFillTmp, + tableHeaderSortBg: colorFillSecondary, + tableHeaderSortHoverBg: colorFillContent, tableHeaderIconColor: baseColorAction .clone() .setAlpha(baseColorAction.getAlpha() * opacityLoading) @@ -277,11 +277,11 @@ export default genComponentStyleHook('Table', token => { .clone() .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) .toRgbString(), - tableBodySortBg: colorBgContainerSecondary, - tableFixedHeaderSortActiveBg: colorBgContent, - tableHeaderFilterActiveBg: colorBgFillTmp, + tableBodySortBg: colorFillAlter, + tableFixedHeaderSortActiveBg: colorFillSecondary, + tableHeaderFilterActiveBg: colorFillContent, tableFilterDropdownBg: colorBgContainer, - tableRowHoverBg: colorBgContainerSecondary, + tableRowHoverBg: colorFillAlter, tableSelectedRowBg, tableSelectedRowHoverBg: controlItemBgActiveHover, zIndexTableFixed, @@ -291,7 +291,7 @@ export default genComponentStyleHook('Table', token => { tableSelectionColumnWidth: controlHeight, tableExpandIconBg: colorBgContainer, tableExpandColumnWidth: checkboxSize + 2 * token.padding, - tableExpandedRowBg: colorBgContainerSecondary, + tableExpandedRowBg: colorFillAlter, // Dropdown tableFilterDropdownWidth: 120, diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx index 8743472f1e..b5ce260f22 100644 --- a/components/tabs/style/index.tsx +++ b/components/tabs/style/index.tsx @@ -854,7 +854,7 @@ export default genComponentStyleHook( tabsCardHeight, tabsCardGutter: token.marginXXS / 2, tabsHorizontalGutter: token.marginXL, - tabsCardHeadBackground: token.colorBgContainerSecondary, + tabsCardHeadBackground: token.colorFillAlter, dropdownEdgeChildVerticalPadding: token.paddingXXS, tabsActiveTextShadow: '0 0 0.25px currentcolor', tabsDropdownHeight: 200, diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index 6840580647..7767e5f4b8 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -147,7 +147,7 @@ export default genComponentStyleHook('Tag', token => { const tagFontSize = token.fontSizeSM; const tagLineHeight = tagHeight - controlLineWidth * 2; - const tagDefaultBg = token.colorBgContainerSecondary; + const tagDefaultBg = token.colorFillAlter; const tagDefaultColor = token.colorText; const tagToken = mergeToken(token, { diff --git a/components/theme/interface.ts b/components/theme/interface.ts index eb741c8b18..59274b2c0f 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -204,16 +204,39 @@ export interface SeedToken extends PresetColorType { opacityImage: number; } -export interface ColorMapToken { +export interface TextMapToken { + colorText: string; + colorTextSecondary: string; + colorTextTertiary: string; + colorTextQuaternary: string; +} + +export interface BgMapToken { + // 作为比较重的描边或者填充内容 + colorFill: string; + // 表达 选中态，或者作为弱一级的实色 border + colorFillSecondary: string; + // 另外一种 hover 色 或者禁用的背景色 + // 用于表达选中态或用于与区分 BgComponent 区分 + colorFillTertiary: string; + colorFillQuaternary: string; + // Container 类型 + colorBgContainer: string; + colorBgElevated: string; + colorBgLayout: string; +} + +export interface ColorMapToken extends BgMapToken, TextMapToken { // Color - colorPrimary: string; - colorPrimaryHover: string; - colorPrimaryBg: string; - colorPrimaryBgHover: string; - colorPrimaryActive: string; - colorPrimaryBorder: string; // primary[2] - colorPrimaryBorderHover: string; - colorPrimaryOutline: string; + colorPrimaryBg: string; // 1 + colorPrimaryBgHover: string; // 2 + colorPrimaryBorder: string; // 3 + colorPrimaryBorderHover: string; // 4 + colorPrimaryHover: string; // 5 + colorPrimary: string; // 6 + colorPrimaryActive: string; // 7 + colorPrimaryText: string; // 8 + colorPrimaryTextHover: string; // 9 colorSuccess: string; colorSuccessBorder: string; @@ -224,63 +247,16 @@ export interface ColorMapToken { colorWarningActive: string; colorWarningBorder: string; colorWarningBg: string; - colorWarningOutline: string; colorError: string; colorErrorHover: string; colorErrorActive: string; colorErrorBorder: string; colorErrorBg: string; - colorErrorOutline: string; colorInfo: string; colorInfoBorder: string; colorInfoBg: string; - - /** Color of layout background */ - colorBgLayout: string; - colorBgContent: string; - /** Color of popup background */ - colorBgElevated: string; - /** Color of component background */ - colorBgContainer: string; - - colorBgContentHover: string; - colorBgContainerSecondary: string; - colorBgContainerDisabled: string; - - colorBorder: string; - colorBorderBg: string; - colorBorderSecondary: string; - colorSplit: string; - - // Color - colorText: string; - colorTextSecondary: string; - colorTextDisabled: string; - colorTextHeading: string; - colorTextLabel: 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; - - colorBgMask: string; - colorBgItemHover: string; - colorBgFillTmp: string; - colorBgTooltipTmp: string; - - // FIXME: should be removed - buttonColorBgTextHover: string; - buttonColorBgTextActive: string; - segmentedBgColor: string; - segmentedBgColorHover: string; - segmentedBgColorActive: string; } export interface CommonMapToken { @@ -332,11 +308,43 @@ export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, Commo // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 export interface AliasToken extends MapToken { - /** Placeholder text color */ + // Background + colorFillSecondary: string; + colorFillContentHover: string; + colorFillAlter: string; + colorBgContainerDisabled: string; + + colorBgMask: string; + colorBgSpotlight: string; + colorFillContent: string; + + // Border + colorBorder: string; + colorBorderBg: string; + colorBorderSecondary: string; + colorSplit: string; + + // Text colorTextPlaceholder: string; + colorTextDisabled: string; + colorTextHeading: string; + colorTextLabel: string; + + /** Weak action. Such as `allowClear` or Alert close button */ + colorIcon: string; + /** Weak action hover color. Such as `allowClear` or Alert close button */ + colorIconHover: string; + + colorLink: string; + colorLinkHover: string; + colorLinkActive: string; colorHighlight: string; + controlOutline: string; + colorWarningOutline: string; + colorErrorOutline: string; + // Font fontSizeSM: number; fontSize: number; diff --git a/components/theme/themes/IPalettes.ts b/components/theme/themes/IPalettes.ts index 2d5f410e47..f22ee218fe 100644 --- a/components/theme/themes/IPalettes.ts +++ b/components/theme/themes/IPalettes.ts @@ -1,5 +1,6 @@ +import type { BgMapToken, TextMapToken } from 'antd/es/theme/interface'; + export interface PrimaryPalettes { - 0: string; 1: string; 2: string; 3: string; @@ -7,6 +8,8 @@ export interface PrimaryPalettes { 5: string; 6: string; 7: string; + 8: string; + 9: string; } export interface SuccessPalettes { @@ -37,50 +40,10 @@ export interface InfoPalettes { 6: string; } -export interface TextAlphaPalettes { - 85: string; - 65: string; - 45: string; - 30: string; - 25: string; - // FIXME: 只有 Popover 用了 - 'light-75': string; - - // 从 12 往下基本上就是偏背景和装饰性元素了 - 12: string; - // 另外一种 hover 色 或者禁用的背景色 - 8: string; - // 不透明度叠加色或文本色强化 - 4: string; - // 文本 hover 色 - 3: string; -} - -export interface BgPalettes { - // 作为比较重的描边或者填充内容 - 26: string; - // 表达 选中态，或者作为弱一级的实色 border - 19: string; - // 用于表达选中态或用于与区分 component 区分 - 15: string; - // 8 是卡片容器底色 - 8: string; - // Container 类型 - // 12 是 elevated 模式 - 12: string; - // 0 是 base 模式 - 0: string; - // FIXME: 亮色需要额外增加的色彩序列 - 'light-12'?: string; - 'light-2'?: string; - 'light-10'?: string; - base: string; -} - export type GeneratePrimaryPalettes = (primaryBaseColor: string) => PrimaryPalettes; export type GenerateSuccessPalettes = (successBaseColor: string) => SuccessPalettes; export type GenerateWarningPalettes = (warningBaseColor: string) => WarningPalettes; export type GenerateErrorPalettes = (errorBaseColor: string) => ErrorPalettes; export type GenerateInfoPalettes = (infoBaseColor: string) => InfoPalettes; -export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextAlphaPalettes; -export type GenerateBgPalettes = (bgBaseColor: string) => BgPalettes; +export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextMapToken; +export type GenerateBgPalettes = (bgBaseColor: string, textBaseColor: string) => BgMapToken; diff --git a/components/theme/themes/dark/palettes.ts b/components/theme/themes/dark/palettes.ts index 6dc7895fac..113683a4d2 100644 --- a/components/theme/themes/dark/palettes.ts +++ b/components/theme/themes/dark/palettes.ts @@ -1,19 +1,18 @@ import { generate } from '@ant-design/colors'; import type { - BgPalettes, - ErrorPalettes, - InfoPalettes, - PrimaryPalettes, - SuccessPalettes, - TextAlphaPalettes, - WarningPalettes, + GenerateBgPalettes, + GenerateErrorPalettes, + GenerateInfoPalettes, + GeneratePrimaryPalettes, + GenerateSuccessPalettes, + GenerateTextAlphaPalettes, + GenerateWarningPalettes, } from '../IPalettes'; import { getAlphaColor, getSolidColor } from './colorAlgorithm'; -export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalettes { +export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => { const primaryColors = generate(primaryBaseColor, { theme: 'dark' }); return { - 0: '#0e161f', 1: primaryColors[0], 2: primaryColors[1], 3: primaryColors[2], @@ -21,19 +20,21 @@ export function generatePrimaryPalettes(primaryBaseColor: string): PrimaryPalett 5: primaryColors[4], 6: primaryColors[5], 7: primaryColors[6], + 8: primaryColors[7], + 9: primaryColors[8], }; -} +}; -export function generateSuccessPalettes(successBaseColor: string): SuccessPalettes { +export const generateSuccessPalettes: GenerateSuccessPalettes = (successBaseColor: string) => { const successColors = generate(successBaseColor, { theme: 'dark' }); return { 1: successColors[0], 3: successColors[2], 6: successColors[5], }; -} +}; -export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes { +export const generateErrorPalettes: GenerateErrorPalettes = (errorBaseColor: string) => { const errorColors = generate(errorBaseColor, { theme: 'dark' }); return { 1: errorColors[0], @@ -42,9 +43,9 @@ export function generateErrorPalettes(errorBaseColor: string): ErrorPalettes { 6: errorColors[5], 7: errorColors[6], }; -} +}; -export function generateWarningPalettes(warningBaseColor: string): WarningPalettes { +export const generateWarningPalettes: GenerateWarningPalettes = (warningBaseColor: string) => { const warningColors = generate(warningBaseColor, { theme: 'dark' }); return { 1: warningColors[0], @@ -53,44 +54,34 @@ export function generateWarningPalettes(warningBaseColor: string): WarningPalett 6: warningColors[5], 7: warningColors[6], }; -} +}; -export function generateInfoPalettes(infoBaseColor: string): InfoPalettes { +export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string) => { const infoColors = generate(infoBaseColor, { theme: 'dark' }); return { 1: infoColors[0], 3: infoColors[2], 6: infoColors[5], }; -} +}; -export function generateBgPalettes(bgBaseColor: string): BgPalettes { - return { - 'light-2': getSolidColor(bgBaseColor, 2), - 'light-10': getSolidColor(bgBaseColor, 10), - 'light-12': getSolidColor(bgBaseColor, 12), - 26: getSolidColor(bgBaseColor, 26), - 19: getSolidColor(bgBaseColor, 19), - 15: getSolidColor(bgBaseColor, 15), - 12: getSolidColor(bgBaseColor, 12), - 8: getSolidColor(bgBaseColor, 8), - 0: getSolidColor(bgBaseColor, 0), - base: getSolidColor(bgBaseColor, 0), - }; -} +export const generateBgPalettes: GenerateBgPalettes = ( + bgBaseColor: string, + textBaseColor: string, +) => ({ + colorFill: getAlphaColor(textBaseColor, 18), + colorFillSecondary: getAlphaColor(textBaseColor, 12), + colorFillTertiary: getAlphaColor(textBaseColor, 8), + colorFillQuaternary: getAlphaColor(textBaseColor, 4), -export function generateTextAlphaPalettes(textBaseColor: string): TextAlphaPalettes { - return { - 85: getAlphaColor(textBaseColor, 0.85), - 'light-75': getAlphaColor(textBaseColor, 0.75), - 65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了 - 45: getAlphaColor(textBaseColor, 0.45), - 30: getAlphaColor(textBaseColor, 0.3), - 25: getAlphaColor(textBaseColor, 0.25), - // 从 12 往下基本上就是偏背景和装饰性元素了 - 12: getAlphaColor(textBaseColor, 0.12), - 8: getAlphaColor(textBaseColor, 0.08), - 4: getAlphaColor(textBaseColor, 0.04), - 3: getAlphaColor(textBaseColor, 0.03), - }; -} + colorBgElevated: getSolidColor(bgBaseColor, 12), + colorBgContainer: getSolidColor(bgBaseColor, 8), + colorBgLayout: getSolidColor(bgBaseColor, 0), +}); + +export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({ + colorText: getAlphaColor(textBaseColor, 0.85), + colorTextSecondary: getAlphaColor(textBaseColor, 0.65), + colorTextTertiary: getAlphaColor(textBaseColor, 0.45), + colorTextQuaternary: getAlphaColor(textBaseColor, 0.25), +}); diff --git a/components/theme/themes/default/palettes.ts b/components/theme/themes/default/palettes.ts index 82765cdbb1..68db0617c9 100644 --- a/components/theme/themes/default/palettes.ts +++ b/components/theme/themes/default/palettes.ts @@ -13,7 +13,6 @@ import { getAlphaColor, getSolidColor } from './colorAlgorithm'; export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => { const primaryColors = generate(primaryBaseColor); return { - 0: primaryBaseColor, 1: primaryColors[0], 2: primaryColors[1], 3: primaryColors[2], @@ -21,6 +20,8 @@ export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColo 5: primaryColors[4], 6: primaryColors[5], 7: primaryColors[6], + 8: primaryColors[7], + 9: primaryColors[8], }; }; @@ -64,29 +65,23 @@ export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string }; }; -export const generateBgPalettes: GenerateBgPalettes = (bgBaseColor: string) => ({ - 26: getSolidColor(bgBaseColor, 15), - 'light-2': getSolidColor(bgBaseColor, 2), - 'light-10': getSolidColor(bgBaseColor, 10), - 'light-12': getSolidColor(bgBaseColor, 12), - 19: getSolidColor(bgBaseColor, 6), - 15: getSolidColor(bgBaseColor, 4), - 12: getSolidColor(bgBaseColor, 0), - 8: getSolidColor(bgBaseColor, 0), - 0: getSolidColor(bgBaseColor, 4), - base: getSolidColor(bgBaseColor, 0), +export const generateBgPalettes: GenerateBgPalettes = ( + bgBaseColor: string, + textBaseColor: string, +) => ({ + colorFill: getAlphaColor(textBaseColor, 0.06), + colorFillSecondary: getAlphaColor(textBaseColor, 0.04), + colorFillTertiary: getAlphaColor(textBaseColor, 0.03), + colorFillQuaternary: getAlphaColor(textBaseColor, 0.02), + + colorBgLayout: getSolidColor(bgBaseColor, 4), + colorBgContainer: getSolidColor(bgBaseColor, 0), + colorBgElevated: getSolidColor(bgBaseColor, 0), }); export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({ - 85: getAlphaColor(textBaseColor, 0.85), - 'light-75': getAlphaColor(textBaseColor, 0.75), // 目前只有 Popover 用了 - 65: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了 - 45: getAlphaColor(textBaseColor, 0.45), - 30: getAlphaColor(textBaseColor, 0.25), - 25: getAlphaColor(textBaseColor, 0.25), - // 从 12 往下基本上就是偏背景和装饰性元素了 - 12: getAlphaColor(textBaseColor, 0.06), // 主要是 Split - 8: getAlphaColor(textBaseColor, 0.04), - 4: getAlphaColor(textBaseColor, 0.03), - 3: getAlphaColor(textBaseColor, 0.02), + colorText: getAlphaColor(textBaseColor, 0.85), + colorTextSecondary: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了 + colorTextTertiary: getAlphaColor(textBaseColor, 0.45), + colorTextQuaternary: getAlphaColor(textBaseColor, 0.25), }); diff --git a/components/theme/themes/shared/genColorMapToken.ts b/components/theme/themes/shared/genColorMapToken.ts index 0ccaf14eee..03e045dc5e 100644 --- a/components/theme/themes/shared/genColorMapToken.ts +++ b/components/theme/themes/shared/genColorMapToken.ts @@ -1,4 +1,3 @@ -import { TinyColor } from '@ctrl/tinycolor'; import type { ColorMapToken, SeedToken } from '../../interface'; import type { GenerateBgPalettes, @@ -47,86 +46,41 @@ export default function genColorMapToken( const warningColors = generateWarningPalettes(colorWarningBase); const errorColors = generateErrorPalettes(colorErrorBase); const infoColors = generateInfoPalettes(colorInfoBase); - const bgColors = generateBgPalettes(colorBgBase); + const bgColors = generateBgPalettes(colorBgBase, colorTextBase); const textColors = generateTextAlphaPalettes(colorTextBase); - const colorPrimary = primaryColors['6']; - const colorError = errorColors['5']; - const colorWarning = warningColors['6']; - const colorSuccess = successColors['6']; - const colorInfo = infoColors['6']; - return { - colorPrimary, - colorPrimaryHover: primaryColors['5'], - colorPrimaryBg: primaryColors['1'], - colorPrimaryBgHover: primaryColors['0'], - colorPrimaryActive: primaryColors['7'], - colorPrimaryBorder: primaryColors['3'], - colorPrimaryBorderHover: primaryColors['4'], - colorPrimaryOutline: new TinyColor(colorPrimary).setAlpha(0.2).toRgbString(), + ...bgColors, + ...textColors, - colorSuccess, - colorSuccessBg: successColors['1'], - colorSuccessBorder: successColors['3'], + colorPrimaryBg: primaryColors[1], + colorPrimaryBgHover: primaryColors[2], + colorPrimaryBorder: primaryColors[3], + colorPrimaryBorderHover: primaryColors[4], + colorPrimaryHover: primaryColors[5], + colorPrimary: primaryColors[6], + colorPrimaryActive: primaryColors[7], + colorPrimaryText: primaryColors[8], + colorPrimaryTextHover: primaryColors[9], - colorError, - colorErrorBg: errorColors['1'], - colorErrorBorder: errorColors['3'], - colorErrorHover: errorColors['5'], - colorErrorActive: errorColors['7'], - colorErrorOutline: new TinyColor(colorError).setAlpha(0.2).toRgbString(), + colorSuccessBg: successColors[1], + colorSuccessBorder: successColors[3], + colorSuccess: successColors[6], - colorWarning, - colorWarningBg: warningColors['1'], - colorWarningBorder: warningColors['3'], - colorWarningHover: warningColors['5'], - colorWarningActive: warningColors['7'], - colorWarningOutline: new TinyColor(colorWarning).setAlpha(0.2).toRgbString(), + colorErrorBg: errorColors[1], + colorErrorBorder: errorColors[3], + colorErrorHover: errorColors[5], + colorError: errorColors[6], + colorErrorActive: errorColors[7], - colorInfo, - colorInfoBg: infoColors['1'], - colorInfoBorder: infoColors['3'], + colorWarningBg: warningColors[1], + colorWarningBorder: warningColors[3], + colorWarningHover: warningColors[5], + colorWarning: warningColors[6], + colorWarningActive: warningColors[7], - colorLink: primaryColors['6'], - colorLinkHover: primaryColors['5'], - colorLinkActive: primaryColors['7'], - - // ============== Background ============== // - colorBgLayout: bgColors['0'], - colorBgElevated: bgColors['12'], - colorBgContainer: bgColors['8'], - colorBgContent: bgColors['15'], - - colorBgContentHover: bgColors['26'], - colorBgContainerSecondary: textColors['4'], - colorBgContainerDisabled: textColors['8'], - - colorBgMask: textColors['45'], - colorBgItemHover: textColors['8'], - colorBgFillTmp: textColors['12'], - colorBgTooltipTmp: textColors['85'], - - // ============== Split ============== // - colorBorder: bgColors['26'], - colorBorderSecondary: bgColors['19'], - colorBorderBg: bgColors.base, - colorSplit: textColors['12'], - - // ============== Text ============== // - colorText: textColors['85'], - colorTextHeading: textColors['85'], - colorTextSecondary: textColors['45'], - colorTextDisabled: textColors['25'], - colorTextLabel: textColors['65'], - - colorAction: textColors['45'], - colorActionHover: textColors['85'], - - buttonColorBgTextHover: textColors['3'], - buttonColorBgTextActive: textColors['4'], - segmentedBgColor: textColors['8'], - segmentedBgColorHover: textColors['12'], - segmentedBgColorActive: bgColors['8'], + colorInfoBg: infoColors[1], + colorInfoBorder: infoColors[3], + colorInfo: infoColors[6], }; } diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index cd6773cc60..e0ba3196e0 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -31,9 +31,38 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken const aliasToken: AliasToken = { ...mergedToken, - colorTextPlaceholder: mergedToken.colorTextDisabled, + colorLink: mergedToken.colorPrimary, + colorLinkHover: mergedToken.colorPrimaryHover, + colorLinkActive: mergedToken.colorPrimaryActive, + + // ============== Background ============== // + colorFillContent: mergedToken.colorFillSecondary, + colorFillContentHover: mergedToken.colorFill, + colorFillAlter: mergedToken.colorFillQuaternary, + colorBgContainerDisabled: mergedToken.colorFillTertiary, + + colorBgMask: mergedToken.colorTextTertiary, + colorBgSpotlight: mergedToken.colorText, + + // ============== Split ============== // + colorBorderBg: mergedToken.colorBgLayout, + colorBorder: mergedToken.colorFill, + colorBorderSecondary: mergedToken.colorFillSecondary, + colorSplit: mergedToken.colorFillSecondary, + + // ============== Text ============== // + colorTextPlaceholder: mergedToken.colorTextQuaternary, + colorTextDisabled: mergedToken.colorTextQuaternary, + colorTextHeading: mergedToken.colorText, + colorTextLabel: mergedToken.colorTextSecondary, colorHighlight: mergedToken.colorError, + colorIcon: mergedToken.colorTextTertiary, + colorIconHover: mergedToken.colorText, + + colorErrorOutline: mergedToken.colorErrorBg, + colorWarningOutline: mergedToken.colorWarningBg, + // Font fontSizeSM, fontSize: fontSizes[1], @@ -62,13 +91,16 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken // Checkbox size and expand icon size controlInteractiveSize: mergedToken.controlHeight / 2, - controlItemBgHover: mergedToken.colorBgItemHover, + controlItemBgHover: mergedToken.colorFillTertiary, controlItemBgActive: mergedToken.colorPrimaryBg, controlItemBgActiveHover: mergedToken.colorPrimaryBgHover, - controlItemBgActiveDisabled: mergedToken.colorTextDisabled, + controlItemBgActiveDisabled: mergedToken.colorTextQuaternary, + controlTmpOutline: mergedToken.colorFillQuaternary, + controlOutline: mergedToken.colorPrimaryBg, controlLineType: mergedToken.lineType, controlRadius: mergedToken.radiusBase, + fontWeightStrong: 600, opacityLoading: 0.65, @@ -121,8 +153,6 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken screenXXLMin: screenXXL, screenXXLMax: screenXXL - 1, - controlTmpOutline: mergedToken.colorBgContainerSecondary, - // FIXME: component box-shadow, should be removed boxShadowPopoverArrow: `3px 3px 7px rgba(0, 0, 0, 0.1)`, boxShadowPopoverArrowBottom: `2px 2px 5px rgba(0, 0, 0, 0.1)`, diff --git a/components/tooltip/style/index.tsx b/components/tooltip/style/index.tsx index 0b08835cb7..2961c47de0 100644 --- a/components/tooltip/style/index.tsx +++ b/components/tooltip/style/index.tsx @@ -135,9 +135,9 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul return [genTooltipStyle(TooltipToken), initZoomMotion(token, 'zoom-big-fast')]; }, - ({ zIndexPopupBase, colorBgTooltipTmp }) => ({ + ({ zIndexPopupBase, colorBgSpotlight }) => ({ zIndexPopup: zIndexPopupBase + 70, - colorBgDefault: colorBgTooltipTmp, + colorBgDefault: colorBgSpotlight, }), ); diff --git a/components/tree/style/index.tsx b/components/tree/style/index.tsx index 639c26b0c2..4f63523093 100644 --- a/components/tree/style/index.tsx +++ b/components/tree/style/index.tsx @@ -89,7 +89,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => }, '&-focused:not(:hover):not(&-active-focused)': { - background: token.colorPrimaryOutline, + background: token.controlOutline, }, // =================== Virtual List =================== @@ -282,7 +282,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => }, [`&${treeCls}-node-selected`]: { - backgroundColor: token.colorPrimaryOutline, + backgroundColor: token.controlOutline, }, // Icon diff --git a/components/upload/style/dragger.tsx b/components/upload/style/dragger.tsx index cee9abb437..06b1e1d7fc 100644 --- a/components/upload/style/dragger.tsx +++ b/components/upload/style/dragger.tsx @@ -11,7 +11,7 @@ const genDraggerStyle: GenerateStyle = token => { width: '100%', height: '100%', textAlign: 'center', - background: token.colorBgContainerSecondary, + background: token.colorFillAlter, border: `${token.controlLineWidth}px dashed ${token.colorBorder}`, borderRadius: token.radiusBase, cursor: 'pointer', diff --git a/components/upload/style/picture.tsx b/components/upload/style/picture.tsx index 072ad90b9f..348f347b5b 100644 --- a/components/upload/style/picture.tsx +++ b/components/upload/style/picture.tsx @@ -99,7 +99,7 @@ const genPictureCardStyle: GenerateStyle = token => { marginBottom: token.marginXS, textAlign: 'center', verticalAlign: 'top', - backgroundColor: token.colorBgContainerSecondary, + backgroundColor: token.colorFillAlter, border: `${token.controlLineWidth}px dashed ${token.colorBorder}`, borderRadius: token.radiusBase, cursor: 'pointer', @@ -206,7 +206,7 @@ const genPictureCardStyle: GenerateStyle = token => { [`${itemCls}-uploading`]: { [`&${itemCls}`]: { - backgroundColor: token.colorBgContainerSecondary, + backgroundColor: token.colorFillAlter, }, [`&::before, ${iconCls}-eye, ${iconCls}-download, ${iconCls}-delete`]: {