@douyinfe/semi-foundation 2.58.1 → 2.59.0-alpha.1

package/banner/banner.scss

@@ -20,6 +20,7 @@ $module: #{$prefix}-banner;
         .#{$module}-content {
             display: flex;
             flex: 1;
+            align-items: top;
         }
     }
 

package/button/button.scss

@@ -45,10 +45,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_danger-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_danger-bg-default;
             }
@@ -62,14 +59,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_danger-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_danger_outline-border-default;
-        }
-
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_danger_borderless-text-default;
         }
@@ -88,10 +78,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_warning-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_warning-bg-default;
             }
@@ -105,13 +92,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_warning-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_warning_outline-border-default;
-        }
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_warning_borderless-text-default;
         }
@@ -130,10 +111,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_tertiary-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_tertiary-bg-default;
             }
@@ -147,13 +125,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_tertiary-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
-        }
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_tertiary_solid-text-default;
         }
@@ -172,29 +144,17 @@ $module: #{$prefix}-button;
             &.#{$module}-light {
                 background: $color-button_disabled_light_primary-bg-default;
             }
-
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
         }
 
-        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_primary_outline-border-default;
-        }
-
-
-        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):active {
             background-color: $color-button_primary-bg-active;
         }
 
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_primary_borderless-text-default;
         }
@@ -211,21 +171,11 @@ $module: #{$prefix}-button;
         &-disabled {
             background-color: $color-button_disabled_secondary-bg-default;
 
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
-
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_secondary-bg-default;
             }
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
-        }
-
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -235,7 +185,6 @@ $module: #{$prefix}-button;
         }
 
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_secondary_borderless-text-default;
         }
@@ -273,18 +222,6 @@ $module: #{$prefix}-button;
         }
     }
 
-    &-outline {
-        background-color: transparent;
-
-        &:not(.#{$module}-disabled):hover {
-            background-color: $color-button_outline-bg-hover;
-        }
-
-        &:not(.#{$module}-disabled):active {
-            background-color: $color-button_outline-bg-active;
-        }
-    }
-
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;

package/button/variables.scss

@@ -11,7 +11,6 @@ $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: rgba(var(--semi-white), 1); // 主要按钮文字颜色 - 按下
 $color-button_primary-outline-focus: var(--semi-color-primary-light-active); // 主要按钮轮廓 - 聚焦
-$color-button_primary_outline-border-default: var(--semi-color-border); // 边框模式下 primary 边框颜色
 
 $color-button_primary_borderless-text-default: var(--semi-color-primary); // 主要按钮无边框文字颜色
 
@@ -27,7 +26,6 @@ $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: rgba(var(--semi-white), 1); // 次要按钮文字颜色 - 按下
-$color-button_secondary_outline-border-default: var(--semi-color-border); // 边框模式下 secondary 边框颜色
 
 $color-button_secondary_borderless-text-default: var(--semi-color-secondary); // 次要按钮无边框文字颜色
 
@@ -44,7 +42,6 @@ $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: rgba(var(--semi-white), 1); // 危险按钮文字颜色 - 按下
 $color-button_danger-outline-focus: var(--semi-color-danger-light-active); // 危险按钮轮廓 - 聚焦
-$color-button_danger_outline-border-default: var(--semi-color-danger); // 边框模式下 danger 边框颜色
 
 $color-button_danger_borderless-text-default: var(--semi-color-danger); // 危险按钮无边框文字颜色
 
@@ -61,7 +58,7 @@ $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: rgba(var(--semi-white), 1); // 警告按钮文字颜色 - 按下
 $color-button_warning-outline-focus: var(--semi-color-warning-light-active); // 警告按钮轮廓 - 聚焦
-$color-button_warning_outline-border-default: var(--semi-color-warning); // 边框模式下 warning 边框颜色
+
 $color-button_warning_borderless-text-default: var(--semi-color-warning); // 警告按钮无边框文字颜色
 
 // tertiary
@@ -76,7 +73,7 @@ $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: rgba(var(--semi-white), 1); // 第三按钮文字颜色 - 按下
-$color-button_tertiary_outline-border-default: var(--semi-color-border); // 边框模式下 danger 边框颜色
+
 $color-button_tertiary_solid-text-default: var(--semi-color-text-1); // 浅色第三按钮文字颜色
 
 // disabled
