refacot: token update (#36912)

components/button/style/index.tsx

@@ -376,11 +376,11 @@ const genSizeLargeButtonStyle: GenerateStyle<ButtonToken> = token => {
 
 // ============================== Export ==============================
 export default genComponentStyleHook('Button', token => {
-  const { controlTmpOutline, colorTextQuaternary, colorTextTertiary } = token;
+  const { controlTmpOutline, colorFillQuaternary, colorFillTertiary } = token;
 
   const buttonToken = mergeToken<ButtonToken>(token, {
-    colorBgTextHover: colorTextQuaternary,
-    colorBgTextActive: colorTextTertiary,
+    colorBgTextHover: colorFillQuaternary,
+    colorBgTextActive: colorFillTertiary,
     colorOutlineDefault: controlTmpOutline,
   });
 

components/theme/interface.ts

@@ -205,23 +205,20 @@ export interface SeedToken extends PresetColorType {
   opacityImage: number;
 }
 
-export interface TextMapToken {
+export interface NeutralColorMapToken {
+  // Text
   colorText: string;
   colorTextSecondary: string;
   colorTextTertiary: string;
   colorTextQuaternary: string;
-}
 
-export interface BgMapToken {
-  // 作为比较重的描边或者填充内容
+  // Fill
   colorFill: string;
-  // 表达 选中态，或者作为弱一级的实色 border
   colorFillSecondary: string;
-  // 另外一种 hover 色 或者禁用的背景色
-  // 用于表达选中态或用于与区分 BgComponent 区分
   colorFillTertiary: string;
   colorFillQuaternary: string;
-  // Container 类型
+
+  // Background
   colorBgContainer: string;
   colorBgElevated: string;
   colorBgLayout: string;
@@ -232,7 +229,7 @@ export interface BgMapToken {
   colorSplit: string;
 }
 
-export interface ColorMapToken extends BgMapToken, TextMapToken {
+export interface ColorMapToken extends NeutralColorMapToken {
   // Primary
   colorPrimaryBg: string; // 1
   colorPrimaryBgHover: string; // 2

components/theme/themes/IPalettes.ts

@@ -1,4 +1,4 @@
-import type { BgMapToken, TextMapToken } from 'antd/es/theme/interface';
+import type { NeutralColorMapToken } from 'antd/es/theme/interface';
 
 export interface ColorPalettes {
   1: string;
@@ -13,5 +13,7 @@ export interface ColorPalettes {
 }
 
 export type GenerateColorPalettes = (baseColor: string) => ColorPalettes;
-export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextMapToken;
-export type GenerateBgPalettes = (bgBaseColor: string, textBaseColor: string) => BgMapToken;
+export type GenerateNeutralColorPalettes = (
+  bgBaseColor: string,
+  textBaseColor: string,
+) => NeutralColorMapToken;

components/theme/themes/dark/index.ts

@@ -3,7 +3,7 @@ import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
-import { generateBgPalettes, generateColorPalettes, generateTextAlphaPalettes } from './palettes';
+import { generateColorPalettes, generateNeutralColorPalettes } from './palettes';
 
 export default function derivative(token: SeedToken): MapToken {
   const colorPalettes = Object.keys(defaultPresetColors)
@@ -36,8 +36,7 @@ export default function derivative(token: SeedToken): MapToken {
       { ...token, colorBgBase, colorTextBase },
       {
         generateColorPalettes,
-        generateBgPalettes,
-        generateTextAlphaPalettes,
+        generateNeutralColorPalettes,
       },
     ),
 

components/theme/themes/dark/palettes.ts

@@ -1,9 +1,5 @@
 import { generate } from '@ant-design/colors';
-import type {
-  GenerateBgPalettes,
-  GenerateColorPalettes,
-  GenerateTextAlphaPalettes,
-} from '../IPalettes';
+import type { GenerateColorPalettes, GenerateNeutralColorPalettes } from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 
 export const generateColorPalettes: GenerateColorPalettes = (baseColor: string) => {
@@ -21,10 +17,16 @@ export const generateColorPalettes: GenerateColorPalettes = (baseColor: string)
   };
 };
 
-export const generateBgPalettes: GenerateBgPalettes = (
+export const generateNeutralColorPalettes: GenerateNeutralColorPalettes = (
   bgBaseColor: string,
   textBaseColor: string,
 ) => ({
+  colorText: getAlphaColor(textBaseColor, 0.85),
+  // v5 should be 0.65
+  colorTextSecondary: getAlphaColor(textBaseColor, 0.45),
+  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
+  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
+
   colorFill: getAlphaColor(textBaseColor, 0.18),
   colorFillSecondary: getAlphaColor(textBaseColor, 0.12),
   colorFillTertiary: getAlphaColor(textBaseColor, 0.08),
@@ -36,12 +38,5 @@ export const generateBgPalettes: GenerateBgPalettes = (
 
   colorBorder: getSolidColor(bgBaseColor, 26),
   colorBorderSecondary: getSolidColor(bgBaseColor, 19),
-  colorSplit: getAlphaColor(textBaseColor, 12),
-});
-
-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),
+  colorSplit: getAlphaColor(textBaseColor, 0.12),
 });

components/theme/themes/default/index.ts

@@ -3,7 +3,7 @@ import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../
 import { defaultPresetColors } from '../seed';
 import genColorMapToken from '../shared/genColorMapToken';
 import genCommonMapToken from '../shared/genCommonMapToken';
-import { generateBgPalettes, generateColorPalettes, generateTextAlphaPalettes } from './palettes';
+import { generateColorPalettes, generateNeutralColorPalettes } from './palettes';
 
 export default function derivative(token: SeedToken): MapToken {
   const colorPalettes = Object.keys(defaultPresetColors)
@@ -36,8 +36,7 @@ export default function derivative(token: SeedToken): MapToken {
       { ...token, colorBgBase, colorTextBase },
       {
         generateColorPalettes,
-        generateBgPalettes,
-        generateTextAlphaPalettes,
+        generateNeutralColorPalettes,
       },
     ),
 

components/theme/themes/default/palettes.ts

@@ -1,9 +1,5 @@
 import { generate } from '@ant-design/colors';
-import type {
-  GenerateBgPalettes,
-  GenerateColorPalettes,
-  GenerateTextAlphaPalettes,
-} from '../IPalettes';
+import type { GenerateColorPalettes, GenerateNeutralColorPalettes } from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';
 
 export const generateColorPalettes: GenerateColorPalettes = (baseColor: string) => {
@@ -21,10 +17,16 @@ export const generateColorPalettes: GenerateColorPalettes = (baseColor: string)
   };
 };
 
-export const generateBgPalettes: GenerateBgPalettes = (
+export const generateNeutralColorPalettes: GenerateNeutralColorPalettes = (
   bgBaseColor: string,
   textBaseColor: string,
 ) => ({
+  colorText: getAlphaColor(textBaseColor, 0.85),
+  // v5 should be 0.65
+  colorTextSecondary: getAlphaColor(textBaseColor, 0.45),
+  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
+  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
+
   colorFill: getAlphaColor(textBaseColor, 0.06),
   colorFillSecondary: getAlphaColor(textBaseColor, 0.04),
   colorFillTertiary: getAlphaColor(textBaseColor, 0.03),
@@ -38,10 +40,3 @@ export const generateBgPalettes: GenerateBgPalettes = (
   colorBorderSecondary: getSolidColor(bgBaseColor, 6),
   colorSplit: getAlphaColor(textBaseColor, 0.06),
 });
-
-export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({
-  colorText: getAlphaColor(textBaseColor, 0.85),
-  colorTextSecondary: getAlphaColor(textBaseColor, 0.65), // 目前只有 Segment Label 用了
-  colorTextTertiary: getAlphaColor(textBaseColor, 0.45),
-  colorTextQuaternary: getAlphaColor(textBaseColor, 0.25),
-});

components/theme/themes/shared/genColorMapToken.ts

@@ -1,20 +1,15 @@
 import { TinyColor } from '@ctrl/tinycolor';
 import type { ColorMapToken, SeedToken } from '../../interface';
-import type {
-  GenerateBgPalettes,
-  GenerateColorPalettes,
-  GenerateTextAlphaPalettes,
-} from '../IPalettes';
+import type { GenerateColorPalettes, GenerateNeutralColorPalettes } from '../IPalettes';
 
 interface PaletteGenerators {
   generateColorPalettes: GenerateColorPalettes;
-  generateTextAlphaPalettes: GenerateTextAlphaPalettes;
-  generateBgPalettes: GenerateBgPalettes;
+  generateNeutralColorPalettes: GenerateNeutralColorPalettes;
 }
 
 export default function genColorMapToken(
   seed: SeedToken,
-  { generateColorPalettes, generateTextAlphaPalettes, generateBgPalettes }: PaletteGenerators,
+  { generateColorPalettes, generateNeutralColorPalettes }: PaletteGenerators,
 ): ColorMapToken {
   const {
     colorSuccess: colorSuccessBase,
@@ -31,12 +26,10 @@ export default function genColorMapToken(
   const warningColors = generateColorPalettes(colorWarningBase);
   const errorColors = generateColorPalettes(colorErrorBase);
   const infoColors = generateColorPalettes(colorInfoBase);
-  const bgColors = generateBgPalettes(colorBgBase, colorTextBase);
-  const textColors = generateTextAlphaPalettes(colorTextBase);
+  const neutralColors = generateNeutralColorPalettes(colorBgBase, colorTextBase);
 
   return {
-    ...bgColors,
-    ...textColors,
+    ...neutralColors,
 
     colorPrimaryBg: primaryColors[1],
     colorPrimaryBgHover: primaryColors[2],
@@ -93,7 +86,7 @@ export default function genColorMapToken(
     colorInfoText: infoColors[6],
     colorInfoTextActive: infoColors[7],
 
-    colorBgMask: textColors.colorTextTertiary,
+    colorBgMask: neutralColors.colorTextTertiary,
     colorBgSpotlight: new TinyColor('#000').setAlpha(0.85).toRgbString(),
   };
 }

components/theme/util/alias.ts

@@ -49,7 +49,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     colorTextDisabled: mergedToken.colorTextQuaternary,
     colorTextHeading: mergedToken.colorText,
     colorTextLabel: mergedToken.colorTextSecondary,
-    colorTextDescription: mergedToken.colorTextSecondary,
+    colorTextDescription: mergedToken.colorTextTertiary,
     colorHighlight: mergedToken.colorError,
 
     colorIcon: mergedToken.colorTextTertiary,