refactor: update css variable (#1262)

IDuxFE · Nov 8, 2022 · 1cd30cb · 1cd30cb
1 parent fe6a533
commit 1cd30cb
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 114 deletions.
diff --git a/packages/components/button/docs/Theme.zh.md b/packages/components/button/docs/Theme.zh.md
@@ -1,25 +1,25 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@button-height-xs` | `var(--ix-height-sm)` | - | - |
-| `@button-height-sm` | `var(--ix-height-md)` | - | - |
-| `@button-height-md` | `var(--ix-height-md)` | - | - |
-| `@button-height-lg` | `var(--ix-height-lg)` | - | - |
-| `@button-height-xl` | `var(--ix-height-xl)` | - | - |
 | `@button-font-size-xs` | `var(--ix-font-size-sm)` | - | - |
 | `@button-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
 | `@button-font-size-md` | `var(--ix-font-size-md)` | - | - |
-| `@button-font-size-lg` | `var(--ix-font-size-md)` | - | - |
-| `@button-font-size-xl` | `var(--ix-font-size-lg)` | - | - |
+| `@button-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
+| `@button-font-size-xl` | `var(--ix-font-size-xl)` | `var(--ix-font-size-lg)` | - |
 | `@button-min-width-xs` | `auto` | `56px` | - |
 | `@button-min-width-sm` | `auto` | `64px` | - |
 | `@button-min-width-md` | `auto` | `72px` | - |
 | `@button-min-width-lg` | `auto` | `120px` | - |
 | `@button-min-width-xl` | `auto` | `160px` | - |
-| `@button-padding-xs` | `0 var(--ix-spacing-sm)` | - | - |
-| `@button-padding-sm` | `0 var(--ix-spacing-md)` | - | - |
-| `@button-padding-md` | `0 var(--ix-spacing-lg)` | - | - |
-| `@button-padding-lg` | `0 var(--ix-spacing-xl)` | - | - |
-| `@button-padding-xl` | `0 var(--ix-spacing-2xl)` | - | - |
+| `@button-height-xs` | `var(--ix-height-sm)` | - | - |
+| `@button-height-sm` | `var(--ix-height-md)` | - | - |
+| `@button-height-md` | `var(--ix-height-md)` | - | - |
+| `@button-height-lg` | `var(--ix-height-lg)` | - | - |
+| `@button-height-xl` | `var(--ix-height-xl)` | - | - |
+| `@button-padding-horizontal-xs` | `var(--ix-spacing-sm)` | - | - |
+| `@button-padding-horizontal-sm` | `var(--ix-spacing-md)` | - | - |
+| `@button-padding-horizontal-md` | `var(--ix-spacing-lg)` | - | - |
+| `@button-padding-horizontal-lg` | `var(--ix-spacing-xl)` | - | - |
+| `@button-padding-horizontal-xl` | `var(--ix-spacing-2xl)` | - | - |
 | `@button-color` | `var(--ix-text-color)` | - | - |
 | `@button-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
 | `@button-background-color` | `var(--ix-background-color)` | - | - |

diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -59,23 +59,23 @@
   }
 
   &-xs {
-    .button-size(@button-height-xs, @button-font-size-xs, @button-min-width-xs, @button-padding-xs);
+    .button-size(@button-height-xs, @button-font-size-xs, @button-min-width-xs, @button-padding-horizontal-xs);
   }
 
   &-sm {
-    .button-size(@button-height-sm, @button-font-size-sm, @button-min-width-sm, @button-padding-sm);
+    .button-size(@button-height-sm, @button-font-size-sm, @button-min-width-sm, @button-padding-horizontal-sm);
   }
 
   &-md {
-    .button-size(@button-height-md, @button-font-size-md, @button-min-width-md, @button-padding-md);
+    .button-size(@button-height-md, @button-font-size-md, @button-min-width-md, @button-padding-horizontal-md);
   }
 
   &-lg {
-    .button-size(@button-height-lg, @button-font-size-lg, @button-min-width-lg, @button-padding-lg);
+    .button-size(@button-height-lg, @button-font-size-lg, @button-min-width-lg, @button-padding-horizontal-lg);
   }
 
   &-xl {
-    .button-size(@button-height-xl, @button-font-size-xl, @button-min-width-xl, @button-padding-xl);
+    .button-size(@button-height-xl, @button-font-size-xl, @button-min-width-xl, @button-padding-horizontal-xl);
   }
 
   &-primary {

diff --git a/packages/components/button/style/mixin.less b/packages/components/button/style/mixin.less
@@ -1,9 +1,9 @@
-.button-size(@height, @font-size, @min-width, @padding) {
+.button-size(@height, @font-size, @min-width, @padding-horizontal) {
   height: @height;
   line-height: calc(@font-size + var(--ix-line-height-gutter));
   font-size: @font-size;
   min-width: @min-width;
-  padding: @padding;
+  padding: 0 @padding-horizontal;
 
   &.@{button-prefix}-circle,
   &.@{button-prefix}-square {

diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less
@@ -1,26 +1,26 @@
-@button-height-xs: var(--ix-height-sm);
-@button-height-sm: var(--ix-height-md);
-@button-height-md: var(--ix-height-md);
-@button-height-lg: var(--ix-height-lg);
-@button-height-xl: var(--ix-height-xl);
-
 @button-font-size-xs: var(--ix-font-size-sm);
 @button-font-size-sm: var(--ix-font-size-sm);
 @button-font-size-md: var(--ix-font-size-md);
-@button-font-size-lg: var(--ix-font-size-md);
-@button-font-size-xl: var(--ix-font-size-lg);
+@button-font-size-lg: var(--ix-font-size-lg);
+@button-font-size-xl: var(--ix-font-size-xl);
 
 @button-min-width-xs: auto;
 @button-min-width-sm: auto;
 @button-min-width-md: auto;
 @button-min-width-lg: auto;
 @button-min-width-xl: auto;
 
-@button-padding-xs: 0 var(--ix-spacing-sm);
-@button-padding-sm: 0 var(--ix-spacing-md);
-@button-padding-md: 0 var(--ix-spacing-lg);
-@button-padding-lg: 0 var(--ix-spacing-xl);
-@button-padding-xl: 0 var(--ix-spacing-2xl);
+@button-height-xs: var(--ix-height-sm);
+@button-height-sm: var(--ix-height-md);
+@button-height-md: var(--ix-height-md);
+@button-height-lg: var(--ix-height-lg);
+@button-height-xl: var(--ix-height-xl);
+
+@button-padding-horizontal-xs: var(--ix-spacing-sm);
+@button-padding-horizontal-sm: var(--ix-spacing-md);
+@button-padding-horizontal-md: var(--ix-spacing-lg);
+@button-padding-horizontal-lg: var(--ix-spacing-xl);
+@button-padding-horizontal-xl: var(--ix-spacing-2xl);
 
 @button-color: var(--ix-text-color);
 @button-color-disabled: var(--ix-text-color-disabled);

diff --git a/packages/components/button/style/themes/seer.variable.less b/packages/components/button/style/themes/seer.variable.less
@@ -1,5 +1,8 @@
 @import './default.variable.less';
 
+@button-font-size-lg: var(--ix-font-size-md);
+@button-font-size-xl: var(--ix-font-size-lg);
+
 @button-min-width-xs: 56px;
 @button-min-width-sm: 64px;
 @button-min-width-md: 72px;

diff --git a/packages/components/collapse/docs/Theme.zh.md b/packages/components/collapse/docs/Theme.zh.md
@@ -2,6 +2,9 @@
 | --- | --- | --- | --- |
 | `@collapse-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
 | `@collapse-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@collapse-padding-horizontal-sm` | `var(--ix-spacing-md)` | - | - |
+| `@collapse-padding-horizontal-md` | `var(--ix-spacing-lg)` | - | - |
 | `@collapse-border` | `1px solid var(--ix-border-color)` | - | - |
 | `@collapse-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |
+| `@collapse-background-color` | `var(--ix-background-color)` | - | - |
 | `@collapse-content-background-color` | `var(--ix-background-color-light)` | - | - |
diff --git a/packages/components/collapse/style/index.less b/packages/components/collapse/style/index.less
@@ -3,19 +3,10 @@
 .@{collapse-prefix} {
   .reset-component-new();
 
-  cursor: pointer;
+  background-color: @collapse-background-color;
 
   &-sm {
-    font-size: @collapse-font-size-sm;
-
-    .@{header-prefix} {
-      padding-left: var(--ix-spacing-md);
-      padding-right: var(--ix-spacing-md);
-    }
-
-    .@{collapse-prefix}-panel-content-box {
-      padding: var(--ix-spacing-md);
-    }
+    .collapse-size(@collapse-font-size-sm, @collapse-padding-horizontal-sm);
 
     .@{collapse-prefix}-panel {
       border-bottom: none;
@@ -32,16 +23,7 @@
   }
 
   &-md {
-    font-size: @collapse-font-size-md;
-
-    .@{header-prefix} {
-      padding-left: var(--ix-spacing-lg);
-      padding-right: var(--ix-spacing-lg);
-    }
-
-    .@{collapse-prefix}-panel-content-box {
-      padding: var(--ix-spacing-lg);
-    }
+    .collapse-size(@collapse-font-size-md, @collapse-padding-horizontal-md);
 
     .@{collapse-prefix}-panel + .@{collapse-prefix}-panel {
       margin-top: var(--ix-spacing-sm);
@@ -56,6 +38,7 @@
     border: @collapse-border;
 
     .@{header-prefix} {
+      cursor: pointer;
       border-radius: @collapse-border-radius;
     }
 
@@ -66,7 +49,9 @@
     }
 
     &-disabled {
-      cursor: not-allowed;
+      .@{header-prefix} {
+        cursor: not-allowed;
+      }
     }
   }
 
@@ -82,12 +67,23 @@
 
   &-ghost {
     background-color: transparent;
+    border-color: transparent;
 
     .@{collapse-prefix}-panel {
-      &-content,
+      border-color: transparent;
+
       .@{header-prefix} {
         background-color: transparent;
       }
+
+      &-content {
+        border-color: transparent;
+        background-color: @collapse-background-color;
+      }
+    }
+
+    .@{collapse-prefix}-panel + .@{collapse-prefix}-panel {
+      margin-top: 0;
     }
   }
 
@@ -96,3 +92,17 @@
     background-color: transparent;
   }
 }
+
+.collapse-size(@font-size, @padding-horizontal) {
+  font-size: @font-size;
+  line-height: calc(@font-size + var(--ix-line-height-gutter));
+
+  .@{header-prefix} {
+    padding-left: @padding-horizontal;
+    padding-right: @padding-horizontal;
+  }
+
+  .@{collapse-prefix}-panel-content-box {
+    padding: @padding-horizontal;
+  }
+}
diff --git a/packages/components/collapse/style/themes/default.variable.less b/packages/components/collapse/style/themes/default.variable.less
@@ -1,7 +1,12 @@
 @collapse-font-size-sm: var(--ix-font-size-sm);
 @collapse-font-size-md: var(--ix-font-size-md);
 
+@collapse-padding-horizontal-sm: var(--ix-spacing-md);
+@collapse-padding-horizontal-md: var(--ix-spacing-lg);
+
 @collapse-border: 1px solid var(--ix-border-color);
 @collapse-border-radius: var(--ix-border-radius-md);
 
+@collapse-background-color: var(--ix-background-color);
+
 @collapse-content-background-color: var(--ix-background-color-light);
diff --git a/packages/components/header/demo/PrefixSuffix.vue b/packages/components/header/demo/PrefixSuffix.vue
@@ -14,10 +14,8 @@
       <IxIcon name="caret-left-filled" @click="onPrefixClick" />
     </template>
     <template #suffix>
-      <IxSpace>
-        <IxIcon name="setting" @click="onSuffixClick" />
-        <IxIcon name="menu" @click="onSuffixClick" />
-      </IxSpace>
+      <IxButton icon="setting" mode="text" size="xs" @click="onSuffixClick" />
+      <IxButton icon="menu" mode="text" size="xs" @click="onSuffixClick" />
     </template>
   </IxHeader>
 </template>

diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less
@@ -37,17 +37,19 @@
     align-self: center;
   }
 
+  &-title-wrapper {
+    margin-right: 16px;
+  }
+
   &-title {
     font-weight: @header-title-font-weight;
-    margin-right: 16px;
     .ellipsis();
   }
 
   &-sub-title {
     color: @header-sub-title-color;
     font-size: @header-sub-title-font-size;
     line-height: calc(@header-sub-title-font-size + var(--ix-line-height-gutter));
-    margin-right: 16px;
     .ellipsis();
   }
 
@@ -59,19 +61,19 @@
 
   &-prefix,
   &-suffix {
-    align-self: baseline;
+    align-self: flex-start;
+    cursor: pointer;
 
-    .@{icon-prefix} {
-      font-size: @header-icon-font-size;
-      cursor: pointer;
+    &:hover > .@{icon-prefix} {
+      color: @header-color-hover;
+    }
 
-      &:hover {
-        color: @header-color-hover;
-      }
+    &:active > .@{icon-prefix} {
+      color: @header-color-active;
+    }
 
-      &:active {
-        color: @header-color-active;
-      }
+    > .@{icon-prefix} {
+      font-size: @header-icon-font-size;
     }
   }
 
@@ -87,12 +89,12 @@
 
     .@{header-prefix}-prefix,
     .@{header-prefix}-suffix {
-      cursor: not-allowed;
       color: @header-color-disabled;
+      cursor: not-allowed;
 
-      .@{icon-prefix} {
-        &:hover,
-        &:active {
+      &:hover,
+      &:active {
+        > .@{icon-prefix} {
           color: @header-color-disabled;
         }
       }

diff --git a/packages/components/table/demo/TreeTable.vue b/packages/components/table/demo/TreeTable.vue
@@ -1,7 +1,7 @@
 <template>
   <IxTable :columns="columns" :dataSource="data">
     <template #name="{ value }">
-      <a>{{ value }}</a>
+      <span>{{ value }}</span>
     </template>
     <template #action="{ record }">
       <a style="margin-right: 8px">Invite {{ record.name }}</a>

diff --git a/packages/components/table/docs/Theme.zh.md b/packages/components/table/docs/Theme.zh.md
@@ -9,9 +9,9 @@
 | `@table-body-row-height-sm` | `var(--ix-height-lg)` | `var(--ix-height-md)` | - |
 | `@table-body-row-height-md` | `var(--ix-height-xl)` | `var(--ix-height-lg)` | - |
 | `@table-body-row-height-lg` | `var(--ix-height-2xl)` | - | - |
-| `@table-row-padding-sm` | `var(--ix-spacing-xs) var(--ix-spacing-sm)` | - | - |
-| `@table-row-padding-md` | `var(--ix-spacing-sm) var(--ix-spacing-md)` | - | - |
-| `@table-row-padding-lg` | `var(--ix-spacing-md) var(--ix-spacing-lg)` | - | - |
+| `@table-row-padding-horizontal-sm` | `var(--ix-spacing-sm)` | - | - |
+| `@table-row-padding-horizontal-md` | `var(--ix-spacing-md)` | - | - |
+| `@table-row-padding-horizontal-lg` | `var(--ix-spacing-lg)` | - | - |
 | `@table-background-color` | `var(--ix-background-color)` | - | - |
 | `@table-border-color` | `var(--ix-border-color-secondary)` | - | - |
 | `@table-border-radius` | `var(--ix-border-radius-md)` | `var(--ix-border-radius-sm)` | - |

diff --git a/packages/components/table/src/main/ColGroup.tsx b/packages/components/table/src/main/ColGroup.tsx
@@ -30,10 +30,9 @@ export default defineComponent({
         return
       }
 
-      const widths = isFixedHolder ? columnWidthsWithScrollBar.value : columnWidths.value
       const prefixCls = mergedPrefixCls.value
-
-      const children = flattedColumns.value.map((column, colIndex) => {
+      const widths = isFixedHolder ? columnWidthsWithScrollBar.value : columnWidths.value
+      const children = columns.map((column, colIndex) => {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         const { key, type } = column