@@ -90,7 +87,7 @@ $color-button_disabled_secondary-bg-default: $color-button_disabled-bg-default;
 $color-button_disabled_danger-bg-default: $color-button_disabled-bg-default; // 禁用 danger 按钮背景颜色
 $color-button_disabled_warning-bg-default: $color-button_disabled-bg-default; // 禁用 warning 按钮背景颜色
 $color-button_disabled_tertiary-bg-default: $color-button_disabled-bg-default; // 禁用 tertiary 按钮背景颜色
-$color-button_disabled_outline-border-default: var(--semi-color-border); // 边框模式下 disable 边框颜色
+
 
 
 // light
@@ -117,12 +114,6 @@ $color-button_borderless-border-hover: $color-button_borderless-border-default;
 $color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
 $width-button_borderless-border: 0; // 无背景按钮描边宽度
 
-
-// outline
-$width-button_outline-border: 1px; // 边框模式按钮边框宽度
-$color-button_outline-bg-hover: var(--semi-color-fill-0); // 边框模式按钮背景颜色 - 悬浮
-$color-button_outline-bg-active: var(--semi-color-fill-1); // 边框模式按钮背景颜色 - 按下
-
 // buttongroup
 
 $color-button_group-border-default: var(--semi-color-border); // 按钮组分割线颜色
@@ -172,6 +163,6 @@ $width-button-outline: 2px; // 按钮轮廓宽度
 
 
 $radius-button_splitButtonGroup_first_topLeft: var(--semi-border-radius-small); // split button 左上圆角
-$radius-button_splitButtonGroup_first_bottomLeft: var(--semi-border-radius-small); // split button 左下圆角
-$radius-button_splitButtonGroup_last_topRight: var(--semi-border-radius-small); // split button 右上圆角
-$radius-button_splitButtonGroup_last_bottomRight: var(--semi-border-radius-small); // split button 右下圆角
+$radius-button_splitButtonGroup_first_bottomLeft:var(--semi-border-radius-small); // split button 左下圆角
+$radius-button_splitButtonGroup_last_topRight:var(--semi-border-radius-small); // split button 右上圆角
+$radius-button_splitButtonGroup_last_bottomRight:var(--semi-border-radius-small); // split button 右下圆角

package/checkbox/checkbox.scss

@@ -188,7 +188,7 @@ $module: #{$prefix}-checkbox;
         border-radius: $radius-checkbox_cardType;
         padding: $spacing-checkbox_cardType-paddingY $spacing-checkbox_cardType-paddingX;
         background: transparent;
-        border: $width-checkbox_cardType_checked-border solid $color-checkbox_cardType-border-default;
+        border: $width-checkbox_cardType_checked-border solid transparent;
 
 
         .#{$module}-inner {

package/checkbox/variables.scss

@@ -38,8 +38,6 @@ $color-checkbox_checked-bg-disabled: var(--semi-color-primary-disabled); // 选
 $color-checkbox_checked-icon-disabled: var(--semi-color-white); // 选框禁用态对勾颜色
 $color-checkbox_primary-outline-focus: var(--semi-color-primary-light-active); // 复选框轮廓-聚焦颜色
 
-$color-checkbox_cardType-border-default: transparent; // 卡片复选框默认边框颜色
-
 $size-checkbox_inner-shadow: $border-thickness-control; // 选框内描边宽度
 $width-checkbox_inner: $width-icon-medium; // 选框对勾 icon 宽度
 $height-checkbox_inner: 20px; // 选框对勾 icon 高度
@@ -68,4 +66,4 @@ $font-checkbox_cardType_addon-fontWeight: $font-weight-bold; // 卡片类型复
 $font-checkbox_cardType_addon-lineHeight: 20px; // 卡片类型复选框的 addon 的文字行高
 $font-checkbox_cardType_extra-size: $font-size-regular; // 卡片类型复选框的 extra 的文字大小
 $font-checkbox_cardType_extra-fontWeight: normal; // 卡片类型复选框的 extra 的 fontWeight
-$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高
+$font-checkbox_cardType_extra-lineHeight: 20px; // 卡片类型复选框的 extra 的文字行高

package/form/foundation.ts

@@ -613,7 +613,6 @@ export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
             getValue: (field?: string) => this.getValue(field, { needClone: true }),
             getValues: () => this.getValue(undefined, { needClone: true }),
             getFormState: () => this.getFormState(true),
-            getFormProps: (props?: Array<string>) => this.getFormProps(props),
             getInitValue: (field: string) => this.getInitValue(field),
             getInitValues: () => this.getInitValues(),
             getTouched: (field?: string) => this.getTouched(field),

