@dnb/eufemia 10.30.2 → 10.32.0

package/components/checkbox/style/dnb-checkbox.scss

@@ -11,12 +11,19 @@
 }
 
 .dnb-checkbox {
+  --checkbox-border-radius: 0.25rem;
+  --checkbox-gfx-border-radius__indeterminate: 0.125rem;
   --checkbox-width--large: 2rem;
   --checkbox-height--large: 2rem;
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
   --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   // Normal state
   --checkbox-color-gfx-on: black;
-  --checkbox-color-gfx-off: black;
+  --checkbox-color-gfx-off: white;
   --checkbox-color-background-on: white;
   --checkbox-color-background-off: white;
   --checkbox-color-border-on: black;
@@ -27,6 +34,7 @@
   --checkbox-color-background-off--disabled: lightgrey;
   --checkbox-color-border-on--disabled: grey;
   --checkbox-color-border-off--disabled: grey;
+  --checkbox-color-gfx__indeterminate--disabled: grey;
   // Active state
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
@@ -44,6 +52,18 @@
   --checkbox-color-background-on--error: red;
   --checkbox-color-background--error-contrast: lavenderblush;
   --checkbox-color-border--error: red;
+  --checkbox-color-gfx-indeterminate--error: red;
+  --checkbox-color-gfx--error--hover: red;
+  --checkbox-color-background--error--hover: lavenderblush;
+  --checkbox-color-border--error--hover: red;
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: grey;
+  --checkbox-color-gfx-indeterminate: darkgray;
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: grey;
+  --checkbox-color-border-indeterminate--active: white;
+  --checkbox-color-gfx-indeterminate--active: white;
+
   // Bounding box
   --checkbox-bounding--medium: 1.75, 1.75;
 
@@ -96,13 +116,13 @@
     width: calc(var(--checkbox-width--medium) - 0.25rem);
     height: calc(var(--checkbox-height--medium) - 0.25rem);
 
-    border-radius: 0.25rem;
+    border-radius: var(--checkbox-border-radius);
 
     .dnb-checkbox--large & {
       width: var(--checkbox-width--large);
       height: var(--checkbox-height--large);
 
-      border-radius: 0.25rem;
+      border-radius: var(--checkbox-border-radius);
     }
   }
 
@@ -118,7 +138,6 @@
     width: calc(var(--checkbox-width--medium) - 0.5rem);
     height: calc(var(--checkbox-height--medium) - 0.5rem);
 
-    // fill: currentColor; // old svg fix
     shape-rendering: geometricprecision;
     transition:
       opacity 200ms ease-out,
@@ -130,8 +149,6 @@
   }
 
   &--large &__gfx {
-    // width: var(--checkbox-width--large); // old svg size
-    // height: var(--checkbox-height--large); // old svg size
     width: calc(var(--checkbox-width--large) - 0.5rem);
     height: calc(var(--checkbox-height--large) - 0.5rem);
   }
@@ -160,7 +177,8 @@
     width: var(--checkbox-width--large);
     height: var(--checkbox-height--large);
 
-    transform: scale(1); // reset scale
+    // reset scale
+    transform: scale(1);
   }
 
   &__input:not([disabled]) {
@@ -234,6 +252,7 @@
     transform: scale(1);
     color: var(--checkbox-color-gfx-on);
   }
+
   &__input:checked ~ &__button,
   &__input[data-checked='true'] ~ &__button {
     background-color: var(--checkbox-color-background-on);
@@ -247,9 +266,51 @@
     // Needed during transition
     color: var(--checkbox-color-gfx-off);
   }
