فهرست منبع

fix: add more token of borderless button (#898)

代强 3 سال پیش
والد
کامیت
9d6ac80777
2فایلهای تغییر یافته به همراه16 افزوده شده و 8 حذف شده
  1. 4 4
      packages/semi-foundation/button/button.scss
  2. 12 4
      packages/semi-foundation/button/variables.scss

+ 4 - 4
packages/semi-foundation/button/button.scss

@@ -47,7 +47,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_danger-bg-default;
+            color: $color-button_danger_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_danger-outline-focus;
@@ -64,7 +64,7 @@ $module: #{$prefix}-button;
         }
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_warning-bg-default;
+            color: $color-button_warning_borderless-text-default;
         }
         &:not(.#{$module}-borderless):not(.#{$module}-light):focus-visible {
             outline: $width-button-outline solid $color-button_warning-outline-focus;
@@ -96,7 +96,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_primary-bg-default;
+            color: $color-button_primary_borderless-text-default;
         }
     }
     &-secondary {
@@ -112,7 +112,7 @@ $module: #{$prefix}-button;
 
         &.#{$module}-light,
         &.#{$module}-borderless {
-            color: $color-button_secondary-bg-default;
+            color: $color-button_secondary_borderless-text-default;
         }
     }
     &-disabled {

+ 12 - 4
packages/semi-foundation/button/variables.scss

@@ -12,6 +12,8 @@ $color-button_primary-border-active: var(--semi-color-primary-active); // 主要
 $color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
+$color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
+
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
@@ -25,6 +27,8 @@ $color-button_secondary-bg-active: var(--semi-color-secondary-active); // 次要
 $color-button_secondary-border-active: var(--semi-color-secondary-active); // 次要按钮描边颜色 - 按下
 $color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
+$color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
+
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
@@ -39,6 +43,8 @@ $color-button_danger-border-active: var(--semi-color-danger-active); // 危险
 $color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
+$color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
+
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
@@ -53,6 +59,8 @@ $color-button_warning-border-active: var(--semi-color-warning-active); // 警告
 $color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
+$color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
+
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
@@ -79,10 +87,10 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
-$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色
 $color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
 $color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
-$width-button_light-border: 0;  // 浅色按钮描边宽度
+$width-button_light-border: 0; // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
@@ -126,7 +134,7 @@ $spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮
 $spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
 
 // margin
-$spacing-button_iconOnly_content-marginLeft: $spacing-tight;  // 按钮左侧图标距离文字间距
+$spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距
 $spacing-button_iconOnly_content-marginRight: $spacing-tight; // 按钮右侧图标距离文字间距
 
 $font-button-fontWeight: $font-weight-bold; // 按钮文字字重
@@ -134,7 +142,7 @@ $height-button_large: $height-control-large; // 按钮高度 - 大尺寸
 $height-button_small: $height-control-small; // 按钮高度 - 小尺寸
 $height-button_default: $height-control-default; // 按钮高度 - 默认
 
-$width-button-border: $border-thickness;  // 按钮描边宽度
+$width-button-border: $border-thickness; // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
 $radius-button_group: $radius-button; // 按钮组圆角大小
 $width-button-outline: 2px; // 按钮轮廓宽度