package/input/foundation.ts

@@ -40,6 +40,10 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
         super({ ...InputFoundation.inputDefaultAdapter, ...adapter });
     }
 
+    init() {
+        this._setInitValue();
+    }
+
     destroy() {
         if (this._timer) {
             clearTimeout(this._timer);
@@ -49,6 +53,16 @@ class InputFoundation extends BaseFoundation<InputAdapter> {
 
     setDisable() {}
 
+    _setInitValue() {
+        const { defaultValue, value } = this.getProps();
+        let v = defaultValue;
+        if (this._isControlledComponent()) {
+            v = value;
+        }
+        this._adapter.setValue(v);
+    // this.checkAllowClear(v);
+    }
+
     setValue(value: any) {
         this._adapter.setValue(value);
     }

package/input/textareaFoundation.ts

@@ -48,8 +48,24 @@ export default class TextAreaFoundation extends BaseFoundation<TextAreaAdapter>
         });
     }
 
+    init() {
+        this.setInitValue();
+    }
+
     destroy() { }
 
+    setInitValue() {
+        const {
+            defaultValue,
+            value
+        } = this.getProps();
+        let v = defaultValue;
+        if (this._isControlledComponent()) {
+            v = value;
+        }
+        this._adapter.setValue(v);
+    }
+
     handleValueChange(v: string) {
         this._adapter.setValue(v);
     }

package/lib/cjs/banner/banner.css

@@ -14,6 +14,7 @@
 .semi-banner .semi-banner-content-wrapper .semi-banner-content {
   display: flex;
   flex: 1;
+  align-items: top;
 }
 .semi-banner-in-container {
   border-radius: var(--semi-border-radius-small);

package/lib/cjs/banner/banner.scss

@@ -20,6 +20,7 @@ $module: #{$prefix}-banner;
         .#{$module}-content {
             display: flex;
             flex: 1;
+            align-items: top;
         }
     }
 

package/lib/cjs/button/button.css

@@ -55,10 +55,6 @@
 .semi-button-danger-disabled {
   background-color: var(--semi-color-disabled-bg);
 }
-.semi-button-danger-disabled.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
 .semi-button-danger-disabled.semi-button-light {
   background-color: var(--semi-color-fill-0);
 }
@@ -68,11 +64,7 @@
 .semi-button-danger:active {
   background-color: var(--semi-color-danger-active);
 }
-.semi-button-danger.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-danger);
-}
-.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-outline, .semi-button-danger.semi-button-borderless {
+.semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
 .semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -87,10 +79,6 @@
 .semi-button-warning-disabled {
   background-color: var(--semi-color-disabled-bg);
 }
-.semi-button-warning-disabled.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
 .semi-button-warning-disabled.semi-button-light {
   background-color: var(--semi-color-fill-0);
 }
@@ -100,11 +88,7 @@
 .semi-button-warning:active {
   background-color: var(--semi-color-warning-active);
 }
-.semi-button-warning.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-warning);
-}
-.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-outline, .semi-button-warning.semi-button-borderless {
+.semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
 .semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus-visible {
@@ -119,10 +103,6 @@
 .semi-button-tertiary-disabled {
   background-color: var(--semi-color-disabled-bg);
 }
-.semi-button-tertiary-disabled.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
 .semi-button-tertiary-disabled.semi-button-light {
   background-color: var(--semi-color-fill-0);
 }
@@ -132,11 +112,7 @@
 .semi-button-tertiary:active {
   background-color: var(--semi-color-tertiary-active);
 }
-.semi-button-tertiary.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
-.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-outline, .semi-button-tertiary.semi-button-borderless {
+.semi-button-tertiary.semi-button-light, .semi-button-tertiary.semi-button-borderless {
   color: var(--semi-color-text-1);
 }
 .semi-button-primary {
@@ -151,21 +127,13 @@
 .semi-button-primary-disabled.semi-button-light {
   background: var(--semi-color-fill-0);
 }
-.semi-button-primary-disabled.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
-.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):hover {
+.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):hover {
   background-color: var(--semi-color-primary-hover);
 }
-.semi-button-primary.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
-.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):not(.semi-button-outline):active {
+.semi-button-primary:not(.semi-button-borderless):not(.semi-button-light):active {
   background-color: var(--semi-color-primary-active);
 }
-.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-outline, .semi-button-primary.semi-button-borderless {
+.semi-button-primary.semi-button-light, .semi-button-primary.semi-button-borderless {
   color: var(--semi-color-primary);
 }
 .semi-button-secondary {
@@ -178,24 +146,16 @@
 .semi-button-secondary-disabled {
   background-color: var(--semi-color-disabled-bg);
 }
-.semi-button-secondary-disabled.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
 .semi-button-secondary-disabled.semi-button-light {
   background-color: var(--semi-color-fill-0);
 }
-.semi-button-secondary.semi-button-outline {
-  background-color: transparent;
-  border: 1px solid var(--semi-color-border);
-}
 .semi-button-secondary:hover {
   background-color: var(--semi-color-secondary-hover);
 }
 .semi-button-secondary:active {
   background-color: var(--semi-color-secondary-active);
 }
-.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-outline, .semi-button-secondary.semi-button-borderless {
+.semi-button-secondary.semi-button-light, .semi-button-secondary.semi-button-borderless {
   color: var(--semi-color-secondary);
 }
 .semi-button-disabled {
@@ -222,15 +182,6 @@
   background-color: var(--semi-color-fill-1);
   border: 0 transparent solid;
 }
-.semi-button-outline {
-  background-color: transparent;
-}
-.semi-button-outline:not(.semi-button-disabled):hover {
-  background-color: var(--semi-color-fill-0);
-}
-.semi-button-outline:not(.semi-button-disabled):active {
-  background-color: var(--semi-color-fill-1);
-}
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
   border: 0 transparent solid;

package/lib/cjs/button/button.scss

@@ -45,10 +45,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_danger-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_danger-bg-default;
             }
@@ -62,14 +59,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_danger-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_danger_outline-border-default;
-        }
-
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_danger_borderless-text-default;
         }
@@ -88,10 +78,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_warning-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_warning-bg-default;
             }
@@ -105,13 +92,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_warning-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_warning_outline-border-default;
-        }
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_warning_borderless-text-default;
         }