+
   &__input:not(:checked):not([data-checked='true']) ~ &__button {
     background-color: var(--checkbox-color-background-off);
     border-color: var(--checkbox-color-border-off);
+
+    transition: background-color 100ms ease-out;
+  }
+
+  // Show the icon when indeterminate is true
+  &__input ~ &__indeterminate {
+    position: absolute;
+    z-index: 5;
+
+    width: var(--checkbox-gfx-width__indeterminate);
+    height: var(--checkbox-gfx-height__indeterminate);
+
+    transform: scale(0.85);
+    opacity: 0;
+
+    background-color: var(--checkbox-color-gfx-indeterminate);
+    border-radius: var(--checkbox-gfx-border-radius__indeterminate);
+
+    transition:
+      opacity 200ms ease-out,
+      transform 200ms ease-out;
+  }
+
+  &__input:indeterminate ~ &__indeterminate {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  &__input:indeterminate:checked ~ &__button {
+    background-color: transparent;
+    border-color: var(--checkbox-color-border-off);
+  }
+  &__input:indeterminate:hover ~ &__gfx,
+  &__input:indeterminate:checked ~ &__gfx,
+  &__input:indeterminate:checked:hover ~ &__gfx {
+    color: transparent;
+  }
+
+  &--large &__input:indeterminate ~ &__indeterminate {
+    width: var(--checkbox-gfx-width__indeterminate--large);
+    height: var(--checkbox-gfx-height__indeterminate--large);
   }
 
   /** Disabled state **/
@@ -260,6 +321,7 @@
     background-color: var(--checkbox-color-background-on--disabled);
     border-color: var(--checkbox-color-border-on--disabled);
   }
+
   &__input[disabled]:checked ~ &__gfx,
   &__input[disabled][data-checked='true'] ~ &__gfx {
     color: var(--checkbox-color-gfx--disabled);
@@ -271,6 +333,16 @@
     background-color: var(--checkbox-color-background-off--disabled);
   }
 
+  // indeterminate
+  &__input[disabled]:indeterminate ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx__indeterminate--disabled);
+  }
+
+  &__input[disabled]:indeterminate ~ &__gfx {
+    // hide check gfx
+    color: transparent;
+  }
+
   /** Active state **/
 
   // General
@@ -285,49 +357,69 @@
     color: var(--checkbox-color-gfx-on);
   }
 
+  // Indeterminate
+  &__input:not([disabled]):indeterminate:active ~ &__button {
+    background-color: var(
+      --checkbox-color-background-indeterminate--active
+    );
+    border-color: var(--checkbox-color-border-indeterminate--active);
+  }
+
+  &__input:not([disabled]):indeterminate:active ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx-indeterminate--active);
+  }
+
   /** Hover state **/
 
   // General
