diff --git a/packages/pro/dark.full.css b/packages/pro/dark.full.css index 0d6413ef3..99579025c 100644 --- a/packages/pro/dark.full.css +++ b/packages/pro/dark.full.css @@ -89,16 +89,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; diff --git a/packages/pro/default.full.css b/packages/pro/default.full.css index 36ed88900..1127a882e 100644 --- a/packages/pro/default.full.css +++ b/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; diff --git a/packages/pro/tag-select/docs/Theme.zh.md b/packages/pro/tag-select/docs/Theme.zh.md index 99a0a61b4..1742c0c4b 100644 --- a/packages/pro/tag-select/docs/Theme.zh.md +++ b/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` | diff --git a/packages/pro/tag-select/src/composables/useTagColors.ts b/packages/pro/tag-select/src/composables/useTagColors.ts index 2bbb54227..9aec5c18b 100644 --- a/packages/pro/tag-select/src/composables/useTagColors.ts +++ b/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)', }, ] diff --git a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx b/packages/pro/tag-select/src/content/TagDataEditPanel.tsx index 7b00fbfeb..1ea86e77f 100644 --- a/packages/pro/tag-select/src/content/TagDataEditPanel.tsx +++ b/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) diff --git a/packages/pro/tag-select/src/types.ts b/packages/pro/tag-select/src/types.ts index aa9666bc2..be756cb9b 100644 --- a/packages/pro/tag-select/src/types.ts +++ b/packages/pro/tag-select/src/types.ts @@ -17,6 +17,7 @@ export interface TagSelectColor { name: string labelColor: string backgroundColor: string + indicatorColor?: string borderColor?: string } diff --git a/packages/pro/tag-select/theme/dark.css b/packages/pro/tag-select/theme/dark.css index 3032fbb2b..4404ac79f 100644 --- a/packages/pro/tag-select/theme/dark.css +++ b/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; diff --git a/packages/pro/tag-select/theme/default.css b/packages/pro/tag-select/theme/default.css index 4446b3ade..be40dfcb1 100644 --- a/packages/pro/tag-select/theme/default.css +++ b/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; diff --git a/packages/pro/tag-select/theme/default.ts b/packages/pro/tag-select/theme/default.ts index d62f4e019..d754267c4 100644 --- a/packages/pro/tag-select/theme/default.ts +++ b/packages/pro/tag-select/theme/default.ts @@ -15,8 +15,9 @@ 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 @@ -24,16 +25,22 @@ export function getDefaultThemeTokens( 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, diff --git a/packages/pro/tag-select/theme/tokens.ts b/packages/pro/tag-select/theme/tokens.ts index a317252d5..b620f94e5 100644 --- a/packages/pro/tag-select/theme/tokens.ts +++ b/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 预设橙色背景色 */