fix: token update (#36871)

* fix: token update

* refactor: map token update

components/menu/style/theme.tsx

@@ -30,7 +30,7 @@ const getThemeStyle = (token: MenuToken): CSSInterpolation => {
     motionDurationFast,
     colorItemTextHover,
     lineType,
-    colorBorderSecondary,
+    colorSplit,
 
     // Disabled
     colorItemTextDisabled,
@@ -176,7 +176,7 @@ const getThemeStyle = (token: MenuToken): CSSInterpolation => {
       //
       [`&${componentCls}-root`]: {
         [`&${componentCls}-inline, &${componentCls}-vertical`]: {
-          borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorBorderSecondary}`,
+          borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}`,
         },
       },
 

components/theme/interface.ts

@@ -225,6 +225,11 @@ export interface BgMapToken {
   colorBgContainer: string;
   colorBgElevated: string;
   colorBgLayout: string;
+
+  // Border
+  colorBorder: string;
+  colorBorderSecondary: string;
+  colorSplit: string;
 }
 
 export interface ColorMapToken extends BgMapToken, TextMapToken {
@@ -282,6 +287,9 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
   colorInfoActive: string; // 7
   colorInfoText: string; // 8
   colorInfoTextHover: string; // 9
+
+  colorBgMask: string;
+  colorBgSpotlight: string;
 }
 
 export interface CommonMapToken {
@@ -338,16 +346,10 @@ export interface AliasToken extends MapToken {
   colorFillContentHover: string;
   colorFillAlter: string;
   colorBgContainerDisabled: string;
-
-  colorBgMask: string;
-  colorBgSpotlight: string;
   colorFillContent: string;
 
   // Border
-  colorBorder: string;
   colorBorderBg: string;
-  colorBorderSecondary: string;
-  colorSplit: string;
 
   // Text
   colorTextPlaceholder: string;

components/theme/themes/dark/palettes.ts

@@ -33,6 +33,10 @@ export const generateBgPalettes: GenerateBgPalettes = (
   colorBgElevated: getSolidColor(bgBaseColor, 12),
   colorBgContainer: getSolidColor(bgBaseColor, 8),
   colorBgLayout: getSolidColor(bgBaseColor, 0),
+
+  colorBorder: getSolidColor(bgBaseColor, 26),
+  colorBorderSecondary: getSolidColor(bgBaseColor, 19),
+  colorSplit: getAlphaColor(textBaseColor, 12),
 });
 
 export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({

components/theme/themes/default/palettes.ts

@@ -33,6 +33,10 @@ export const generateBgPalettes: GenerateBgPalettes = (
   colorBgLayout: getSolidColor(bgBaseColor, 4),
   colorBgContainer: getSolidColor(bgBaseColor, 0),
   colorBgElevated: getSolidColor(bgBaseColor, 0),
+
+  colorBorder: getSolidColor(bgBaseColor, 15),
+  colorBorderSecondary: getSolidColor(bgBaseColor, 6),
+  colorSplit: getAlphaColor(textBaseColor, 0.06),
 });
 
 export const generateTextAlphaPalettes: GenerateTextAlphaPalettes = (textBaseColor: string) => ({

components/theme/themes/shared/genColorMapToken.ts

@@ -1,3 +1,4 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import type { ColorMapToken, SeedToken } from '../../interface';
 import type {
   GenerateBgPalettes,
@@ -44,8 +45,8 @@ export default function genColorMapToken(
     colorPrimaryHover: primaryColors[5],
     colorPrimary: primaryColors[6],
     colorPrimaryActive: primaryColors[7],
-    colorPrimaryText: primaryColors[8],
-    colorPrimaryTextHover: primaryColors[9],
+    colorPrimaryText: primaryColors[6],
+    colorPrimaryTextHover: primaryColors[5],
 
     colorSuccessBg: successColors[1],
     colorSuccessBgHover: successColors[2],
@@ -86,5 +87,8 @@ export default function genColorMapToken(
     colorInfoActive: infoColors[7],
     colorInfoText: infoColors[8],
     colorInfoTextHover: infoColors[9],
+
+    colorBgMask: textColors.colorTextTertiary,
+    colorBgSpotlight: new TinyColor('#000').setAlpha(0.85).toRgbString(),
   };
 }

components/theme/util/alias.ts

@@ -31,8 +31,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
   const aliasToken: AliasToken = {
     ...mergedToken,
 
-    colorLink: mergedToken.colorPrimary,
-    colorLinkHover: mergedToken.colorPrimaryHover,
+    colorLink: mergedToken.colorPrimaryText,
+    colorLinkHover: mergedToken.colorPrimaryTextHover,
     colorLinkActive: mergedToken.colorPrimaryActive,
 
     // ============== Background ============== //
@@ -41,14 +41,8 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
     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,