-  &__input:not([disabled]):not(:focus):hover ~ &__button {
+  &__input:not([disabled]):not(:active):hover ~ &__button {
     border-color: var(--checkbox-color-border-off--hover);
     background-color: var(--checkbox-color-background--hover);
   }
-  &__input:not([disabled]):not(:focus):hover ~ &__gfx {
+
+  &__input:hover ~ &__gfx {
     color: var(--checkbox-color-gfx--hover);
   }
 
   // On
-  &__input:not([disabled]):not(:focus):checked:hover ~ &__button,
-  &__input:not([disabled]):not(:focus)[data-checked='true']:hover
-    ~ &__button {
-    border-color: var(--checkbox-color-border-on--hover);
+  &__input:not([disabled]):checked:hover ~ &__button,
+  &__input:not([disabled])[data-checked='true']:hover ~ &__button {
+    border: var(--checkbox-border-width--hover) solid
+      var(--checkbox-color-border-on--hover);
   }
 
   /** Focus state **/
 
   // General
-  &__input:not([disabled]):focus ~ &__button {
+  &__input:not([disabled]):focus-visible ~ &__button {
     html[data-whatinput='keyboard'] & {
       border: none;
       background-color: var(--checkbox-color-background--focus);
     }
   }
-  &__input:not([disabled]):focus ~ &__gfx {
+
+  &__input:not([disabled]):focus-visible ~ &__gfx {
     html[data-whatinput='keyboard'] & {
       color: var(--checkbox-color-gfx--focus);
     }
   }
-  &__input:not([disabled]):focus ~ &__button &__focus,
+
+  &__input:not([disabled]):focus-visible ~ &__button &__focus,
   &__input:not([disabled]):active ~ &__button &__focus {
     display: block;
   }
 
+  &__input:not([disabled]):focus-visible ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx--focus);
+  }
+
   /** Error state **/
 
   // General
   &__status--error &__input:not([disabled]):not(:active) ~ &__button {
     border: none;
   }
+
   &__status--error
     &__input:not([disabled]):not(:active)
     ~ &__button
@@ -335,24 +427,29 @@
     display: block;
     @include fakeBorder(
       var(--checkbox-color-border--error),
-      var(--focus-ring-width)
+      var(--checkbox-border-width)
     );
   }
+
   &__status--error &__input:not([disabled]):hover ~ &__button {
     &[data-checked='true'] {
       // Needed during transition
-      border-color: var(--checkbox-color-border--error);
+      border-color: var(--checkbox-color-border--error--hover);
     }
-    background-color: var(--checkbox-color-background--error-contrast);
+
+    background-color: var(--checkbox-color-background--error--hover);
   }
+
   &__status--error &__input:not([disabled]):hover ~ &__gfx {
-    color: var(--checkbox-color-gfx--error-contrast);
+    color: var(--checkbox-color-gfx--error--hover);
   }
+
   &__status--error
     &__input:not([disabled]):not(:active):not(:hover)
     ~ &__gfx {
     color: var(--checkbox-color-gfx--error);
   }
+
   &__status--error &__input:not([disabled]):focus ~ &__button,
   &__status--error &__input:not([disabled]):focus:hover ~ &__button {
     html[data-whatinput='keyboard'] & {
@@ -360,10 +457,11 @@
       background-color: var(--checkbox-color-background--error-contrast);
       @include fakeBorder(
         var(--checkbox-color-border--error),
-        calc(var(--focus-ring-width) + 0.0625rem)
+        calc(var(--checkbox-border-width--hover))
       );
     }
   }
+
   &__status--error &__input:not([disabled]):focus:hover ~ &__gfx {
     html[data-whatinput='keyboard'] & {
       color: var(--checkbox-color-gfx--error-contrast);
@@ -380,14 +478,51 @@
     background-color: var(--checkbox-color-background-on--error);
   }
 
+  &__status--error
+    &__input:indeterminate:not([disabled]):not(:active):not(:hover)
+    ~ &__gfx {
+    // used for animation
+    color: var(--checkbox-color-gfx--error-contrast);
+    background-color: var(--checkbox-color-gfx--error-contrast);
+    border-radius: var(--checkbox-border-radius);
+  }
+
+  &__status--error
+    &__input:indeterminate:not(:active):not(:hover)
+    ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx-indeterminate--error);
+  }
+
+  &__status--error &__input:not(:indeterminate) ~ &__indeterminate {
+    // used for animation
+    background-color: var(--checkbox-color-gfx-indeterminate--error);
+  }
+
+  &__status--error
+    &__input:indeterminate:hover:not(:active)
+    ~ &__indeterminate {
+    background-color: var(--checkbox-color-gfx--error--hover);
+  }
+
+  &__status--error &__input:not([disabled]):not(:active):hover ~ &__gfx {
+    color: var(--checkbox-color-gfx--error--hover);
+  }
+
   &.dnb-skeleton &__input[disabled] ~ &__button {
     &::before {
       border-radius: 0;
     }
+
     border-color: var(--skeleton-color);
   }
+
   &.dnb-skeleton &__input[disabled] ~ &__gfx {
     color: var(--skeleton-color);
   }
+
+  &.dnb-skeleton &__input[disabled] ~ &__indeterminate {
+    background-color: var(--skeleton-color);
+  }
+
   // stylelint-enable no-descending-specificity
 }

package/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.css

@@ -3,17 +3,20 @@
 *
 */
 .dnb-checkbox {
+  --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
-  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
-  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
   --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
@@ -29,4 +32,21 @@
     --sb-color-magenta-light-2
   );
   --checkbox-color-border--error: var(--sb-color-magenta);
