Browse Source

style: add more token support for Button/Casader/inputnumber (#2809)

YyumeiZhang 6 months ago
parent
commit
e1235e7972

+ 8 - 1
packages/semi-foundation/button/button.scss

@@ -6,7 +6,6 @@ $module: #{$prefix}-button;
 
 .#{$module} {
     @include shadow-0;
-    @include font-size-regular;
     height: $height-button_default;
     display: inline-flex;
     align-items: center;
@@ -19,6 +18,8 @@ $module: #{$prefix}-button;
     padding-right: $spacing-button_default-paddingRight;
     padding-top: $spacing-button_default-paddingTop;
     padding-bottom: $spacing-button_default-paddingTop;
+    font-size: $font-button-fontSize;
+    line-height: $font-button-lineHeight;
     font-weight: $font-button-fontWeight;
     outline: none;
     vertical-align: middle;
@@ -313,6 +314,9 @@ $module: #{$prefix}-button;
         padding-bottom: $spacing-button_small-paddingBottom;
         padding-left: $spacing-button_small-paddingLeft;
         padding-right: $spacing-button_small-paddingRight;
+        font-size: $font-button_small-fontSize;
+        line-height: $font-button_small-lineHeight;
+        font-weight: $font-button_small-fontWeight;
     }
 
     &-size-large {
@@ -321,6 +325,9 @@ $module: #{$prefix}-button;
         padding-bottom: $spacing-button_large-paddingBottom;
         padding-left: $spacing-button_large-paddingLeft;
         padding-right: $spacing-button_large-paddingRight;
+        font-size: $font-button_large-fontSize;
+        line-height: $font-button_large-lineHeight;
+        font-weight: $font-button_large-fontWeight;
     }
 
     &-block {

+ 10 - 1
packages/semi-foundation/button/variables.scss

@@ -165,7 +165,16 @@ $width-button_iconOnly_large: $height-control-large; // 图标按钮 width - 大
 $spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距
 $spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
 
-$font-button-fontWeight: $font-weight-bold; // 按钮文字字重
+$font-button-fontWeight: $font-weight-bold; // 按钮文字字重 - 默认
+$font-button-fontSize: $font-size-regular; // 按钮文字字号- 默认
+$font-button-lineHeight: 20px; // 按钮文字行高 - 默认
+$font-button_small-fontWeight: $font-weight-bold; // 按钮文字字重 - 小尺寸
+$font-button_small-fontSize: $font-size-regular; // 按钮文字字号- 小尺寸
+$font-button_small-lineHeight: 20px; // 按钮文字行高 - 小尺寸
+$font-button_large-fontWeight: $font-weight-bold; // 默认按钮文字字重 - 大尺寸
+$font-button_large-fontSize: $font-size-regular; // 默认按钮文字字号 - 大尺寸
+$font-button_large-lineHeight: 20px; // 默认按钮文字行高 - 大尺寸
+
 $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认

+ 20 - 0
packages/semi-foundation/cascader/cascader.scss

@@ -39,6 +39,16 @@ $module: #{$prefix}-cascader;
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
+
+        .#{$module}-selection {
+            padding-left: $spacing-cascader_small_selection-paddingLeft;
+            padding-right: $spacing-cascader_small_selection-paddingRight;
+
+            &-multiple {
+                padding-left: $spacing-cascader_small_selection_multiple-paddingLeft;
+                padding-right: $spacing-cascader_small_selection_multiple-paddingRight;
+            }
+        }
     }
 
     &-large {
@@ -47,6 +57,16 @@ $module: #{$prefix}-cascader;
         .#{$module}-selection {
             @include font-size-header-6;
         }
+
+        .#{$module}-selection {
+            padding-left: $spacing-cascader_large_selection-paddingLeft;
+            padding-right: $spacing-cascader_large_selection-paddingRight;
+
+            &-multiple {
+                padding-left: $spacing-cascader_large_selection_multiple-paddingLeft;
+                padding-right: $spacing-cascader_large_selection_multiple-paddingRight;
+            }
+        }
     }
 
     &-focus {

+ 14 - 4
packages/semi-foundation/cascader/variables.scss

@@ -45,10 +45,20 @@ $color-cascader_danger-border-active: var(--semi-color-danger-light-active); //
 
 $color-cascader_prefix_suffix_text-default: var(--semi-color-text-2); // 级联选择前后缀文字颜色
 
-$spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距
-$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距
-$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距
-$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距
+$spacing-cascader_selection-paddingLeft: 12px; // 级联选择触发器左侧内边距 - 默认
+$spacing-cascader_selection-paddingRight: 12px; // 级联选择触发器右侧内边距 - 默认
+$spacing-cascader_small_selection-paddingLeft: 12px;  // 级联选择触发器左侧内边距 - 小尺寸
+$spacing-cascader_small_selection-paddingRight: 12px;  // 级联选择触发器右侧内边距 - 小尺寸
+$spacing-cascader_large_selection-paddingLeft: 12px;  // 级联选择触发器左侧内边距 - 大尺寸
+$spacing-cascader_large_selection-paddingRight: 12px;  // 级联选择触发器右侧内边距 - 大尺寸
+
+$spacing-cascader_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 默认
+$spacing-cascader_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时右侧内边距 - 默认
+$spacing-cascader_small_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 小尺寸
+$spacing-cascader_small_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 小尺寸
+$spacing-cascader_large_selection_multiple-paddingLeft: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 大尺寸
+$spacing-cascader_large_selection_multiple-paddingRight: $spacing-extra-tight; // 级联选择触发器多选时左侧内边距 - 大尺寸
+
 $spacing-cascader_selection_tag-marginLeft: $spacing-none; // 级联选择触发器多选时标签的水平左外边距
 $spacing-cascader_selection_tag-marginRight: $spacing-super-tight; // 级联选择触发器多选时标签的水平右外边距
 $spacing-cascader_selection_tag-marginY: 1px; // 级联选择触发器多选时标签的垂直外边距

+ 2 - 0
packages/semi-foundation/inputNumber/inputNumber.scss

@@ -65,6 +65,8 @@ $module: #{$prefix}-input-number;
 
     &-suffix-btns-inner {
         margin-left: $spacing-inputNumber_button_inner-marginLeft;
+        border-radius: $radius-inputNumber_inner;
+        overflow: hidden
     }
 
     .#{$prefix}-input-clearbtn {

+ 2 - 1
packages/semi-foundation/inputNumber/variables.scss

@@ -6,7 +6,8 @@ $height-inputNumber_button_inner_large: $height-control-large - 2px; // 隐藏
 $height-inputNumber_button_inner_small: $height-control-small - 2px; // 隐藏步进器的数字输入框高度 - 小
 
 $width-inputNumber_button: 14px; // 步进器按钮宽度
-$radius-inputNumber: var(--semi-border-radius-small);
+$radius-inputNumber: var(--semi-border-radius-small); // 步进器按钮圆角 - 外部
+$radius-inputNumber_inner: var(--semi-border-radius-small); // 步进器按钮圆角 - 内部
 $spacing-inputNumber_button-marginLeft: 4px; // 步进器按钮左侧外边距
 $color-inputNumber_button-text-default: var(--semi-color-text-2); // 步进器按钮图标颜色
 $color-inputNumber_button-text-disabled: var(--semi-color-disabled-text); // 步进器按钮图标颜色 - 禁用