@dnb/eufemia 10.12.0 → 10.14.0

package/cjs/components/radio/style/dnb-radio.scss

@@ -14,6 +14,32 @@
   --radio-width--large: 2rem;
   --radio-height--large: 2rem;
   --radio-border-width: 0.125rem;
+  // Normal state
+  --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;
+  // Disabled state
+  --radio-color-dot-on--disabled: lightgrey;
+  --radio-color-border-on--disabled: lightgrey;
+  --radio-color-border-off--disabled: lightgrey;
+  // Active state
+  --radio-color-dot-on--active: lightgrey;
+  --radio-color-border-on--active: lightgrey;
+  --radio-color-background-off--active: lightgrey;
+  --radio-color-border-off--active: transparent;
+  // Hover state
+  --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-off--hover: lightgrey;
+  // Focus state
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: lightgrey;
+  // Error state
+  --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;
@@ -73,6 +99,10 @@
     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 & {
       width: calc(var(--radio-width--large) - 0.875rem);
@@ -192,6 +222,11 @@
     margin-bottom: 1rem;
   }
 
+  // adjust the form-status to the inner border for 3px
+  > .dnb-form-status {
+    transform: translateY(0.25rem); /* 4/16 */
+  }
+
   &-group {
     --radio-group-margin-bottom: 0.5rem;
     --radio-group-margin-right: 1rem;
@@ -248,4 +283,171 @@
   .dnb-skeleton &__input[disabled] ~ &__button {
     border-color: var(--skeleton-color);
   }
+
+  /*
+   * Color scheme
+   */
+
+  // stylelint-disable no-descending-specificity
+  // We prioritise categorisation and readability over specificity here */
+
+  /** Normal state **/
+
+  // On
+  &__input:checked ~ &__button,
+  &__input[data-checked='true'] ~ &__button {
+    background-color: var(--radio-color-background-on);
+    border-color: var(--radio-color-border-on);
+  }
+  &__input:checked ~ &__dot,
+  &__input[data-checked='true'] ~ &__dot {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  // Off
+  &__input:not(:checked):not([data-checked='true']) ~ &__dot {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  &__input:not(:checked):not([data-checked='true']) ~ &__button {
+    background-color: var(--radio-color-background-off);
+    border-color: var(--radio-color-border-off);
+  }
+
+  /** Disabled state **/
+
+  // On
+  &__input[disabled]:checked ~ &__button,
+  &__input[disabled][data-checked='true'] ~ &__button {
+    border-color: var(--radio-color-border-on--disabled);
+  }
+
+  &__input[disabled]:checked ~ &__dot,
+  &__input[disabled][data-checked='true'] ~ &__dot {
+    background-color: var(--radio-color-dot-on--disabled);
+  }
+
+  // Off
+  &__input[disabled]:not(:checked):not([data-checked='true']) ~ &__button {
+    border-color: var(--radio-color-border-off--disabled);
+  }
+
+  /** Active state **/
+
+  // On
+  &__input:not([disabled]):checked:active ~ &__button,
+  &__input:not([disabled])[data-checked='true']:active ~ &__button {
+    border-color: var(--radio-color-border-on--active);
+  }
+
+  &__input:not([disabled]):checked:active ~ &__dot,
+  &__input:not([disabled])[data-checked='true']:active ~ &__dot {
+    background-color: var(--radio-color-dot-on--active);
+  }
+
+  // Off
+  &__input:not([disabled]):not(:checked):not([data-checked='true']):active
+    ~ &__button {
+    background-color: var(--radio-color-background-off--active);
+    border-color: var(--radio-color-border-off--active);
+  }
+
+  /** Hover state **/
+
+  // On
+  &__input:not([disabled]):not(:focus):checked:hover ~ &__dot,
+  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
+    ~ &__dot {
+    background-color: var(--radio-color-dot-on--hover);
+  }
+
+  // Off
+  &__input:not([disabled]):not(:focus):not(:checked):not(
+      [data-checked='true']
+    ):hover
+    ~ &__button {
+    background-color: var(--radio-color-background-off--hover);
+  }
+
+  /** Focus state **/
+
+  // General
+  &__input:not([disabled]):focus ~ &__button {
+    html[data-whatinput='keyboard'] & {
+      border: none;
+    }
+  }
+  &__input:not([disabled]):focus ~ &__focus,
+  &__input:not([disabled]):active ~ &__focus {
+    display: block;
+  }
+
+  // On
+  &__input:not([disabled]):not(:active):not(:hover):checked:focus
+    ~ &__button,
+  &__input:not([disabled]):not(:active):not(
+      :hover
+    )[data-checked='true']:focus
+    ~ &__button {
+    background-color: var(--radio-color-background-on--focus);
+  }
+
+  // Off
+  &__input:not([disabled]):not(:checked):not([data-checked='true']):focus
+    ~ &__button {
+    html[data-whatinput='keyboard'] & {
+      background-color: var(--radio-color-background-off--focus);
+    }
+  }
+
+  /** Error state **/
+
+  // General
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:active)
+    ~ &__button {
+    border: none;
+  }
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:active)
+    ~ &__focus {
+    display: block;
+    @include fakeBorder(
+      var(--radio-color-border-on--error),
+      var(--focus-ring-width)
+    );
+  }
+
+  // On
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:active):not(:hover):checked
+    ~ &__dot,
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:active):not(
+      :hover
+    )[data-checked='true']
+    ~ &__dot {
+    background-color: var(--radio-color-dot-on--error);
+  }
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:active):checked:hover
+    ~ &__dot,
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(
+      :active
+    )[data-checked='true']:hover
+    ~ &__dot {
+    background-color: var(--radio-color-dot-on--error-hover);
+  }
+
+  // Off
+  &__status--error
+    &__input:not([disabled]):not(:focus):not(:checked):not(
+      [data-checked='true']
+    ):hover
+    ~ &__button {
+    background-color: var(--radio-color-background-off--error);
+  }
+  // stylelint-enable no-descending-specificity
 }