+  --checkbox-color-gfx--error--hover: var(--sb-color-magenta);
+  --checkbox-color-background--error--hover: var(
+    --sb-color-magenta-light-3
+  );
+  --checkbox-color-border--error--hover: transparent;
+  --checkbox-color-background-indeterminate: var(--sb-color-white);
+  --checkbox-color-gfx-indeterminate: var(--sb-color-violet);
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(--sb-color-gray);
+  --checkbox-color-gfx-indeterminate--active: var(--sb-color-violet);
+  --checkbox-color-gfx-indeterminate--error: var(--sb-color-magenta);
+  --checkbox-gfx-width__indeterminate: 0.875rem;
+  --checkbox-gfx-height__indeterminate: 0.125rem;
+  --checkbox-gfx-height__indeterminate--large: 0.25rem;
+  --checkbox-gfx-width__indeterminate--large: 1.5rem;
+  --checkbox-border-radius: 0.125rem;
+  --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

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

@@ -1,3 +1,5 @@
-.dnb-checkbox{--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-violet-light);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
+.dnb-checkbox{--checkbox-border-width:0.125rem;--checkbox-border-width--hover:0.125rem;--checkbox-color-gfx-on:var(--sb-color-violet-light);--checkbox-color-gfx-off:var(--sb-color-white);--checkbox-color-background-on:var(--sb-color-white);--checkbox-color-background-off:var(--sb-color-white);--checkbox-color-border-on:var(--sb-color-violet);--checkbox-color-border-off:var(--sb-color-violet);--checkbox-color-gfx--disabled:var(--sb-color-gray-dark);--checkbox-color-background-off--disabled:var(--sb-color-gray-light);--checkbox-color-background-on--disabled:var(--sb-color-gray-light);--checkbox-color-border-on--disabled:var(--sb-color-gray-dark);--checkbox-color-border-off--disabled:var(--sb-color-gray-dark);--checkbox-color-gfx__indeterminate--disabled:var(--sb-color-gray-dark);--checkbox-color-background--active:var(--sb-color-white);--checkbox-color-border--active:var(--sb-color-gray);--checkbox-color-gfx--hover:var(--sb-color-violet-light);--checkbox-color-background--hover:var(--sb-color-violet-light-3);--checkbox-color-border-on--hover:var(--sb-color-violet);--checkbox-color-border-off--hover:var(--sb-color-violet);--checkbox-color-gfx--focus:var(--focus-ring-color);--checkbox-color-background--focus:var(--sb-color-blue-light-3);--checkbox-color-gfx--error:var(--sb-color-magenta);--checkbox-color-gfx--error-contrast:var(--sb-color-magenta);--checkbox-color-background-on--error:var(--sb-color-white);--checkbox-color-background--error-contrast:var(
     --sb-color-magenta-light-2
-  );--checkbox-color-border--error:var(--sb-color-magenta)}
+  );--checkbox-color-border--error:var(--sb-color-magenta);--checkbox-color-gfx--error--hover:var(--sb-color-magenta);--checkbox-color-background--error--hover:var(
+    --sb-color-magenta-light-3
+  );--checkbox-color-border--error--hover:transparent;--checkbox-color-background-indeterminate:var(--sb-color-white);--checkbox-color-gfx-indeterminate:var(--sb-color-violet);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(--sb-color-gray);--checkbox-color-gfx-indeterminate--active:var(--sb-color-violet);--checkbox-color-gfx-indeterminate--error:var(--sb-color-magenta);--checkbox-gfx-width__indeterminate:0.875rem;--checkbox-gfx-height__indeterminate:0.125rem;--checkbox-gfx-height__indeterminate--large:0.25rem;--checkbox-gfx-width__indeterminate--large:1.5rem;--checkbox-border-radius:0.125rem;--checkbox-gfx-border-radius__indeterminate:0rem}

package/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss

