@dnb/eufemia 10.30.2 → 10.31.0

package/es/components/checkbox/style/dnb-checkbox.css

@@ -11,11 +11,18 @@
 }
 
 .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;
   --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;
@@ -25,6 +32,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;
   --checkbox-color-background--active: lightgrey;
   --checkbox-color-border--active: transparent;
   --checkbox-color-gfx--hover: grey;
@@ -38,6 +46,15 @@
   --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;
+  --checkbox-color-background-indeterminate: grey;
+  --checkbox-color-gfx-indeterminate: darkgray;
+  --checkbox-color-background-indeterminate--active: grey;
+  --checkbox-color-border-indeterminate--active: white;
+  --checkbox-color-gfx-indeterminate--active: white;
   --checkbox-bounding--medium: 1.75, 1.75;
   display: inline-flex;
   flex-direction: column;
@@ -91,12 +108,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   z-index: 4;
   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 .dnb-checkbox__focus, .dnb-checkbox--large .dnb-checkbox__button {
   width: var(--checkbox-width--large);
   height: var(--checkbox-height--large);
-  border-radius: 0.25rem;
+  border-radius: var(--checkbox-border-radius);
 }
 .dnb-checkbox__gfx {
   position: absolute;
@@ -180,7 +197,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   background-color: var(--checkbox-color-background-on);
   border-color: var(--checkbox-color-border-on);
 }
-.dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:not([disabled]):not(:checked):not([data-checked=true]) ~ .dnb-checkbox__gfx {
   opacity: 0;
   transform: scale(0.8);
   color: var(--checkbox-color-gfx-off);
@@ -188,6 +205,33 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not(:checked):not([data-checked=true]) ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-off);
   border-color: var(--checkbox-color-border-off);
+  transition: background-color 100ms ease-out;
+}
+.dnb-checkbox__input ~ .dnb-checkbox__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;
+}
+.dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  transform: scale(1);
+  opacity: 1;
+}
+.dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__button {
+  background-color: transparent;
+  border-color: var(--checkbox-color-border-off);
+}
+.dnb-checkbox__input:indeterminate:hover ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked ~ .dnb-checkbox__gfx, .dnb-checkbox__input:indeterminate:checked:hover ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
+.dnb-checkbox--large .dnb-checkbox__input:indeterminate ~ .dnb-checkbox__indeterminate {
+  width: var(--checkbox-gfx-width__indeterminate--large);
+  height: var(--checkbox-gfx-height__indeterminate--large);
 }
 .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button, .dnb-checkbox__input[disabled][data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--disabled);
@@ -200,6 +244,12 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
   border-color: var(--checkbox-color-border-off--disabled);
   background-color: var(--checkbox-color-background-off--disabled);
 }
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx__indeterminate--disabled);
+}
+.dnb-checkbox__input[disabled]:indeterminate ~ .dnb-checkbox__gfx {
+  color: transparent;
+}
 .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background--active);
   border-color: var(--checkbox-color-border--active);
@@ -207,44 +257,54 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 .dnb-checkbox__input:not([disabled]):checked:active ~ .dnb-checkbox__gfx, .dnb-checkbox__input:not([disabled])[data-checked=true]:active ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx-on);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button {
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__button {
+  background-color: var(--checkbox-color-background-indeterminate--active);
+  border-color: var(--checkbox-color-border-indeterminate--active);
+}
+.dnb-checkbox__input:not([disabled]):indeterminate:active ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--active);
+}
+.dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__button {
   border-color: var(--checkbox-color-border-off--hover);
   background-color: var(--checkbox-color-background--hover);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx {
+.dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--hover);
 }
-.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-checkbox__button {
-  border-color: var(--checkbox-color-border-on--hover);
+.dnb-checkbox__input:not([disabled]):checked:hover ~ .dnb-checkbox__button, .dnb-checkbox__input:not([disabled])[data-checked=true]:hover ~ .dnb-checkbox__button {
+  border: var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button {
   border: none;
   background-color: var(--checkbox-color-background--focus);
 }
-html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx {
+html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--focus);
 }
-.dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__button .dnb-checkbox__focus, .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
 }
