npm - @dnb/eufemia - Versions diffs - 10.30.2 → 10.31.0 - Mend

@dnb/eufemia 10.30.2 → 10.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (294) hide show

package/style/themes/theme-ui/ui-theme-components.css CHANGED Viewed

@@ -2537,11 +2537,18 @@ button.dnb-button::-moz-focus-inner {
 }
 .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;
@@ -2551,6 +2558,7 @@ button.dnb-button::-moz-focus-inner {
   --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;
@@ -2564,6 +2572,15 @@ button.dnb-button::-moz-focus-inner {
   --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;
@@ -2617,12 +2634,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;
@@ -2706,7 +2723,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);
@@ -2714,6 +2731,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);
@@ -2726,6 +2770,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);
@@ -2733,44 +2783,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);
@@ -2779,7 +2839,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;
 }
@@ -2789,6 +2849,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);
 }
@@ -2798,6 +2875,9 @@ 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);
+}
 /*
 * DatePicker component
@@ -10698,7 +10778,7 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
 */
 .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;
@@ -10708,19 +10788,37 @@ html:not([data-whatintent=touch]) .dnb-button--input-button.dnb-button--secondar
   --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;
 }
 /*