fix(comp:*): the font size under seer theme is incorrect (#1343)

packages/components/alert/demo/Description.vue

@@ -4,6 +4,7 @@
       title="Vue 是什么？"
       description="Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。"
       type="info"
+      closable
     >
     </IxAlert>
     <IxAlert type="success">

packages/components/alert/docs/Theme.zh.md

@@ -1,11 +1,10 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
 | `@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` | `var(--ix-font-size-lg)` | - | - |
-| `@alert-color` | `@text-color` | - | - |
-| `@alert-color-secondary` | `@text-color-secondary` | - | - |
+| `@alert-icon-color` | `var(--ix-text-color-secondary)` | - | - |
+| `@alert-icon-color-hover` | `var(--ix-color-primary)` | - | - |
+| `@alert-banner-border-color` | `var(--ix-border-color-secondary)` | - | - |
 | `@alert-success-color` | `var(--ix-color-turquoise)` | `var(--ix-color-turquoise-d10)` | - |
 | `@alert-info-color` | `var(--ix-color-primary)` | - | - |
 | `@alert-warning-color` | `var(--ix-color-brown)` | `#a35f40` | - |
@@ -16,4 +15,3 @@
 | `@alert-warning-background-color` | `#fffaf2` | - | - |
 | `@alert-error-background-color` | `#fff2f2` | - | - |
 | `@alert-offline-background-color` | `#f7f7f8` | - | - |
-| `@alert-banner-border-color` | `var(--ix-border-color-secondary)` | - | - |

packages/components/alert/style/index.less

@@ -3,13 +3,12 @@
 
 .@{alert-prefix} {
   .reset-component-new();
+  .reset-font-size();
 
   display: flex;
   align-items: center;
+  min-height: @alert-height;
   padding: 0 16px;
-  font-size: @alert-font-size;
-  line-height: calc(@alert-font-size + var(--ix-line-height-gutter));
-  color: @alert-color;
   border: 1px solid transparent;
   border-radius: @alert-border-radius;
 
@@ -30,45 +29,45 @@
   &-close-icon {
     cursor: pointer;
     margin-left: 16px;
-    color: @alert-color-secondary;
+    color: @alert-icon-color;
     transition: color var(--ix-transition-duration-fast);
 
     &:hover {
-      color: @alert-color;
+      color: @alert-icon-color-hover;
     }
   }
 
   &-icon,
   &-close-icon {
-    font-size: @alert-icon-font-size;
+    font-size: var(--ix-font-size-icon);
   }
 
   &-content {
     flex: 1;
     min-width: 0;
-    padding: calc((@alert-height - @alert-font-size - var(--ix-line-height-gutter) - 2px) / 2) 0;
+  }
+
+  &-description {
+    .reset-font-size();
   }
 
   &-with-description {
+    .reset-font-size(calc(var(--ix-font-size) + 2px));
+
     align-items: baseline;
-    font-size: calc(@alert-font-size + 2px);
-    line-height: calc(@alert-font-size + 2px + var(--ix-line-height-gutter));
+    padding-top: 6px;
+    padding-bottom: 6px;
 
     .@{alert-prefix}-title {
       margin-bottom: 4px;
     }
-
-    .@{alert-prefix}-description {
-      font-size: @alert-font-size;
-      line-height: calc(@alert-font-size + var(--ix-line-height-gutter));
-    }
   }
 
   &-pagination {
     margin-left: 16px;
 
     &.@{pagination-prefix} {
-      color: @alert-color-secondary;
+      color: @alert-icon-color;
       background-color: transparent;
 
       .@{pagination-prefix}-item:hover,

packages/components/alert/style/themes/default.variable.less

@@ -1,10 +1,8 @@
 @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: var(--ix-font-size-lg);
-
-@alert-color: @text-color;
-@alert-color-secondary: @text-color-secondary;
+@alert-icon-color: var(--ix-text-color-secondary);
+@alert-icon-color-hover: var(--ix-color-primary);
+@alert-banner-border-color: var(--ix-border-color-secondary);
 
 @alert-success-color: var(--ix-color-turquoise);
 @alert-info-color: var(--ix-color-primary);
@@ -17,5 +15,3 @@
 @alert-warning-background-color: #fffaf2;
 @alert-error-background-color: #fff2f2;
 @alert-offline-background-color: #f7f7f8;
-
-@alert-banner-border-color: var(--ix-border-color-secondary);

packages/components/alert/style/themes/seer.variable.less

@@ -1,7 +1,6 @@
 @import './default.variable.less';
 
 @alert-border-radius: var(--ix-border-radius-sm);
-@alert-font-size: var(--ix-font-size-sm);
 
 @alert-success-color: var(--ix-color-turquoise-d10);
 @alert-warning-color: #a35f40;

packages/components/button/style/index.less

@@ -3,6 +3,7 @@
 
 .@{button-prefix} {
   .reset-component-new();
+  .reset-color(@button-color, @button-background-color);
 
   position: relative;
   display: inline-flex;
@@ -16,8 +17,6 @@
   touch-action: manipulation;
   outline: none;
   text-decoration: none;
-  color: @button-color;
-  background-color: @button-background-color;
   border: 1px solid @button-border-color;
   border-radius: @button-border-radius;
   transition: all var(--ix-transition-duration-fast) var(--ix-ease-in-out);

packages/components/button/style/mixin.less

@@ -1,7 +1,7 @@
 .button-size(@height, @font-size, @min-width, @padding-horizontal) {
+  .reset-font-size(@font-size);
+
   height: @height;
-  line-height: calc(@font-size + var(--ix-line-height-gutter));
-  font-size: @font-size;
   min-width: @min-width;
   padding: 0 @padding-horizontal;
 

packages/components/card/docs/Theme.zh.md

@@ -8,7 +8,6 @@
 | `@card-padding-lg` | `@spacing-xl` | - | - |
 | `@card-border-width` | `@border-width-sm` | - | - |
 | `@card-border-style` | `@border-style` | - | - |
-| `@card-background-color` | `var(--ix-background-color)` | - | - |
 | `@card-border-color` | `@color-graphite-l30` | - | - |
 | `@card-border-color-hover` | `transparent` | - | - |
 | `@card-border-radius` | `@border-radius-sm` | - | - |

packages/components/card/style/index.less

@@ -2,9 +2,9 @@
 
 .@{card-prefix} {
   .reset-component-new();
+  .reset-color();
 
   position: relative;
-  background-color: @card-background-color;
   border: @card-border-width @card-border-style @card-border-color;
   border-radius: @card-border-radius;
   overflow: hidden;
@@ -202,8 +202,7 @@
 }
 
 .card-size(@font-size, @card-padding) {
-  font-size: @font-size;
-  line-height: calc(@font-size + var(--ix-line-height-gutter));
+  .reset-font-size(@font-size);
 
   > .@{header-prefix} {
     padding-left: @card-padding;

packages/components/card/style/themes/default.variable.less

@@ -8,7 +8,6 @@
 
 @card-border-width: @border-width-sm;
 @card-border-style: @border-style;
-@card-background-color: var(--ix-background-color);
 @card-border-color: @color-graphite-l30;
 @card-border-color-hover: transparent;
 @card-border-radius: @border-radius-sm;

packages/components/checkbox/docs/Theme.zh.md

@@ -1,6 +1,5 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@checkbox-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@checkbox-color` | `var(--ix-text-color)` | - | - |
 | `@checkbox-color-active` | `var(--ix-color-primary)` | - | - |
 | `@checkbox-color-disabled` | `var(--ix-text-color-disabled)` | - | - |

packages/components/checkbox/style/index.less

@@ -17,9 +17,10 @@
     }
 
     .@{checkbox-prefix}-label {
-      font-size: @checkbox-font-size;
-      line-height: calc(@checkbox-font-size + var(--ix-line-height-gutter));
+      .reset-font-size();
+
       padding: @checkbox-label-padding;
+      color: @checkbox-color;
     }
   }
 

packages/components/checkbox/style/themes/default.variable.less

@@ -1,4 +1,3 @@
-@checkbox-font-size: var(--ix-font-size-md);
 @checkbox-color: var(--ix-text-color);
 @checkbox-color-active: var(--ix-color-primary);
 @checkbox-color-disabled: var(--ix-text-color-disabled);

packages/components/checkbox/style/themes/seer.variable.less

@@ -1,6 +1,5 @@
 @import './default.variable.less';
 
-@checkbox-font-size: var(--ix-font-size-sm);
 @checkbox-border-radius: var(--ix-border-radius-sm);
 
 @checkbox-label-padding: 0 4px;

packages/components/collapse/docs/Theme.zh.md

@@ -6,5 +6,4 @@
 | `@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)` | - | - |

packages/components/collapse/style/index.less

@@ -2,8 +2,7 @@
 
 .@{collapse-prefix} {
   .reset-component-new();
-
-  background-color: @collapse-background-color;
+  .reset-color();
 
   &-sm {
     .collapse-size(@collapse-font-size-sm, @collapse-padding-horizontal-sm);
@@ -78,7 +77,7 @@
 
       &-content {
         border-color: transparent;
-        background-color: @collapse-background-color;
+        background-color: var(--ix-background-color);
       }
     }
 
@@ -94,8 +93,7 @@
 }
 
 .collapse-size(@font-size, @padding-horizontal) {
-  font-size: @font-size;
-  line-height: calc(@font-size + var(--ix-line-height-gutter));
+  .reset-font-size(@font-size);
 
   .@{header-prefix} {
     padding-left: @padding-horizontal;

packages/components/collapse/style/themes/default.variable.less

@@ -7,6 +7,4 @@
 @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);

packages/components/drawer/docs/Theme.zh.md

@@ -1,7 +1,5 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@drawer-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
-| `@drawer-background-color` | `var(--ix-background-color)` | - | - |
 | `@drawer-box-shadow-start` | `@shadow-right-lg` | - | - |
 | `@drawer-box-shadow-end` | `@shadow-left-lg` | - | - |
 | `@drawer-box-shadow-top` | `@shadow-bottom-lg` | - | - |

packages/components/drawer/style/index.less

@@ -8,8 +8,6 @@
   pointer-events: none;
   width: 100%;
   height: 100%;
-  font-size: @drawer-font-size;
-  line-height: calc(@drawer-font-size + var(--ix-line-height-gutter));
 
   &-wrapper {
     position: fixed;
@@ -38,11 +36,13 @@
   }
 
   &-content {
+    .reset-font-size();
+    .reset-color();
+
     position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
-    background-color: @drawer-background-color;
     pointer-events: auto;
     overflow: hidden;
 

packages/components/drawer/style/themes/default.variable.less

@@ -1,6 +1,3 @@
-@drawer-font-size: var(--ix-font-size-md);
-
-@drawer-background-color: var(--ix-background-color);
 @drawer-box-shadow-start: @shadow-right-lg;
 @drawer-box-shadow-end: @shadow-left-lg;
 @drawer-box-shadow-top: @shadow-bottom-lg;

packages/components/drawer/style/themes/seer.variable.less

@@ -1,3 +1 @@
 @import './default.variable.less';
-
-@drawer-font-size: var(--ix-font-size-sm);

packages/components/dropdown/style/index.less

@@ -4,17 +4,20 @@
 .@{dropdown-prefix} {
   .reset-component-new();
 
-  background-color: @dropdown-background-color;
   box-shadow: @dropdown-box-shadow;
   border-radius: @dropdown-border-radius;
   min-width: @dropdown-min-width;
 
+  &,
   &-trigger {
+    .reset-font-size();
+
     cursor: pointer;
   }
 
+  &,
   .@{overlay-prefix}-arrow {
-    color: @dropdown-background-color;
+    .reset-color();
   }
 
   .@{menu-prefix}-dropdown {

packages/components/empty/docs/Theme.zh.md

@@ -1,6 +1,5 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
 | `@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-disabled)` | - | - |
 | `@empty-description-font-size` | `var(--ix-font-size-lg)` | - | - |

packages/components/empty/style/index.less

@@ -2,10 +2,9 @@
 
 .@{empty-prefix} {
   .reset-component-new();
+  .reset-font-size();
 
   color: @empty-color;
-  font-size: @empty-font-size;
-  line-height: calc(@empty-font-size + var(--ix-line-height-gutter));
   margin: var(--ix-spacing-xl) var(--ix-spacing-lg);
   text-align: center;
 
@@ -24,8 +23,7 @@
 
   &-description {
     color: @empty-description-color;
-    font-size: @empty-description-font-size;
-    line-height: calc(@empty-description-font-size + var(--ix-line-height-gutter));
+    .reset-font-size(@empty-description-font-size);
   }
 
   &-content {

packages/components/empty/style/themes/default.variable.less

@@ -1,5 +1,4 @@
 @empty-color: var(--ix-text-color-info);
-@empty-font-size: var(--ix-font-size-md);
 
 @empty-description-color: var(--ix-text-color-disabled);
 @empty-description-font-size: var(--ix-font-size-lg);

packages/components/empty/style/themes/seer.variable.less

@@ -1,3 +1 @@
 @import './default.variable.less';
-
-@empty-font-size: var(--ix-font-size-sm);

packages/components/header/docs/Theme.zh.md

@@ -12,13 +12,11 @@
 | `@header-color-hover` | `var(--ix-color-primary-l10)` | - | - |
 | `@header-color-active` | `var(--ix-color-primary-d10)` | - | - |
 | `@header-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
-| `@header-background-color` | `var(--ix-background-color)` | - | - |
 | `@header-bar-width` | `4px` | - | - |
 | `@header-bar-background-color` | `var(--ix-color-primary)` | - | - |
 | `@header-title-font-weight` | `var(--ix-font-weight-xl)` | - | - |
 | `@header-sub-title-color` | `var(--ix-text-color-title-secondary)` | - | - |
 | `@header-sub-title-font-size` | `var(--ix-font-size-md)` | - | - |
 | `@header-suffix-color` | `var(--ix-text-color-title-secondary)` | - | - |
 | `@header-description-color` | `var(--ix-text-color-info)` | - | - |
-| `@header-description-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@header-icon-font-size` | `var(--ix-font-size-icon)` | - | - |