@@ -130,10 +111,7 @@ $module: #{$prefix}-button;
 
         &-disabled {
             background-color: $color-button_disabled_tertiary-bg-default;
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
+
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_tertiary-bg-default;
             }
@@ -147,13 +125,7 @@ $module: #{$prefix}-button;
             background-color: $color-button_tertiary-bg-active;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_tertiary_outline-border-default;
-        }
-
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_tertiary_solid-text-default;
         }
@@ -172,29 +144,17 @@ $module: #{$prefix}-button;
             &.#{$module}-light {
                 background: $color-button_disabled_light_primary-bg-default;
             }
-
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
         }
 
-        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):hover {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):hover {
             background-color: $color-button_primary-bg-hover;
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_primary_outline-border-default;
-        }
-
-
-        &:not(.#{$module}-borderless):not(.#{$module}-light):not(.#{$module}-outline):active {
+        &:not(.#{$module}-borderless):not(.#{$module}-light):active {
             background-color: $color-button_primary-bg-active;
         }
 
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_primary_borderless-text-default;
         }
@@ -211,21 +171,11 @@ $module: #{$prefix}-button;
         &-disabled {
             background-color: $color-button_disabled_secondary-bg-default;
 
-            &.#{$module}-outline {
-                background-color: transparent;
-                border: $width-button_outline-border solid $color-button_disabled_outline-border-default;
-            }
-
             &.#{$module}-light {
                 background-color: $color-button_disabled_light_secondary-bg-default;
             }
         }
 
-        &.#{$module}-outline{
-            background-color: transparent;
-            border: $width-button_outline-border solid $color-button_secondary_outline-border-default;
-        }
-
         &:hover {
             background-color: $color-button_secondary-bg-hover;
         }
@@ -235,7 +185,6 @@ $module: #{$prefix}-button;
         }
 
         &.#{$module}-light,
-        &.#{$module}-outline,
         &.#{$module}-borderless {
             color: $color-button_secondary_borderless-text-default;
         }
@@ -273,18 +222,6 @@ $module: #{$prefix}-button;
         }
     }
 
-    &-outline {
-        background-color: transparent;
-
-        &:not(.#{$module}-disabled):hover {
-            background-color: $color-button_outline-bg-hover;
-        }
-
-        &:not(.#{$module}-disabled):active {
-            background-color: $color-button_outline-bg-active;
-        }
-    }
-
     &-light {
         background-color: $color-button_light-bg-default;
         border: $width-button_light-border $color-button_light-border-default solid;