package/cjs/components/radio/style/themes/dnb-radio-theme-sbanken.css

@@ -0,0 +1,26 @@
+/*
+* Radio theme for Sbanken
+*
+*/
+.dnb-radio {
+  --radio-color-dot-on: var(--sb-color-violet-light);
+  --radio-color-background-on: var(--sb-color-white);
+  --radio-color-border-on: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off: var(--sb-color-white);
+  --radio-color-border-off: var(--sb-color-gray-dark-2-neutral);
+  --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--active: var(--sb-color-violet-light);
+  --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off--active: var(--sb-color-white);
+  --radio-color-border-off--active: var(--sb-color-gray);
+  --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-color-background-off--hover: var(--sb-color-white);
+  --radio-color-background-on--focus: var(--sb-color-blue-light-3);
+  --radio-color-background-off--focus: var(--sb-color-blue-light-3);
+  --radio-color-dot-on--error: var(--sb-color-magenta);
+  --radio-color-border-on--error: var(--sb-color-magenta);
+  --radio-color-background-off--error: var(--sb-color-white);
+  --radio-color-dot-on--error-hover: var(--sb-color-red);
+}

package/cjs/components/radio/style/themes/dnb-radio-theme-sbanken.min.css

@@ -0,0 +1 @@
+.dnb-radio{--radio-color-dot-on:var(--sb-color-violet-light);--radio-color-background-on:var(--sb-color-white);--radio-color-border-on:var(--sb-color-gray-dark-2-neutral);--radio-color-background-off:var(--sb-color-white);--radio-color-border-off:var(--sb-color-gray-dark-2-neutral);--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--active:var(--sb-color-violet-light);--radio-color-border-on--active:var(--sb-color-gray-dark-2-neutral);--radio-color-background-off--active:var(--sb-color-white);--radio-color-border-off--active:var(--sb-color-gray);--radio-color-dot-on--hover:var(--sb-color-violet);--radio-color-background-off--hover:var(--sb-color-white);--radio-color-background-on--focus:var(--sb-color-blue-light-3);--radio-color-background-off--focus:var(--sb-color-blue-light-3);--radio-color-dot-on--error:var(--sb-color-magenta);--radio-color-border-on--error:var(--sb-color-magenta);--radio-color-background-off--error:var(--sb-color-white);--radio-color-dot-on--error-hover:var(--sb-color-red)}