@@ -4,19 +4,22 @@
 */
 
 .dnb-checkbox {
+  --checkbox-border-width: 0.125rem;
+  --checkbox-border-width--hover: 0.125rem;
   // Normal state
   --checkbox-color-gfx-on: var(--sb-color-violet-light);
-  --checkbox-color-gfx-off: var(--sb-color-violet-light);
+  --checkbox-color-gfx-off: var(--sb-color-white);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
   --checkbox-color-border-on: var(--sb-color-violet);
   --checkbox-color-border-off: var(--sb-color-violet);
   // Disabled state
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark);
-  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-background-off--disabled: var(--sb-color-gray-light);
+  --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
   --checkbox-color-border-on--disabled: var(--sb-color-gray-dark);
   --checkbox-color-border-off--disabled: var(--sb-color-gray-dark);
+  --checkbox-color-gfx__indeterminate--disabled: var(--sb-color-gray-dark);
   // Active state
   --checkbox-color-background--active: var(--sb-color-white);
   --checkbox-color-border--active: var(--sb-color-gray);
@@ -36,4 +39,27 @@
     --sb-color-magenta-light-2
   );
   --checkbox-color-border--error: var(--sb-color-magenta);
+  // Error Hover state
+  --checkbox-color-gfx--error--hover: var(--sb-color-magenta);
+  --checkbox-color-background--error--hover: var(
+    --sb-color-magenta-light-3
+  );
+  --checkbox-color-border--error--hover: transparent;
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: var(--sb-color-white);
+  --checkbox-color-gfx-indeterminate: var(--sb-color-violet);
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(--sb-color-gray);
+  --checkbox-color-gfx-indeterminate--active: var(--sb-color-violet);
+
+  // Indeterminate Error state
+  --checkbox-color-gfx-indeterminate--error: var(--sb-color-magenta);
+  // Indeterminate shape
+  --checkbox-gfx-width__indeterminate: 0.875rem;
+  --checkbox-gfx-height__indeterminate: 0.125rem;
+  --checkbox-gfx-height__indeterminate--large: 0.25rem;
+  --checkbox-gfx-width__indeterminate--large: 1.5rem;
+  --checkbox-border-radius: 0.125rem;
+  --checkbox-gfx-border-radius__indeterminate: 0rem;
 }

package/components/checkbox/style/themes/dnb-checkbox-theme-ui.css

@@ -4,7 +4,7 @@
 */
 .dnb-checkbox {
   --checkbox-color-gfx-on: var(--color-white);
-  --checkbox-color-gfx-off: var(--color-sea-green);
+  --checkbox-color-gfx-off: var(--color-white);
   --checkbox-color-background-on: var(--color-sea-green);
   --checkbox-color-background-off: var(--color-white);
   --checkbox-color-border-on: transparent;
@@ -14,17 +14,35 @@
   --checkbox-color-background-off--disabled: var(--color-white);
   --checkbox-color-border-on--disabled: transparent;
   --checkbox-color-border-off--disabled: var(--color-mint-green-50);
+  --checkbox-color-gfx__indeterminate--disabled: var(
+    --color-mint-green-50
+  );
   --checkbox-color-background--active: var(--color-mint-green-50);
   --checkbox-color-border--active: transparent;
   --checkbox-color-gfx--hover: var(--color-sea-green);
   --checkbox-color-background--hover: var(--color-mint-green-50);
   --checkbox-color-border-on--hover: transparent;
   --checkbox-color-border-off--hover: var(--color-sea-green);
-  --checkbox-color-gfx--focus: var(--color-sea-green);
+  --checkbox-color-gfx--focus: var(--color-emerald-green);
   --checkbox-color-background--focus: var(--color-mint-green-50);
   --checkbox-color-gfx--error: var(--color-fire-red-8);
   --checkbox-color-gfx--error-contrast: var(--color-fire-red);
   --checkbox-color-background-on--error: var(--color-fire-red);
   --checkbox-color-background--error-contrast: var(--color-fire-red-8);
   --checkbox-color-border--error: var(--color-fire-red);
+  --checkbox-color-gfx--error--hover: var(--color-fire-red);
+  --checkbox-color-background--error--hover: var(--color-fire-red-8);
+  --checkbox-color-border--error--hover: var(--color-fire-red);
+  --checkbox-color-background-indeterminate: var(--color-white);
+  --checkbox-color-gfx-indeterminate: var(--color-sea-green);
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(
+    --color-mint-green-50
+  );
+  --checkbox-color-gfx-indeterminate--active: var(--color-mint-green-50);
+  --checkbox-color-gfx-indeterminate--error: var(--color-fire-red);
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
 }

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

