dnbexperience · Sundfjord · Nov 29, 2023 · Nov 20, 2023 · Nov 22, 2023 · Nov 27, 2023
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/toggle-button.mdx
@@ -2,6 +2,7 @@
 title: 'ToggleButton'
 description: 'The ToggleButton component should be used to toggle on or off a limited number of choices.'
 showTabs: true
+theme: 'sbanken'
 ---
 
 import ToggleButtonInfo from 'Docs/uilib/components/toggle-button/info'

diff --git a/...apshots__/checkbox-for-sbanken-checked-have-to-match-disabled-checkbox.snap.png b/...apshots__/checkbox-for-sbanken-checked-have-to-match-disabled-checkbox.snap.png
diff --git a/packages/dnb-eufemia/src/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss b/packages/dnb-eufemia/src/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss
@@ -12,15 +12,11 @@
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   // Disabled state
-  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark-2-neutral);
+  --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
-  --checkbox-color-background-off-disabled: var(--sb-color-gray-light);
-  --checkbox-color-border-on--disabled: var(
-    --sb-color-gray-dark-2-neutral
-  );
-  --checkbox-color-border-off--disabled: var(
-    --sb-color-gray-dark-2-neutral
-  );
+  --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
   // Active state
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);

diff --git a/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -2985,6 +2985,7 @@ button .dnb-form-status__text {
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   --radio-color-dot-on--active: lightgrey;
@@ -3208,12 +3209,14 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--disabled);
 }
 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
   border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
   border-color: var(--skeleton-color);

diff --git a/...rm-components-alignment-for-sbanken-have-to-match-horizontal-direction.snap.png b/...rm-components-alignment-for-sbanken-have-to-match-horizontal-direction.snap.png
diff --git a/...form-components-alignment-for-sbanken-have-to-match-vertical-direction.snap.png b/...form-components-alignment-for-sbanken-have-to-match-vertical-direction.snap.png
diff --git a/...mponents-alignment-for-sbanken-have-to-match-vertical-labels-direction.snap.png b/...mponents-alignment-for-sbanken-have-to-match-vertical-labels-direction.snap.png
diff --git a/...age_snapshots__/radio-for-sbanken-checked-have-to-match-disabled-group.snap.png b/...age_snapshots__/radio-for-sbanken-checked-have-to-match-disabled-group.snap.png
diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -159,6 +159,7 @@ button .dnb-form-status__text {
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   --radio-color-dot-on--active: lightgrey;
@@ -382,12 +383,14 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--disabled);
 }
 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
   border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
   border-color: var(--skeleton-color);
