feat(button): [button] Adapting to the SMB theme (#1937)

Author: Youyou-smiles

packages/theme/src/button/index.less

@@ -51,6 +51,7 @@
 
   .@{svg-prefix-cls} {
     vertical-align: text-top;
+    font-size: var(--ti-button-icon-font-size);
   }
 
   & > img {
@@ -59,6 +60,7 @@
   }
 
   &.is-only-icon {
+    width: var(--ti-button-only-icon-width);
     min-width: var(--ti-button-only-icon-min-width);
     padding: 0 var(--ti-button-only-icon-padding-horizontal);
     border-radius: var(--ti-button-only-icon-border-radius);
@@ -204,7 +206,6 @@
     &.is-loading {
       .@{svg-prefix-cls} {
         margin-right: 4px;
-        margin-top: 1px;
       }
     }
   }
@@ -435,6 +436,7 @@
     }
 
     &.is-only-icon {
+      width: var(--ti-button-only-icon-text-width);
       &:hover {
         background: var(--ti-button-text-only-icon-hover-bg-color);
       }
@@ -538,6 +540,11 @@
       var(--ti-button-size-mini-min-width),
     );
   }
+  .@{css-prefix-iconfont}-loading {
+    font-size: var(--ti-button-loading-font-size);
+    line-height: 1;
+    animation: rotating 2s linear infinite;
+  }
 }
 
 .@{css-prefix-iconfont}-loading {

packages/theme/src/button/smb-theme.js

@@ -20,9 +20,9 @@ export const tinyButtonSmbTheme = {
   'ti-button-size-medium-min-width': 'var(--ti-common-size-28x)',
   'ti-button-size-normal-min-width': 'var(--ti-common-size-24x)',
   'ti-button-size-small-min-width': 'var(--ti-common-size-18x)',
-  'ti-button-danger-plain-hover-bg-color': 'transparent',
-  'ti-button-danger-plain-hover-text-color': '#F76360',
-  'ti-button-danger-plain-hover-border-color': '#F76360',
+  'ti-button-danger-plain-hover-bg-color': 'var(--ti-common-color-bg-minor-hover)',
+  'ti-button-danger-plain-hover-text-color': 'var(--ti-common-color-error-text)',
+  'ti-button-danger-plain-hover-border-color': 'var(--ti-common-color-error-border-secondary)',
   'ti-button-danger-plain-disabled-border-color': 'transparent',
   'ti-button-normal-hover-border-color': '#C2C2C2',
   'ti-button-size-large-font-size': 'var(--ti-common-font-size-base)',
@@ -41,6 +41,7 @@ export const tinyButtonSmbTheme = {
   'ti-button-text-svg-padding-horizontal': '0px',
   'ti-button-size-small-font-size': '12px',
   'ti-button-loading-bg-color': 'rgba(255, 255, 255, 0.5)',
+  'ti-button-loading-font-size': 'var(--ti-common-font-size-2)',
   'ti-button-size-mini-font-size': '12px',
   'ti-button-size-large-margin-left': '16px',
   'ti-button-size-medium-margin-left': '16px',
@@ -67,8 +68,11 @@ export const tinyButtonSmbTheme = {
   'ti-button-text-size-mini-svg-height': '16px',
   'ti-button-text-hover-text-decoration': 'underline',
   'ti-button-only-icon-min-width': 'unset',
-  'ti-button-only-icon-padding-horizontal': '8px',
-  'ti-button-only-icon-border-radius': '6px',
+  'ti-button-icon-font-size': 'var(--ti-common-font-size-2)',
+  'ti-button-only-icon-width': 'var(--ti-common-size-8x)',
+  'ti-button-only-icon-text-width': 'var(--ti-common-size-6x)',
+  'ti-button-only-icon-padding-horizontal': '7px',
+  'ti-button-only-icon-border-radius': 'var(--ti-common-border-radius-1)',
   'ti-button-only-icon-border-color': '#c2c2c2',
   'ti-button-only-icon-hover-border-color': '#191919',
   'ti-button-only-icon-disabled-border-color': '#dbdbdb',

packages/theme/src/button/vars.less

@@ -23,6 +23,7 @@
   --ti-button-border-style: var(--ti-common-border-style-solid, solid);
   // 按钮加载时背景色
   --ti-button-loading-bg-color: rgba(255, 255, 255, 0.35);
+  --ti-button-loading-font-size: var(--ti-common-font-size-1);
 
   // 默认按钮最小宽度
   --ti-button-size-normal-min-width: var(--ti-common-size-width-normal, 80px);
@@ -439,7 +440,11 @@
   --ti-button-text-size-mini-svg-height: 1em;
 
   // 纯图标按钮最小宽度
+  --ti-button-icon-font-size: var(--ti-common-font-size-1);
+  // 纯图标/文字按钮宽度
+  --ti-button-only-icon-width: var(--ti-common-size-7x);
   --ti-button-only-icon-min-width: unset;
+  --ti-button-only-icon-text-width: unset
   // 纯图标按钮水平内边距
   --ti-button-only-icon-padding-horizontal: 7px;
   // 纯图标按钮边框圆角