feat: modify disable color theme tokens (#1764)

IDuxFE · Dec 11, 2023 · 29566d5 · 29566d5
1 parent e248941
commit 29566d5
Show file tree

Hide file tree

Showing 14 changed files with 174 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -40,13 +40,13 @@ export function getPresetTokens(): Partial<GlobalThemeTokens> {
 
     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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,22 @@
 <template>
-  <IxProTextarea v-model:value="value" :onChange="onChange" placeholder="Basic usage"></IxProTextarea>
+  <div>
+    <IxSpace vertical>
+      <IxProTextarea
+        v-model:value="value"
+        :disabled="disabled"
+        :onChange="onChange"
+        placeholder="Basic usage"
+      ></IxProTextarea>
+      <IxSwitch v-model:checked="disabled">disabled</IxSwitch>
+    </IxSpace>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
 const value = ref('')
+const disabled = ref(false)
 const onChange = (value: string, oldValue: string) => {
   console.log(value, oldValue)
 }

diff --git a/packages/pro/textarea/style/index.less b/packages/pro/textarea/style/index.less
@@ -96,6 +96,16 @@
     .@{pro-textarea-prefix}-content {
       color: var(--ix-color-text-disabled);
       background-color: var(--ix-control-bg-color-disabled);
+      &-textarea {
+        color: var(--ix-color-text-disabled);
+      }
+    }
+    .@{pro-textarea-prefix}-index-column {
+      color: var(--ix-color-text-disabled);
+      background-color: var(--ix-pro-textarea-index-col-bg-color-disabled);
+      &-bg {
+        background-color: var(--ix-pro-textarea-index-col-bg-color-disabled);
+      }
     }
   }
 
@@ -124,6 +134,10 @@
     color: var(--ix-color-text);
     background-color: var(--ix-control-bg-color);
     cursor: text;
+    transition:
+      all var(--ix-motion-duration-medium) var(--ix-motion-ease-in-out),
+      height 0s,
+      width 0s;
 
     &-textarea {
       position: relative;

diff --git a/packages/pro/textarea/theme/default.ts b/packages/pro/textarea/theme/default.ts
@@ -13,7 +13,14 @@ export function getDefaultThemeTokens(
   algorithms: ThemeTokenAlgorithms,
 ): ProCertainThemeTokens<'proTextarea'> {
   const { getColorPalette } = algorithms
-  const { colorText, colorTextPlaceholder, paddingSizeXs, colorInfoContainerBg, colorError } = tokens
+  const {
+    colorText,
+    colorTextPlaceholder,
+    paddingSizeXs,
+    colorInfoContainerBg,
+    colorInfoContainerBgDisabled,
+    colorError,
+  } = tokens
 
   const errorColorPalette = getColorPalette(colorError)
 
@@ -22,6 +29,7 @@ export function getDefaultThemeTokens(
     indexColMinWidth: 32,
     indexColPaddingHorizontal: paddingSizeXs,
     indexColBgColor: colorInfoContainerBg,
+    indexColBgColorDisabled: colorInfoContainerBgDisabled,
     indexColCellErrorBgColor: errorColorPalette.l30,
 
     errorLineBgColor: errorColorPalette.l50,

diff --git a/packages/pro/textarea/theme/tokens.ts b/packages/pro/textarea/theme/tokens.ts
@@ -10,6 +10,7 @@ export interface ProTextareaThemeTokens {
   indexColMinWidth: number
   indexColPaddingHorizontal: number
   indexColBgColor: string
+  indexColBgColorDisabled: string
   indexColCellErrorBgColor: string
 
   errorLineBgColor: string