@@ -471,6 +474,7 @@ exports[`Radio scss have to match default theme snapshot 1`] = `
   --radio-color-background-off: var(--color-white);
   --radio-color-border-off: var(--color-sea-green);
   --radio-color-dot-on--disabled: var(--color-sea-green-30);
+  --radio-color-background--disabled: var(--color-white);
   --radio-color-border-on--disabled: var(--color-sea-green-30);
   --radio-color-border-off--disabled: var(--color-mint-green-50);
   --radio-color-dot-on--active: var(--color-mint-green-50);

diff --git a/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss b/packages/dnb-eufemia/src/components/radio/style/dnb-radio.scss
@@ -22,6 +22,7 @@
   --radio-color-border-off: black;
   // Disabled state
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   // Active state
@@ -321,6 +322,7 @@
   &__input[disabled]:checked ~ &__button,
   &__input[disabled][data-checked='true'] ~ &__button {
     border-color: var(--radio-color-border-on--disabled);
+    background-color: var(--radio-color-background--disabled);
   }
 
   &__input[disabled]:checked ~ &__dot,
@@ -332,6 +334,7 @@
   &__input[disabled]:not(:checked):not([data-checked='true'])
     ~ &__button:not(.dnb-skeleton) {
     border-color: var(--radio-color-border-off--disabled);
+    background-color: var(--radio-color-background--disabled);
   }
 
   // Skeleton

diff --git a/packages/dnb-eufemia/src/components/radio/style/themes/dnb-radio-theme-sbanken.scss b/packages/dnb-eufemia/src/components/radio/style/themes/dnb-radio-theme-sbanken.scss
@@ -11,9 +11,10 @@
   --radio-color-background-off: var(--sb-color-white);
   --radio-color-border-off: var(--sb-color-violet);
   // Disabled state
-  --radio-color-dot-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-on--disabled: var(--sb-color-gray-dark-2-neutral);
-  --radio-color-border-off--disabled: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-dot-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-background--disabled: var(--sb-color-gray-light);
+  --radio-color-border-on--disabled: var(--sb-color-gray-dark);
+  --radio-color-border-off--disabled: var(--sb-color-gray-dark);
   // Active state
   --radio-color-dot-on--active: var(--sb-color-violet-light);
   --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);

diff --git a/packages/dnb-eufemia/src/components/radio/style/themes/dnb-radio-theme-ui.scss b/packages/dnb-eufemia/src/components/radio/style/themes/dnb-radio-theme-ui.scss
@@ -12,6 +12,7 @@
   --radio-color-border-off: var(--color-sea-green);
   // Disabled state
   --radio-color-dot-on--disabled: var(--color-sea-green-30);
+  --radio-color-background--disabled: var(--color-white);
   --radio-color-border-on--disabled: var(--color-sea-green-30);
   --radio-color-border-off--disabled: var(--color-mint-green-50);
   // Active state

diff --git a/...mage_snapshots__/skeleton-for-sbanken-have-to-match-a-removed-skeleton.snap.png b/...mage_snapshots__/skeleton-for-sbanken-have-to-match-a-removed-skeleton.snap.png
diff --git a/...apshots__/skeleton-for-sbanken-have-to-match-all-components-horizontal.snap.png b/...apshots__/skeleton-for-sbanken-have-to-match-all-components-horizontal.snap.png
diff --git a/...age_snapshots__/skeleton-for-sbanken-have-to-match-excluded-components.snap.png b/...age_snapshots__/skeleton-for-sbanken-have-to-match-excluded-components.snap.png
diff --git a/...age_snapshots__/tabs-for-sbanken-have-to-match-horizontal-aligned-tabs.snap.png b/...age_snapshots__/tabs-for-sbanken-have-to-match-horizontal-aligned-tabs.snap.png
diff --git a/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts b/packages/dnb-eufemia/src/components/toggle-button/__tests__/ToggleButton.screenshot.test.ts
@@ -8,9 +8,10 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('ToggleButton', () => {
+describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => {
   describe('ToggleButton unchecked', () => {
     setupPageScreenshot({
+      themeName,
       url: '/uilib/components/toggle-button/demos',
     })
 
@@ -45,7 +46,10 @@ describe('ToggleButton', () => {
   // NB: Because of focus simulation and screenshotElement.press('Tab')
   // we have to run the two focus simulations in a separate run each
   describe('checked', () => {
-    setupPageScreenshot({ url: '/uilib/components/toggle-button/demos' })
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/toggle-button/demos',
+    })
 
     it('have to match toggle-button in checked state', async () => {
       const screenshot = await makeScreenshot({

diff --git a/...r-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png b/...r-sbanken-checked-have-to-match-toggle-button-group-in-vertical-layout.snap.png
diff --git a/...for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png b/...for-sbanken-checked-have-to-match-toggle-button-group-with-form-status.snap.png
diff --git a/...napshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group.snap.png b/...napshots__/radio-for-sbanken-checked-have-to-match-toggle-button-group.snap.png
diff --git a/...-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png b/...-for-sbanken-checked-have-to-match-toggle-button-in-active-focus-state.snap.png
diff --git a/...banken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png b/...banken-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png
diff --git a/...banken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png b/...banken-checked-have-to-match-toggle-button-in-checked-state-with-hover.snap.png
diff --git a/...radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png b/...radio-for-sbanken-checked-have-to-match-toggle-button-in-checked-state.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png
diff --git a/...-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png b/...-togglebutton-unchecked-have-to-match-toggle-button-in-unchecked-state.snap.png
diff --git a/...-button-group-in-vertical-layout.snap.png → ...-button-group-in-vertical-layout.snap.png b/...-button-group-in-vertical-layout.snap.png → ...-button-group-in-vertical-layout.snap.png
diff --git a/...le-button-group-with-form-status.snap.png → ...le-button-group-with-form-status.snap.png b/...le-button-group-with-form-status.snap.png → ...le-button-group-with-form-status.snap.png
diff --git a/...ave-to-match-toggle-button-group.snap.png → ...ave-to-match-toggle-button-group.snap.png b/...ave-to-match-toggle-button-group.snap.png → ...ave-to-match-toggle-button-group.snap.png
diff --git a/...radio-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png b/...radio-for-ui-checked-have-to-match-toggle-button-in-active-focus-state.snap.png
diff --git a/...for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png b/...for-ui-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png
diff --git a/...tton-in-checked-state-with-hover.snap.png → ...tton-in-checked-state-with-hover.snap.png b/...tton-in-checked-state-with-hover.snap.png → ...tton-in-checked-state-with-hover.snap.png
diff --git a/...ts__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png b/...ts__/radio-for-ui-checked-have-to-match-toggle-button-in-checked-state.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png
diff --git a/...toggle-button-in-unchecked-state.snap.png → ...toggle-button-in-unchecked-state.snap.png b/...toggle-button-in-unchecked-state.snap.png → ...toggle-button-in-unchecked-state.snap.png
diff --git a/...togglebutton-checked-have-to-match-toggle-button-in-active-focus-state.snap.png b/...togglebutton-checked-have-to-match-toggle-button-in-active-focus-state.snap.png
diff --git a/...button-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png b/...button-checked-have-to-match-toggle-button-in-checked-state-with-focus.snap.png
diff --git a/...ts__/togglebutton-checked-have-to-match-toggle-button-in-checked-state.snap.png b/...ts__/togglebutton-checked-have-to-match-toggle-button-in-checked-state.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-focus.snap.png
diff --git a/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png b/...on-unchecked-have-to-match-toggle-button-in-unchecked-state-with-hover.snap.png
diff --git a/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -1168,6 +1168,7 @@ button .dnb-form-status__text {
   --radio-color-background-off: white;
   --radio-color-border-off: black;
   --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-background--disabled: white;
   --radio-color-border-on--disabled: lightgrey;
   --radio-color-border-off--disabled: lightgrey;
   --radio-color-dot-on--active: lightgrey;
@@ -1391,12 +1392,14 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
   border-color: var(--radio-color-border-on--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--disabled);
 }
 .dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button:not(.dnb-skeleton) {
   border-color: var(--radio-color-border-off--disabled);
+  background-color: var(--radio-color-background--disabled);
 }
 .dnb-radio__input[disabled] ~ .dnb-radio__button.dnb-skeleton {
   border-color: var(--skeleton-color);

diff --git a/...nb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss b/...nb-eufemia/src/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss
@@ -0,0 +1,83 @@
+/*
+* ToggleButton theme for Sbanken
+*
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-toggle-button {
+  &__button {
+    background-color: var(--sb-color-white);
+    color: var(--sb-color-violet);
+    @include fakeBorder(var(--sb-color-violet), 0.09375rem);
+
+    @include hover() {
+      background-color: var(--sb-color-violet-light-3);
+      color: var(--sb-color-violet);
+    }
+
+    @include active() {
+      @include fakeBorder(var(--sb-color-violet-light-3), 0.125rem);
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-violet-light-3);
+    }
+
+    &[disabled] {
+      @include fakeBorder(var(--sb-color-gray-light), 0.09375rem, inset);
+      background-color: var(--sb-color-gray-light);
+      color: var(--sb-color-gray-dark);
+    }
+
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
+      .dnb-radio {
+        &__button {
+          background-color: transparent;
+          border-color: var(--focus-ring-color);
+          box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+        }
+        &__dot {
+          background-color: var(--focus-ring-color);
+        }
+      }
+      .dnb-checkbox {
+        &__button {
+          background-color: transparent;
+          border-color: var(--focus-ring-color);
+          box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
+        }
+        &__gfx {
+          color: var(--focus-ring-color);
+        }
+      }
+    }
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  &--checked &__button {
+    &:not([disabled]):not(:active) {
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-white);
+      box-shadow: none;
+    }
+
+    @include hover() {
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-white);
+      @include fakeBorder(var(--sb-color-violet), 0.125rem);
+    }
+
+    @include active() {
+      @include fakeBorder(var(--sb-color-violet-light-3), 0.125rem, inset);
+      background-color: var(--sb-color-violet);
+      color: var(--sb-color-violet-light-3);
+    }
+
+    html[data-whatinput='keyboard']
+      &:not([disabled]):not(:active):not(:hover):focus {
+      color: var(--sb-color-blue-dark-2);
+      background-color: var(--sb-color-blue-light-2);
+    }
+  }
+  /* stylelint-enable no-descending-specificity */
+}
diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss
@@ -40,6 +40,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/table/style/themes/dnb-table-theme-sbanken.scss';
 @import '../../../components/tabs/style/themes/dnb-tabs-theme-sbanken.scss';
 @import '../../../components/textarea/style/themes/dnb-textarea-theme-sbanken.scss';
+@import '../../../components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken.scss';
 @import '../../../components/tooltip/style/themes/dnb-tooltip-theme-sbanken.scss';
 @import '../../../components/upload/style/themes/dnb-upload-theme-sbanken.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss';
@@ -56,6 +57,5 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/step-indicator/style/themes/dnb-step-indicator-theme-ui.scss';
 @import '../../../components/switch/style/themes/dnb-switch-theme-ui.scss';
 @import '../../../components/timeline/style/themes/dnb-timeline-theme-ui.scss';
-@import '../../../components/toggle-button/style/themes/dnb-toggle-button-theme-ui.scss';
 @import '../../../fragments/scroll-view/style/themes/dnb-scroll-view-theme-ui.scss';
 @import './sbanken-theme-forms.scss';