@@ -1 +1,5 @@
-.dnb-checkbox{--checkbox-color-gfx-on:var(--color-white);--checkbox-color-gfx-off:var(--color-sea-green);--checkbox-color-background-on:var(--color-sea-green);--checkbox-color-background-off:var(--color-white);--checkbox-color-border-on:transparent;--checkbox-color-border-off:var(--color-sea-green);--checkbox-color-gfx--disabled:var(--checkbox-color-gfx-on);--checkbox-color-background-on--disabled:var(--color-sea-green-30);--checkbox-color-background-off--disabled:var(--color-white);--checkbox-color-border-on--disabled:transparent;--checkbox-color-border-off--disabled:var(--color-mint-green-50);--checkbox-color-background--active:var(--color-mint-green-50);--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:var(--color-sea-green);--checkbox-color-background--hover:var(--color-mint-green-50);--checkbox-color-border-on--hover:transparent;--checkbox-color-border-off--hover:var(--color-sea-green);--checkbox-color-gfx--focus:var(--color-sea-green);--checkbox-color-background--focus:var(--color-mint-green-50);--checkbox-color-gfx--error:var(--color-fire-red-8);--checkbox-color-gfx--error-contrast:var(--color-fire-red);--checkbox-color-background-on--error:var(--color-fire-red);--checkbox-color-background--error-contrast:var(--color-fire-red-8);--checkbox-color-border--error:var(--color-fire-red)}
+.dnb-checkbox{--checkbox-color-gfx-on:var(--color-white);--checkbox-color-gfx-off:var(--color-white);--checkbox-color-background-on:var(--color-sea-green);--checkbox-color-background-off:var(--color-white);--checkbox-color-border-on:transparent;--checkbox-color-border-off:var(--color-sea-green);--checkbox-color-gfx--disabled:var(--checkbox-color-gfx-on);--checkbox-color-background-on--disabled:var(--color-sea-green-30);--checkbox-color-background-off--disabled:var(--color-white);--checkbox-color-border-on--disabled:transparent;--checkbox-color-border-off--disabled:var(--color-mint-green-50);--checkbox-color-gfx__indeterminate--disabled:var(
+    --color-mint-green-50
+  );--checkbox-color-background--active:var(--color-mint-green-50);--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:var(--color-sea-green);--checkbox-color-background--hover:var(--color-mint-green-50);--checkbox-color-border-on--hover:transparent;--checkbox-color-border-off--hover:var(--color-sea-green);--checkbox-color-gfx--focus:var(--color-emerald-green);--checkbox-color-background--focus:var(--color-mint-green-50);--checkbox-color-gfx--error:var(--color-fire-red-8);--checkbox-color-gfx--error-contrast:var(--color-fire-red);--checkbox-color-background-on--error:var(--color-fire-red);--checkbox-color-background--error-contrast:var(--color-fire-red-8);--checkbox-color-border--error:var(--color-fire-red);--checkbox-color-gfx--error--hover:var(--color-fire-red);--checkbox-color-background--error--hover:var(--color-fire-red-8);--checkbox-color-border--error--hover:var(--color-fire-red);--checkbox-color-background-indeterminate:var(--color-white);--checkbox-color-gfx-indeterminate:var(--color-sea-green);--checkbox-color-background-indeterminate--active:var(--color-white);--checkbox-color-border-indeterminate--active:var(
+    --color-mint-green-50
+  );--checkbox-color-gfx-indeterminate--active:var(--color-mint-green-50);--checkbox-color-gfx-indeterminate--error:var(--color-fire-red);--checkbox-gfx-height__indeterminate:0.625rem;--checkbox-gfx-width__indeterminate:0.625rem;--checkbox-gfx-height__indeterminate--large:0.875rem;--checkbox-gfx-width__indeterminate--large:0.875rem}

