@douyinfe/semi-foundation 2.12.0 → 2.12.1-alpha.2

package/avatar/mixin.scss

@@ -1,4 +1,4 @@
 @mixin avatar-style($color) {
     background-color: rgba(var(--semi-#{$color}-3), 1);
-    color: white;
+    color: rgba(var(--semi-white), 1);
 }

package/button/variables.scss

@@ -1,70 +1,70 @@
 // primary
 $color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
 $color-button_primary-border-default: transparent; // 主要按钮描边颜色
-$color-button_primary-text-default: white; // 主要按钮文字颜色
+$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色
 
 $color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
 $color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
-$color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
+$color-button_primary-text-hover: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 悬浮
 
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
-$color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
-$color-button_secondary-text-default: white; // 次要按钮文字颜色
+$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色
 
 $color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
 $color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
-$color-button_secondary-text-hover: white; // 次要按钮文字颜色 - 悬浮
+$color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 悬浮
 
 $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: white; // 次要按钮文字颜色 - 按下
+$color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
-$color-button_danger-text-default: white; // 危险按钮文字颜色
+$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色
 
 $color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
 $color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
-$color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
+$color-button_danger-text-hover: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 悬浮
 
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
-$color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
-$color-button_warning-text-default: white; // 警告按钮文字颜色
+$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色
 
 $color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
 $color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
-$color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
+$color-button_warning-text-hover: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 悬浮
 
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
-$color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
-$color-button_tertiary-text-default: white; // 第三按钮文字颜色
+$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色
 
 $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
 $color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
-$color-button_tertiary-text-hover: white; // 第三按钮文字颜色 - 悬浮
+$color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 悬浮
 
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
-$color-button_tertiary-text-active: white; // 第三按钮文字颜色 - 按下
+$color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
 
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 

package/lib/cjs/avatar/avatar.css

@@ -282,82 +282,82 @@
 
 .semi-avatar-amber {
   background-color: rgba(var(--semi-amber-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-blue {
   background-color: rgba(var(--semi-blue-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-cyan {
   background-color: rgba(var(--semi-cyan-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-green {
   background-color: rgba(var(--semi-green-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-grey {
   background-color: rgba(var(--semi-grey-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-indigo {
   background-color: rgba(var(--semi-indigo-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-light-blue {
   background-color: rgba(var(--semi-light-blue-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-light-green {
   background-color: rgba(var(--semi-light-green-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-lime {
   background-color: rgba(var(--semi-lime-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-orange {
   background-color: rgba(var(--semi-orange-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-pink {
   background-color: rgba(var(--semi-pink-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-purple {
   background-color: rgba(var(--semi-purple-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-red {
   background-color: rgba(var(--semi-red-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-teal {
   background-color: rgba(var(--semi-teal-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-violet {
   background-color: rgba(var(--semi-violet-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-yellow {
   background-color: rgba(var(--semi-yellow-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-rtl .semi-avatar,

package/lib/cjs/avatar/mixin.scss

@@ -1,4 +1,4 @@
 @mixin avatar-style($color) {
     background-color: rgba(var(--semi-#{$color}-3), 1);
-    color: white;
+    color: rgba(var(--semi-white), 1);
 }

package/lib/cjs/button/button.css

@@ -49,7 +49,7 @@
 }
 .semi-button-danger {
   background-color: var(--semi-color-danger);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
@@ -65,7 +65,7 @@
 }
 .semi-button-warning {
   background-color: var(--semi-color-warning);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
@@ -81,7 +81,7 @@
 }
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
@@ -94,7 +94,7 @@
 }
 .semi-button-primary {
   background-color: var(--semi-color-primary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
@@ -108,7 +108,7 @@
 .semi-button-secondary {
   background-color: var(--semi-color-secondary);
   outline-color: var(--semi-color-secondary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);

package/lib/cjs/button/variables.scss

@@ -1,70 +1,70 @@
 // primary
 $color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
 $color-button_primary-border-default: transparent; // 主要按钮描边颜色
-$color-button_primary-text-default: white; // 主要按钮文字颜色
+$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色
 
 $color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
 $color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
-$color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
+$color-button_primary-text-hover: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 悬浮
 
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
-$color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
-$color-button_secondary-text-default: white; // 次要按钮文字颜色
+$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色
 
 $color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
 $color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
-$color-button_secondary-text-hover: white; // 次要按钮文字颜色 - 悬浮
+$color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 悬浮
 
 $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: white; // 次要按钮文字颜色 - 按下
+$color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
-$color-button_danger-text-default: white; // 危险按钮文字颜色
+$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色
 
 $color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
 $color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
-$color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
+$color-button_danger-text-hover: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 悬浮
 
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
-$color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
-$color-button_warning-text-default: white; // 警告按钮文字颜色
+$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色
 
 $color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
 $color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
-$color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
+$color-button_warning-text-hover: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 悬浮
 
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
-$color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
-$color-button_tertiary-text-default: white; // 第三按钮文字颜色
+$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色
 
 $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
 $color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
-$color-button_tertiary-text-hover: white; // 第三按钮文字颜色 - 悬浮
+$color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 悬浮
 
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
-$color-button_tertiary-text-active: white; // 第三按钮文字颜色 - 按下
+$color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
 
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 

package/lib/cjs/radio/radio.css

@@ -228,7 +228,7 @@
 .semi-radio .semi-radio-inner-checked .semi-radio-inner-display {
   border: solid 1px var(--semi-color-primary);
   background: var(--semi-color-primary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
   border-radius: 16px;
 }
 .semi-radio .semi-radio-inner-checked > .semi-radio-addon {

package/lib/cjs/radio/variables.scss

@@ -13,7 +13,7 @@ $color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中项悬
 $color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中项按下态背景颜色
 $color-radio_primary-border-default: var(--semi-color-primary); // 选中项描边颜色
 $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景颜色
-$color-radio_primary-text-default: white; // 选中项原点颜色
+$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
 $color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色

package/lib/cjs/steps/steps.css

@@ -129,7 +129,7 @@
   flex-grow: 0;
 }
 .semi-steps .semi-steps-item-left.semi-steps-item-plain {
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-steps .semi-steps-item-left-process {
   background: var(--semi-color-primary-light-default);

package/lib/cjs/steps/variables.scss

@@ -4,7 +4,7 @@ $color-steps-bg-default: var(--semi-color-text-2); // 未到达步骤条图标
 $color-steps-bg-hover: var(--semi-color-fill-0); // 步骤条背景 - 悬浮态
 $color-steps-border-default: transparent; // 步骤条描边 - 默认
 $color-steps-icon-default: var(--semi-color-text-2); // 未到达步骤条图标背景
-$color-steps-text-default: white; // 步骤条图标默认文本颜色
+$color-steps-text-default: rgba(var(--semi-white), 1); // 步骤条图标默认文本颜色
 $color-steps_danger-text-active: var(--semi-color-danger-active); // 错误步骤条文本颜色 - 按下态
 $color-steps_danger-text-default: var(--semi-color-danger); // 错误步骤条文本颜色 - 默认态
 $color-steps_danger-text-hover: var(--semi-color-danger-hover); // 错误步骤条文本颜色 - 悬浮态

package/lib/cjs/switch/switch.css

@@ -68,7 +68,7 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   border-radius: 9px;
-  background-color: white;
+  background-color: rgba(var(--semi-white), 1);
   box-sizing: border-box;
   position: absolute;
   left: 0;

package/lib/cjs/switch/variables.scss

@@ -30,7 +30,7 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: white; // 开关按钮背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关按钮背景颜色
 $color-switch_knob-border-default: var(--semi-color-border); // 开关按钮描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关按钮文字颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关按钮文字颜色

package/lib/cjs/tag/mixin.scss

@@ -1,7 +1,7 @@
 @mixin tag-style($color, $type) {
     @if $type==solid {
         background-color: unquote("rgba(var(--semi-#{$color}-5), 1)");
-        color: white;
+        color: rgba(var(--semi-white), 1);
     }
 
     @else if $type==ghost {

package/lib/cjs/tag/tag.css

@@ -119,7 +119,7 @@
 
 .semi-tag-amber-solid {
   background-color: rgba(var(--semi-amber-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-amber-light {
@@ -135,7 +135,7 @@
 
 .semi-tag-blue-solid {
   background-color: rgba(var(--semi-blue-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-blue-light {
@@ -151,7 +151,7 @@
 
 .semi-tag-cyan-solid {
   background-color: rgba(var(--semi-cyan-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-cyan-light {
@@ -167,7 +167,7 @@
 
 .semi-tag-green-solid {
   background-color: rgba(var(--semi-green-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-green-light {
@@ -183,7 +183,7 @@
 
 .semi-tag-grey-solid {
   background-color: rgba(var(--semi-grey-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-grey-light {
@@ -199,7 +199,7 @@
 
 .semi-tag-indigo-solid {
   background-color: rgba(var(--semi-indigo-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-indigo-light {
@@ -215,7 +215,7 @@
 
 .semi-tag-light-blue-solid {
   background-color: rgba(var(--semi-light-blue-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-light-blue-light {
@@ -231,7 +231,7 @@
 
 .semi-tag-light-green-solid {
   background-color: rgba(var(--semi-light-green-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-light-green-light {
@@ -247,7 +247,7 @@
 
 .semi-tag-lime-solid {
   background-color: rgba(var(--semi-lime-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-lime-light {
@@ -263,7 +263,7 @@
 
 .semi-tag-orange-solid {
   background-color: rgba(var(--semi-orange-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-orange-light {
@@ -279,7 +279,7 @@
 
 .semi-tag-pink-solid {
   background-color: rgba(var(--semi-pink-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-pink-light {
@@ -295,7 +295,7 @@
 
 .semi-tag-purple-solid {
   background-color: rgba(var(--semi-purple-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-purple-light {
@@ -311,7 +311,7 @@
 
 .semi-tag-red-solid {
   background-color: rgba(var(--semi-red-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-red-light {
@@ -327,7 +327,7 @@
 
 .semi-tag-teal-solid {
   background-color: rgba(var(--semi-teal-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-teal-light {
@@ -343,7 +343,7 @@
 
 .semi-tag-violet-solid {
   background-color: rgba(var(--semi-violet-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-violet-light {
@@ -359,7 +359,7 @@
 
 .semi-tag-yellow-solid {
   background-color: rgba(var(--semi-yellow-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-yellow-light {

package/lib/es/avatar/avatar.css

@@ -282,82 +282,82 @@
 
 .semi-avatar-amber {
   background-color: rgba(var(--semi-amber-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-blue {
   background-color: rgba(var(--semi-blue-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-cyan {
   background-color: rgba(var(--semi-cyan-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-green {
   background-color: rgba(var(--semi-green-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-grey {
   background-color: rgba(var(--semi-grey-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-indigo {
   background-color: rgba(var(--semi-indigo-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-light-blue {
   background-color: rgba(var(--semi-light-blue-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-light-green {
   background-color: rgba(var(--semi-light-green-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-lime {
   background-color: rgba(var(--semi-lime-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-orange {
   background-color: rgba(var(--semi-orange-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-pink {
   background-color: rgba(var(--semi-pink-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-purple {
   background-color: rgba(var(--semi-purple-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-red {
   background-color: rgba(var(--semi-red-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-teal {
   background-color: rgba(var(--semi-teal-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-violet {
   background-color: rgba(var(--semi-violet-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-avatar-yellow {
   background-color: rgba(var(--semi-yellow-3), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-rtl .semi-avatar,

package/lib/es/avatar/mixin.scss

@@ -1,4 +1,4 @@
 @mixin avatar-style($color) {
     background-color: rgba(var(--semi-#{$color}-3), 1);
-    color: white;
+    color: rgba(var(--semi-white), 1);
 }

package/lib/es/button/button.css

@@ -49,7 +49,7 @@
 }
 .semi-button-danger {
   background-color: var(--semi-color-danger);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-danger:hover {
   background-color: var(--semi-color-danger-hover);
@@ -65,7 +65,7 @@
 }
 .semi-button-warning {
   background-color: var(--semi-color-warning);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-warning:hover {
   background-color: var(--semi-color-warning-hover);
@@ -81,7 +81,7 @@
 }
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-tertiary:hover {
   background-color: var(--semi-color-tertiary-hover);
@@ -94,7 +94,7 @@
 }
 .semi-button-primary {
   background-color: var(--semi-color-primary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
@@ -108,7 +108,7 @@
 .semi-button-secondary {
   background-color: var(--semi-color-secondary);
   outline-color: var(--semi-color-secondary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);

package/lib/es/button/variables.scss

@@ -1,70 +1,70 @@
 // primary
 $color-button_primary-bg-default: var(--semi-color-primary); // 主要按钮背景颜色
 $color-button_primary-border-default: transparent; // 主要按钮描边颜色
-$color-button_primary-text-default: white; // 主要按钮文字颜色
+$color-button_primary-text-default: rgba(var(--semi-white), 1); // 主要按钮文字颜色
 
 $color-button_primary-bg-hover: var(--semi-color-primary-hover); // 主要按钮背景颜色 - 悬浮
 $color-button_primary-border-hover: var(--semi-color-primary-hover); // 主要按钮描边颜色 - 悬浮
-$color-button_primary-text-hover: white; // 主要按钮文字颜色 - 悬浮
+$color-button_primary-text-hover: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 悬浮
 
 $color-button_primary-bg-active: var(--semi-color-primary-active); // 主要按钮背景颜色 - 按下
 $color-button_primary-border-active: var(--semi-color-primary-active); // 主要按钮描边颜色 - 按下
-$color-button_primary-text-active: white; // 主要按钮文字颜色 - 按下
+$color-button_primary-text-active: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
 
 // secondary
 $color-button_secondary-bg-default: var(--semi-color-secondary); // 次要按钮背景颜色
 $color-button_secondary-border-default: var(--semi-color-secondary); // 次要按钮描边颜色
-$color-button_secondary-text-default: white; // 次要按钮文字颜色
+$color-button_secondary-text-default: rgba(var(--semi-white), 1); // 次要按钮文字颜色
 
 $color-button_secondary-bg-hover: var(--semi-color-secondary-hover); // 次要按钮背景颜色 - 悬浮
 $color-button_secondary-border-hover: var(--semi-color-secondary-hover); // 次要按钮描边颜色 - 悬浮
-$color-button_secondary-text-hover: white; // 次要按钮文字颜色 - 悬浮
+$color-button_secondary-text-hover: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 悬浮
 
 $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: white; // 次要按钮文字颜色 - 按下
+$color-button_secondary-text-active: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
 
 // danger
 $color-button_danger-bg-default: var(--semi-color-danger); // 危险按钮背景颜色
 $color-button_danger-border-default: var(--semi-color-danger); // 危险按钮描边颜色
-$color-button_danger-text-default: white; // 危险按钮文字颜色
+$color-button_danger-text-default: rgba(var(--semi-white), 1); // 危险按钮文字颜色
 
 $color-button_danger-bg-hover: var(--semi-color-danger-hover); // 危险按钮背景颜色 - 悬浮
 $color-button_danger-border-hover: var(--semi-color-danger); // 危险按钮描边颜色 - 悬浮
-$color-button_danger-text-hover: white; // 危险按钮文字颜色 - 悬浮
+$color-button_danger-text-hover: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 悬浮
 
 $color-button_danger-bg-active: var(--semi-color-danger-active); // 危险按钮背景颜色 - 按下
 $color-button_danger-border-active: var(--semi-color-danger-active); // 危险按钮描边颜色 - 按下
-$color-button_danger-text-active: white; // 危险按钮文字颜色 - 按下
+$color-button_danger-text-active: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
 
 // warning
 $color-button_warning-bg-default: var(--semi-color-warning); // 警告按钮背景颜色
 $color-button_warning-border-default: var(--semi-color-warning); // 警告按钮描边颜色
-$color-button_warning-text-default: white; // 警告按钮文字颜色
+$color-button_warning-text-default: rgba(var(--semi-white), 1); // 警告按钮文字颜色
 
 $color-button_warning-bg-hover: var(--semi-color-warning-hover); // 警告按钮背景颜色 - 悬浮
 $color-button_warning-border-hover: var(--semi-color-warning-hover); // 警告按钮描边颜色 - 悬浮
-$color-button_warning-text-hover: white; // 警告按钮文字颜色 - 悬浮
+$color-button_warning-text-hover: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 悬浮
 
 $color-button_warning-bg-active: var(--semi-color-warning-active); // 警告按钮背景颜色 - 按下
 $color-button_warning-border-active: var(--semi-color-warning-active); // 警告按钮描边颜色 - 按下
-$color-button_warning-text-active: white; // 警告按钮文字颜色 - 按下
+$color-button_warning-text-active: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
 
 // tertiary
 $color-button_tertiary-bg-default: var(--semi-color-tertiary); // 第三按钮背景颜色
 $color-button_tertiary-border-default: var(--semi-color-tertiary); // 第三按钮描边颜色
-$color-button_tertiary-text-default: white; // 第三按钮文字颜色
+$color-button_tertiary-text-default: rgba(var(--semi-white), 1); // 第三按钮文字颜色
 
 $color-button_tertiary-bg-hover: var(--semi-color-tertiary-hover); // 第三按钮背景颜色 - 悬浮
 $color-button_tertiary-border-hover: var(--semi-color-tertiary-hover); // 第三按钮描边颜色 - 悬浮
-$color-button_tertiary-text-hover: white; // 第三按钮文字颜色 - 悬浮
+$color-button_tertiary-text-hover: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 悬浮
 
 $color-button_tertiary-bg-active: var(--semi-color-tertiary-active); // 第三按钮背景颜色 - 按下
 $color-button_tertiary-border-active: var(--semi-color-tertiary-active); // 第三按钮描边颜色 - 按下
-$color-button_tertiary-text-active: white; // 第三按钮文字颜色 - 按下
+$color-button_tertiary-text-active: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
 
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 

package/lib/es/radio/radio.css

@@ -228,7 +228,7 @@
 .semi-radio .semi-radio-inner-checked .semi-radio-inner-display {
   border: solid 1px var(--semi-color-primary);
   background: var(--semi-color-primary);
-  color: white;
+  color: rgba(var(--semi-white), 1);
   border-radius: 16px;
 }
 .semi-radio .semi-radio-inner-checked > .semi-radio-addon {

package/lib/es/radio/variables.scss

@@ -13,7 +13,7 @@ $color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中项悬
 $color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中项按下态背景颜色
 $color-radio_primary-border-default: var(--semi-color-primary); // 选中项描边颜色
 $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景颜色
-$color-radio_primary-text-default: white; // 选中项原点颜色
+$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
 $color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色

package/lib/es/steps/steps.css

@@ -129,7 +129,7 @@
   flex-grow: 0;
 }
 .semi-steps .semi-steps-item-left.semi-steps-item-plain {
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 .semi-steps .semi-steps-item-left-process {
   background: var(--semi-color-primary-light-default);

package/lib/es/steps/variables.scss

@@ -4,7 +4,7 @@ $color-steps-bg-default: var(--semi-color-text-2); // 未到达步骤条图标
 $color-steps-bg-hover: var(--semi-color-fill-0); // 步骤条背景 - 悬浮态
 $color-steps-border-default: transparent; // 步骤条描边 - 默认
 $color-steps-icon-default: var(--semi-color-text-2); // 未到达步骤条图标背景
-$color-steps-text-default: white; // 步骤条图标默认文本颜色
+$color-steps-text-default: rgba(var(--semi-white), 1); // 步骤条图标默认文本颜色
 $color-steps_danger-text-active: var(--semi-color-danger-active); // 错误步骤条文本颜色 - 按下态
 $color-steps_danger-text-default: var(--semi-color-danger); // 错误步骤条文本颜色 - 默认态
 $color-steps_danger-text-hover: var(--semi-color-danger-hover); // 错误步骤条文本颜色 - 悬浮态

package/lib/es/switch/switch.css

@@ -68,7 +68,7 @@
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.3);
   cursor: pointer;
   border-radius: 9px;
-  background-color: white;
+  background-color: rgba(var(--semi-white), 1);
   box-sizing: border-box;
   position: absolute;
   left: 0;

package/lib/es/switch/variables.scss

@@ -30,7 +30,7 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: white; // 开关按钮背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关按钮背景颜色
 $color-switch_knob-border-default: var(--semi-color-border); // 开关按钮描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关按钮文字颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关按钮文字颜色

package/lib/es/tag/mixin.scss

@@ -1,7 +1,7 @@
 @mixin tag-style($color, $type) {
     @if $type==solid {
         background-color: unquote("rgba(var(--semi-#{$color}-5), 1)");
-        color: white;
+        color: rgba(var(--semi-white), 1);
     }
 
     @else if $type==ghost {

package/lib/es/tag/tag.css

@@ -119,7 +119,7 @@
 
 .semi-tag-amber-solid {
   background-color: rgba(var(--semi-amber-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-amber-light {
@@ -135,7 +135,7 @@
 
 .semi-tag-blue-solid {
   background-color: rgba(var(--semi-blue-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-blue-light {
@@ -151,7 +151,7 @@
 
 .semi-tag-cyan-solid {
   background-color: rgba(var(--semi-cyan-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-cyan-light {
@@ -167,7 +167,7 @@
 
 .semi-tag-green-solid {
   background-color: rgba(var(--semi-green-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-green-light {
@@ -183,7 +183,7 @@
 
 .semi-tag-grey-solid {
   background-color: rgba(var(--semi-grey-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-grey-light {
@@ -199,7 +199,7 @@
 
 .semi-tag-indigo-solid {
   background-color: rgba(var(--semi-indigo-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-indigo-light {
@@ -215,7 +215,7 @@
 
 .semi-tag-light-blue-solid {
   background-color: rgba(var(--semi-light-blue-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-light-blue-light {
@@ -231,7 +231,7 @@
 
 .semi-tag-light-green-solid {
   background-color: rgba(var(--semi-light-green-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-light-green-light {
@@ -247,7 +247,7 @@
 
 .semi-tag-lime-solid {
   background-color: rgba(var(--semi-lime-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-lime-light {
@@ -263,7 +263,7 @@
 
 .semi-tag-orange-solid {
   background-color: rgba(var(--semi-orange-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-orange-light {
@@ -279,7 +279,7 @@
 
 .semi-tag-pink-solid {
   background-color: rgba(var(--semi-pink-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-pink-light {
@@ -295,7 +295,7 @@
 
 .semi-tag-purple-solid {
   background-color: rgba(var(--semi-purple-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-purple-light {
@@ -311,7 +311,7 @@
 
 .semi-tag-red-solid {
   background-color: rgba(var(--semi-red-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-red-light {
@@ -327,7 +327,7 @@
 
 .semi-tag-teal-solid {
   background-color: rgba(var(--semi-teal-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-teal-light {
@@ -343,7 +343,7 @@
 
 .semi-tag-violet-solid {
   background-color: rgba(var(--semi-violet-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-violet-light {
@@ -359,7 +359,7 @@
 
 .semi-tag-yellow-solid {
   background-color: rgba(var(--semi-yellow-5), 1);
-  color: white;
+  color: rgba(var(--semi-white), 1);
 }
 
 .semi-tag-yellow-light {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.12.0",
+    "version": "2.12.1-alpha.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.12.0",
+        "@douyinfe/semi-animation": "2.12.1-alpha.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",
@@ -24,7 +24,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "250dbc61a1fe08552905accf4aba65eda83016ce",
+    "gitHead": "af5b8be827d8d1892c76b21ebea71ab0f13eaaa5",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",

package/radio/variables.scss

@@ -13,7 +13,7 @@ $color-radio_primary-bg-hover: var(--semi-color-primary-hover); // 选中项悬
 $color-radio_primary-bg-active: var(--semi-color-primary-active); // 选中项按下态背景颜色
 $color-radio_primary-border-default: var(--semi-color-primary); // 选中项描边颜色
 $color-radio_primary-bg-default: var(--semi-color-primary); // 选中项背景颜色
-$color-radio_primary-text-default: white; // 选中项原点颜色
+$color-radio_primary-text-default: rgba(var(--semi-white), 1); // 选中项原点颜色
 
 $color-radio_checked-bg-disabled: var(--semi-color-primary-disabled); // 选中项禁用态背景颜色
 $color-radio_default-border-disabled: var(--semi-color-border); // 禁用态描边颜色

package/steps/variables.scss

@@ -4,7 +4,7 @@ $color-steps-bg-default: var(--semi-color-text-2); // 未到达步骤条图标
 $color-steps-bg-hover: var(--semi-color-fill-0); // 步骤条背景 - 悬浮态
 $color-steps-border-default: transparent; // 步骤条描边 - 默认
 $color-steps-icon-default: var(--semi-color-text-2); // 未到达步骤条图标背景
-$color-steps-text-default: white; // 步骤条图标默认文本颜色
+$color-steps-text-default: rgba(var(--semi-white), 1); // 步骤条图标默认文本颜色
 $color-steps_danger-text-active: var(--semi-color-danger-active); // 错误步骤条文本颜色 - 按下态
 $color-steps_danger-text-default: var(--semi-color-danger); // 错误步骤条文本颜色 - 默认态
 $color-steps_danger-text-hover: var(--semi-color-danger-hover); // 错误步骤条文本颜色 - 悬浮态

package/switch/variables.scss

@@ -30,7 +30,7 @@ $color-switch_disabled-border-default: var(--semi-color-border); // 禁用态开
 $color-switch_disabled-bg-hover: transparent; // 禁用态开关背景色 - 悬浮
 $color-switch_checked_disabled-bg-default: var(--semi-color-success-disabled); // 禁用开启态开关背景颜色
 $color-switch_checked_disabled-border-default: transparent; // 禁用开启态开关描边颜色
-$color-switch_knob-bg-default: white; // 开关按钮背景颜色
+$color-switch_knob-bg-default: rgba(var(--semi-white), 1); // 开关按钮背景颜色
 $color-switch_knob-border-default: var(--semi-color-border); // 开关按钮描边颜色
 $color-switch_checked-text-default: var(--semi-color-white); // 开启态开关按钮文字颜色
 $color-switch_unchecked-text-default: var(--semi-color-text-2); // 关闭态开关按钮文字颜色

package/tag/mixin.scss

@@ -1,7 +1,7 @@
 @mixin tag-style($color, $type) {
     @if $type==solid {
         background-color: unquote("rgba(var(--semi-#{$color}-5), 1)");
-        color: white;
+        color: rgba(var(--semi-white), 1);
     }
 
     @else if $type==ghost {