From dc47583e62997bf002bddb7be6fe5e3b1134f152 Mon Sep 17 00:00:00 2001
From: Jeri Peier <jeremias.peier@sbb.ch>
Date: Tue, 12 Sep 2023 09:24:50 +0200
Subject: [PATCH] fix(multiple): disabled states (#1972)

Closes #1955

The following disabled states were adapted to the new design:
 - Checkbox
 - Form field (Text input / time input)
 - Option (Select / Autocomplete)
 - Radio button
 - Selection Panel
 - Slider
 - Tag
 - Toggle Check
 - Toggle / Toggle Option
---
 src/components/sbb-checkbox/sbb-checkbox.scss |  31 +----
 .../sbb-form-field/sbb-form-field.scss        |  25 ++--
 src/components/sbb-option/sbb-option.scss     |  28 +++-
 .../sbb-option/sbb-option.stories.tsx         |   2 +-
 .../sbb-radio-button/sbb-radio-button.scss    | 126 +++++++++---------
 .../sbb-selection-panel.scss                  |   6 -
 src/components/sbb-slider/sbb-slider.scss     |   9 +-
 src/components/sbb-tag/sbb-tag.scss           |  13 +-
 .../sbb-toggle-check/sbb-toggle-check.scss    |  15 +--
 .../sbb-toggle-option/sbb-toggle-option.scss  |   4 -
 src/components/sbb-toggle/sbb-toggle.scss     |  23 ++--
 .../sbb-visual-checkbox.scss                  |  18 ++-
 .../sbb-visual-checkbox.stories.tsx           |  12 ++
 src/global/styles/typography.scss             |   6 +-
 14 files changed, 169 insertions(+), 149 deletions(-)

diff --git a/src/components/sbb-checkbox/sbb-checkbox.scss b/src/components/sbb-checkbox/sbb-checkbox.scss
index 6d217b52fc..d6f48c43d1 100644
--- a/src/components/sbb-checkbox/sbb-checkbox.scss
+++ b/src/components/sbb-checkbox/sbb-checkbox.scss
@@ -10,7 +10,6 @@
   --sbb-checkbox-cursor: pointer;
   --sbb-checkbox-subtext-color: var(--sbb-color-granite-default);
   --sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-checkbox-text-decoration: none;
 
   display: inline-block;
 
@@ -19,35 +18,10 @@
   outline: none !important;
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-checkbox-border-color: var(--sbb-color-smoke-default);
-  --sbb-checkbox-selection-color: var(--sbb-color-granite-default);
-  --sbb-checkbox-label-color: var(--sbb-color-granite-default);
+:host(:is([data-group-disabled], [disabled]:not([disabled='false']))) {
+  --sbb-checkbox-label-color: var(--sbb-color-charcoal-default);
   --sbb-checkbox-cursor: default;
   --sbb-checkbox-subtext-color: var(--sbb-color-smoke-default);
-  --sbb-checkbox-text-decoration: line-through;
-
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: Canvas;
-  }
-}
-
-:host([indeterminate]:not([indeterminate='false'])) {
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: ButtonBorder;
-  }
-}
-
-:host(
-    [indeterminate]:not([indeterminate='false']):is(
-        [data-group-disabled],
-        [disabled]:not([disabled='false'])
-      )
-  ) {
-  @include sbb.if-forced-colors {
-    --sbb-checkbox-selection-color: GrayText;
-  }
 }
 
 :host([data-is-selection-panel-input]) {
@@ -149,7 +123,6 @@ input[type='checkbox'] {
   display: flex;
   gap: var(--sbb-checkbox-label-gap);
   color: var(--sbb-checkbox-label-color);
-  text-decoration: var(--sbb-checkbox-text-decoration);
 
   // Fix for Chrome and Safari, they approximate 23.8px to 23px for line-height
   line-height: max((1em * var(--sbb-typo-line-height-body-text)), var(--sbb-checkbox-dimension));
diff --git a/src/components/sbb-form-field/sbb-form-field.scss b/src/components/sbb-form-field/sbb-form-field.scss
index 974a4b8f7d..b46b61111e 100644
--- a/src/components/sbb-form-field/sbb-form-field.scss
+++ b/src/components/sbb-form-field/sbb-form-field.scss
@@ -7,6 +7,7 @@
 :host {
   --sbb-form-field-background-color: var(--sbb-color-white-default);
   --sbb-form-field-border-color: var(--sbb-color-smoke-default);
+  --sbb-form-field-border-style: solid;
   --sbb-form-field-border-radius: var(--sbb-border-radius-4x);
   --sbb-form-field-border-width: var(--sbb-border-width-1x);
   --sbb-form-field-height: var(--sbb-size-form-element-m-min-height);
@@ -60,7 +61,7 @@
 :host([data-disabled]) {
   --sbb-form-field-label-color: var(--sbb-color-granite-default);
   --sbb-form-field-prefix-color: var(--sbb-color-granite-default);
-  --sbb-form-field-text-color: var(--sbb-color-granite-default);
+  --sbb-form-field-border-style: dashed;
 
   @include sbb.if-forced-colors {
     --sbb-form-field-label-color: GrayText;
@@ -79,6 +80,11 @@
 :host([data-has-popup-open]) {
   --sbb-form-field-border-color: var(--sbb-color-charcoal-default);
   --sbb-form-field-prefix-color: var(--sbb-color-charcoal-default);
+
+  @include sbb.if-forced-colors {
+    --sbb-form-field-border-color: Highlight;
+    --sbb-form-field-prefix-color: Highlight;
+  }
 }
 
 :host([data-invalid]) {
@@ -123,7 +129,8 @@
   align-items: center;
   gap: var(--sbb-form-field-gap);
   padding-inline: calc(var(--sbb-form-field-padding-inline) - var(--sbb-form-field-border-width));
-  border: var(--sbb-form-field-border-width) solid var(--sbb-form-field-border-color);
+  border: var(--sbb-form-field-border-width) var(--sbb-form-field-border-style)
+    var(--sbb-form-field-border-color);
   border-radius: var(--sbb-form-field-border-radius);
   height: var(--sbb-form-field-height);
   background-color: var(--sbb-form-field-background-color);
@@ -258,18 +265,18 @@
     :host([floating-label]:not([floating-label='false'])) & {
       color: transparent !important;
       -webkit-text-fill-color: transparent !important;
+
+      @include sbb.if-forced-colors {
+        color: Canvas !important;
+        -webkit-text-fill-color: Canvas !important;
+      }
     }
 
     :host([data-disabled]:not([floating-label]:not([floating-label='false']))) & {
-      color: var(--sbb-form-field-text-color) !important;
-      -webkit-text-fill-color: var(--sbb-form-field-text-color) !important;
-      text-decoration: line-through !important;
+      color: var(--sbb-color-granite-default);
+      -webkit-text-fill-color: var(--sbb-color-granite-default);
     }
   }
-
-  :host([data-disabled]) & {
-    text-decoration: line-through !important;
-  }
 }
 
 .sbb-form-field__input ::slotted(:where(select, sbb-select)) {
diff --git a/src/components/sbb-option/sbb-option.scss b/src/components/sbb-option/sbb-option.scss
index fc8d158c92..d726ca88c1 100644
--- a/src/components/sbb-option/sbb-option.scss
+++ b/src/components/sbb-option/sbb-option.scss
@@ -15,7 +15,6 @@
   --sbb-option-cursor: pointer;
   --sbb-option-border-radius: var(--sbb-border-radius-4x);
   --sbb-option-icon-color: var(--sbb-color-metal-default);
-  --sbb-option-text-decoration: none;
 }
 
 :host([active]:not([active='false'])) {
@@ -39,11 +38,8 @@
   }
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-option-color: var(--sbb-color-granite-default);
+:host(:is([data-group-disabled], [disabled]:not([disabled='false']))) {
   --sbb-option-cursor: default;
-  --sbb-option-text-decoration: line-through;
 
   @include sbb.if-forced-colors {
     --sbb-option-color: GrayText;
@@ -82,7 +78,6 @@
   padding-block: var(--sbb-option-padding-block);
   justify-content: var(--sbb-option-justify-content);
   color: var(--sbb-option-color);
-  text-decoration: var(--sbb-option-text-decoration);
   background-color: var(--sbb-option-background-color);
   cursor: var(--sbb-option-cursor);
   -webkit-tap-highlight-color: transparent;
@@ -93,6 +88,27 @@
 
     border-radius: var(--sbb-option-border-radius);
   }
+
+  // Add inner border and background for disabled option when it's not multiple
+  :host(:is([data-group-disabled], [disabled]:not([disabled='false'])):not([data-multiple])) & {
+    position: relative;
+    z-index: 0;
+
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      inset: #{sbb.px-to-rem-build(6)};
+      border: var(--sbb-border-width-1x) dashed var(--sbb-color-graphite-default);
+      border-radius: var(--sbb-border-radius-2x);
+      background-color: var(--sbb-color-milk-default);
+      z-index: -1;
+
+      @include sbb.if-forced-colors {
+        border-color: GrayText;
+      }
+    }
+  }
 }
 
 .sbb-option__icon {
diff --git a/src/components/sbb-option/sbb-option.stories.tsx b/src/components/sbb-option/sbb-option.stories.tsx
index 5d9c15c3f3..6e428fc490 100644
--- a/src/components/sbb-option/sbb-option.stories.tsx
+++ b/src/components/sbb-option/sbb-option.stories.tsx
@@ -78,8 +78,8 @@ const createOptions = ({
           style={style}
           active={active && i === 0}
           disabled={disabled && i === 0}
-          {...args}
           value={`${value} ${i + 1}`}
+          {...args}
         >
           {`${value} ${i + 1}`}
         </sbb-option>
diff --git a/src/components/sbb-radio-button/sbb-radio-button.scss b/src/components/sbb-radio-button/sbb-radio-button.scss
index 8ee6346ec0..79b0a616dc 100644
--- a/src/components/sbb-radio-button/sbb-radio-button.scss
+++ b/src/components/sbb-radio-button/sbb-radio-button.scss
@@ -5,22 +5,35 @@
 @include sbb.host-component-properties;
 
 :host {
-  --sbb-radio-button-label-color: var(--color-black-default);
+  --sbb-radio-button-label-color: var(--sbb-color-charcoal-default);
   --sbb-radio-button-background-color: var(--sbb-color-white-default);
-  --sbb-radio-button-border: var(--sbb-border-width-1x);
-  --sbb-radio-button-size: calc(var(--sbb-spacing-fixed-6x) - var(--sbb-radio-button-border) * 2);
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-white-default);
+  --sbb-radio-button-border-width: var(--sbb-border-width-1x);
+  --sbb-radio-button-border-style: solid;
+  --sbb-radio-button-border-color: var(--sbb-color-smoke-default);
+  --sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-radio-button-inner-circle-dimension: #{sbb.px-to-rem-build(10)};
   --sbb-radio-button-subtext-color: var(--sbb-color-granite-default);
-  --sbb-radio-button-text-decoration: none;
+  --sbb-radio-button-cursor: pointer;
+
+  // The border in unchecked state should fill the circle.
+  --sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);
 
   // Align radio button to the first row of the label based on the line-height so that it's vertically
   // aligned to the label and sticks to the top if the label breaks into multiple lines
   --sbb-radio-button-icon-align: calc(
-    (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-size)) / 2
+    (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2
   );
 
   // Use !important here to not interfere with Firefox focus ring definition
   // which appears in normalize css of several frameworks.
   outline: none !important;
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-background-color: Canvas !important;
+    --sbb-radio-button-border-width: var(--sbb-border-width-2x);
+    --sbb-radio-button-border-color: ButtonBorder;
+  }
 }
 
 // Change the focus outline when the input is placed inside of a selection panel
@@ -30,7 +43,7 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  .sbb-radio-button__label-slot::after {
+  .sbb-radio-button::after {
     content: '';
     position: absolute;
     display: block;
@@ -47,11 +60,31 @@
   }
 }
 
-:host([data-group-disabled]),
-:host([disabled]:not([disabled='false'])) {
-  --sbb-radio-button-label-color: var(--sbb-color-granite-default);
+:host([checked]:not([checked='false'])) {
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-red-default);
+  --sbb-radio-button-background-fake-border-width: calc(
+    (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2
+  );
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-inner-circle-color: Highlight;
+    --sbb-radio-button-border-color: Highlight;
+  }
+}
+
+// Disabled definitions have to be after checked definitions
+:host(:is([data-group-disabled], [disabled]):not([disabled='false'])) {
+  --sbb-radio-button-background-color: var(--sbb-color-milk-default);
   --sbb-radio-button-subtext-color: var(--sbb-color-smoke-default);
-  --sbb-radio-button-text-decoration: line-through;
+  --sbb-radio-button-border-style: dashed;
+  --sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal-default);
+  --sbb-radio-button-cursor: default;
+
+  @include sbb.if-forced-colors {
+    --sbb-radio-button-inner-circle-color: GrayText;
+    --sbb-radio-button-border-color: GrayText;
+    --sbb-radio-button-border-style: solid;
+  }
 }
 
 .sbb-radio-button__input {
@@ -63,7 +96,7 @@
   @include sbb.text-m--regular;
 
   display: block;
-  cursor: pointer;
+  cursor: var(--sbb-radio-button-cursor);
   user-select: none;
   position: relative;
   color: var(--sbb-radio-button-label-color);
@@ -73,11 +106,6 @@
     @include sbb.text-s--regular;
   }
 
-  :host([data-group-disabled]) &,
-  :host([disabled]:not([disabled='false'])) & {
-    cursor: default;
-  }
-
   // Hide focus outline when focus origin is mouse or touch. This is being used in tooltip as a workaround.
   :host(
       :focus-visible:not(
@@ -103,66 +131,42 @@ slot[name='subtext'] {
   display: flex;
   align-items: flex-start;
   overflow: hidden;
-  text-decoration: var(--sbb-radio-button-text-decoration);
 
-  // Unchecked style
-  &::before {
+  &::before,
+  &::after {
     content: '';
     flex-shrink: 0;
-    width: var(--sbb-radio-button-size);
-    height: var(--sbb-radio-button-size);
-    background: var(--sbb-radio-button-background-color);
+    width: var(--sbb-radio-button-dimension);
+    height: var(--sbb-radio-button-dimension);
     border-radius: 50%;
-
-    // The border was used to generate the animation of the radio-button,
-    // consequently the box-shadow was used as the actual border of the radio.
-    border: calc(var(--sbb-radio-button-size) / 2) solid var(--sbb-color-white-default);
-    box-shadow: 0 0 0 var(--sbb-radio-button-border) var(--sbb-color-smoke-default);
-    margin-inline-end: calc(var(--sbb-spacing-fixed-2x) + var(--sbb-radio-button-border));
-    margin-inline-start: var(--sbb-radio-button-border);
     margin-block-start: var(--sbb-radio-button-icon-align);
+
     transition: {
       duration: var(--sbb-animation-duration-4x);
       timing-function: ease;
       property: background-color, border;
     }
 
-    // We use the :checked pseudo-class to reflect the checked state
-    .sbb-radio-button__input:checked + & {
-      --sbb-radio-button-background-color: var(--sbb-color-red-default);
-
-      border-width: #{sbb.px-to-rem-build(6)};
-
-      @include sbb.if-forced-colors {
-        --sbb-radio-button-background-color: Highlight;
-
-        outline: var(--sbb-border-width-2x) solid Highlight;
-        border-color: Canvas;
-      }
+    @include sbb.if-forced-colors {
+      transition: none;
     }
+  }
 
-    // We use the :checked pseudo-class to reflect the checked state
-    :host([data-group-disabled]) .sbb-radio-button__input:checked + &,
-    :host([disabled]:not([disabled='false'])) .sbb-radio-button__input:checked + & {
-      --sbb-radio-button-background-color: var(--sbb-color-granite-default);
-
-      @include sbb.if-forced-colors {
-        --sbb-radio-button-background-color: GrayText;
-
-        outline-color: GrayText;
-        border-color: Canvas;
-      }
-    }
+  // Unchecked style
+  &::before {
+    background: var(--sbb-radio-button-inner-circle-color);
 
-    @include sbb.if-forced-colors {
-      transition: none;
-      border: var(--sbb-border-width-2x) solid ButtonBorder;
+    // The border was used to generate the animation of the radio-button
+    // The border color acts as background color.
+    border: var(--sbb-radio-button-background-fake-border-width) solid
+      var(--sbb-radio-button-background-color);
+    margin-inline-end: var(--sbb-spacing-fixed-2x);
+  }
 
-      :host([data-group-disabled]) &,
-      :host([disabled]:not([disabled='false'])) & {
-        border-color: GrayText;
-      }
-    }
+  &::after {
+    position: absolute;
+    border: var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style)
+      var(--sbb-radio-button-border-color);
   }
 }
 
diff --git a/src/components/sbb-selection-panel/sbb-selection-panel.scss b/src/components/sbb-selection-panel/sbb-selection-panel.scss
index f39f841f2e..e26b7e0d23 100644
--- a/src/components/sbb-selection-panel/sbb-selection-panel.scss
+++ b/src/components/sbb-selection-panel/sbb-selection-panel.scss
@@ -9,7 +9,6 @@
   --sbb-selection-panel-background: var(--sbb-color-white-default);
   --sbb-selection-panel-border-color: var(--sbb-color-cloud-default);
   --sbb-selection-panel-animation-duration: var(--sbb-animation-duration-4x);
-  --sbb-selection-panel-badge-background: var(--sbb-color-black-default);
   --sbb-selection-panel-border-width: var(--sbb-border-width-1x);
   --sbb-selection-panel-input-pointer-events: all;
   --sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs)
@@ -45,7 +44,6 @@
 
 :host([data-disabled]) {
   --sbb-selection-panel-cursor: default;
-  --sbb-selection-panel-badge-background: var(--sbb-color-smoke-default);
 }
 
 :host([borderless]:not([data-checked])) {
@@ -111,10 +109,6 @@ sbb-divider {
   margin-block-end: var(--sbb-spacing-responsive-xxs);
 }
 
-::slotted(sbb-card-badge) {
-  --sbb-card-badge-background-color: var(--sbb-selection-panel-badge-background);
-}
-
 ::slotted(sbb-radio-button),
 ::slotted(sbb-checkbox) {
   cursor: var(--sbb-selection-panel-cursor);
diff --git a/src/components/sbb-slider/sbb-slider.scss b/src/components/sbb-slider/sbb-slider.scss
index a5ee4e8f21..d3c17a13ec 100644
--- a/src/components/sbb-slider/sbb-slider.scss
+++ b/src/components/sbb-slider/sbb-slider.scss
@@ -10,6 +10,7 @@
   --sbb-slider-knob-size: #{sbb.px-to-rem-build(28)};
   --sbb-slider-knob-size-active: #{sbb.px-to-rem-build(31)};
   --sbb-slider-knob-border-size: #{sbb.px-to-rem-build(3)};
+  --sbb-slider-knob-border-style: solid;
   --sbb-slider-knob-color: var(--sbb-color-white-default);
   --sbb-slider-knob-border-color: var(--sbb-color-red-default);
   --sbb-slider-icon-color: var(--sbb-color-black-default);
@@ -33,8 +34,9 @@
 
 :host([disabled]:not([disabled='false'])) {
   --sbb-slider-icon-color: var(--sbb-color-graphite-default);
-  --sbb-slider-knob-color: var(--sbb-color-milk-default);
-  --sbb-slider-knob-border-color: var(--sbb-slider-line-disabled-color);
+  --sbb-slider-knob-border-color: var(--sbb-color-smoke-default);
+  --sbb-slider-knob-border-size: var(--sbb-border-width-2x);
+  --sbb-slider-knob-border-style: dashed;
 }
 
 :host([readonly]:not([readonly='false'])) {
@@ -114,7 +116,8 @@
   transition-duration: var(--sbb-animation-duration-1x);
   transition-timing-function: ease-in;
   background-color: var(--sbb-slider-knob-color);
-  border: var(--sbb-slider-knob-border-size) solid var(--sbb-slider-knob-border-color);
+  border: var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style)
+    var(--sbb-slider-knob-border-color);
   border-radius: 50%;
   pointer-events: none;
 
diff --git a/src/components/sbb-tag/sbb-tag.scss b/src/components/sbb-tag/sbb-tag.scss
index 32d76c665e..e0feb5cd43 100644
--- a/src/components/sbb-tag/sbb-tag.scss
+++ b/src/components/sbb-tag/sbb-tag.scss
@@ -8,6 +8,7 @@
   --sbb-tag-border-radius: var(--sbb-border-radius-infinity);
   --sbb-tag-background-color: var(--sbb-color-white-default);
   --sbb-tag-border-color: var(--sbb-color-cloud-default);
+  --sbb-tag-border-style: solid;
   --sbb-tag-border-width: var(--sbb-border-width-1x);
   --sbb-tag-text-color: var(--sbb-color-charcoal-default);
   --sbb-tag-amount-color: var(--sbb-color-metal-default);
@@ -18,7 +19,6 @@
   --sbb-tag-animation-easing: var(--sbb-animation-easing);
   --sbb-tag-padding-inline: var(--sbb-spacing-fixed-5x);
   --sbb-tag-gap: var(--sbb-spacing-fixed-2x);
-  --sbb-tag-text-decoration: none;
 
   @include sbb.mq($from: medium) {
     --sbb-tag-height: #{sbb.px-to-rem-build(40)};
@@ -46,7 +46,7 @@
   --sbb-tag-border-width: var(--sbb-border-width-2x);
 
   @include sbb.if-forced-colors {
-    --sbb-tag-border-color: Highlight;
+    --sbb-tag-border-color: Highlight !important;
   }
 }
 
@@ -54,8 +54,8 @@
   --sbb-tag-text-color: var(--sbb-color-granite-default);
   --sbb-tag-amount-color: var(--sbb-tag-text-color);
   --sbb-tag-background-color: var(--sbb-color-milk-default);
-  --sbb-tag-border-color: var(--sbb-color-cloud-default);
-  --sbb-tag-text-decoration: line-through;
+  --sbb-tag-border-color: var(--sbb-color-cement-default);
+  --sbb-tag-border-style: dashed;
 
   @include sbb.if-forced-colors {
     --sbb-tag-text-color: GrayText;
@@ -65,7 +65,7 @@
 }
 
 :host([checked]:not([checked='false'])[disabled]:not([disabled='false'])) {
-  --sbb-tag-border-color: var(--sbb-color-granite-default);
+  --sbb-tag-border-color: var(--sbb-color-metal-default);
 }
 
 :host(:hover:not([disabled]:not([disabled='false']), :active, [data-active])) {
@@ -109,14 +109,13 @@
   transition: color var(--sbb-tag-animation-duration) var(--sbb-tag-animation-easing);
   -webkit-tap-highlight-color: transparent;
   user-select: none;
-  text-decoration: var(--sbb-tag-text-decoration);
 
   &::before {
     content: '';
     position: absolute;
     inset: var(--sbb-tag-inset);
     background-color: var(--sbb-tag-background-color);
-    border: var(--sbb-tag-border-width) solid var(--sbb-tag-border-color);
+    border: var(--sbb-tag-border-width) var(--sbb-tag-border-style) var(--sbb-tag-border-color);
     border-radius: var(--sbb-tag-border-radius);
     transition-duration: var(--sbb-tag-animation-duration);
     transition-timing-function: var(--sbb-tag-animation-easing);
diff --git a/src/components/sbb-toggle-check/sbb-toggle-check.scss b/src/components/sbb-toggle-check/sbb-toggle-check.scss
index a9490bed8a..390b5c9727 100644
--- a/src/components/sbb-toggle-check/sbb-toggle-check.scss
+++ b/src/components/sbb-toggle-check/sbb-toggle-check.scss
@@ -11,13 +11,13 @@
   // which appears in normalize css of several frameworks.
   outline: none !important;
 
-  --sbb-toggle-check-font-color: var(--sbb-color-charcoal-default);
   --sbb-toggle-check-checked-color: var(--sbb-color-red-default);
   --sbb-toggle-check-background-color: var(--sbb-color-cloud-default);
   --sbb-toggle-check-icon-color: var(--sbb-toggle-check-checked-color);
   --sbb-toggle-check-icon-opacity: 0;
   --sbb-toggle-check-circle-background-color: var(--sbb-color-white-default);
   --sbb-toggle-check-circle-border-color: var(--sbb-color-smoke-default);
+  --sbb-toggle-check-circle-border-style: solid;
   --sbb-toggle-check-circle-diameter: #{sbb.px-to-rem-build(28)};
   --sbb-toggle-check-overall-height: var(--sbb-toggle-check-circle-diameter);
   --sbb-toggle-check-circle-transform: translate(0, -50%);
@@ -26,7 +26,6 @@
   --sbb-toggle-check-cursor: pointer;
   --sbb-toggle-check-flex-direction: row-reverse;
   --sbb-toggle-check-gap: var(--sbb-spacing-fixed-3x);
-  --sbb-toggle-check-text-decoration: none;
 
   @include sbb.if-forced-colors {
     --sbb-toggle-check-background-color: CanvasText;
@@ -58,17 +57,17 @@
 }
 
 :host([disabled]:not([disabled='false'])) {
-  --sbb-toggle-check-font-color: var(--sbb-color-granite-default);
   --sbb-toggle-check-background-color: var(--sbb-color-cloud-default);
-  --sbb-toggle-check-circle-border-color: var(--sbb-toggle-check-background-color);
+  --sbb-toggle-check-circle-border-color: var(--sbb-color-smoke-default);
+  --sbb-toggle-check-circle-border-style: dashed;
   --sbb-toggle-check-circle-background-color: var(--sbb-color-milk-default);
   --sbb-toggle-check-icon-color: var(--sbb-color-granite-default);
   --sbb-toggle-check-cursor: default;
-  --sbb-toggle-check-text-decoration: line-through;
 
   @include sbb.if-forced-colors {
     --sbb-toggle-check-icon-color: GrayText;
     --sbb-toggle-check-background-color: GrayText;
+    --sbb-toggle-check-circle-border-style: solid;
   }
 }
 
@@ -86,7 +85,7 @@
 
   position: relative;
   display: flex;
-  color: var(--sbb-toggle-check-font-color);
+  color: var(--sbb-color-charcoal-default);
   user-select: none;
   -webkit-tap-highlight-color: transparent;
   cursor: var(--sbb-toggle-check-cursor);
@@ -122,7 +121,6 @@ input[type='checkbox'] {
   padding-block-start: calc(
     (var(--sbb-toggle-check-circle-diameter) - (var(--sbb-typo-line-height-body-text) * 1em)) / 2
   );
-  text-decoration: var(--sbb-toggle-check-text-decoration);
 }
 
 .sbb-toggle-check__track {
@@ -143,7 +141,8 @@ input[type='checkbox'] {
 
   width: var(--sbb-toggle-check-circle-diameter);
   height: var(--sbb-toggle-check-circle-diameter);
-  border: var(--sbb-border-width-1x) solid var(--sbb-toggle-check-circle-border-color);
+  border: var(--sbb-border-width-1x) var(--sbb-toggle-check-circle-border-style)
+    var(--sbb-toggle-check-circle-border-color);
   border-radius: 50%;
   background-color: var(--sbb-toggle-check-circle-background-color);
   color: var(--sbb-toggle-check-icon-color);
diff --git a/src/components/sbb-toggle-option/sbb-toggle-option.scss b/src/components/sbb-toggle-option/sbb-toggle-option.scss
index fef9454eea..6d31ef3a2c 100644
--- a/src/components/sbb-toggle-option/sbb-toggle-option.scss
+++ b/src/components/sbb-toggle-option/sbb-toggle-option.scss
@@ -10,7 +10,6 @@
   --sbb-toggle-option-icon-min-size: var(--sbb-size-icon-ui-small);
   --sbb-toggle-option-border-radius: var(--sbb-border-radius-infinity);
   --sbb-toggle-option-line-height: calc(1em * var(--sbb-typo-line-height-body-text));
-  --sbb-toggle-option-text-decoration: none;
 
   display: inline-block;
   min-width: var(--sbb-toggle-min-width);
@@ -32,7 +31,6 @@
 :host([disabled]:not([disabled='false'])) {
   --sbb-toggle-option-cursor: unset;
   --sbb-toggle-option-color: var(--sbb-color-granite-default);
-  --sbb-toggle-option-text-decoration: line-through;
 }
 
 input[type='radio'] {
@@ -59,8 +57,6 @@ input[type='radio'] {
 .sbb-toggle-option__label {
   @include sbb.ellipsis;
 
-  text-decoration: var(--sbb-toggle-option-text-decoration);
-
   // We need to use a ::before pseudo-element to show a single outline wrapping
   // the entire toggle when a toggle option receives :focus-visible.
   // Hide focus outline when focus origin is mouse or touch. This is being used in tooltip as a workaround.
diff --git a/src/components/sbb-toggle/sbb-toggle.scss b/src/components/sbb-toggle/sbb-toggle.scss
index c590551ec5..0708079847 100644
--- a/src/components/sbb-toggle/sbb-toggle.scss
+++ b/src/components/sbb-toggle/sbb-toggle.scss
@@ -9,17 +9,22 @@
   --sbb-toggle-min-width: calc(
     var(--sbb-toggle-padding-inline) * 2 + var(--sbb-size-icon-ui-small)
   );
-  --sbb-toggle-selected-option-background-color: var(--sbb-color-white-default);
   --sbb-toggle-selected-option-border-color: var(--sbb-color-smoke-default);
   --sbb-toggle-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-toggle-animation-duration: var(--sbb-animation-duration-6x);
   --sbb-toggle-height: #{sbb.px-to-rem-build(28)};
   --sbb-toggle-border-width: var(--sbb-border-width-1x);
+  --sbb-toggle-border-style: solid;
   --sbb-toggle-border-radius: var(--sbb-border-radius-infinity);
 
   @include sbb.mq($from: medium) {
     --sbb-toggle-height: #{sbb.px-to-rem-build(32)};
   }
+
+  @include sbb.if-forced-colors {
+    --sbb-toggle-selected-option-border-color: Highlight;
+    --sbb-toggle-border-width: var(--sbb-border-width-2x);
+  }
 }
 
 :host([even]:not([even='false'])) {
@@ -31,8 +36,13 @@
 }
 
 :host([disabled]:not([disabled='false'])) {
-  --sbb-toggle-selected-option-background-color: var(--sbb-color-milk-default);
   --sbb-toggle-selected-option-border-color: var(--sbb-color-graphite-default);
+  --sbb-toggle-border-style: dashed;
+
+  @include sbb.if-forced-colors {
+    --sbb-toggle-border-style: solid;
+    --sbb-toggle-selected-option-border-color: GrayText;
+  }
 }
 
 :host([size='m']) {
@@ -69,8 +79,9 @@
     padding-inline: var(--sbb-toggle-padding-inline);
     display: inline-block;
     opacity: 1;
-    background-color: var(--sbb-toggle-selected-option-background-color);
-    border: var(--sbb-toggle-border-width) solid var(--sbb-toggle-selected-option-border-color);
+    background-color: var(--sbb-color-white-default);
+    border: var(--sbb-toggle-border-width) var(--sbb-toggle-border-style)
+      var(--sbb-toggle-selected-option-border-color);
     border-radius: var(--sbb-toggle-border-radius);
     position: absolute;
     max-width: 100%;
@@ -85,10 +96,6 @@
       timing-function: ease;
       property: opacity, inset-inline-end, inset-inline-start;
     }
-
-    @include sbb.if-forced-colors {
-      --sbb-toggle-selected-option-border-color: Highlight;
-    }
   }
 
   @include sbb.if-forced-colors {
diff --git a/src/components/sbb-visual-checkbox/sbb-visual-checkbox.scss b/src/components/sbb-visual-checkbox/sbb-visual-checkbox.scss
index 9eaaeabaca..a0afef3933 100644
--- a/src/components/sbb-visual-checkbox/sbb-visual-checkbox.scss
+++ b/src/components/sbb-visual-checkbox/sbb-visual-checkbox.scss
@@ -6,20 +6,24 @@
 
 :host {
   --sbb-visual-checkbox-dimension: var(--sbb-size-icon-ui-small);
+  --sbb-visual-checkbox-background-color: var(--sbb-color-white-default);
   --sbb-visual-checkbox-border-color: var(--sbb-color-smoke-default);
+  --sbb-visual-checkbox-border-style: solid;
   --sbb-visual-checkbox-border-width: var(--sbb-border-width-1x);
   --sbb-visual-checkbox-selection-color: var(--sbb-color-red-default);
   --sbb-visual-checkbox-cursor: pointer;
 
   @include sbb.if-forced-colors {
     --sbb-visual-checkbox-selection-color: Canvas;
+    --sbb-visual-checkbox-border-width: 0;
   }
 }
 
 :host([disabled]:not([disabled='false'])) {
+  --sbb-visual-checkbox-background-color: var(--sbb-color-milk-default);
   --sbb-visual-checkbox-border-color: var(--sbb-color-smoke-default);
-  --sbb-visual-checkbox-selection-color: var(--sbb-color-granite-default);
-  --sbb-visual-checkbox-label-color: var(--sbb-color-granite-default);
+  --sbb-visual-checkbox-border-style: dashed;
+  --sbb-visual-checkbox-selection-color: var(--sbb-color-charcoal-default);
   --sbb-visual-checkbox-cursor: default;
 
   @include sbb.if-forced-colors {
@@ -40,14 +44,16 @@
 }
 
 .sbb-visual-checkbox {
-  display: block;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   width: var(--sbb-visual-checkbox-dimension);
   height: var(--sbb-visual-checkbox-dimension);
   border-radius: var(--sbb-border-radius-2x);
-  box-shadow: var(--sbb-visual-checkbox-border-color) 0 0 0 var(--sbb-visual-checkbox-border-width)
-    inset;
-  background-color: var(--sbb-color-white-default);
+  border: var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style)
+    var(--sbb-visual-checkbox-border-color);
+  background-color: var(--sbb-visual-checkbox-background-color);
   cursor: var(--sbb-visual-checkbox-cursor);
 
   @include sbb.if-forced-colors {
diff --git a/src/components/sbb-visual-checkbox/sbb-visual-checkbox.stories.tsx b/src/components/sbb-visual-checkbox/sbb-visual-checkbox.stories.tsx
index faf8d68b40..26fe5ad275 100644
--- a/src/components/sbb-visual-checkbox/sbb-visual-checkbox.stories.tsx
+++ b/src/components/sbb-visual-checkbox/sbb-visual-checkbox.stories.tsx
@@ -60,6 +60,18 @@ export const Disabled: StoryObj = {
   args: { ...defaultArgs, disabled: true },
 };
 
+export const DisabledChecked: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, disabled: true, checked: true },
+};
+
+export const DisabledIndeterminate: StoryObj = {
+  render: Template,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, indeterminate: true, disabled: true },
+};
+
 const meta: Meta = {
   decorators: [
     (Story) => (
diff --git a/src/global/styles/typography.scss b/src/global/styles/typography.scss
index 0d465cae4b..5dfdf12fdb 100644
--- a/src/global/styles/typography.scss
+++ b/src/global/styles/typography.scss
@@ -30,12 +30,16 @@ sbb-form-field {
   input:disabled::placeholder {
     color: var(--sbb-color-granite-default);
     -webkit-text-fill-color: var(--sbb-color-granite-default);
-    text-decoration: line-through;
   }
 
   &[floating-label]:not([floating-label='false']) input::placeholder {
     color: transparent;
     -webkit-text-fill-color: transparent;
+
+    @include a11y.if-forced-colors {
+      color: Canvas;
+      -webkit-text-fill-color: Canvas;
+    }
   }
 }