package/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss

@@ -6,7 +6,7 @@
 .dnb-checkbox {
   // Normal state
   --checkbox-color-gfx-on: var(--color-white);
-  --checkbox-color-gfx-off: var(--color-sea-green);
+  --checkbox-color-gfx-off: var(--color-white);
   --checkbox-color-background-on: var(--color-sea-green);
   --checkbox-color-background-off: var(--color-white);
   --checkbox-color-border-on: transparent;
@@ -17,6 +17,9 @@
   --checkbox-color-background-off--disabled: var(--color-white);
   --checkbox-color-border-on--disabled: transparent;
   --checkbox-color-border-off--disabled: var(--color-mint-green-50);
+  --checkbox-color-gfx__indeterminate--disabled: var(
+    --color-mint-green-50
+  );
   // Active state
   --checkbox-color-background--active: var(--color-mint-green-50);
   --checkbox-color-border--active: transparent;
@@ -26,7 +29,7 @@
   --checkbox-color-border-on--hover: transparent;
   --checkbox-color-border-off--hover: var(--color-sea-green);
   // Focus state
-  --checkbox-color-gfx--focus: var(--color-sea-green);
+  --checkbox-color-gfx--focus: var(--color-emerald-green);
   --checkbox-color-background--focus: var(--color-mint-green-50);
   // Error state
   --checkbox-color-gfx--error: var(--color-fire-red-8);
@@ -34,4 +37,24 @@
   --checkbox-color-background-on--error: var(--color-fire-red);
   --checkbox-color-background--error-contrast: var(--color-fire-red-8);
   --checkbox-color-border--error: var(--color-fire-red);
+  // Error Hover state
+  --checkbox-color-gfx--error--hover: var(--color-fire-red);
+  --checkbox-color-background--error--hover: var(--color-fire-red-8);
+  --checkbox-color-border--error--hover: var(--color-fire-red);
+  // Indeterminate state
+  --checkbox-color-background-indeterminate: var(--color-white);
+  --checkbox-color-gfx-indeterminate: var(--color-sea-green);
+  // Indeterminate Active state
+  --checkbox-color-background-indeterminate--active: var(--color-white);
+  --checkbox-color-border-indeterminate--active: var(
+    --color-mint-green-50
+  );
+  --checkbox-color-gfx-indeterminate--active: var(--color-mint-green-50);
+  // Indeterminate Error state
+  --checkbox-color-gfx-indeterminate--error: var(--color-fire-red);
+  // Indeterminate shape
+  --checkbox-gfx-height__indeterminate: 0.625rem;
+  --checkbox-gfx-width__indeterminate: 0.625rem;
+  --checkbox-gfx-height__indeterminate--large: 0.875rem;
+  --checkbox-gfx-width__indeterminate--large: 0.875rem;
 }

package/components/flex/Container.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { SpaceProps } from '../space/Space';
 import type { MediaQueryBreakpoints } from '../../shared/MediaQueryUtils';
 import type { UseMediaQueries } from '../../shared/useMedia';
