style: update css variable and update global config (#1297)

IDuxFE · Nov 23, 2022 · e08acf6 · e08acf6
1 parent edca00d
commit e08acf6
Show file tree

Hide file tree

Showing 32 changed files with 75 additions and 57 deletions.
diff --git a/packages/components/alert/docs/Theme.zh.md b/packages/components/alert/docs/Theme.zh.md
@@ -3,7 +3,7 @@
 | `@alert-height` | `var(--ix-height-md)` | - | - |
 | `@alert-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@alert-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
-| `@alert-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
+| `@alert-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@alert-color` | `@text-color` | - | - |
 | `@alert-color-secondary` | `@text-color-secondary` | - | - |
 | `@alert-success-color` | `var(--ix-color-turquoise)` | `var(--ix-color-turquoise-d10)` | - |

diff --git a/packages/components/alert/style/index.less b/packages/components/alert/style/index.less
@@ -48,10 +48,6 @@
     font-size: calc(@alert-font-size + 2px);
     line-height: calc(@alert-font-size + 2px + var(--ix-line-height-gutter));
 
-    .@{alert-prefix}-icon {
-      margin-right: 16px;
-    }
-
     .@{alert-prefix}-title {
       margin-bottom: 4px;
     }

diff --git a/packages/components/alert/style/themes/default.variable.less b/packages/components/alert/style/themes/default.variable.less
@@ -1,7 +1,7 @@
 @alert-height: var(--ix-height-md);
 @alert-font-size: var(--ix-font-size-md);
 @alert-border-radius: var(--ix-border-radius-md);
-@alert-icon-font-size: inherit;
+@alert-icon-font-size: var(--ix-font-size-lg);
 
 @alert-color: @text-color;
 @alert-color-secondary: @text-color-secondary;

diff --git a/packages/components/alert/style/themes/seer.variable.less b/packages/components/alert/style/themes/seer.variable.less
@@ -2,7 +2,6 @@
 
 @alert-border-radius: var(--ix-border-radius-sm);
 @alert-font-size: var(--ix-font-size-sm);
-@alert-icon-font-size: var(--ix-font-size-lg);
 
 @alert-success-color: var(--ix-color-turquoise-d10);
 @alert-error-color: var(--ix-color-red-d10);
diff --git a/packages/components/button/docs/Api.zh.md b/packages/components/button/docs/Api.zh.md
@@ -15,7 +15,7 @@
 | `loading` | 设置加载中状态 | `boolean` |  - | - |- |
 | `mode` | 设置按钮种类 | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | `'default'` | - |- |
 | `shape` | 设置按钮形状 | `'square' \| 'circle' \| 'round'` | - | - |- |
-| `size` | 设置按钮大小 | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | - |- |
+| `size` | 设置按钮大小 | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | ✅ | `seer` 主题下默认为 `'sm'` |
 | `type` | 原生 `button` 的 `type` 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` | - | 参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) |
 
 #### ButtonSlots

diff --git a/packages/components/button/docs/Theme.zh.md b/packages/components/button/docs/Theme.zh.md
@@ -37,5 +37,5 @@
 | `@button-ghost-background-color-hover` | `rgba(255, 255, 255, 0.2)` | - | - |
 | `@button-ghost-background-color-active` | `var(--ix-background-color)` | - | - |
 | `@button-ghost-background-color-disabled` | `rgba(255, 255, 255, 0.4)` | - | - |
-| `@button-icon-color` | `inherit` | `var(--ix-text-color-title-secondary)` | - |
+| `@button-icon-color` | `inherit` | `var(--ix-text-color-secondary)` | - |
 | `@button-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
diff --git a/packages/components/button/style/themes/seer.variable.less b/packages/components/button/style/themes/seer.variable.less
@@ -12,5 +12,5 @@
 
 @button-border-radius: var(--ix-border-radius-sm);
 
-@button-icon-color: var(--ix-text-color-title-secondary);
+@button-icon-color: var(--ix-text-color-secondary);
 @button-icon-font-size: var(--ix-font-size-lg);
diff --git a/packages/components/checkbox/style/index.less b/packages/components/checkbox/style/index.less
@@ -138,10 +138,6 @@
       }
     }
 