package/cjs/components/radio/style/themes/dnb-radio-theme-sbanken.scss

@@ -0,0 +1,33 @@
+/*
+* Radio theme for Sbanken
+*
+*/
+
+.dnb-radio {
+  // Normal state
+  --radio-color-dot-on: var(--sb-color-violet-light);
+  --radio-color-background-on: var(--sb-color-white);
+  --radio-color-border-on: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off: var(--sb-color-white);
+  --radio-color-border-off: var(--sb-color-gray-dark-2-neutral);
+  // 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);
+  // Active state
+  --radio-color-dot-on--active: var(--sb-color-violet-light);
+  --radio-color-border-on--active: var(--sb-color-gray-dark-2-neutral);
+  --radio-color-background-off--active: var(--sb-color-white);
+  --radio-color-border-off--active: var(--sb-color-gray);
+  // Hover state
+  --radio-color-dot-on--hover: var(--sb-color-violet);
+  --radio-color-background-off--hover: var(--sb-color-white);
+  // Focus state
+  --radio-color-background-on--focus: var(--sb-color-blue-light-3);
+  --radio-color-background-off--focus: var(--sb-color-blue-light-3);
+  // Error state
+  --radio-color-dot-on--error: var(--sb-color-magenta);
+  --radio-color-border-on--error: var(--sb-color-magenta);
+  --radio-color-background-off--error: var(--sb-color-white);
+  --radio-color-dot-on--error-hover: var(--sb-color-red);
+}

package/cjs/components/radio/style/themes/dnb-radio-theme-ui.css

@@ -2,91 +2,25 @@
 * 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);
-}
-.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(--color-white);
-  border-color: var(--color-sea-green);
-}
-.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);
-}
-.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);
-}
-.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: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__dot, .dnb-radio__input:not([disabled])[data-checked=true]:active ~ .dnb-radio__dot {
-  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(--color-mint-green-50);
-}
-.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);
-}
-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);
-}
-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__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-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);
-}
-.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);
-}
-.dnb-radio > .dnb-form-status {
-  transform: translateY(0.25rem); /* 4/16 */
+  --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);
 }

package/cjs/components/radio/style/themes/dnb-radio-theme-ui.min.css

@@ -1 +1 @@
-.dnb-radio__dot{background-color:var(--color-sea-green);transition:opacity .2s ease-out,transform .2s 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)}.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(.8)}.dnb-radio__input:not(:checked):not([data-checked=true])~.dnb-radio__button{background-color:var(--color-white);border-color:var(--color-sea-green)}.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)}.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)}.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: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__dot,.dnb-radio__input:not([disabled]):not(:focus):checked:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-radio__dot,.dnb-radio__input:not([disabled])[data-checked=true]:active~.dnb-radio__dot,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)}html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus~.dnb-radio__button{border:none}.dnb-radio__input:not([disabled]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.dnb-radio__focus{display:block}.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):active~.dnb-radio__button,.dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus~.dnb-radio__button{background-color:var(--color-mint-green-50)}.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{--border-color:var(--color-fire-red);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.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)}.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)}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}
+.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)}

package/cjs/components/radio/style/themes/dnb-radio-theme-ui.scss

@@ -3,148 +3,31 @@
 *
 */
 
