fix(pro:tag-select): modify theme colors (#1922)

support indicator color

packages/pro/default.full.css

@@ -79,16 +79,22 @@
 /* ------ pro-tag-select css variables ------ */
 :root {
   --ix-pro-tag-select-preset-color-grey-label: #a1a7b3;
+  --ix-pro-tag-select-preset-color-grey-indicator: #e1e5eb;
   --ix-pro-tag-select-preset-color-grey-bg: rgb(246, 246, 247);
-  --ix-pro-tag-select-preset-color-green-label: #39c317;
-  --ix-pro-tag-select-preset-color-green-bg: rgb(235, 249, 232);
+  --ix-pro-tag-select-preset-color-green-label: #20cc94;
+  --ix-pro-tag-select-preset-color-green-indicator: rgb(188, 240, 223);
+  --ix-pro-tag-select-preset-color-green-bg: rgb(233, 250, 244);
   --ix-pro-tag-select-preset-color-blue-label: #1c6eff;
+  --ix-pro-tag-select-preset-color-blue-indicator: rgb(187, 212, 255);
   --ix-pro-tag-select-preset-color-blue-bg: rgb(232, 241, 255);
   --ix-pro-tag-select-preset-color-yellow-label: #f8d81a;
+  --ix-pro-tag-select-preset-color-yellow-indicator: rgb(253, 243, 186);
   --ix-pro-tag-select-preset-color-yellow-bg: rgb(254, 251, 232);
   --ix-pro-tag-select-preset-color-red-label: #f52727;
+  --ix-pro-tag-select-preset-color-red-indicator: rgb(252, 190, 190);
   --ix-pro-tag-select-preset-color-red-bg: rgb(254, 233, 233);
   --ix-pro-tag-select-preset-color-orange-label: #fa721b;
+  --ix-pro-tag-select-preset-color-orange-indicator: rgb(254, 213, 187);
   --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;

packages/pro/tag-select/docs/Theme.zh.md

@@ -4,15 +4,21 @@
 | `editPanelMinWidth` | 编辑面板的最小宽度 | `number` | `140` | `140` |
 | `panelMaxHeight` | 数据面板的最大高度 | `number` | `256` | `256` |
 | `presetColorBlueBg` | 预设蓝色背景色 | `string` | `rgb(232, 241, 255)` | `rgb(21, 36, 58)` |
+| `presetColorBlueIndicator` | 预设蓝色颜色指示圆圈色 | `string` | `rgb(187, 212, 255)` | `rgb(26, 48, 80)` |
 | `presetColorBlueLabel` | 预设蓝色文字色 | `string` | `#1c6eff` | `#4083E8` |
-| `presetColorGreenBg` | 预设绿色背景色 | `string` | `rgb(235, 249, 232)` | `rgb(25, 47, 23)` |
-| `presetColorGreenLabel` | 预设绿色文字色 | `string` | `#39c317` | `#56BD37` |
+| `presetColorGreenBg` | 预设绿色背景色 | `string` | `rgb(233, 250, 244)` | `rgb(21, 49, 42)` |
+| `presetColorGreenIndicator` | 预设绿色颜色指示圆圈色 | `string` | `rgb(188, 240, 223)` | `rgb(26, 68, 55)` |
+| `presetColorGreenLabel` | 预设绿色文字色 | `string` | `#20cc94` | `#40C695` |
 | `presetColorGreyBg` | 预设灰色背景色 | `string` | `rgb(246, 246, 247)` | `rgb(24, 27, 32)` |
+| `presetColorGreyIndicator` | 预设灰色颜色指示圆圈色 | `string` | `#e1e5eb` | `#1F2329` |
 | `presetColorGreyLabel` | 预设灰色文字色 | `string` | `#a1a7b3` | `#525966` |
 | `presetColorOrangeBg` | 预设橙色背景色 | `string` | `rgb(255, 241, 232)` | `rgb(54, 36, 25)` |
+| `presetColorOrangeIndicator` | 预设橙色颜色指示圆圈色 | `string` | `rgb(254, 213, 187)` | `rgb(77, 49, 30)` |
 | `presetColorOrangeLabel` | 预设橙色文字色 | `string` | `#fa721b` | `#E88641` |
 | `presetColorRedBg` | 预设红色背景色 | `string` | `rgb(254, 233, 233)` | `rgb(54, 26, 27)` |
+| `presetColorRedIndicator` | 预设红色颜色指示圆圈色 | `string` | `rgb(252, 190, 190)` | `rgb(77, 33, 33)` |
 | `presetColorRedLabel` | 预设红色文字色 | `string` | `#f52727` | `#E8514C` |
 | `presetColorYellowBg` | 预设黄色背景色 | `string` | `rgb(254, 251, 232)` | `rgb(54, 52, 24)` |
+| `presetColorYellowIndicator` | 预设黄色颜色指示圆圈色 | `string` | `rgb(253, 243, 186)` | `rgb(77, 72, 29)` |
 | `presetColorYellowLabel` | 预设黄色文字色 | `string` | `#f8d81a` | `#E8D43E` |
 | `tagHeight` | 标签的高度 | `number` | `20` | `20` |

packages/pro/tag-select/src/composables/useTagColors.ts

@@ -23,36 +23,42 @@ export function useTagColors(props: ProTagSelectProps, locale: ProTagSelectLocal
       key: 'grey',
       name: locale.colors.grey,
       labelColor: 'var(--ix-pro-tag-select-preset-color-grey-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-grey-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-grey-bg)',
     },
     {
       key: 'green',
       name: locale.colors.green,
       labelColor: 'var(--ix-pro-tag-select-preset-color-green-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-green-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-green-bg)',
     },
     {
       key: 'blue',
       name: locale.colors.blue,
       labelColor: 'var(--ix-pro-tag-select-preset-color-blue-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-blue-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-blue-bg)',
     },
     {
       key: 'yellow',
       name: locale.colors.yellow,
       labelColor: 'var(--ix-pro-tag-select-preset-color-yellow-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-yellow-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-yellow-bg)',
     },
     {
       key: 'red',
       name: locale.colors.red,
       labelColor: 'var(--ix-pro-tag-select-preset-color-red-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-red-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-red-bg)',
     },
     {
       key: 'orange',
       name: locale.colors.orange,
       labelColor: 'var(--ix-pro-tag-select-preset-color-orange-label)',
+      indicatorColor: 'var(--ix-pro-tag-select-preset-color-orange-indicator)',
       backgroundColor: 'var(--ix-pro-tag-select-preset-color-orange-bg)',
     },
   ]

packages/pro/tag-select/src/content/TagDataEditPanel.tsx

@@ -60,7 +60,7 @@ export default defineComponent({
         [`${colorItemPrefixCls}-selected`]: isSelected,
       }
       const colorIndicatorStyle = {
-        background: color.backgroundColor,
+        background: color.indicatorColor ?? color.backgroundColor,
       }
       const handleClick = () => {
         handleTagDataColorChange(color.key, props.data)

packages/pro/tag-select/src/types.ts

@@ -17,6 +17,7 @@ export interface TagSelectColor {
   name: string
   labelColor: string
   backgroundColor: string
+  indicatorColor?: string
   borderColor?: string
 }
 

packages/pro/tag-select/theme/dark.css

@@ -1,16 +1,22 @@
 /* ------ pro-tag-select css variables ------ */
 :root {
   --ix-pro-tag-select-preset-color-grey-label: #525966;
+  --ix-pro-tag-select-preset-color-grey-indicator: #1f2329;
   --ix-pro-tag-select-preset-color-grey-bg: rgb(24, 27, 32);
-  --ix-pro-tag-select-preset-color-green-label: #56bd37;
-  --ix-pro-tag-select-preset-color-green-bg: rgb(25, 47, 23);
+  --ix-pro-tag-select-preset-color-green-label: #40c695;
+  --ix-pro-tag-select-preset-color-green-indicator: rgb(26, 68, 55);
+  --ix-pro-tag-select-preset-color-green-bg: rgb(21, 49, 42);
   --ix-pro-tag-select-preset-color-blue-label: #4083e8;
+  --ix-pro-tag-select-preset-color-blue-indicator: rgb(26, 48, 80);
   --ix-pro-tag-select-preset-color-blue-bg: rgb(21, 36, 58);
   --ix-pro-tag-select-preset-color-yellow-label: #e8d43e;
+  --ix-pro-tag-select-preset-color-yellow-indicator: rgb(77, 72, 29);
   --ix-pro-tag-select-preset-color-yellow-bg: rgb(54, 52, 24);
   --ix-pro-tag-select-preset-color-red-label: #e8514c;
+  --ix-pro-tag-select-preset-color-red-indicator: rgb(77, 33, 33);
   --ix-pro-tag-select-preset-color-red-bg: rgb(54, 26, 27);
   --ix-pro-tag-select-preset-color-orange-label: #e88641;
+  --ix-pro-tag-select-preset-color-orange-indicator: rgb(77, 49, 30);
   --ix-pro-tag-select-preset-color-orange-bg: rgb(54, 36, 25);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;

packages/pro/tag-select/theme/default.css

@@ -1,16 +1,22 @@
 /* ------ pro-tag-select css variables ------ */
 :root {
   --ix-pro-tag-select-preset-color-grey-label: #a1a7b3;
+  --ix-pro-tag-select-preset-color-grey-indicator: #e1e5eb;
   --ix-pro-tag-select-preset-color-grey-bg: rgb(246, 246, 247);
-  --ix-pro-tag-select-preset-color-green-label: #39c317;
-  --ix-pro-tag-select-preset-color-green-bg: rgb(235, 249, 232);
+  --ix-pro-tag-select-preset-color-green-label: #20cc94;
+  --ix-pro-tag-select-preset-color-green-indicator: rgb(188, 240, 223);
+  --ix-pro-tag-select-preset-color-green-bg: rgb(233, 250, 244);
   --ix-pro-tag-select-preset-color-blue-label: #1c6eff;
+  --ix-pro-tag-select-preset-color-blue-indicator: rgb(187, 212, 255);
   --ix-pro-tag-select-preset-color-blue-bg: rgb(232, 241, 255);
   --ix-pro-tag-select-preset-color-yellow-label: #f8d81a;
+  --ix-pro-tag-select-preset-color-yellow-indicator: rgb(253, 243, 186);
   --ix-pro-tag-select-preset-color-yellow-bg: rgb(254, 251, 232);
   --ix-pro-tag-select-preset-color-red-label: #f52727;
+  --ix-pro-tag-select-preset-color-red-indicator: rgb(252, 190, 190);
   --ix-pro-tag-select-preset-color-red-bg: rgb(254, 233, 233);
   --ix-pro-tag-select-preset-color-orange-label: #fa721b;
+  --ix-pro-tag-select-preset-color-orange-indicator: rgb(254, 213, 187);
   --ix-pro-tag-select-preset-color-orange-bg: rgb(255, 241, 232);
   --ix-pro-tag-select-color-indicator-size: 12px;
   --ix-pro-tag-select-panel-max-height: 256px;

packages/pro/tag-select/theme/default.ts

@@ -15,25 +15,32 @@ export function getDefaultThemeTokens(
   const { colorContainerBg, tagCompColorAlpha } = tokens
   const { getBaseColors, getGreyColors } = algrithms
 
+  const greyColors = getGreyColors()
   const greyColor = getGreyColors().base
-  const greenColor = getBaseColors().green
+  const greenColor = getBaseColors().turquoise
   const blueColor = getBaseColors().blue
   const yelloColor = getBaseColors().yellow
   const redColor = getBaseColors().red
   const orangeColor = getBaseColors().orange
 
   return {
     presetColorGreyLabel: greyColor,
+    presetColorGreyIndicator: greyColors.l30,
     presetColorGreyBg: getAlphaColor(greyColor, tagCompColorAlpha, colorContainerBg),
     presetColorGreenLabel: greenColor,
+    presetColorGreenIndicator: getAlphaColor(greenColor, 0.3, colorContainerBg),
     presetColorGreenBg: getAlphaColor(greenColor, tagCompColorAlpha, colorContainerBg),
     presetColorBlueLabel: blueColor,
+    presetColorBlueIndicator: getAlphaColor(blueColor, 0.3, colorContainerBg),
     presetColorBlueBg: getAlphaColor(blueColor, tagCompColorAlpha, colorContainerBg),
     presetColorYellowLabel: yelloColor,
+    presetColorYellowIndicator: getAlphaColor(yelloColor, 0.3, colorContainerBg),
     presetColorYellowBg: getAlphaColor(yelloColor, tagCompColorAlpha, colorContainerBg),
     presetColorRedLabel: redColor,
+    presetColorRedIndicator: getAlphaColor(redColor, 0.3, colorContainerBg),
     presetColorRedBg: getAlphaColor(redColor, tagCompColorAlpha, colorContainerBg),
     presetColorOrangeLabel: orangeColor,
+    presetColorOrangeIndicator: getAlphaColor(orangeColor, 0.3, colorContainerBg),
     presetColorOrangeBg: getAlphaColor(orangeColor, tagCompColorAlpha, colorContainerBg),
     colorIndicatorSize: 12,
     panelMaxHeight: 256,

packages/pro/tag-select/theme/tokens.ts

@@ -10,7 +10,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设灰色文字色
    */
   presetColorGreyLabel: string
-
+  /**
+   * @desc 预设灰色颜色指示圆圈色
+   */
+  presetColorGreyIndicator: string
   /**
    * @desc 预设灰色背景色
    */
@@ -20,7 +23,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设绿色文字色
    */
   presetColorGreenLabel: string
-
+  /**
+   * @desc 预设绿色颜色指示圆圈色
+   */
+  presetColorGreenIndicator: string
   /**
    * @desc 预设绿色背景色
    */
@@ -30,7 +36,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设蓝色文字色
    */
   presetColorBlueLabel: string
-
+  /**
+   * @desc 预设蓝色颜色指示圆圈色
+   */
+  presetColorBlueIndicator: string
   /**
    * @desc 预设蓝色背景色
    */
@@ -40,7 +49,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设黄色文字色
    */
   presetColorYellowLabel: string
-
+  /**
+   * @desc 预设黄色颜色指示圆圈色
+   */
+  presetColorYellowIndicator: string
   /**
    * @desc 预设黄色背景色
    */
@@ -50,7 +62,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设红色文字色
    */
   presetColorRedLabel: string
-
+  /**
+   * @desc 预设红色颜色指示圆圈色
+   */
+  presetColorRedIndicator: string
   /**
    * @desc 预设红色背景色
    */
@@ -60,7 +75,10 @@ export interface ProTagSelectThemeTokens {
    * @desc 预设橙色文字色
    */
   presetColorOrangeLabel: string
-
+  /**
+   * @desc 预设橙色颜色指示圆圈色
+   */
+  presetColorOrangeIndicator: string
   /**
    * @desc 预设橙色背景色
    */