From 29566d5867ea08db3d5a9efa902ebe5d29328d7d Mon Sep 17 00:00:00 2001 From: saller Date: Tue, 5 Dec 2023 22:03:19 +0800 Subject: [PATCH] feat: modify disable color theme tokens (#1764) --- packages/components/skeleton/theme/default.ts | 16 ++-- packages/components/skeleton/theme/index.ts | 6 +- packages/components/table/theme/default.ts | 11 ++- packages/components/table/theme/index.ts | 6 +- .../src/themeTokens/dark/presetTokens.ts | 4 +- .../extendedTokens/getExtendedColorTokens.ts | 6 +- packages/pro/search/style/index.less | 5 ++ packages/pro/search/style/variables.less | 10 ++- packages/pro/search/theme/default.ts | 11 +++ packages/pro/search/theme/tokens.ts | 85 +++++++++++++++++++ packages/pro/textarea/demo/Basic.vue | 13 ++- packages/pro/textarea/style/index.less | 14 +++ packages/pro/textarea/theme/default.ts | 10 ++- packages/pro/textarea/theme/tokens.ts | 1 + 14 files changed, 174 insertions(+), 24 deletions(-) diff --git a/packages/components/skeleton/theme/default.ts b/packages/components/skeleton/theme/default.ts index 871fb1988..192dc193b 100644 --- a/packages/components/skeleton/theme/default.ts +++ b/packages/components/skeleton/theme/default.ts @@ -5,14 +5,20 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { CertainThemeTokens, GlobalThemeTokens } from '@idux/components/theme' -export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'skeleton'> { - const { marginSizeSm, marginSizeXs, colorEmphasizedContainerBg, colorContainerBgDisabled } = tokens +import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme' +export function getDefaultThemeTokens( + tokens: GlobalThemeTokens, + algorithms: ThemeTokenAlgorithms, +): CertainThemeTokens<'skeleton'> { + const { getGreyColors } = algorithms + const { marginSizeSm, marginSizeXs } = tokens + + const greyColors = getGreyColors() return { marginBottom: marginSizeSm, loaderMarginBottom: marginSizeXs, - startColor: colorEmphasizedContainerBg, - endColor: colorContainerBgDisabled, + startColor: greyColors.l40, + endColor: greyColors.l30, } } diff --git a/packages/components/skeleton/theme/index.ts b/packages/components/skeleton/theme/index.ts index b98702d4d..0382b858a 100644 --- a/packages/components/skeleton/theme/index.ts +++ b/packages/components/skeleton/theme/index.ts @@ -9,8 +9,10 @@ import type { TokenGetter } from '@idux/components/theme' import { getDefaultThemeTokens } from './default' -export const getThemeTokens: TokenGetter<'skeleton'> = (tokens, presetTheme) => { - return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +export const getThemeTokens: TokenGetter<'skeleton'> = (tokens, presetTheme, algorithms) => { + return presetTheme === 'default' + ? getDefaultThemeTokens(tokens, algorithms) + : getDefaultThemeTokens(tokens, algorithms) } export type { SkeletonThemeTokens } from './tokens' diff --git a/packages/components/table/theme/default.ts b/packages/components/table/theme/default.ts index 748441437..77f299d40 100644 --- a/packages/components/table/theme/default.ts +++ b/packages/components/table/theme/default.ts @@ -5,8 +5,12 @@ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE */ -import type { CertainThemeTokens, GlobalThemeTokens } from '@idux/components/theme' -export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTokens<'table'> { +import type { CertainThemeTokens, GlobalThemeTokens, ThemeTokenAlgorithms } from '@idux/components/theme' +export function getDefaultThemeTokens( + tokens: GlobalThemeTokens, + algorithms: ThemeTokenAlgorithms, +): CertainThemeTokens<'table'> { + const { getGreyColors } = algorithms const { fontSizeSm, heightMd, @@ -20,7 +24,6 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo colorPrimary, colorContainerBg, colorContainerBgHover, - colorContainerBgDisabled, colorInfoContainerBg, } = tokens @@ -46,7 +49,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo headSeparatorColor: colorBorder, headIconColor: colorIconInfo, headIconColorActive: colorPrimary, - headIconBgColorHover: colorContainerBgDisabled, + headIconBgColorHover: getGreyColors().l30, bodyRowBgColorHover: colorContainerBgHover, bodyRowBgColorSelected: colorContainerBg, diff --git a/packages/components/table/theme/index.ts b/packages/components/table/theme/index.ts index 7a61a5a20..f7afeb74d 100644 --- a/packages/components/table/theme/index.ts +++ b/packages/components/table/theme/index.ts @@ -9,8 +9,10 @@ import type { TokenGetter } from '@idux/components/theme' import { getDefaultThemeTokens } from './default' -export const getThemeTokens: TokenGetter<'table'> = (tokens, presetTheme) => { - return presetTheme === 'default' ? getDefaultThemeTokens(tokens) : getDefaultThemeTokens(tokens) +export const getThemeTokens: TokenGetter<'table'> = (tokens, presetTheme, algorithms) => { + return presetTheme === 'default' + ? getDefaultThemeTokens(tokens, algorithms) + : getDefaultThemeTokens(tokens, algorithms) } export type { TableThemeTokens } from './tokens' diff --git a/packages/components/theme/src/themeTokens/dark/presetTokens.ts b/packages/components/theme/src/themeTokens/dark/presetTokens.ts index 0e7f0d3fe..039fd825c 100644 --- a/packages/components/theme/src/themeTokens/dark/presetTokens.ts +++ b/packages/components/theme/src/themeTokens/dark/presetTokens.ts @@ -40,13 +40,13 @@ export function getPresetTokens(): Partial { colorEmphasizedContainerBg: greyColors.l30, colorEmphasizedContainerBgHover: greyColors.l30, - colorEmphasizedContainerBgDisabled: greyColors.l30, + colorEmphasizedContainerBgDisabled: greyColors.l10, colorAddonContainerBg: greyColors.l40, colorInfoContainerBg: greyColors.l40, colorInfoContainerBgHover: greyColors.l40, - colorInfoContainerBgDisabled: greyColors.l40, + colorInfoContainerBgDisabled: greyColors.l30, colorTextInverse: baseColors.white, colorBgInverse: baseColors.white, diff --git a/packages/components/theme/src/themeTokens/shared/extendedTokens/getExtendedColorTokens.ts b/packages/components/theme/src/themeTokens/shared/extendedTokens/getExtendedColorTokens.ts index 07ed08ee4..473495fd6 100644 --- a/packages/components/theme/src/themeTokens/shared/extendedTokens/getExtendedColorTokens.ts +++ b/packages/components/theme/src/themeTokens/shared/extendedTokens/getExtendedColorTokens.ts @@ -22,14 +22,14 @@ export function getExtendedColorTokens( colorContainerBg: colorBg, // 一级背景 colorContainerBgHover: greyColors.l50, colorContainerBgActive: primaryColorPalette.l50, - colorContainerBgDisabled: greyColors.l30, + colorContainerBgDisabled: greyColors.l40, colorAddonContainerBg: greyColors.l50, colorEmphasizedContainerBg: greyColors.l40, colorEmphasizedContainerBgHover: greyColors.l30, - colorEmphasizedContainerBgDisabled: greyColors.l20, + colorEmphasizedContainerBgDisabled: greyColors.l10, colorInfoContainerBg: greyColors.l50, colorInfoContainerBgHover: greyColors.l50, - colorInfoContainerBgDisabled: greyColors.l50, + colorInfoContainerBgDisabled: greyColors.l30, colorFillContainerBg: greyColors.l10, colorSeparator: greyColors.l30, diff --git a/packages/pro/search/style/index.less b/packages/pro/search/style/index.less index 4b28e73e4..155976d66 100644 --- a/packages/pro/search/style/index.less +++ b/packages/pro/search/style/index.less @@ -104,6 +104,11 @@ border-top-right-radius: @pro-search-border-radius; border-bottom-right-radius: @pro-search-border-radius; cursor: pointer; + + &:hover { + color: @pro-search-search-button-color-hover; + background-color: @pro-search-search-button-background-color-hover; + } } &:not(&-disabled):hover &-input-container { diff --git a/packages/pro/search/style/variables.less b/packages/pro/search/style/variables.less index 0e7df4902..2cb0d1234 100644 --- a/packages/pro/search/style/variables.less +++ b/packages/pro/search/style/variables.less @@ -26,11 +26,13 @@ @pro-search-close-icon-font-size: var(--ix-font-size-icon); @pro-search-close-icon-color: var(--ix-color-icon); @pro-search-close-icon-margin-left: 0; -@pro-search-search-button-background-color: var(--ix-color-primary); +@pro-search-search-button-background-color: var(--ix-pro-search-search-btn-bg-color); +@pro-search-search-button-background-color-hover: var(--ix-pro-search-search-btn-bg-color-hover); @pro-search-search-button-font-size: var(--ix-font-size-icon); -@pro-search-search-button-color: var(--ix-color-text-inverse); -@pro-search-search-button-disabled-background-color: var(--ix-color-container-bg-disabled); -@pro-search-search-button-disabled-color: var(--ix-color-text-disabled); +@pro-search-search-button-color: var(--ix-pro-search-search-btn-color); +@pro-search-search-button-color-hover: var(--ix-pro-search-search-btn-color-hover); +@pro-search-search-button-disabled-background-color: var(--ix-pro-search-search-btn-bg-color-disabled); +@pro-search-search-button-disabled-color: var(--ix-pro-search-search-btn-color-disabled); @pro-search-item-tag-color: var(--ix-pro-search-tag-color); @pro-search-item-tag-background-color: var(--ix-pro-search-tag-bg-color); diff --git a/packages/pro/search/theme/default.ts b/packages/pro/search/theme/default.ts index a19abd0a0..c7521e28d 100644 --- a/packages/pro/search/theme/default.ts +++ b/packages/pro/search/theme/default.ts @@ -12,7 +12,11 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): ProCertainThem colorText, colorTextDisabled, colorTextInfo, + colorTextInverse, colorEmphasizedContainerBg, + colorPrimary, + colorPrimaryHover, + colorEmphasizedContainerBgDisabled, controlHeightSm, controlHeightMd, paddingSize2Xs, @@ -41,6 +45,13 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): ProCertainThem segmentPaddingHorizontal: paddingSizeXs, segmentMaxWidth: 150, + searchBtnColor: colorTextInverse, + searchBtnColorHover: colorTextInverse, + searchBtnColorDisabled: colorTextInverse, + searchBtnBgColor: colorPrimary, + searchBtnBgColorHover: colorPrimaryHover, + searchBtnBgColorDisabled: colorEmphasizedContainerBgDisabled, + namePanelMinWidth: 160, operatorPanelMinWidth: 20, selectPanelMinWidth: 100, diff --git a/packages/pro/search/theme/tokens.ts b/packages/pro/search/theme/tokens.ts index eb2ab3f13..819739798 100644 --- a/packages/pro/search/theme/tokens.ts +++ b/packages/pro/search/theme/tokens.ts @@ -6,28 +6,113 @@ */ export interface ProSearchThemeTokens { + /** + * @desc sm 尺寸高度 + */ heightSm: number + /** + * @desc md 尺寸高度 + */ heightMd: number + /** + * @desc sm 尺寸padding + */ containerPaddingSm: number + /** + * @desc md 尺寸padding + */ containerPaddingMd: number + /** + * @desc sm 尺寸标签间距 + */ tagGapSm: number + /** + * @desc md 尺寸标签间距 + */ tagGapMd: number + /** + * @desc sm 尺寸快捷搜索面板padding + */ quickSelectPaddingSm: string | number + /** + * @desc md 尺寸快捷搜索面板padding + */ quickSelectPaddingMd: string | number + /** + * @desc 标签字体颜色 + */ tagColor: string + /** + * @desc 标签背景颜色 + */ tagBgColor: string + /** + * @desc 标签禁用状态字体颜色 + */ tagColorDisabled: string + /** + * @desc 标签禁用状态背景颜色 + */ tagBgColorDisabled: string + /** + * @desc 标签名称字体颜色 + */ tagNameColor: string + /** + * @desc 标签内输入段的水平方向padding + */ segmentPaddingHorizontal: number + /** + * @desc 标签内输入段的最大宽度 + */ segmentMaxWidth: number + /** + * @desc 搜索按钮字体颜色 + */ + searchBtnColor: string + /** + * @desc 搜索按钮悬浮字体颜色 + */ + searchBtnColorHover: string + /** + * @desc 搜索按钮禁用字体颜色 + */ + searchBtnColorDisabled: string + /** + * @desc 搜索按钮背景颜色 + */ + searchBtnBgColor: string + /** + * @desc 搜索按钮悬浮背景颜色 + */ + searchBtnBgColorHover: string + /** + * @desc 搜索按钮禁用背景颜色 + */ + searchBtnBgColorDisabled: string + + /** + * @desc 搜索项名称选择面板的最小宽度 + */ namePanelMinWidth: number + /** + * @desc 操作符选择面板的最小宽度 + */ operatorPanelMinWidth: number + /** + * @desc select搜索项面板的最小宽度 + */ selectPanelMinWidth: number + /** + * @desc treeSelect搜索项面板的最小宽度 + */ treeSelectPanelMinWidth: number + /** + * @desc treeSelect搜索项面板的最大宽度 + */ treeSelectPanelMaxWidth: number } diff --git a/packages/pro/textarea/demo/Basic.vue b/packages/pro/textarea/demo/Basic.vue index 9afba7080..f3422a0c0 100644 --- a/packages/pro/textarea/demo/Basic.vue +++ b/packages/pro/textarea/demo/Basic.vue @@ -1,11 +1,22 @@