-@import '../../../../style/core/utilities.scss';
-
 .dnb-radio {
-  &__dot {
-    background-color: var(--color-sea-green);
-    transition:
-      opacity 200ms ease-out,
-      transform 200ms ease-out;
-  }
-
-  // When radio is ON
-  &__input:checked ~ &__button,
-  &__input[data-checked='true'] ~ &__button {
-    background-color: var(--color-white);
-    border-color: var(--color-sea-green);
-  }
-  &__input:checked ~ &__dot,
-  &__input[data-checked='true'] ~ &__dot {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  // When radio is OFF
-  &__input:not(:checked):not([data-checked='true']) ~ &__dot {
-    opacity: 0;
-    transform: scale(0.8);
-  }
-  &__input:not(:checked):not([data-checked='true']) ~ &__button {
-    background-color: var(--color-white);
-    border-color: var(--color-sea-green);
-  }
-
-  // On disabled
-  &__input[disabled]:checked ~ &__button,
-  &__input[disabled][data-checked='true'] ~ &__button {
-    border-color: var(--color-sea-green-30);
-  }
-  &__input[disabled]:not(:checked):not([data-checked='true']) ~ &__button {
-    border-color: var(--color-mint-green-50);
-  }
-  &__input[disabled]:checked ~ &__dot,
-  &__input[disabled][data-checked='true'] ~ &__dot {
-    background-color: var(--color-sea-green-30);
-  }
-
-  // On active
-  &__input:not([disabled]):checked:active ~ &__button,
-  &__input:not([disabled])[data-checked='true']:active ~ &__button {
-    border-color: var(--color-mint-green-50);
-  }
-  &__input:not([disabled]):not(:checked):not([data-checked='true']):active
-    ~ &__button {
-    background-color: var(--color-mint-green-50);
-    border-color: transparent;
-  }
-  &__input:not([disabled]):checked:active ~ &__dot,
-  &__input:not([disabled])[data-checked='true']:active ~ &__dot {
-    background-color: var(--color-mint-green-50);
-  }
-
-  // On hover
-  &__input:not([disabled]):not(:focus):not(:checked):not(
-      [data-checked='true']
-    ):hover
-    ~ &__button {
-    background-color: var(--color-mint-green-50);
-  }
-  &__input:not([disabled]):not(:focus):checked:hover ~ &__dot,
-  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
-    ~ &__dot {
-    background-color: var(--color-mint-green-50);
-  }
-
-  // On focus
-  /* stylelint-disable */
-  &__input:not([disabled]):not(:checked):not([data-checked='true']):focus
-    ~ &__button {
-    html[data-whatinput='keyboard'] & {
-      background-color: var(--color-mint-green-50);
-    }
-  }
-  &__input:not([disabled]):focus ~ &__button {
-    html[data-whatinput='keyboard'] & {
-      border: none;
-    }
-  }
-  &__input:not([disabled]):focus ~ &__focus,
-  &__input:not([disabled]):active ~ &__focus {
-    display: block;
-  }
-  &__input:not([disabled]):not(:checked):not([data-checked='true']):focus
-    ~ &__button,
-  &__input:not([disabled]):not(:checked):not([data-checked='true']):active
-    ~ &__button {
-    background-color: var(--color-mint-green-50);
-  }
-  /* stylelint-enable */
-
-  // On error state
-  /* stylelint-disable */
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:active)
-    ~ &__button {
-    border: none;
-  }
-  /* stylelint-enable */
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:active)
-    ~ &__focus {
-    display: block;
-    @include fakeBorder(var(--color-fire-red), var(--focus-ring-width));
-  }
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:checked):not(
-      [data-checked='true']
-    ):hover
-    ~ &__button {
-    background-color: var(--color-fire-red-8);
-  }
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:active):not(:hover):checked
-    ~ &__dot,
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:active):not(
-      :hover
-    )[data-checked='true']
-    ~ &__dot {
-    background-color: var(--color-fire-red);
-  }
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(:active):checked:hover
-    ~ &__dot,
-  &__status--error
-    &__input:not([disabled]):not(:focus):not(
-      :active
-    )[data-checked='true']:hover
-    ~ &__dot {
-    background-color: var(--color-fire-red-8);
-  }
-
-  // adjust the form-status to the inner border for 3px
-  > .dnb-form-status {
-    transform: translateY(0.25rem); /* 4/16 */
-  }
+  // Normal state
+  --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);
+  // Disabled state
+  --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);
+  // Active state
+  --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;
+  // Hover state
+  --radio-color-dot-on--hover: var(--color-mint-green-50);
+  --radio-color-background-off--hover: var(--color-mint-green-50);
+  // Focus state
+  --radio-color-background-on--focus: var(--color-white);
+  --radio-color-background-off--focus: var(--color-mint-green-50);
+  // Error state
+  --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);
 }

package/cjs/components/section/Section.js

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 
 Object.defineProperty(exports, "__esModule", {
   value: true