@dnb/eufemia 10.13.0 → 10.14.0

package/components/radio/style/dnb-radio.css

@@ -14,10 +14,39 @@
   --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;
@@ -65,6 +94,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);
@@ -150,6 +181,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;
@@ -190,4 +224,76 @@ 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);
 }

package/components/radio/style/dnb-radio.min.css

@@ -1 +1 @@
-:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.dnb-skeleton .dnb-radio__input[disabled]~.dnb-radio__button{border-color:var(--skeleton-color)}
+:root{--radio-width--medium:1.5rem;--radio-height--medium:1.5rem}.dnb-radio{--radio-width--large:2rem;--radio-height--large:2rem;--radio-border-width:0.125rem;--radio-color-dot-on:#000;--radio-color-background-on:#fff;--radio-color-border-on:#000;--radio-color-background-off:#fff;--radio-color-border-off:#000;--radio-color-dot-on--disabled:#d3d3d3;--radio-color-border-on--disabled:#d3d3d3;--radio-color-border-off--disabled:#d3d3d3;--radio-color-dot-on--active:#d3d3d3;--radio-color-border-on--active:#d3d3d3;--radio-color-background-off--active:#d3d3d3;--radio-color-border-off--active:transparent;--radio-color-dot-on--hover:#d3d3d3;--radio-color-background-off--hover:#d3d3d3;--radio-color-background-on--focus:var(--color-white);--radio-color-background-off--focus:#d3d3d3;--radio-color-dot-on--error:red;--radio-color-border-on--error:red;--radio-color-background-off--error:#fff0f5;--radio-color-dot-on--error-hover:#fff0f5;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-radio,.dnb-radio__inner{display:inline-flex;flex-direction:column}.dnb-radio__inner{align-self:center}.dnb-radio__shell{align-items:center;display:flex;flex-shrink:0;height:var(--radio-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--radio-width--medium)}.dnb-radio__button,.dnb-radio__dot,.dnb-radio__focus{position:absolute;z-index:4}.dnb-radio__button{border:var(--radio-border-width) solid transparent}.dnb-radio__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-radio__focus{--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-radio__button,.dnb-radio__focus{border-radius:50%;height:calc(var(--radio-height--medium) - .25rem);width:calc(var(--radio-width--medium) - .25rem)}.dnb-radio--large .dnb-radio__button,.dnb-radio--large .dnb-radio__focus{height:calc(var(--radio-height--large) - .125rem);width:calc(var(--radio-width--large) - .125rem)}.dnb-radio__dot{background-color:var(--radio-color-dot-on);border-radius:50%;height:calc(var(--radio-height--medium) - .75rem);transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--radio-width--medium) - .75rem)}.dnb-radio--large .dnb-radio__dot{height:calc(var(--radio-height--large) - .875rem);width:calc(var(--radio-width--large) - .875rem)}.dnb-radio__input{border:0;height:var(--radio-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;width:var(--radio-width--medium);z-index:5}.dnb-radio--large .dnb-radio__input{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio__input:not([disabled]){cursor:pointer}.dnb-radio__order{align-items:baseline;display:inline-flex}.dnb-radio-group--column .dnb-radio__order{display:flex}.dnb-radio__row{display:inline-flex}.dnb-radio__suffix{order:3}.dnb-radio__suffix .dnb-modal__trigger{margin-bottom:-.25rem;margin-top:-.25rem}.dnb-radio-group__suffix{font-size:var(--font-size-basis)}.dnb-radio--large,.dnb-radio--large .dnb-radio__suffix{line-height:var(--radio-height--large)}.dnb-radio--large .dnb-radio__shell{height:var(--radio-height--large);width:var(--radio-width--large)}.dnb-radio .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-radio--label-position-left .dnb-radio__order .dnb-radio__inner{order:2}.dnb-radio--label-position-left .dnb-radio__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-radio--label-position-right .dnb-radio__order .dnb-radio__inner{order:1}.dnb-radio--label-position-right .dnb-radio__order .dnb-form-label{order:2;padding-left:.5rem}:not(.dnb-radio-group)>.dnb-form-label+.dnb-radio{vertical-align:top}.dnb-radio .dnb-form-status{margin-bottom:0;margin-top:.375rem;order:4}.dnb-radio+.dnb-form-status{margin-bottom:1rem;margin-top:.5rem}.dnb-radio>.dnb-form-status{transform:translateY(.25rem)}.dnb-radio-group{--radio-group-margin-bottom:0.5rem;--radio-group-margin-right:1rem;display:inline-flex;flex-direction:row}.dnb-radio-group fieldset{border:none;margin:0;padding:0}.dnb-radio-group .dnb-radio{margin-bottom:var(--radio-group-margin-bottom);margin-right:var(--radio-group-margin-right)}.dnb-radio-group--column .dnb-radio{display:flex;margin-right:0}.dnb-radio-group .dnb-radio:last-of-type{margin-right:0}.dnb-radio-group [role=radiogroup],.dnb-radio-group__shell{display:block}.dnb-radio-group__shell>.dnb-form-status{margin-bottom:0;margin-top:0}.dnb-radio-group--column .dnb-radio-group__shell{flex-direction:column}.dnb-radio-group .dnb-flex-container{margin-bottom:calc(0px - var(--radio-group-margin-bottom))}.dnb-radio-group .dnb-flex-container:before{font-size:var(--font-size-basis)}.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(.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]):active~.dnb-radio__focus,.dnb-radio__input:not([disabled]):focus~.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{--border-color:var(--radio-color-border-on--error);--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(: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)}

package/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/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/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/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/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/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)}