dnbexperience · Sundfjord · Nov 15, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 10, 2023
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/radio.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/radio.mdx
@@ -2,6 +2,7 @@
 title: 'Radio'
 description: 'The Radio component is shown as a circle that is filled (checked) when activated.'
 showTabs: true
+theme: 'sbanken'
 ---
 
 import RadioInfo from 'Docs/uilib/components/radio/info'

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
@@ -2854,10 +2854,39 @@ button .dnb-form-status__text {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  --radio-color-dot-on: black;
+  --radio-color-background-on: white;
+  --radio-color-border-on: black;
+  --radio-color-background-off: white;
+  --radio-color-border-off: black;
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-border-on--disabled: lightgrey;
+  --radio-color-border-off--disabled: lightgrey;
+  --radio-color-dot-on--active: lightgrey;
+  --radio-color-border-on--active: lightgrey;
+  --radio-color-background-off--active: lightgrey;
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: lightgrey;
+  --radio-color-dot-on--error: red;
+  --radio-color-border-on--error: red;
+  --radio-color-background-off--error: lavenderblush;
+  --radio-color-dot-on--error-hover: lavenderblush;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-radio__inner {
   display: inline-flex;
@@ -2904,6 +2933,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   width: calc(var(--radio-width--medium) - 0.75rem);
   height: calc(var(--radio-height--medium) - 0.75rem);
   border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
   width: calc(var(--radio-width--large) - 0.875rem);
@@ -2989,6 +3020,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }
+.dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
 .dnb-radio-group {
   --radio-group-margin-bottom: 0.5rem;
   --radio-group-margin-right: 1rem;
@@ -3030,6 +3064,78 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
   border-color: var(--skeleton-color);
 }
+.dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on);
+  border-color: var(--radio-color-border-on);
+}
+.dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__dot {
+  opacity: 0;
+  transform: scale(0.8);
+}
+.dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off);
+  border-color: var(--radio-color-border-off);
+}
+.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);
+}
+.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 {
+  border-color: var(--radio-color-border-off--disabled);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--active);
+}
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--active);
+}
+.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--active);
+  border-color: var(--radio-color-border-off--active);
+}
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--hover);
+}
+.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--hover);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
+  display: block;
+}
+.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--focus);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--focus);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
+  border: none;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
+  display: block;
+  --border-color: var(--radio-color-border-on--error);
+  --border-width: var(--focus-ring-width);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--error-hover);
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--error);
+}
 
 /*
 * Used for snapshot testing

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/packages/dnb-eufemia/src/components/radio/Radio.js b/packages/dnb-eufemia/src/components/radio/Radio.js
@@ -372,11 +372,11 @@ export default class Radio extends React.PureComponent {
           const labelComp = label && (
             <FormLabel
               id={id + '-label'}
-              for_id={id}
+              forId={id}
               text={label}
               disabled={disabled}
               skeleton={skeleton}
-              sr_only={label_sr_only}
+              srOnly={label_sr_only}
             />
           )
 

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/Radio.screenshot.test.ts b/packages/dnb-eufemia/src/components/radio/__tests__/Radio.screenshot.test.ts
@@ -8,9 +8,12 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('Radio', () => {
+describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => {
   describe('unchecked', () => {
-    setupPageScreenshot({ url: '/uilib/components/radio/demos' })
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/radio/demos',
+    })
 
     it('have to match radio in unchecked state', async () => {
       const screenshot = await makeScreenshot({
@@ -43,7 +46,10 @@ describe('Radio', () => {
   // 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/radio/demos' })
+    setupPageScreenshot({
+      themeName,
+      url: '/uilib/components/radio/demos',
+    })
 
     it('have to match radio in checked state', async () => {
       const screenshot = await makeScreenshot({

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/...adio-for-sbanken-checked-have-to-match-radio-button-in-different-sizes.snap.png b/...adio-for-sbanken-checked-have-to-match-radio-button-in-different-sizes.snap.png
diff --git a/...radio-for-sbanken-checked-have-to-match-radio-group-in-vertical-layout.snap.png b/...radio-for-sbanken-checked-have-to-match-radio-group-in-vertical-layout.snap.png
diff --git a/..._snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png b/..._snapshots__/radio-for-sbanken-checked-have-to-match-radio-group-plain.snap.png
diff --git a/..._/radio-for-sbanken-checked-have-to-match-radio-group-with-form-status.snap.png b/..._/radio-for-sbanken-checked-have-to-match-radio-group-with-form-status.snap.png
diff --git a/..._/radio-for-sbanken-checked-have-to-match-radio-group-with-label-above.snap.png b/..._/radio-for-sbanken-checked-have-to-match-radio-group-with-label-above.snap.png
diff --git a/..._image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group.snap.png b/..._image_snapshots__/radio-for-sbanken-checked-have-to-match-radio-group.snap.png
diff --git a/...io-for-sbanken-checked-have-to-match-radio-in-checked-state-with-focus.snap.png b/...io-for-sbanken-checked-have-to-match-radio-in-checked-state-with-focus.snap.png
diff --git a/...io-for-sbanken-checked-have-to-match-radio-in-checked-state-with-hover.snap.png b/...io-for-sbanken-checked-have-to-match-radio-in-checked-state-with-hover.snap.png
diff --git a/...shots__/radio-for-sbanken-checked-have-to-match-radio-in-checked-state.snap.png b/...shots__/radio-for-sbanken-checked-have-to-match-radio-in-checked-state.snap.png
diff --git a/...or-sbanken-unchecked-have-to-match-radio-in-unchecked-state-with-focus.snap.png b/...or-sbanken-unchecked-have-to-match-radio-in-unchecked-state-with-focus.snap.png
diff --git a/...or-sbanken-unchecked-have-to-match-radio-in-unchecked-state-with-hover.snap.png b/...or-sbanken-unchecked-have-to-match-radio-in-unchecked-state-with-hover.snap.png
diff --git a/...s__/radio-for-sbanken-unchecked-have-to-match-radio-in-unchecked-state.snap.png b/...s__/radio-for-sbanken-unchecked-have-to-match-radio-in-unchecked-state.snap.png
diff --git a/...ked-have-to-match-disabled-group.snap.png → ...ked-have-to-match-disabled-group.snap.png b/...ked-have-to-match-disabled-group.snap.png → ...ked-have-to-match-disabled-group.snap.png
diff --git a/...-radio-button-in-different-sizes.snap.png → ...-radio-button-in-different-sizes.snap.png b/...-radio-button-in-different-sizes.snap.png → ...-radio-button-in-different-sizes.snap.png
diff --git a/...h-radio-group-in-vertical-layout.snap.png → ...h-radio-group-in-vertical-layout.snap.png b/...h-radio-group-in-vertical-layout.snap.png → ...h-radio-group-in-vertical-layout.snap.png
diff --git a/...-have-to-match-radio-group-plain.snap.png → ...-have-to-match-radio-group-plain.snap.png b/...-have-to-match-radio-group-plain.snap.png → ...-have-to-match-radio-group-plain.snap.png
diff --git a/...tch-radio-group-with-form-status.snap.png → ...tch-radio-group-with-form-status.snap.png b/...tch-radio-group-with-form-status.snap.png → ...tch-radio-group-with-form-status.snap.png
diff --git a/...tch-radio-group-with-label-above.snap.png → ...tch-radio-group-with-label-above.snap.png b/...tch-radio-group-with-label-above.snap.png → ...tch-radio-group-with-label-above.snap.png
diff --git a/...hecked-have-to-match-radio-group.snap.png → ...hecked-have-to-match-radio-group.snap.png b/...hecked-have-to-match-radio-group.snap.png → ...hecked-have-to-match-radio-group.snap.png
diff --git a/...adio-in-checked-state-with-focus.snap.png → ...adio-in-checked-state-with-focus.snap.png b/...adio-in-checked-state-with-focus.snap.png → ...adio-in-checked-state-with-focus.snap.png
diff --git a/...adio-in-checked-state-with-hover.snap.png → ...adio-in-checked-state-with-hover.snap.png b/...adio-in-checked-state-with-hover.snap.png → ...adio-in-checked-state-with-hover.snap.png
diff --git a/...-to-match-radio-in-checked-state.snap.png → ...-to-match-radio-in-checked-state.snap.png b/...-to-match-radio-in-checked-state.snap.png → ...-to-match-radio-in-checked-state.snap.png
diff --git a/...io-in-unchecked-state-with-focus.snap.png → ...io-in-unchecked-state-with-focus.snap.png b/...io-in-unchecked-state-with-focus.snap.png → ...io-in-unchecked-state-with-focus.snap.png
diff --git a/...io-in-unchecked-state-with-hover.snap.png → ...io-in-unchecked-state-with-hover.snap.png b/...io-in-unchecked-state-with-hover.snap.png → ...io-in-unchecked-state-with-hover.snap.png
diff --git a/...o-match-radio-in-unchecked-state.snap.png → ...o-match-radio-in-unchecked-state.snap.png b/...o-match-radio-in-unchecked-state.snap.png → ...o-match-radio-in-unchecked-state.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
@@ -154,10 +154,39 @@ button .dnb-form-status__text {
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  --radio-color-dot-on: black;
+  --radio-color-background-on: white;
+  --radio-color-border-on: black;
+  --radio-color-background-off: white;
+  --radio-color-border-off: black;
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-border-on--disabled: lightgrey;
+  --radio-color-border-off--disabled: lightgrey;
+  --radio-color-dot-on--active: lightgrey;
+  --radio-color-border-on--active: lightgrey;
+  --radio-color-background-off--active: lightgrey;
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: lightgrey;
+  --radio-color-dot-on--error: red;
+  --radio-color-border-on--error: red;
+  --radio-color-background-off--error: lavenderblush;
+  --radio-color-dot-on--error-hover: lavenderblush;
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
   line-height: var(--line-height-basis);
+  /*
+   * Color scheme
+   */
+  /** Normal state **/
+  /** Disabled state **/
+  /** Active state **/
+  /** Hover state **/
+  /** Focus state **/
+  /** Error state **/
 }
 .dnb-radio__inner {
   display: inline-flex;
@@ -204,6 +233,8 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   width: calc(var(--radio-width--medium) - 0.75rem);
   height: calc(var(--radio-height--medium) - 0.75rem);
   border-radius: 50%;
+  background-color: var(--radio-color-dot-on);
+  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio--large .dnb-radio__dot {
   width: calc(var(--radio-width--large) - 0.875rem);
@@ -289,6 +320,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
   margin-top: 0.5rem;
   margin-bottom: 1rem;
 }
+.dnb-radio > .dnb-form-status {
+  transform: translateY(0.25rem); /* 4/16 */
+}
 .dnb-radio-group {
   --radio-group-margin-bottom: 0.5rem;
   --radio-group-margin-right: 1rem;
@@ -329,30 +363,10 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 }
 .dnb-skeleton .dnb-radio__input[disabled] ~ .dnb-radio__button {
   border-color: var(--skeleton-color);
-}"
-`;
-
-exports[`Radio scss have to match default theme snapshot 1`] = `
-"/*
-* Radio theme
-*
-*/
-/*
- * Utilities
- */
-.dnb-radio {
-  /* stylelint-disable */
-  /* stylelint-enable */
-  /* stylelint-disable */
-  /* stylelint-enable */
-}
-.dnb-radio__dot {
-  background-color: var(--color-sea-green);
-  transition: opacity 200ms ease-out, transform 200ms ease-out;
 }
 .dnb-radio__input:checked ~ .dnb-radio__button, .dnb-radio__input[data-checked=true] ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
+  background-color: var(--radio-color-background-on);
+  border-color: var(--radio-color-border-on);
 }
 .dnb-radio__input:checked ~ .dnb-radio__dot, .dnb-radio__input[data-checked=true] ~ .dnb-radio__dot {
   opacity: 1;
@@ -363,66 +377,92 @@ exports[`Radio scss have to match default theme snapshot 1`] = `
   transform: scale(0.8);
 }
 .dnb-radio__input:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  background-color: var(--color-white);
-  border-color: var(--color-sea-green);
+  background-color: var(--radio-color-background-off);
+  border-color: var(--radio-color-border-off);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__button, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__button {
-  border-color: var(--color-sea-green-30);
-}
-.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
-  border-color: var(--color-mint-green-50);
+  border-color: var(--radio-color-border-on--disabled);
 }
 .dnb-radio__input[disabled]:checked ~ .dnb-radio__dot, .dnb-radio__input[disabled][data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-sea-green-30);
+  background-color: var(--radio-color-dot-on--disabled);
 }
-.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
-  border-color: var(--color-mint-green-50);
+.dnb-radio__input[disabled]:not(:checked):not([data-checked=true]) ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-off--disabled);
 }
-.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
-  border-color: transparent;
+.dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__button, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__button {
+  border-color: var(--radio-color-border-on--active);
 }
 .dnb-radio__input:not([disabled]):checked:active ~ .dnb-radio__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
-  background-color: var(--color-mint-green-50);
+  background-color: var(--radio-color-dot-on--active);
 }
-.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
+.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--active);
+  border-color: var(--radio-color-border-off--active);
 }
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
-  background-color: var(--color-mint-green-50);
+  background-color: var(--radio-color-dot-on--hover);
 }
-html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
+.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--hover);
 }
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__button {
   border: none;
 }
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
   display: block;
 }
-.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active ~ .dnb-radio__button {
-  background-color: var(--color-mint-green-50);
+.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--focus);
+}
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--focus);
 }
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__button {
   border: none;
 }
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
   display: block;
-  --border-color: var(--color-fire-red);
+  --border-color: var(--radio-color-border-on--error);
   --border-width: var(--focus-ring-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--color-fire-red-8);
-}
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):not(:hover)[data-checked=true] ~ .dnb-radio__dot {
-  background-color: var(--color-fire-red);
+  background-color: var(--radio-color-dot-on--error);
 }
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
-  background-color: var(--color-fire-red-8);
+  background-color: var(--radio-color-dot-on--error-hover);
 }
-.dnb-radio > .dnb-form-status {
-  transform: translateY(0.25rem); /* 4/16 */
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-off--error);
+}"
+`;
+
+exports[`Radio scss have to match default theme snapshot 1`] = `
+"/*
+* Radio theme
+*
+*/
+.dnb-radio {
+  --radio-color-dot-on: var(--color-sea-green);
+  --radio-color-background-on: var(--color-white);
+  --radio-color-border-on: var(--color-sea-green);
+  --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-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);
+  --radio-color-border-on--active: var(--color-mint-green-50);
+  --radio-color-background-off--active: var(--color-mint-green-50);
+  --radio-color-border-off--active: transparent;
+  --radio-color-dot-on--hover: var(--color-mint-green-50);
+  --radio-color-background-off--hover: var(--color-mint-green-50);
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: var(--color-mint-green-50);
+  --radio-color-dot-on--error: var(--color-fire-red);
+  --radio-color-border-on--error: var(--color-fire-red);
+  --radio-color-background-off--error: var(--color-fire-red-8);
+  --radio-color-dot-on--error-hover: var(--color-fire-red-8);
 }"
 `;