fix(comp: button): update style with icon (#885)

IDuxFE · May 6, 2022 · 1377fff · 1377fff
1 parent 7ec8bd5
commit 1377fff
Show file tree

Hide file tree

Showing 9 changed files with 92 additions and 78 deletions.
diff --git a/package.json b/package.json
@@ -98,6 +98,7 @@
     "eslint-plugin-jsdoc": "^37.9.7",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.7.1",
+    "fast-glob": "^3.2.11",
     "figlet": "^1.5.2",
     "fs-extra": "^10.1.0",
     "gulp": "^4.0.2",

diff --git a/packages/components/back-top/docs/Index.zh.md b/packages/components/back-top/docs/Index.zh.md
@@ -32,7 +32,7 @@ subtitle: 回到顶部
 | `@back-top-zindex` | `@zindex-l2-base` | - | - |
 | `@back-top-height` | `60px` | - | - |
 | `@back-top-width` | `60px` | - | - |
-| `@back-top-font-size` | `@font-size-3xl` | - | - |
+| `@back-top-font-size` | `@font-size-3xl` | `32px` | - |
 | `@back-top-border-radius` | `50%` | - | - |
 | `@back-top-right-gutter` | `15px` | - | - |
 | `@back-top-right-xs` | `(@back-top-right-gutter / 2)` | - | - |

diff --git a/packages/components/button/docs/Index.zh.md b/packages/components/button/docs/Index.zh.md
@@ -65,7 +65,6 @@ subtitle: 按钮
 | `@button-padding-md` | `@spacing-lg` | - | - |
 | `@button-padding-lg` | `@spacing-xl` | - | - |
 | `@button-padding-xl` | `@spacing-2xl` | - | - |
-| `@button-icon-margin-left` | `@spacing-xs` | - | - |
 | `@button-border-style` | `@border-style` | - | - |
 | `@button-border-size` | `@border-width-sm` | - | - |
 | `@button-border-radius` | `@border-radius-sm` | - | - |
@@ -94,8 +93,8 @@ subtitle: 按钮
 | `@button-danger-background-color` | `@color-error` | - | - |
 | `@button-ghost-color` | `@background-color-component` | - | - |
 | `@button-ghost-background-color` | `transparent` | - | - |
-| `@button-ghost-hover-background-color` | `rgba(255,255,255,0.20)` | - | - |
-| `@button-ghost-disabled-background-color` | `rgba(255,255,255,0.40)` | - | - |
+| `@button-ghost-hover-background-color` | `rgba(255, 255, 255, 0.2)` | - | - |
+| `@button-ghost-disabled-background-color` | `rgba(255, 255, 255, 0.4)` | - | - |
 | `@button-ghost-border` | `@background-color-component` | - | - |
 | `@button-link-color` | `@color-primary` | - | - |
 | `@button-link-hover-background-color` | `transparent` | - | - |
@@ -106,4 +105,5 @@ subtitle: 按钮
 | `@button-text-hover-background-color` | `transparent` | - | - |
 | `@button-icon-color` | `@color-graphite-d20` | - | - |
 | `@button-icon-font-size` | `@font-size-lg` | - | - |
+| `@button-icon-margin` | `0 @spacing-xs` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
@@ -135,18 +135,7 @@
   }
 
   > .@{icon-prefix} + span {
-    margin-left: @button-icon-margin-left;
-    margin-right: @button-icon-margin-left;
-  }
-
-  > span + .@{icon-prefix} {
-    margin-left: @button-icon-margin-left;
-    margin-right: -@button-icon-margin-left;
-  }
-
-  > span .@{icon-prefix} {
-    margin-left: @button-icon-margin-left;
-    margin-right: -@button-icon-margin-left;
+    margin: @button-icon-margin;
   }
 
   &:empty {
@@ -190,7 +179,6 @@
 }
 
 .button-group-item(@active-color;@hover-color) {
-
   &:hover {
     z-index: @button-zindex;
     + .@{button-prefix} {

diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less
@@ -27,8 +27,6 @@
 @button-padding-lg: @spacing-xl;
 @button-padding-xl: @spacing-2xl;
 
-@button-icon-margin-left: @spacing-xs;
-
 @button-border-style: @border-style;
 @button-border-size: @border-width-sm;
 @button-border-radius: @border-radius-sm;
@@ -64,8 +62,8 @@
 
 @button-ghost-color: @background-color-component;
 @button-ghost-background-color: transparent;
-@button-ghost-hover-background-color: rgba(255,255,255,0.20);
-@button-ghost-disabled-background-color: rgba(255,255,255,0.40);
+@button-ghost-hover-background-color: rgba(255, 255, 255, 0.2);
+@button-ghost-disabled-background-color: rgba(255, 255, 255, 0.4);
 @button-ghost-border: @background-color-component;
 
 @button-link-color: @color-primary;
@@ -79,4 +77,4 @@
 
 @button-icon-color: @color-graphite-d20;
 @button-icon-font-size: @font-size-lg;
-@button-icon-color: @color-graphite-d20;
+@button-icon-margin: 0 @spacing-xs;
diff --git a/packages/components/cascader/docs/Index.zh.md b/packages/components/cascader/docs/Index.zh.md
@@ -81,3 +81,34 @@ subtitle: 级联选择
 | --- | --- | --- | --- |
 | `blur` | 失去焦点 | - | - |
 | `focus` | 获取焦点 | - | - |
+
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | default | seer | 备注 |
+| --- | --- | --- | --- |
+| `@cascader-option-padding` | `@spacing-xs @spacing-xs @spacing-xs @spacing-md` | - | - |
+| `@cascader-option-height` | `@select-option-height` | - | - |
+| `@cascader-option-disabled-color` | `@select-option-disabled-color` | - | - |
+| `@cascader-option-active-background-color` | `@select-option-active-background-color` | - | - |
+| `@cascader-option-selected-color` | `@select-option-selected-color` | - | - |
+| `@cascader-option-selected-background-color` | `@select-option-selected-background-color` | - | - |
+| `@cascader-option-selected-font-weight` | `@select-option-selected-font-weight` | - | - |
+| `@cascader-option-expanded-color` | `@cascader-option-selected-color` | - | - |
+| `@cascader-option-expanded-background-color` | `@cascader-option-selected-background-color` | - | - |
+| `@cascader-option-expanded-font-weight` | `@cascader-option-selected-font-weight` | - | - |
+| `@cascader-option-label-margin-left` | `@select-option-label-margin-left` | - | - |
+| `@cascader-option-label-highlight-color` | `@color-primary` | - | - |
+| `@cascader-option-expanded-margin-left` | `@spacing-xs` | - | - |
+| `@cascader-option-expanded-icon-color` | `@text-color-secondary` | - | - |
+| `@cascader-option-expanded-icon-font-size` | `@select-icon-font-size` | - | - |
+| `@cascader-option-group-min-width` | `120px` | - | - |
+| `@cascader-option-group-min-height` | `180px` | - | - |
+| `@cascader-option-group-border` | `@border-width-sm solid @border-color-split` | - | - |
+| `@cascader-overlay-zindex` | `@select-option-container-zindex` | - | - |
+| `@cascader-overlay-padding` | `@select-option-container-padding` | - | - |
+| `@cascader-overlay-background-color` | `@select-option-container-background-color` | - | - |
+| `@cascader-overlay-border-radius` | `@select-option-container-border-radius` | - | - |
+| `@cascader-overlay-box-shadow` | `@select-option-container-box-shadow` | - | - |
+| `@cascader-overlay-search-wrapper-padding` | `@select-overlay-input-padding` | - | - |
+<!--- insert less variable end  --->
diff --git a/packages/components/checkbox/docs/Index.zh.md b/packages/components/checkbox/docs/Index.zh.md
@@ -60,45 +60,45 @@ export interface CheckboxData extends CheckboxProps {
 }
 ```
 
-<!--- insert less variable begin  --->
-## 主题变量
-
-| 名称 | default | seer | 备注 |
-| --- | --- | --- | --- |
-| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
-| `@checkbox-font-size-md` | `@form-font-size-md` | `@form-font-size-sm` | - |
-| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
-| `@checkbox-line-height` | `@form-line-height` | - | - |
-| `@checkbox-height-sm` | `@form-height-sm` | - | - |
-| `@checkbox-height-md` | `@form-height-md` | - | - |
-| `@checkbox-height-lg` | `@form-height-lg` | - | - |
-| `@checkbox-min-width-sm` | `@width-xs` | - | - |
-| `@checkbox-min-width-md` | `@width-sm` | - | - |
-| `@checkbox-min-width-lg` | `@width-md` | - | - |
-| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
-| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
-| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
-| `@checkbox-border-width` | `@form-border-width` | - | - |
-| `@checkbox-border-style` | `@form-border-style` | - | - |
-| `@checkbox-border-color` | `@form-border-color` | - | - |
-| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-color` | `@form-color` | - | - |
-| `@checkbox-background-color` | `@form-background-color` | - | - |
-| `@checkbox-hover-color` | `@form-hover-color` | `@form-active-color` | - |
-| `@checkbox-active-color` | `@form-active-color` | - | - |
-| `@checkbox-focus-color` | `@form-focus-color` | `@form-active-color` | - |
-| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
-| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
-| `@checkbox-font-size` | `@font-size-md` | `@font-size-sm` | - |
-| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
-| `@checkbox-box-size` | `16px` | - | - |
-| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
-| `@checkbox-indeterminate-width` | `8px` | - | - |
-| `@checkbox-indeterminate-height` | `2px` | - | - |
-| `@checkbox-tick-color` | `@color-white` | - | - |
-| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
-| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
-| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
-| `@checkbox-label-padding` | `0 @spacing-sm` | `0 @spacing-xs` | - |
-| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
+<!--- insert less variable begin  --->
+## 主题变量
+
+| 名称 | default | seer | 备注 |
+| --- | --- | --- | --- |
+| `@checkbox-font-size-sm` | `@form-font-size-sm` | - | - |
+| `@checkbox-font-size-md` | `@form-font-size-md` | `@form-font-size-sm` | - |
+| `@checkbox-font-size-lg` | `@form-font-size-lg` | - | - |
+| `@checkbox-line-height` | `@form-line-height` | - | - |
+| `@checkbox-height-sm` | `@form-height-sm` | - | - |
+| `@checkbox-height-md` | `@form-height-md` | - | - |
+| `@checkbox-height-lg` | `@form-height-lg` | - | - |
+| `@checkbox-min-width-sm` | `@width-xs` | - | - |
+| `@checkbox-min-width-md` | `@width-sm` | - | - |
+| `@checkbox-min-width-lg` | `@width-md` | - | - |
+| `@checkbox-padding-horizontal-sm` | `@spacing-sm` | - | - |
+| `@checkbox-padding-horizontal-md` | `@spacing-md` | - | - |
+| `@checkbox-padding-horizontal-lg` | `@spacing-lg` | - | - |
+| `@checkbox-border-width` | `@form-border-width` | - | - |
+| `@checkbox-border-style` | `@form-border-style` | - | - |
+| `@checkbox-border-color` | `@form-border-color` | - | - |
+| `@checkbox-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-color` | `@form-color` | - | - |
+| `@checkbox-background-color` | `@form-background-color` | - | - |
+| `@checkbox-hover-color` | `@form-hover-color` | `@form-active-color` | - |
+| `@checkbox-active-color` | `@form-active-color` | - | - |
+| `@checkbox-focus-color` | `@form-focus-color` | `@form-active-color` | - |
+| `@checkbox-disabled-color` | `@form-disabled-color` | - | - |
+| `@checkbox-disabled-background-color` | `@form-disabled-background-color` | - | - |
+| `@checkbox-font-size` | `@font-size-md` | `@font-size-sm` | - |
+| `@checkbox-inner-zindex` | `@zindex-l1-1` | - | - |
+| `@checkbox-box-size` | `16px` | - | - |
+| `@checkbox-box-border-radius` | `@border-radius-sm` | - | - |
+| `@checkbox-indeterminate-width` | `8px` | - | - |
+| `@checkbox-indeterminate-height` | `2px` | - | - |
+| `@checkbox-tick-color` | `@color-white` | - | - |
+| `@checkbox-tick-width` | `(@checkbox-box-size / @font-size-base) * 5px` | - | - |
+| `@checkbox-tick-height` | `(@checkbox-box-size / @font-size-base) * 9px` | - | - |
+| `@checkbox-tick-border-width` | `@border-width-md` | - | - |
+| `@checkbox-label-padding` | `0 @spacing-sm` | `0 @spacing-xs` | - |
+| `@checkbox-group-item-margin-right` | `@spacing-sm` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/date-picker/docs/Index.zh.md b/packages/components/date-picker/docs/Index.zh.md
@@ -109,8 +109,6 @@ const defaultFormat = {
 | --- | --- | --- | --- |
 | `@date-picker-line-height` | `@form-line-height` | - | - |
 | `@date-picker-color` | `@form-color` | - | - |
-| `@date-picker-background-color` | `@form-background-color` | - | - |
-| `@date-picker-disabled-background-color` | `@form-disabled-background-color` | - | - |
 | `@date-range-picker-trigger-separator-margin` | `@spacing-xl` | - | - |
 | `@date-picker-panel-font-size` | `@font-size-md` | - | - |
 | `@date-picker-panel-color` | `@text-color` | - | - |
@@ -126,16 +124,15 @@ const defaultFormat = {
 | `@date-picker-panel-header-padding` | `0 0 @spacing-xs 0` | - | - |
 | `@date-picker-panel-header-height` | `@height-md` | - | - |
 | `@date-picker-panel-header-item-padding` | `0 @spacing-xs` | - | - |
-| `@date-picker-panel-header-font-size` | `@font-size-md` | - | - |
-| `@date-picker-panel-header-font-weight` | `@font-weight-lg` | - | - |
 | `@date-picker-panel-header-border-bottom` | `none` | - | - |
 | `@date-picker-panel-header-button-font-size` | `@font-size-lg` | - | - |
+| `@date-picker-panel-header-button-font-weight` | `@font-weight-lg` | - | - |
 | `@date-picker-panel-header-content-spacing` | `@spacing-lg` | - | - |
 | `@date-picker-panel-header-padding-lg` | `0 0 @spacing-2xl` | - | - |
 | `@date-picker-panel-body-padding` | `0` | - | - |
 | `@date-picker-panel-body-padding-lg` | `0` | - | - |
 | `@date-picker-panel-body-font-size` | `@font-size-md` | - | - |
-| `@date-picker-panel-body-header-border-bottom` | `solid transparent @spacing-md` | - | - |
+| `@date-picker-panel-body-header-margin-bottom` | `@spacing-md` | - | - |
 | `@date-picker-panel-body-header-font-weight` | `@font-weight-md` | - | - |
 | `@date-picker-panel-body-header-background-color` | `@color-graphite-l50` | - | - |
 | `@date-picker-panel-cell-width` | `28px` | - | - |
@@ -151,13 +148,11 @@ const defaultFormat = {
 | `@date-picker-panel-cell-trigger-width-lg` | `52px` | - | - |
 | `@date-picker-panel-cell-trigger-height-lg` | `24px` | - | - |
 | `@date-picker-panel-cell-border-radius` | `@border-radius-full` | - | - |
-| `@date-picker-panel-cell-border-radius-lg` | `@border-radius-md` | - | - |
+| `@date-picker-panel-cell-border-radius-lg` | `@border-radius-sm` | - | - |
 | `@date-picker-panel-cell-hover-background-color` | `@color-graphite-l50` | - | - |
 | `@date-picker-panel-cell-hover-color` | `@color-primary` | - | - |
-| `@date-picker-panel-cell-today-mark-width` | `24px` | - | - |
-| `@date-picker-panel-cell-today-mark-height` | `24px` | - | - |
-| `@date-picker-panel-cell-today-border-color` | `@color-blue-l40` | - | - |
-| `@date-picker-panel-cell-today-color` | `@color-primary` | - | - |
+| `@date-picker-panel-cell-current-border-color` | `@color-blue-l40` | - | - |
+| `@date-picker-panel-cell-current-color` | `@color-primary` | - | - |
 | `@date-picker-overlay-footer-border-width` | `@form-border-width` | - | - |
 | `@date-picker-overlay-footer-border-style` | `@form-border-style` | - | - |
 | `@date-picker-overlay-footer-border-color` | `@form-border-color` | - | - |
@@ -174,8 +169,9 @@ const defaultFormat = {
 | `@date-picker-overlay-inputs-margin-bottom` | `@spacing-sm` | - | - |
 | `@date-range-picker-overlay-padding` | `@spacing-lg @spacing-lg 0 @spacing-lg` | - | - |
 | `@date-range-picker-overlay-content-padding` | `0 0 @spacing-sm 0` | - | - |
-| `@date-range-picker-overlay-gap-width` | `@spacing-2xl` | - | - |
-| `@date-range-picker-overlay-gap-padding` | `1px 0 0 0` | - | - |
+| `@date-range-picker-overlay-separator-width` | `@spacing-2xl` | - | - |
+| `@date-range-picker-overlay-separator-padding` | `1px 0 0 0` | - | - |
+| `@date-range-picker-overlay-separator-font-size` | `@font-size-md` | - | - |
 | `@date-range-picker-overlay-footer-border-width` | `@date-picker-overlay-footer-border-width` | - | - |
 | `@date-range-picker-overlay-footer-border-style` | `@date-picker-overlay-footer-border-style` | - | - |
 | `@date-range-picker-overlay-footer-border-color` | `@color-graphite-l30` | - | - |
@@ -186,5 +182,5 @@ const defaultFormat = {
 | `@date-range-picker-panel-border-width` | `@form-border-width` | - | - |
 | `@date-range-picker-panel-border-style` | `@form-border-style` | - | - |
 | `@date-range-picker-panel-border-color` | `@form-border-color` | - | - |
-| `@date-range-picker-panel-border-radius` | `2px` | - | - |
+| `@date-range-picker-panel-border-radius` | `@border-radius-sm` | - | - |
 <!--- insert less variable end  --->
diff --git a/packages/components/select/docs/Index.zh.md b/packages/components/select/docs/Index.zh.md
@@ -155,7 +155,7 @@ export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean
 | `@select-option-container-border-radius` | `@border-radius-sm` | - | - |
 | `@select-option-container-box-shadow` | `@shadow-bottom-md` | - | - |
 | `@select-overlay-input-padding` | `0 @spacing-md @spacing-sm` | - | - |
-| `@select-icon-font-size` | `@font-size-sm` | `@font-size-lg` | - |
+| `@select-icon-font-size` | `@font-size-lg` | - | - |
 | `@select-icon-margin-right` | `@spacing-xs` | `@spacing-sm` | - |
 | `@select-icon-color` | `@select-placeholder-color` | `@color-graphite-l20` | - |
 | `@select-icon-hover-color` | `@select-color-secondary` | `@color-primary` | - |
@@ -169,7 +169,7 @@ export type SelectSearchFn = (data: SelectData, searchValue: string) => boolean
 | `@select-multiple-item-border` | `@select-multiple-item-border-width @border-style @border-color-split` | - | - |
 | `@select-multiple-item-border-radius` | `@select-border-radius` | `2px` | - |
 | `@select-multiple-item-label-margin` | `0 -@spacing-xs 0 @spacing-xs` | - | - |
-| `@select-multiple-item-remove-icon-font-size` | `@font-size-xs` | `@font-size-lg` | - |
+| `@select-multiple-item-remove-icon-font-size` | `@font-size-lg` | - | - |
 | `@select-multiple-item-remove-icon-color` | `@color-graphite` | `@color-graphite-d20` | - |
 | `@select-multiple-item-remove-icon-hover-color` | `@color-graphite-d10` | `@color-primary-l10` | - |
 | `@select-multiple-item-remove-icon-margin` | `0 0 0 @spacing-xs` | - | - |