fix: dark fill token (#36656)

* fix: dark fill token * fix: mention bg * feat: update color palettes
2024-11-28 05:05:48 +08:00 · 2022-07-22 20:09:26 +08:00 · 2022-07-22 20:09:26 +08:00 · e6349a759a
commit e6349a759a
parent 3f915a0250
8 changed files with 105 additions and 221 deletions
--- a/components/mentions/style/index.tsx
+++ b/components/mentions/style/index.tsx
@ -32,7 +32,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
    inputPaddingHorizontal,
    inputPaddingVertical,
    fontSize,
-    colorBgContainer,
+    colorBgElevated,
    controlRadius,
    boxShadow,
  } = token;
@ -141,7 +141,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = token => {
        boxSizing: 'border-box',
        fontSize,
        fontVariant: 'initial',
-        backgroundColor: colorBgContainer,
+        backgroundColor: colorBgElevated,
        borderRadius: controlRadius,
        outline: 'none',
        boxShadow,
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@ -227,7 +227,7 @@ export interface BgMapToken {
 }

 export interface ColorMapToken extends BgMapToken, TextMapToken {
-  // Color
+  // Primary
  colorPrimaryBg: string; // 1
  colorPrimaryBgHover: string; // 2
  colorPrimaryBorder: string; // 3
@ -238,25 +238,49 @@ export interface ColorMapToken extends BgMapToken, TextMapToken {
  colorPrimaryText: string; // 8
  colorPrimaryTextHover: string; // 9

-  colorSuccess: string;
-  colorSuccessBorder: string;
-  colorSuccessBg: string; // success[0]
+  // Success
+  colorSuccessBg: string; // 1
+  colorSuccessBgHover: string; // 2
+  colorSuccessBorder: string; // 3
+  colorSuccessBorderHover: string; // 4
+  colorSuccessHover: string; // 5
+  colorSuccess: string; // 6
+  colorSuccessActive: string; // 7
+  colorSuccessText: string; // 8
+  colorSuccessTextHover: string; // 9

-  colorWarning: string;
-  colorWarningHover: string;
-  colorWarningActive: string;
-  colorWarningBorder: string;
-  colorWarningBg: string;
+  // Warning
+  colorWarningBg: string; // 1
+  colorWarningBgHover: string; // 2
+  colorWarningBorder: string; // 3
+  colorWarningBorderHover: string; // 4
+  colorWarningHover: string; // 5
+  colorWarning: string; // 6
+  colorWarningActive: string; // 7
+  colorWarningText: string; // 8
+  colorWarningTextHover: string; // 9

-  colorError: string;
-  colorErrorHover: string;
-  colorErrorActive: string;
-  colorErrorBorder: string;
-  colorErrorBg: string;
+  // Error
+  colorErrorBg: string; // 1
+  colorErrorBgHover: string; // 2
+  colorErrorBorder: string; // 3
+  colorErrorBorderHover: string; // 4
+  colorErrorHover: string; // 5
+  colorError: string; // 6
+  colorErrorActive: string; // 7
+  colorErrorText: string; // 8
+  colorErrorTextHover: string; // 9

-  colorInfo: string;
-  colorInfoBorder: string;
-  colorInfoBg: string;
+  // Info
+  colorInfoBg: string; // 1
+  colorInfoBgHover: string; // 2
+  colorInfoBorder: string; // 3
+  colorInfoBorderHover: string; // 4
+  colorInfoHover: string; // 5
+  colorInfo: string; // 6
+  colorInfoActive: string; // 7
+  colorInfoText: string; // 8
+  colorInfoTextHover: string; // 9
 }

 export interface CommonMapToken {
--- a/components/theme/themes/IPalettes.ts
+++ b/components/theme/themes/IPalettes.ts
@ -1,6 +1,6 @@
 import type { BgMapToken, TextMapToken } from 'antd/es/theme/interface';

-export interface PrimaryPalettes {
+export interface ColorPalettes {
  1: string;
  2: string;
  3: string;
@ -12,38 +12,6 @@ export interface PrimaryPalettes {
  9: string;
 }

-export interface SuccessPalettes {
-  1: string;
-  3: string;
-  6: string;
-}
-
-export interface WarningPalettes {
-  1: string;
-  3: string;
-  5: string;
-  6: string;
-  7: string;
-}
-
-export interface ErrorPalettes {
-  1: string;
-  3: string;
-  5: string;
-  6: string;
-  7: string;
-}
-
-export interface InfoPalettes {
-  1: string;
-  3: string;
-  6: 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 GenerateColorPalettes = (baseColor: string) => ColorPalettes;
 export type GenerateTextAlphaPalettes = (textBaseColor: string) => TextMapToken;
 export type GenerateBgPalettes = (bgBaseColor: string, textBaseColor: string) => BgMapToken;
--- a/components/theme/themes/dark/index.ts
+++ b/components/theme/themes/dark/index.ts
@ -3,15 +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,
-  generateErrorPalettes,
-  generateInfoPalettes,
-  generatePrimaryPalettes,
-  generateSuccessPalettes,
-  generateTextAlphaPalettes,
-  generateWarningPalettes,
-} from './palettes';
+import { generateBgPalettes, generateColorPalettes, generateTextAlphaPalettes } from './palettes';

 export default function derivative(token: SeedToken): MapToken {
  const colorPalettes = Object.keys(defaultPresetColors)
@ -43,11 +35,7 @@ export default function derivative(token: SeedToken): MapToken {
    ...genColorMapToken(
      { ...token, colorBgBase, colorTextBase },
      {
-        generatePrimaryPalettes,
-        generateErrorPalettes,
-        generateInfoPalettes,
-        generateSuccessPalettes,
-        generateWarningPalettes,
+        generateColorPalettes,
        generateBgPalettes,
        generateTextAlphaPalettes,
      },
--- a/components/theme/themes/dark/palettes.ts
+++ b/components/theme/themes/dark/palettes.ts
@ -1,67 +1,23 @@
 import { generate } from '@ant-design/colors';
 import type {
  GenerateBgPalettes,
-  GenerateErrorPalettes,
-  GenerateInfoPalettes,
-  GeneratePrimaryPalettes,
-  GenerateSuccessPalettes,
+  GenerateColorPalettes,
  GenerateTextAlphaPalettes,
-  GenerateWarningPalettes,
 } from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';

-export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => {
-  const primaryColors = generate(primaryBaseColor, { theme: 'dark' });
+export const generateColorPalettes: GenerateColorPalettes = (baseColor: string) => {
+  const colors = generate(baseColor, { theme: 'dark' });
  return {
-    1: primaryColors[0],
-    2: primaryColors[1],
-    3: primaryColors[2],
-    4: primaryColors[3],
-    5: primaryColors[4],
-    6: primaryColors[5],
-    7: primaryColors[6],
-    8: primaryColors[7],
-    9: primaryColors[8],
-  };
-};
-
-export const generateSuccessPalettes: GenerateSuccessPalettes = (successBaseColor: string) => {
-  const successColors = generate(successBaseColor, { theme: 'dark' });
-  return {
-    1: successColors[0],
-    3: successColors[2],
-    6: successColors[5],
-  };
-};
-
-export const generateErrorPalettes: GenerateErrorPalettes = (errorBaseColor: string) => {
-  const errorColors = generate(errorBaseColor, { theme: 'dark' });
-  return {
-    1: errorColors[0],
-    3: errorColors[2],
-    5: errorColors[4],
-    6: errorColors[5],
-    7: errorColors[6],
-  };
-};
-
-export const generateWarningPalettes: GenerateWarningPalettes = (warningBaseColor: string) => {
-  const warningColors = generate(warningBaseColor, { theme: 'dark' });
-  return {
-    1: warningColors[0],
-    3: warningColors[2],
-    5: warningColors[4],
-    6: warningColors[5],
-    7: warningColors[6],
-  };
-};
-
-export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string) => {
-  const infoColors = generate(infoBaseColor, { theme: 'dark' });
-  return {
-    1: infoColors[0],
-    3: infoColors[2],
-    6: infoColors[5],
+    1: colors[0],
+    2: colors[1],
+    3: colors[2],
+    4: colors[3],
+    5: colors[4],
+    6: colors[5],
+    7: colors[6],
+    8: colors[7],
+    9: colors[8],
  };
 };

@ -69,10 +25,10 @@ export const generateBgPalettes: GenerateBgPalettes = (
  bgBaseColor: string,
  textBaseColor: string,
 ) => ({
-  colorFill: getAlphaColor(textBaseColor, 18),
-  colorFillSecondary: getAlphaColor(textBaseColor, 12),
-  colorFillTertiary: getAlphaColor(textBaseColor, 8),
-  colorFillQuaternary: getAlphaColor(textBaseColor, 4),
+  colorFill: getAlphaColor(textBaseColor, 0.18),
+  colorFillSecondary: getAlphaColor(textBaseColor, 0.12),
+  colorFillTertiary: getAlphaColor(textBaseColor, 0.08),
+  colorFillQuaternary: getAlphaColor(textBaseColor, 0.04),

  colorBgElevated: getSolidColor(bgBaseColor, 12),
  colorBgContainer: getSolidColor(bgBaseColor, 8),
--- a/components/theme/themes/default/index.ts
+++ b/components/theme/themes/default/index.ts
@ -3,15 +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,
-  generateErrorPalettes,
-  generateInfoPalettes,
-  generatePrimaryPalettes,
-  generateSuccessPalettes,
-  generateTextAlphaPalettes,
-  generateWarningPalettes,
-} from './palettes';
+import { generateBgPalettes, generateColorPalettes, generateTextAlphaPalettes } from './palettes';

 export default function derivative(token: SeedToken): MapToken {
  const colorPalettes = Object.keys(defaultPresetColors)
@ -43,11 +35,7 @@ export default function derivative(token: SeedToken): MapToken {
    ...genColorMapToken(
      { ...token, colorBgBase, colorTextBase },
      {
-        generatePrimaryPalettes,
-        generateErrorPalettes,
-        generateInfoPalettes,
-        generateSuccessPalettes,
-        generateWarningPalettes,
+        generateColorPalettes,
        generateBgPalettes,
        generateTextAlphaPalettes,
      },
--- a/components/theme/themes/default/palettes.ts
+++ b/components/theme/themes/default/palettes.ts
@ -1,67 +1,23 @@
 import { generate } from '@ant-design/colors';
 import type {
  GenerateBgPalettes,
-  GenerateErrorPalettes,
-  GenerateInfoPalettes,
-  GeneratePrimaryPalettes,
-  GenerateSuccessPalettes,
+  GenerateColorPalettes,
  GenerateTextAlphaPalettes,
-  GenerateWarningPalettes,
 } from '../IPalettes';
 import { getAlphaColor, getSolidColor } from './colorAlgorithm';

-export const generatePrimaryPalettes: GeneratePrimaryPalettes = (primaryBaseColor: string) => {
-  const primaryColors = generate(primaryBaseColor);
+export const generateColorPalettes: GenerateColorPalettes = (baseColor: string) => {
+  const colors = generate(baseColor);
  return {
-    1: primaryColors[0],
-    2: primaryColors[1],
-    3: primaryColors[2],
-    4: primaryColors[3],
-    5: primaryColors[4],
-    6: primaryColors[5],
-    7: primaryColors[6],
-    8: primaryColors[7],
-    9: primaryColors[8],
-  };
-};
-
-export const generateSuccessPalettes: GenerateSuccessPalettes = (successBaseColor: string) => {
-  const successColors = generate(successBaseColor);
-  return {
-    1: successColors[0],
-    3: successColors[2],
-    6: successColors[5],
-  };
-};
-
-export const generateErrorPalettes: GenerateErrorPalettes = (errorBaseColor: string) => {
-  const errorColors = generate(errorBaseColor);
-  return {
-    1: errorColors[0],
-    3: errorColors[2],
-    5: errorColors[4],
-    6: errorColors[5],
-    7: errorColors[6],
-  };
-};
-
-export const generateWarningPalettes: GenerateWarningPalettes = (warningBaseColor: string) => {
-  const warningColors = generate(warningBaseColor);
-  return {
-    1: warningColors[0],
-    3: warningColors[2],
-    5: warningColors[4],
-    6: warningColors[5],
-    7: warningColors[6],
-  };
-};
-
-export const generateInfoPalettes: GenerateInfoPalettes = (infoBaseColor: string) => {
-  const infoColors = generate(infoBaseColor);
-  return {
-    1: infoColors[0],
-    3: infoColors[2],
-    6: infoColors[5],
+    1: colors[0],
+    2: colors[1],
+    3: colors[2],
+    4: colors[3],
+    5: colors[4],
+    6: colors[5],
+    7: colors[6],
+    8: colors[7],
+    9: colors[8],
  };
 };

--- a/components/theme/themes/shared/genColorMapToken.ts
+++ b/components/theme/themes/shared/genColorMapToken.ts
@ -1,35 +1,19 @@
 import type { ColorMapToken, SeedToken } from '../../interface';
 import type {
  GenerateBgPalettes,
-  GenerateErrorPalettes,
-  GenerateInfoPalettes,
-  GeneratePrimaryPalettes,
-  GenerateSuccessPalettes,
+  GenerateColorPalettes,
  GenerateTextAlphaPalettes,
-  GenerateWarningPalettes,
 } from '../IPalettes';

 interface PaletteGenerators {
-  generatePrimaryPalettes: GeneratePrimaryPalettes;
-  generateSuccessPalettes: GenerateSuccessPalettes;
-  generateErrorPalettes: GenerateErrorPalettes;
-  generateWarningPalettes: GenerateWarningPalettes;
-  generateInfoPalettes: GenerateInfoPalettes;
+  generateColorPalettes: GenerateColorPalettes;
  generateTextAlphaPalettes: GenerateTextAlphaPalettes;
  generateBgPalettes: GenerateBgPalettes;
 }

 export default function genColorMapToken(
  seed: SeedToken,
-  {
-    generatePrimaryPalettes,
-    generateSuccessPalettes,
-    generateErrorPalettes,
-    generateWarningPalettes,
-    generateInfoPalettes,
-    generateTextAlphaPalettes,
-    generateBgPalettes,
-  }: PaletteGenerators,
+  { generateColorPalettes, generateTextAlphaPalettes, generateBgPalettes }: PaletteGenerators,
 ): ColorMapToken {
  const {
    colorSuccess: colorSuccessBase,
@ -41,11 +25,11 @@ export default function genColorMapToken(
    colorTextBase,
  } = seed;

-  const primaryColors = generatePrimaryPalettes(colorPrimaryBase);
-  const successColors = generateSuccessPalettes(colorSuccessBase);
-  const warningColors = generateWarningPalettes(colorWarningBase);
-  const errorColors = generateErrorPalettes(colorErrorBase);
-  const infoColors = generateInfoPalettes(colorInfoBase);
+  const primaryColors = generateColorPalettes(colorPrimaryBase);
+  const successColors = generateColorPalettes(colorSuccessBase);
+  const warningColors = generateColorPalettes(colorWarningBase);
+  const errorColors = generateColorPalettes(colorErrorBase);
+  const infoColors = generateColorPalettes(colorInfoBase);
  const bgColors = generateBgPalettes(colorBgBase, colorTextBase);
  const textColors = generateTextAlphaPalettes(colorTextBase);

@ -64,23 +48,43 @@ export default function genColorMapToken(
    colorPrimaryTextHover: primaryColors[9],

    colorSuccessBg: successColors[1],
+    colorSuccessBgHover: successColors[2],
    colorSuccessBorder: successColors[3],
+    colorSuccessBorderHover: successColors[4],
+    colorSuccessHover: successColors[5],
    colorSuccess: successColors[6],
+    colorSuccessActive: successColors[7],
+    colorSuccessText: successColors[8],
+    colorSuccessTextHover: successColors[9],

    colorErrorBg: errorColors[1],
+    colorErrorBgHover: errorColors[2],
    colorErrorBorder: errorColors[3],
+    colorErrorBorderHover: errorColors[4],
    colorErrorHover: errorColors[5],
    colorError: errorColors[6],
    colorErrorActive: errorColors[7],
+    colorErrorText: errorColors[8],
+    colorErrorTextHover: errorColors[9],

    colorWarningBg: warningColors[1],
+    colorWarningBgHover: warningColors[2],
    colorWarningBorder: warningColors[3],
+    colorWarningBorderHover: warningColors[4],
    colorWarningHover: warningColors[5],
    colorWarning: warningColors[6],
    colorWarningActive: warningColors[7],
+    colorWarningText: warningColors[8],
+    colorWarningTextHover: warningColors[9],

    colorInfoBg: infoColors[1],
+    colorInfoBgHover: infoColors[2],
    colorInfoBorder: infoColors[3],
+    colorInfoBorderHover: infoColors[4],
+    colorInfoHover: infoColors[5],
    colorInfo: infoColors[6],
+    colorInfoActive: infoColors[7],
+    colorInfoText: infoColors[8],
+    colorInfoTextHover: infoColors[9],
  };
 }