diff --git a/src/components/button/common/button-common.scss b/src/components/button/common/button-common.scss index 028203ea11..dd92d70489 100644 --- 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 index d1e8d7153e..0044274f2b 100644 --- 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); } }