+.dnb-checkbox__input:not([disabled]):focus-visible ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--focus);
+}
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button {
   border: none;
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
   display: block;
   --border-color: var(--checkbox-color-border--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--checkbox-border-width);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button {
-  background-color: var(--checkbox-color-background--error-contrast);
+  background-color: var(--checkbox-color-background--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__button[data-checked=true] {
-  border-color: var(--checkbox-color-border--error);
+  border-color: var(--checkbox-color-border--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover ~ .dnb-checkbox__gfx {
-  color: var(--checkbox-color-gfx--error-contrast);
+  color: var(--checkbox-color-gfx--error--hover);
 }
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--error);
@@ -253,7 +313,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
   border: none;
   background-color: var(--checkbox-color-background--error-contrast);
   --border-color: var(--checkbox-color-border--error);
-  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  --border-width: calc(var(--checkbox-border-width--hover));
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -263,6 +323,23 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked ~ .dnb-checkbox__button, .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true] ~ .dnb-checkbox__button {
   background-color: var(--checkbox-color-background-on--error);
 }
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error-contrast);
+  background-color: var(--checkbox-color-gfx--error-contrast);
+  border-radius: var(--checkbox-border-radius);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx-indeterminate--error);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active) ~ .dnb-checkbox__indeterminate {
+  background-color: var(--checkbox-color-gfx--error--hover);
+}
+.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover ~ .dnb-checkbox__gfx {
+  color: var(--checkbox-color-gfx--error--hover);
+}
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button {
   border-color: var(--skeleton-color);
 }
@@ -271,4 +348,7 @@ html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:
 }
 .dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__gfx {
   color: var(--skeleton-color);
+}
+.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled] ~ .dnb-checkbox__indeterminate {
+  background-color: var(--skeleton-color);
 }

package/es/components/checkbox/style/dnb-checkbox.min.css