-    &.@{checkbox-prefix}-checked .@{checkbox-prefix}-input-tick {
-      border-top-color: var(--ix-text-color-info);
-    }
-
     &.@{checkbox-prefix}-indeterminate .@{checkbox-prefix}-input-box {
       &::after {
         background-color: var(--ix-text-color-info);
@@ -152,6 +148,15 @@
       z-index: 0;
       border-color: @checkbox-border-color;
     }
+
+    &:not(.@{checkbox-prefix}-checked).@{button-prefix} {
+      color: var(--ix-text-color-info);
+      background-color: var(--ix-background-color-middle);
+    }
+
+    &.@{checkbox-prefix}-checked .@{checkbox-prefix}-input-tick {
+      border-top-color: var(--ix-text-color-info);
+    }
   }
 
   &-group {

diff --git a/packages/components/config/src/defaultConfig.ts b/packages/components/config/src/defaultConfig.ts
@@ -213,7 +213,7 @@ export const defaultConfig: GlobalConfig = {
     destroyOnHide: false,
     placement: 'top',
     trigger: 'click',
-    offset: [0, 8],
+    offset: [0, 4],
   },
   popover: {
     autoAdjust: true,
@@ -223,7 +223,7 @@ export const defaultConfig: GlobalConfig = {
     showArrow: true,
     trigger: 'hover',
     closeIcon: 'close',
-    offset: [0, 8],
+    offset: [0, 4],
   },
   progress: {
     strokeLinecap: 'round',
@@ -339,7 +339,7 @@ export const defaultConfig: GlobalConfig = {
     autoAdjust: true,
     delay: 100,
     destroyOnHide: false,
-    offset: [0, 8],
+    offset: [0, 4],
     placement: 'top',
     trigger: 'hover',
   },
@@ -376,7 +376,7 @@ export const defaultConfig: GlobalConfig = {
     type: 'text',
     icon: {
       file: 'paper-clip',
-      remove: 'delete',
+      remove: 'close',
       retry: 'edit',
     },
   },

diff --git a/packages/components/config/src/seerConfig.ts b/packages/components/config/src/seerConfig.ts
@@ -5,21 +5,36 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import { h } from 'vue'
+
+import { IxIcon } from '@idux/components/icon'
+
 import { type DeepPartialGlobalConfig } from './globalConfig'
 
 export const seerConfig: DeepPartialGlobalConfig = {
   common: {
     theme: 'seer',
   },
+  button: {
+    size: 'sm',
+  },
   form: {
     colonless: true,
     labelAlign: 'start',
   },
+  menu: {
+    indent: 16,
+  },
   modal: {
-    maskClosable: false,
     centered: true,
+    maskClosable: false,
   },
   progress: {
     strokeLinecap: 'square',
   },
+  table: {
+    columnExpandable: {
+      icon: ({ expanded }) => h(IxIcon, { name: expanded ? 'minus-square' : 'plus-square' }),
+    },
+  },
 }
diff --git a/packages/components/config/src/types.ts b/packages/components/config/src/types.ts
@@ -463,7 +463,7 @@ export interface TableColumnBaseConfig {
 }
 
 export interface TableColumnExpandableConfig {
-  icon: string | VNodeChild | ((expanded: boolean) => string | VNodeChild)
+  icon: string | VNodeChild | ((options: { expanded: boolean; record: any }) => string | VNodeChild)
 }
 
 export interface TagConfig {

diff --git a/packages/components/empty/docs/Theme.zh.md b/packages/components/empty/docs/Theme.zh.md
@@ -2,5 +2,5 @@
 | --- | --- | --- | --- |
 | `@empty-color` | `var(--ix-text-color-info)` | - | - |
 | `@empty-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
-| `@empty-description-color` | `var(--ix-text-color-secondary)` | - | - |
+| `@empty-description-color` | `var(--ix-text-color-disabled)` | - | - |
 | `@empty-description-font-size` | `var(--ix-font-size-lg)` | - | - |
diff --git a/packages/components/empty/style/themes/default.variable.less b/packages/components/empty/style/themes/default.variable.less
@@ -1,5 +1,5 @@
 @empty-color: var(--ix-text-color-info);
 @empty-font-size: var(--ix-font-size-md);
 
-@empty-description-color: var(--ix-text-color-secondary);
+@empty-description-color: var(--ix-text-color-disabled);
 @empty-description-font-size: var(--ix-font-size-lg);
diff --git a/packages/components/form/docs/Theme.zh.md b/packages/components/form/docs/Theme.zh.md
@@ -54,5 +54,5 @@
 | `@form-item-tooltip-icon-font-size` | `@font-size-lg` | - | - |
 | `@form-item-tooltip-icon-color` | `@color-primary-l10` | - | - |
 | `@form-item-control-tooltip-right` | `-(@form-item-tooltip-icon-font-size + 4)` | - | - |
-| `@form-invalid-color` | `var(--ix-color-red-d10)` | - | - |
-| `@form-invalid-box-shadow` | `0 0 0 2px fade(@color-red-d10, 20%)` | - | - |
+| `@form-invalid-color` | `var(--ix-color-red)` | `var(--ix-color-red-d10)` | - |
+| `@form-invalid-box-shadow` | `0 0 0 2px fade(@color-red, 20%)` | `0 0 0 2px fade(@color-red-d10, 20%)` | - |
diff --git a/packages/components/form/style/themes/default.variable.less b/packages/components/form/style/themes/default.variable.less
@@ -68,5 +68,5 @@
 @form-item-control-tooltip-right: -(@form-item-tooltip-icon-font-size + 4);
 
 // form common variables
-@form-invalid-color: var(--ix-color-red-d10);
-@form-invalid-box-shadow: 0 0 0 2px fade(@color-red-d10, 20%);
+@form-invalid-color: var(--ix-color-red);
+@form-invalid-box-shadow: 0 0 0 2px fade(@color-red, 20%);
diff --git a/packages/components/form/style/themes/seer.variable.less b/packages/components/form/style/themes/seer.variable.less
@@ -16,3 +16,7 @@
 @form-item-label-color: @color-graphite-d10;
 
 @form-icon-hover-color: @color-primary;
+
+// form common variables
+@form-invalid-color: var(--ix-color-red-d10);
+@form-invalid-box-shadow: 0 0 0 2px fade(@color-red-d10, 20%);
diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md
@@ -8,7 +8,7 @@
 | `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - |
 | `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - |
 | `@header-font-size-xl` | `var(--ix-font-size-2xl)` | - | - |
-| `@header-color` | `var(--ix-text-color-title)` | `var(--ix-text-color)` | - |
+| `@header-color` | `var(--ix-text-color-title)` | - | - |
 | `@header-color-hover` | `var(--ix-color-primary-l10)` | - | - |
 | `@header-color-active` | `var(--ix-color-primary-d10)` | - | - |
 | `@header-color-disabled` | `var(--ix-text-color-disabled)` | - | - |

diff --git a/packages/components/header/style/themes/seer.variable.less b/packages/components/header/style/themes/seer.variable.less
@@ -1,7 +1,5 @@
 @import './default.variable.less';
 
-@header-color: var(--ix-text-color);
-
 @header-description-font-size: var(--ix-font-size-sm);
 
 @header-icon-font-size: var(--ix-font-size-lg);
diff --git a/packages/components/input/docs/Theme.zh.md b/packages/components/input/docs/Theme.zh.md
@@ -20,5 +20,5 @@
 | `@input-box-shadow-focus` | `0 0 0 2px fade(@color-primary, 20%)` | - | - |
 | `@input-icon-color` | `var(--ix-text-color-title-secondary)` | - | - |
 | `@input-icon-color-hover` | `var(--ix-color-primary)` | - | - |
-| `@input-icon-font-size` | `inherit` | - | - |
+| `@input-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@input-addon-background-color` | `var(--ix-background-color-light)` | - | - |
diff --git a/packages/components/input/style/themes/default.variable.less b/packages/components/input/style/themes/default.variable.less
@@ -25,6 +25,6 @@
 
 @input-icon-color: var(--ix-text-color-title-secondary);
 @input-icon-color-hover: var(--ix-color-primary);
-@input-icon-font-size: inherit;
+@input-icon-font-size: var(--ix-font-size-lg);
 
 @input-addon-background-color: var(--ix-background-color-light);
diff --git a/packages/components/menu/docs/Api.zh.md b/packages/components/menu/docs/Api.zh.md
@@ -11,7 +11,7 @@
 | `customAdditional` | 自定义下拉选项的额外属性 | `MenuCustomAdditional` | - | - | 例如 `class`, 或者原生事件 |
 | `dataSource` | 菜单数据数组 | `MenuData[]` | - | - | 优先级高于 `default` 插槽 |
 | `getKey` | 获取数据的唯一标识 | `string \| (data: MenuData) => VKey` | `key` | ✅ | - |
-| `indent` | `inline` 模式时的菜单缩进宽度 | `string \| number` | `24` | ✅ | 仅支持 `inline` 模式 |
+| `indent` | `inline` 模式时的菜单缩进宽度 | `string \| number` | `24` | ✅ | `seer` 主题下默认为 `16` |
 | `mode` | 菜单模式，现在支持垂直、水平和内嵌 | `'vertical' \| 'horizontal' \| 'inline'` | `'vertical'` | - | - |
 | `multiple` | 是否支持多选 | `boolean` | `false` | - | - |
 | `overlayClassName` | 悬浮层的自定义 `class` | `string` | - | - | `inline` 模式时无效 |

diff --git a/packages/components/pagination/docs/Theme.zh.md b/packages/components/pagination/docs/Theme.zh.md
@@ -10,12 +10,12 @@
 | `@pagination-item-content-size-md` | `24px` | - | - |
 | `@pagination-item-content-size-lg` | `32px` | - | - |
 | `@pagination-item-content-border-radius` | `50%` | - | - |
-| `@pagination-item-content-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
+| `@pagination-item-content-icon-font-size` | `var(--ix-font-size-lg)` | - | - |
 | `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - |
 | `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - |
 | `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
 | `@pagination-background-color` | `var(--ix-background-color)` | - | - |
 | `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - |
 | `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - |
-| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | `var(--ix-background-color-deep)` | - |
+| `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
 | `@pagination-outline-color` | `var(--ix-color-primary-l10)` | - | - |
diff --git a/packages/components/pagination/style/index.less b/packages/components/pagination/style/index.less
@@ -85,7 +85,7 @@
       border-radius: @pagination-item-content-border-radius;
 
       > .@{icon-prefix},
-      &-jumper > .@{icon-prefix} {
+      .@{pagination-prefix}-item-jumper > .@{icon-prefix} {
         font-size: @pagination-item-content-icon-font-size;
       }
     }
@@ -95,6 +95,8 @@
     }
 
     &-jumper {
+      display: inline-flex;
+
       > .@{icon-prefix} {
         display: none;
       }

diff --git a/packages/components/pagination/style/themes/default.variable.less b/packages/components/pagination/style/themes/default.variable.less
@@ -11,7 +11,7 @@
 @pagination-item-content-size-lg: 32px;
 
 @pagination-item-content-border-radius: 50%;
-@pagination-item-content-icon-font-size: inherit;
+@pagination-item-content-icon-font-size: var(--ix-font-size-lg);
 
 @pagination-color-hover: var(--ix-text-color);
 @pagination-color-active: var(--ix-text-color-inverse);

diff --git a/packages/components/pagination/style/themes/seer.variable.less b/packages/components/pagination/style/themes/seer.variable.less
@@ -3,10 +3,7 @@
 @pagination-font-size-md: var(--ix-font-size-sm);
 @pagination-font-size-lg: var(--ix-font-size-md);
 
-@pagination-item-content-icon-font-size: var(--ix-font-size-lg);
-
 @pagination-color-hover: var(--ix-color-primary);
 @pagination-color-active: var(--ix-color-primary);
 @pagination-background-color-hover: var(--ix-background-color-light);
 @pagination-background-color-active: var(--ix-color-primary-l50);
-@pagination-background-color-disabled: var(--ix-background-color-deep);
diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
@@ -22,24 +22,25 @@
   --ix-color-brown: @color-brown;
 
   // Text
-  --ix-text-color: @color-grey-d40; // 默认
+  --ix-text-color: @color-grey-d40; // 默认文字颜色
   --ix-text-color-inverse: @color-white; // 反向
   --ix-text-color-disabled: @color-grey-d10; // 禁用
   --ix-text-color-info: @color-grey; // 提示
   --ix-text-color-secondary: @color-grey-d20; // 辅助
-  --ix-text-color-title: @color-grey-d50; // 标题
+  --ix-text-color-title: @color-grey-d50; // 主标题
   --ix-text-color-title-secondary: @color-grey-d30; // 次级标题
 
   // Background
-  --ix-background-color: @color-white;
-  --ix-background-color-inverse: @color-grey-d40;
-  --ix-background-color-deep: @color-grey-l40;
-  --ix-background-color-light: @color-grey-l50;
+  --ix-background-color: @color-white; // 默认背景色
+  --ix-background-color-inverse: @color-grey-d40; // 反向
+  --ix-background-color-deep: @color-grey-l30; // 3 级, 禁用
+  --ix-background-color-middle: @color-grey-l40; // 2 级, 强调
+  --ix-background-color-light: @color-grey-l50; // 1 级, 悬浮
 
   // Border
-  --ix-border-color: @color-grey-l20;
-  --ix-border-color-inverse: @color-white;
-  --ix-border-color-secondary: @color-grey-l30;
+  --ix-border-color: @color-grey-l20; // 默认边框颜色
+  --ix-border-color-inverse: @color-white; // 反向
+  --ix-border-color-secondary: @color-grey-l30; // 次级
 
   // Border-Radius
   --ix-border-radius-sm: 2px;

diff --git a/packages/components/style/themes/seer.less b/packages/components/style/themes/seer.less
@@ -8,12 +8,13 @@
   --ix-text-color-disabled: @color-graphite-d10;
   --ix-text-color-info: @color-graphite;
   --ix-text-color-secondary: @color-graphite-d20;
-  --ix-text-color-title: @color-graphite-d50;
+  --ix-text-color-title: @color-graphite-d40;
   --ix-text-color-title-secondary: @color-graphite-d30;
 
   // Background
   --ix-background-color-inverse: @color-graphite-d40;
-  --ix-background-color-deep: @color-graphite-l40;
+  --ix-background-color-deep: @color-graphite-l30;
+  --ix-background-color-middle: @color-graphite-l40;
   --ix-background-color-light: @color-graphite-l50;
 
   // Border

diff --git a/packages/components/table/docs/Theme.zh.md b/packages/components/table/docs/Theme.zh.md
@@ -16,7 +16,7 @@
 | `@table-border-color` | `var(--ix-border-color-secondary)` | - | - |
 | `@table-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
 | `@table-head-color` | `var(--ix-text-color-title-secondary)` | - | - |
-| `@table-head-background-color` | `var(--ix-background-color-light)` | - | - |
+| `@table-head-background-color` | `var(--ix-background-color-middle)` | - | - |
 | `@table-head-separator-color` | `var(--ix-border-color)` | - | - |
 | `@table-head-icon-color` | `inherit` | - | - |
 | `@table-head-icon-color-active` | `var(--ix-color-primary)` | - | - |
@@ -26,4 +26,4 @@
 | `@table-body-row-background-color-selected` | `var(--ix-color-primary-l50)` | - | - |
 | `@table-expandable-icon-color` | `var(--ix-text-color-info)` | - | - |
 | `@table-expandable-background-color` | `var(--ix-background-color-light)` | - | - |
-| `@table-expandable-background-color-hover` | `var(--ix-background-color-deep)` | - | - |
+| `@table-expandable-background-color-hover` | `var(--ix-background-color-middle)` | - | - |
diff --git a/packages/components/table/style/themes/default.variable.less b/packages/components/table/style/themes/default.variable.less
@@ -19,7 +19,7 @@
 @table-border-radius: var(--ix-border-radius-md);
 
 @table-head-color: var(--ix-text-color-title-secondary);
-@table-head-background-color: var(--ix-background-color-light);
+@table-head-background-color: var(--ix-background-color-middle);
 @table-head-separator-color: var(--ix-border-color);
 @table-head-icon-color: inherit;
 @table-head-icon-color-active: var(--ix-color-primary);
@@ -31,4 +31,4 @@
 
 @table-expandable-icon-color: var(--ix-text-color-info);
 @table-expandable-background-color: var(--ix-background-color-light);
-@table-expandable-background-color-hover: var(--ix-background-color-deep);
+@table-expandable-background-color-hover: var(--ix-background-color-middle);
diff --git a/packages/components/tooltip/docs/Api.zh.md b/packages/components/tooltip/docs/Api.zh.md
@@ -10,7 +10,7 @@
 | `closeOnDeactivated` | 是否在 [onDeactivated](https://cn.vuejs.org/api/composition-api-lifecycle.html#ondeactivated) 时关闭 | `boolean` | `true` | - | - |
 | `destroyOnHide` | 隐藏时是否销毁浮层 | `boolean` | `false` | ✅ | - |
 | `delay` | 浮层显示隐藏延时 | `number \| [number, number]` | `100` | ✅ | - |
-| `offset` | 浮层相对目标元素的偏移量 | `[number, number]` | `[0, 12]` | ✅ | 第一个元素是水平偏移量，第二个元素是垂直偏移量 |
+| `offset` | 浮层相对目标元素的偏移量 | `[number, number]` | `[0, 4]` | ✅ | 第一个元素是水平偏移量，第二个元素是垂直偏移量 |
 | `overlayContainer` | 自定义容器节点 | `string \| HTMLElement \| () => string \| HTMLElement` | - | ✅ | - |
 | `placement` | 浮层的对齐方式 | `OverlayPlacement` | `top` | ✅ | - |
 | `title` | 浮层的标题 | `string \| #title` | - | - | - |