fix: review

sbb-design-systems · May 14, 2024 · f14e1f3 · f14e1f3
1 parent ace19da
commit f14e1f3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss
@@ -14,7 +14,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 
   --sbb-button-icon-size: var(--sbb-size-icon-ui-small);
   --sbb-button-color-disabled-background: var(--sbb-color-milk);
-  --sbb-button-color-disabled-border: var(--sbb-color-cloud);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-granite);
   --sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
   --sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
@@ -23,6 +23,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
   --sbb-button-shadow-1-color: var(--sbb-color-red-alpha-20);
   --sbb-button-shadow-2-color: var(--sbb-color-red125-alpha-20);
   --sbb-button-border-style: solid;
+  --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-width: var(--sbb-border-width-2x);
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-min-height: var(--sbb-size-element-m);
@@ -55,7 +56,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 
 :host([negative]) {
   --sbb-button-color-disabled-background: var(--sbb-color-anthracite);
-  --sbb-button-color-disabled-border: var(--sbb-color-granite);
+  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-aluminium);
 }
 
@@ -82,8 +83,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
 }
 
 :host([disabled]) {
-  --sbb-button-border-style: dashed;
-
   @include sbb.if-forced-colors {
     --sbb-button-color-disabled-text: GrayText !important;
   }
@@ -161,6 +160,7 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
     :host([disabled]) & {
       background-color: var(--sbb-button-color-disabled-background);
       border-color: var(--sbb-button-color-disabled-border);
+      border-style: var(--sbb-button-border-disabled-style);
     }
 
     // Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.

diff --git a/src/components/core/styles/mixins/buttons.scss b/src/components/core/styles/mixins/buttons.scss
@@ -61,6 +61,7 @@
   --sbb-button-color-disabled-border: var(--sbb-color-smoke);
   --sbb-button-color-disabled-text: var(--sbb-color-granite);
   --sbb-button-border-style: solid;
+  --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-width: #{functions.px-to-rem-build(0)};
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
   --sbb-button-transition-duration: var(
@@ -148,7 +149,6 @@
 // Disabled state for icon-button in form-field
 @mixin icon-button-disabled($button-selector) {
   --sbb-button-border-width: var(--sbb-border-width-1x);
-  --sbb-button-border-style: dashed;
 
   @include a11y.if-forced-colors {
     --sbb-button-color-disabled-text: GrayText !important;
@@ -163,6 +163,7 @@
   #{$button-selector}::before {
     background-color: var(--sbb-button-color-disabled-background);
     border-color: var(--sbb-button-color-disabled-border);
+    border-style: var(--sbb-button-border-disabled-style);
   }
 }