@@ -1 +1 @@
-:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.dnb-checkbox{--checkbox-width--large:2rem;--checkbox-height--large:2rem;--checkbox-border-width:0.125rem;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#000;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__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-checkbox__button,.dnb-checkbox__focus{border-radius:.25rem;height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:.25rem;height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):not(:focus):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled]):not(:focus)[data-checked=true]:hover~.dnb-checkbox__button{border-color:var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--focus-ring-width) + 0.0625rem);background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}
+:root{--checkbox-width--medium:1.5rem;--checkbox-height--medium:1.5rem}.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;--checkbox-color-gfx-on:#000;--checkbox-color-gfx-off:#fff;--checkbox-color-background-on:#fff;--checkbox-color-background-off:#fff;--checkbox-color-border-on:#000;--checkbox-color-border-off:#000;--checkbox-color-gfx--disabled:grey;--checkbox-color-background-on--disabled:#d3d3d3;--checkbox-color-background-off--disabled:#d3d3d3;--checkbox-color-border-on--disabled:grey;--checkbox-color-border-off--disabled:grey;--checkbox-color-gfx__indeterminate--disabled:grey;--checkbox-color-background--active:#d3d3d3;--checkbox-color-border--active:transparent;--checkbox-color-gfx--hover:grey;--checkbox-color-background--hover:#fff;--checkbox-color-border-on--hover:grey;--checkbox-color-border-off--hover:grey;--checkbox-color-gfx--focus:grey;--checkbox-color-background--focus:#d3d3d3;--checkbox-color-gfx--error:#fff0f5;--checkbox-color-gfx--error-contrast:red;--checkbox-color-background-on--error:red;--checkbox-color-background--error-contrast:#fff0f5;--checkbox-color-border--error:red;--checkbox-color-gfx-indeterminate--error:red;--checkbox-color-gfx--error--hover:red;--checkbox-color-background--error--hover:#fff0f5;--checkbox-color-border--error--hover:red;--checkbox-color-background-indeterminate:grey;--checkbox-color-gfx-indeterminate:#a9a9a9;--checkbox-color-background-indeterminate--active:grey;--checkbox-color-border-indeterminate--active:#fff;--checkbox-color-gfx-indeterminate--active:#fff;--checkbox-bounding--medium:1.75,1.75;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-checkbox,.dnb-checkbox__inner{display:inline-flex;flex-direction:column}.dnb-checkbox__inner{align-self:center}.dnb-checkbox__shell{align-items:center;display:flex;height:var(--checkbox-height--medium);justify-content:center;position:relative;-webkit-user-select:none;user-select:none;width:var(--checkbox-width--medium)}.dnb-checkbox--large .dnb-checkbox__shell{height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__button{border:var(--checkbox-border-width) solid transparent;display:inline-block}.dnb-checkbox__focus{display:none;outline:none}html[data-whatinput=keyboard] .dnb-checkbox__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-checkbox__button,.dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:calc(var(--checkbox-height--medium) - .25rem);position:relative;width:calc(var(--checkbox-width--medium) - .25rem);z-index:4}.dnb-checkbox--large .dnb-checkbox__button,.dnb-checkbox--large .dnb-checkbox__focus{border-radius:var(--checkbox-border-radius);height:var(--checkbox-height--large);width:var(--checkbox-width--large)}.dnb-checkbox__gfx{shape-rendering:geometricprecision;height:calc(var(--checkbox-height--medium) - .5rem);left:auto;position:absolute;top:auto;transition:opacity .2s ease-out,transform .2s ease-out;width:calc(var(--checkbox-width--medium) - .5rem);z-index:5}.dnb-checkbox--large{line-height:var(--checkbox-height--large)}.dnb-checkbox--large .dnb-checkbox__gfx{height:calc(var(--checkbox-height--large) - .5rem);width:calc(var(--checkbox-width--large) - .5rem)}.dnb-checkbox__input{border:0;height:var(--checkbox-height--medium);left:auto;margin:0;opacity:0;padding:0;position:absolute;top:auto;transform:scale(var(--checkbox-bounding--medium));width:var(--checkbox-width--medium);z-index:6}.dnb-checkbox--large .dnb-checkbox__input{height:var(--checkbox-height--large);transform:scale(1);width:var(--checkbox-width--large)}.dnb-checkbox__input:not([disabled]){cursor:pointer}.dnb-checkbox .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0}.dnb-checkbox__order{align-items:baseline;display:inline-flex}.dnb-checkbox__suffix{order:4}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-checkbox__inner{order:2}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-label{order:1;padding-right:.5rem}.dnb-checkbox--label-position-left .dnb-checkbox__order .dnb-form-status{margin-top:.5rem;order:3}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-checkbox__inner{order:1}.dnb-checkbox--label-position-right .dnb-checkbox__order .dnb-form-label{order:2;padding-left:.5rem}.dnb-checkbox--label-position-right .dnb-checkbox__order+.dnb-form-status{margin-top:.5rem;order:3;vertical-align:top}.dnb-checkbox__input:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on);opacity:1;transform:scale(1)}.dnb-checkbox__input:checked~.dnb-checkbox__button,.dnb-checkbox__input[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on);border-color:var(--checkbox-color-border-on)}.dnb-checkbox__input:not([disabled]):not(:checked):not([data-checked=true])~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-off);opacity:0;transform:scale(.8)}.dnb-checkbox__input:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off);border-color:var(--checkbox-color-border-off);transition:background-color .1s ease-out}.dnb-checkbox__input~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate);border-radius:var(--checkbox-gfx-border-radius__indeterminate);height:var(--checkbox-gfx-height__indeterminate);opacity:0;position:absolute;transform:scale(.85);transition:opacity .2s ease-out,transform .2s ease-out;width:var(--checkbox-gfx-width__indeterminate);z-index:5}.dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{opacity:1;transform:scale(1)}.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__button{background-color:transparent;border-color:var(--checkbox-color-border-off)}.dnb-checkbox__input:indeterminate:checked:hover~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:checked~.dnb-checkbox__gfx,.dnb-checkbox__input:indeterminate:hover~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox--large .dnb-checkbox__input:indeterminate~.dnb-checkbox__indeterminate{height:var(--checkbox-gfx-height__indeterminate--large);width:var(--checkbox-gfx-width__indeterminate--large)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__button,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--disabled);border-color:var(--checkbox-color-border-on--disabled)}.dnb-checkbox__input[disabled]:checked~.dnb-checkbox__gfx,.dnb-checkbox__input[disabled][data-checked=true]~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--disabled)}.dnb-checkbox__input[disabled]:not(:checked):not([data-checked=true])~.dnb-checkbox__button{background-color:var(--checkbox-color-background-off--disabled);border-color:var(--checkbox-color-border-off--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx__indeterminate--disabled)}.dnb-checkbox__input[disabled]:indeterminate~.dnb-checkbox__gfx{color:transparent}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button{background-color:var(--checkbox-color-background--active);border-color:var(--checkbox-color-border--active)}.dnb-checkbox__input:not([disabled]):checked:active~.dnb-checkbox__gfx,.dnb-checkbox__input:not([disabled])[data-checked=true]:active~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx-on)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__button{background-color:var(--checkbox-color-background-indeterminate--active);border-color:var(--checkbox-color-border-indeterminate--active)}.dnb-checkbox__input:not([disabled]):indeterminate:active~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--active)}.dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--hover);border-color:var(--checkbox-color-border-off--hover)}.dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--hover)}.dnb-checkbox__input:not([disabled]):checked:hover~.dnb-checkbox__button,.dnb-checkbox__input:not([disabled])[data-checked=true]:hover~.dnb-checkbox__button{border:var(--checkbox-border-width--hover) solid var(--checkbox-color-border-on--hover)}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button{background-color:var(--checkbox-color-background--focus);border:none}html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__input:not([disabled]):active~.dnb-checkbox__button .dnb-checkbox__focus,.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__button .dnb-checkbox__focus{display:block}.dnb-checkbox__input:not([disabled]):focus-visible~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--focus)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button{border:none}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active)~.dnb-checkbox__button .dnb-checkbox__focus{--border-color:var(--checkbox-color-border--error);--border-width:var(--checkbox-border-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);display:block}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button{background-color:var(--checkbox-color-background--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__button[data-checked=true]{border-color:var(--checkbox-color-border--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__button,html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus~.dnb-checkbox__button{--border-color:var(--checkbox-color-border--error);--border-width:calc(var(--checkbox-border-width--hover));background-color:var(--checkbox-color-background--error-contrast);border:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover):checked~.dnb-checkbox__button,.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):not(:hover)[data-checked=true]~.dnb-checkbox__button{background-color:var(--checkbox-color-background-on--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not([disabled]):not(:active):not(:hover)~.dnb-checkbox__gfx{background-color:var(--checkbox-color-gfx--error-contrast);border-radius:var(--checkbox-border-radius);color:var(--checkbox-color-gfx--error-contrast)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:not(:active):not(:hover)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:not(:indeterminate)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx-indeterminate--error)}.dnb-checkbox__status--error .dnb-checkbox__input:indeterminate:hover:not(:active)~.dnb-checkbox__indeterminate{background-color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:active):hover~.dnb-checkbox__gfx{color:var(--checkbox-color-gfx--error--hover)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button{border-color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__button:before{border-radius:0}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__gfx{color:var(--skeleton-color)}.dnb-checkbox.dnb-skeleton .dnb-checkbox__input[disabled]~.dnb-checkbox__indeterminate{background-color:var(--skeleton-color)}

package/es/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);
@@ -241,15 +260,58 @@
   }
 
   // Off
-  &__input:not(:checked):not([data-checked='true']) ~ &__gfx {
+  &__input:not([disabled]):not(:checked):not([data-checked='true'])
+    ~ &__gfx {
     opacity: 0;
     transform: scale(0.8);
     // 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 +322,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 +334,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 +358,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:not([disabled]):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 +428,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 +458,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 +479,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/es/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;
 }