From 846742852875c8f3354dc0b12f0c22f5e21aabb9 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Sun, 5 Mar 2023 20:49:26 +0800 Subject: [PATCH] refactor: rename preset colors in token (#41071) * refactor: rename preset colors in Design Token * feat: rename preset color in token --- .dumi/theme/common/styles/Demo.tsx | 6 +++--- .dumi/theme/common/styles/Markdown.tsx | 2 +- .dumi/theme/slots/Content/index.tsx | 4 ++-- components/popover/style/index.tsx | 2 +- components/rate/style/index.tsx | 2 +- components/style/presetColor.tsx | 8 ++++---- components/theme/interface/index.ts | 7 ++++++- components/theme/interface/maps/index.ts | 3 ++- components/theme/interface/presetColors.ts | 9 ++++++++- components/theme/themes/dark/index.ts | 11 +++++++++-- components/theme/themes/default/index.ts | 13 ++++++++++--- 11 files changed, 47 insertions(+), 20 deletions(-) diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index 6f1d9a32d1..1266a87094 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -290,7 +290,7 @@ const GlobalDemoStyles: React.FC = () => { transition: transform 0.24s; &${iconCls}-check { - color: ${token['green-6']} !important; + color: ${token.green6} !important; font-weight: bold; } } @@ -342,11 +342,11 @@ const GlobalDemoStyles: React.FC = () => { } &-debug { - border-color: ${token['purple-3']}; + border-color: ${token.purple3}; } &-debug &-title a { - color: ${token['purple-6']}; + color: ${token.purple6}; } } diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 13a2040cd6..3a3a5875e6 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -340,7 +340,7 @@ export default () => { &:nth-child(3) { width: 22%; - color: ${token['magenta-7']}; + color: ${token.magenta7}; font-size: ${Math.max(token.fontSize - 1, 12)}px; } diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index d27dc2ae4c..27ed8186d2 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -57,10 +57,10 @@ const useStyle = () => { box-sizing: border-box; .toc-debug { - color: ${token['purple-6']}; + color: ${token.purple6}; &:hover { - color: ${token['purple-5']}; + color: ${token.purple5}; } } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 698ffccc8b..a86d49b180 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -109,7 +109,7 @@ const genColorStyle: GenerateStyle = (token) => { return { [componentCls]: PresetColors.map((colorKey: keyof PresetColorType) => { - const lightColor = token[`${colorKey}-6`]; + const lightColor = token[`${colorKey}6`]; return { [`&${componentCls}-${colorKey}`]: { '--antd-arrow-background-color': lightColor, diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index f899fda770..507f6cc050 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -126,7 +126,7 @@ export default genComponentStyleHook('Rate', (token) => { const { colorFillContent } = token; const rateToken = mergeToken(token, { - rateStarColor: token['yellow-6'], + rateStarColor: token.yellow6, rateStarSize: token.controlHeightLG * 0.5, rateStarHoverScale: 'scale(1.1)', defaultColor: colorFillContent, diff --git a/components/style/presetColor.tsx b/components/style/presetColor.tsx index 0704bd4f8e..67b1beacd8 100644 --- a/components/style/presetColor.tsx +++ b/components/style/presetColor.tsx @@ -22,10 +22,10 @@ export function genPresetColor>( genCss: GenCSS, ): CSSObject { return PresetColors.reduce((prev: CSSObject, colorKey: PresetColorKey) => { - const lightColor = token[`${colorKey}-1`]; - const lightBorderColor = token[`${colorKey}-3`]; - const darkColor = token[`${colorKey}-6`]; - const textColor = token[`${colorKey}-7`]; + const lightColor = token[`${colorKey}1`]; + const lightBorderColor = token[`${colorKey}3`]; + const darkColor = token[`${colorKey}6`]; + const textColor = token[`${colorKey}7`]; return { ...prev, diff --git a/components/theme/interface/index.ts b/components/theme/interface/index.ts index a63b53ca28..f010302503 100644 --- a/components/theme/interface/index.ts +++ b/components/theme/interface/index.ts @@ -9,7 +9,12 @@ export type OverrideToken = { export type GlobalToken = AliasToken & ComponentTokenMap; export { PresetColors } from './presetColors'; -export type { PresetColorType, ColorPalettes, PresetColorKey } from './presetColors'; +export type { + PresetColorType, + ColorPalettes, + LegacyColorPalettes, + PresetColorKey, +} from './presetColors'; export type { SeedToken } from './seeds'; export type { MapToken, diff --git a/components/theme/interface/maps/index.ts b/components/theme/interface/maps/index.ts index 1b780d7cf1..a938ec46a7 100644 --- a/components/theme/interface/maps/index.ts +++ b/components/theme/interface/maps/index.ts @@ -1,4 +1,4 @@ -import type { ColorPalettes } from '../presetColors'; +import type { ColorPalettes, LegacyColorPalettes } from '../presetColors'; import type { SeedToken } from '../seeds'; import type { SizeMapToken, HeightMapToken } from './size'; import type { ColorMapToken } from './colors'; @@ -24,6 +24,7 @@ export interface CommonMapToken extends StyleMapToken { export interface MapToken extends SeedToken, + LegacyColorPalettes, ColorPalettes, ColorMapToken, SizeMapToken, diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts index 2cff21512c..8439f0435d 100644 --- a/components/theme/interface/presetColors.ts +++ b/components/theme/interface/presetColors.ts @@ -20,6 +20,13 @@ export type PresetColorType = Record; type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10; -export type ColorPalettes = { +export type LegacyColorPalettes = { + /** + * @deprecated + */ [key in `${keyof PresetColorType}-${ColorPaletteKeyIndex}`]: string; }; + +export type ColorPalettes = { + [key in `${keyof PresetColorType}${ColorPaletteKeyIndex}`]: string; +}; diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts index 8c719fcb3e..4b6f5a4eb7 100644 --- a/components/theme/themes/dark/index.ts +++ b/components/theme/themes/dark/index.ts @@ -1,6 +1,12 @@ import { generate } from '@ant-design/colors'; import type { DerivativeFunc } from '@ant-design/cssinjs'; -import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; +import type { + ColorPalettes, + LegacyColorPalettes, + MapToken, + PresetColorType, + SeedToken, +} from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; import { generateColorPalettes, generateNeutralColorPalettes } from './colors'; @@ -13,6 +19,7 @@ const derivative: DerivativeFunc = (token, mapToken) => { return new Array(10).fill(1).reduce((prev, _, i) => { prev[`${colorKey}-${i + 1}`] = colors[i]; + prev[`${colorKey}${i + 1}`] = colors[i]; return prev; }, {}) as ColorPalettes; }) @@ -22,7 +29,7 @@ const derivative: DerivativeFunc = (token, mapToken) => { ...cur, }; return prev; - }, {} as ColorPalettes); + }, {} as ColorPalettes & LegacyColorPalettes); const mergedMapToken = mapToken ?? defaultAlgorithm(token); diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts index c8f3dbce7e..d558e2cf87 100644 --- a/components/theme/themes/default/index.ts +++ b/components/theme/themes/default/index.ts @@ -1,7 +1,13 @@ import { generate } from '@ant-design/colors'; import genControlHeight from '../shared/genControlHeight'; import genSizeMapToken from '../shared/genSizeMapToken'; -import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; +import type { + ColorPalettes, + LegacyColorPalettes, + MapToken, + PresetColorType, + SeedToken, +} from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; import genCommonMapToken from '../shared/genCommonMapToken'; @@ -15,8 +21,9 @@ export default function derivative(token: SeedToken): MapToken { return new Array(10).fill(1).reduce((prev, _, i) => { prev[`${colorKey}-${i + 1}`] = colors[i]; + prev[`${colorKey}${i + 1}`] = colors[i]; return prev; - }, {}) as ColorPalettes; + }, {}) as ColorPalettes & LegacyColorPalettes; }) .reduce((prev, cur) => { prev = { @@ -24,7 +31,7 @@ export default function derivative(token: SeedToken): MapToken { ...cur, }; return prev; - }, {} as ColorPalettes); + }, {} as ColorPalettes & LegacyColorPalettes); return { ...token,