refactor: rename preset colors in token (ant-design#41071)

* refactor: rename preset colors in Design Token

* feat: rename preset color in token

Author: MadCcc

.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};
           }
         }
 

.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;
               }
 

.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};
         }
       }
 

components/popover/style/index.tsx

@@ -109,7 +109,7 @@ const genColorStyle: GenerateStyle<PopoverToken> = (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,

components/rate/style/index.tsx

@@ -126,7 +126,7 @@ export default genComponentStyleHook('Rate', (token) => {
   const { colorFillContent } = token;
 
   const rateToken = mergeToken<RateToken>(token, {
-    rateStarColor: token['yellow-6'],
+    rateStarColor: token.yellow6,
     rateStarSize: token.controlHeightLG * 0.5,
     rateStarHoverScale: 'scale(1.1)',
     defaultColor: colorFillContent,

components/style/presetColor.tsx

@@ -22,10 +22,10 @@ export function genPresetColor<Token extends TokenWithCommonCls<AliasToken>>(
   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,

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,

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,

components/theme/interface/presetColors.ts

@@ -20,6 +20,13 @@ export type PresetColorType = Record<PresetColorKey, string>;
 
 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;
+};

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<SeedToken, MapToken> = (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<SeedToken, MapToken> = (token, mapToken) => {
         ...cur,
       };
       return prev;
-    }, {} as ColorPalettes);
+    }, {} as ColorPalettes & LegacyColorPalettes);
 
   const mergedMapToken = mapToken ?? defaultAlgorithm(token);