+type Gap = false | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
 export type BasicProps = {
     direction?: 'horizontal' | 'vertical';
     wrap?: boolean;
@@ -14,7 +15,9 @@ export type BasicProps = {
     /** When "line-framed" is used, a line will be shown between items and above the first and below the last item */
     divider?: 'space' | 'line' | 'line-framed';
     /** Spacing between items inside */
-    spacing?: false | 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+    gap?: Gap;
+    /** @deprecated Use `gap` instead */
+    spacing?: Gap;
     breakpoints?: MediaQueryBreakpoints;
     queries?: UseMediaQueries;
 };

package/components/flex/Container.js

@@ -3,7 +3,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "spacing", "breakpoints", "queries"];
+const _excluded = ["className", "style", "children", "element", "direction", "wrap", "sizeCount", "rowGap", "justify", "align", "alignSelf", "divider", "gap", "spacing", "breakpoints", "queries"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback } from 'react';
@@ -12,7 +12,7 @@ import Space from '../space/Space';
 import { Hr } from '../../elements';
 import useMedia from '../../shared/useMedia';
 import { getSpaceValue, isHeadingElement, renderWithSpacing } from './utils';
-const propNames = ['direction', 'wrap', 'justify', 'align', 'divider', 'spacing'];
+const propNames = ['direction', 'wrap', 'justify', 'align', 'divider', 'spacing', 'gap'];
 export function pickFlexContainerProps(props) {
   let defaults = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   let skip = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
@@ -22,6 +22,7 @@ export function pickFlexContainerProps(props) {
   })));
 }
 function FlexContainer(props) {
+  var _ref2;
   const {
       className,
       style,
@@ -35,11 +36,13 @@ function FlexContainer(props) {
       align = 'flex-start',
       alignSelf,
       divider = 'space',
-      spacing = 'small',
+      gap,
+      spacing: spacingProp,
       breakpoints,
       queries
     } = props,
     rest = _objectWithoutProperties(props, _excluded);
+  const spacing = (_ref2 = spacingProp !== null && spacingProp !== void 0 ? spacingProp : gap) !== null && _ref2 !== void 0 ? _ref2 : 'small';
   const childrenArray = wrapChildren(props, children);
   const hasHeading = childrenArray.some((child, i) => {
     const previousChild = childrenArray === null || childrenArray === void 0 ? void 0 : childrenArray[i - 1];
@@ -67,9 +70,9 @@ function FlexContainer(props) {
     const endSpacing = 0;
     let startSpacing = null;
     if (!isHeading && (divider === 'line' && !isFirst || divider === 'line-framed')) {
-      var _getSpaceValue, _getSpaceValue2;
+      var _getSpaceValue, _ref3, _getSpaceValue2;
       const spaceAboveLine = (_getSpaceValue = getSpaceValue(end, previousChild)) !== null && _getSpaceValue !== void 0 ? _getSpaceValue : spacing;
-      startSpacing = (_getSpaceValue2 = getSpaceValue(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : spacing;
+      startSpacing = (_ref3 = (_getSpaceValue2 = getSpaceValue(start, child)) !== null && _getSpaceValue2 !== void 0 ? _getSpaceValue2 : gap) !== null && _ref3 !== void 0 ? _ref3 : spacing;
       return React.createElement(React.Fragment, {
         key: `element-${i}`
       }, React.createElement(Hr, {
@@ -90,8 +93,8 @@ function FlexContainer(props) {
     if (isFirst && direction !== 'horizontal') {
       startSpacing = 0;
     } else {
-      var _ref2, _getSpaceValue3;
-      startSpacing = (_ref2 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref2 !== void 0 ? _ref2 : spacing;
+      var _ref4, _ref5, _getSpaceValue3;
+      startSpacing = (_ref4 = (_ref5 = (_getSpaceValue3 = getSpaceValue(start, child)) !== null && _getSpaceValue3 !== void 0 ? _getSpaceValue3 : getSpaceValue(end, previousChild)) !== null && _ref5 !== void 0 ? _ref5 : gap) !== null && _ref4 !== void 0 ? _ref4 : spacing;
     }
     if (React.isValidElement(previousChild) && (previousChild === null || previousChild === void 0 ? void 0 : (_previousChild$type = previousChild.type) === null || _previousChild$type === void 0 ? void 0 : _previousChild$type['_supportsSpacingProps']) === false) {
       startSpacing = 0;