@fremtind/jokul 6.1.0-next.4 → 6.1.0-next.5

package/styles/components.scss

@@ -28,6 +28,7 @@
 @use "./components/message" as message;
 @use "./components/modal" as modal;
 @use "./components/nav-link" as nav-link;
+@use "./components/notification-badge" as notification-badge;
 @use "./components/number-input" as number-input;
 @use "./components/beta/nav-link" as nav-link-beta;
 @use "./components/pagination" as pagination;

package/styles/jkl/_index.scss

@@ -9,6 +9,7 @@
 @forward "screens";
 @forward "shadows";
 @forward "spacing" hide $spacing, $combinations, $positions;
+@forward "states";
 @forward "tokens";
 @forward "typography" hide $text-styles;
 @forward "underline";

package/styles/jkl/_ornaments.scss

@@ -26,3 +26,11 @@
     outline: $thickness solid var(--jkl-color-border-strong);
     outline-offset: $offset;
 }
+
+@mixin hover-bg {
+    background-color: color-mix(
+        in srgb,
+        var(--background-color, transparent),
+        var(--hover-accent-color, var(--jkl-color-background-contrast)) var(--jkl-opacity-hover, 10%)
+    )
+}

package/styles/jkl/_states.scss

@@ -0,0 +1,45 @@
+@use "forced-colors";
+
+/// Demper en kontroll som er `disabled`.
+///
+/// Ligger kontrollen inne i en annen dempet kontroll – en checkbox i et InputPanel, en radio i en
+/// SegmentedControl – skal bare den ytterste dempes, ellers multipliseres opasitetene til 25 %.
+/// Mixinen setter derfor `--jkl-nested-disabled-opacity: 1` på etterkommerne sine, men aldri på
+/// seg selv: leser elementet sin egen deklarasjon blir ingenting dempet.
+/// @param {Number} $opacity [0.5] - Opasitet når kontrollen er den ytterste dempede.
+@mixin disabled-control($opacity: 0.5) {
+    opacity: var(--jkl-nested-disabled-opacity, #{$opacity});
+    cursor: not-allowed;
+
+    & * {
+        --jkl-nested-disabled-opacity: 1;
+        // Barn som setter egen cursor (label, input, knapp) arver ikke wrapperens
+        cursor: not-allowed;
+    }
+
+    @include forced-colors.forced-colors-mode {
+        opacity: 1;
+        color: GrayText;
+        border-color: GrayText;
+    }
+}
+
+/// Treffer begge måtene en kontroll kan være utilgjengelig.
+///
+/// `aria-disabled` brukes der elementet må beholde fokus og bli annonsert av skjermlesere –
+/// pagination-piler og menyvalg – siden native `disabled` tar det ut av tab-rekkefølgen.
+@mixin disabled-selectors {
+    &:disabled,
+    &[aria-disabled="true"] {
+        @content;
+    }
+}
+
+/// Avhenger av at elementet leser `--border-color` og `--background-color`,
+/// slik `wrapper-styles` i shared-input-styles gjør.
+@mixin read-only-control {
+    --border-color: var(--jkl-color-border-subdued);
+    --background-color: transparent;
+
+    cursor: default;
+}

package/styles/jkl/_tokens.scss

@@ -58,6 +58,7 @@ $color-error-text-on-contrast: var(--jkl-color-error-text-on-contrast) !default;
 $color-error-border-default: var(--jkl-color-error-border-default) !default;
 $color-error-border-subdued: var(--jkl-color-error-border-subdued) !default;
 $color-error-border-strong: var(--jkl-color-error-border-strong) !default;
+$opacity-hover: var(--jkl-opacity-hover) !default;
 $unit-0: var(--jkl-unit-0) !default;
 $unit-10: var(--jkl-unit-10) !default;
 $unit-15: var(--jkl-unit-15) !default;
@@ -253,6 +254,9 @@ $tokens: (
       )
     )
   ),
+  'opacity': (
+    'hover': $opacity-hover
+  ),
   'unit': (
     '0': $unit-0,
     '10': $unit-10,

package/styles/shared/input/shared-input-styles.scss

@@ -55,6 +55,27 @@
         }
     }
 
+    // Barnekombinatoren holder hooken unna kontroller som ligger dypere i wrapperen –
+    // kalenderen i DateInput har disabled dag-inputs for datoer utenfor min/max.
+    &:has(> :is(input, textarea):disabled) {
+        @include jkl.disabled-control;
+    }
+
+    // En disabled input er også `:read-only`, så den må ekskluderes eksplisitt.
+    &:has(> :is(input, textarea):read-only:not(:disabled)) {
+        @include jkl.read-only-control;
+
+        &:hover,
+        &:focus-within,
+        &:has([data-focused="true"]) {
+            --border-color: var(--jkl-color-border-subdued);
+            --background-color: transparent;
+
+            box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+            0 0 0 jkl.rem(1px) transparent;
+        }
+    }
+
     @include jkl.keyboard-navigation {
         &:has(.jkl-text-input__input:focus-visible),
         &:has(.jkl-text-area__text-area:focus-visible) {

package/styles/theme/_color-mode.scss

@@ -0,0 +1,62 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [data-color="warning"] {
+        --jkl-color-background-page: var(--jkl-color-warning-background-page);
+        --jkl-color-background-container: var(--jkl-color-warning-background-container);
+        --jkl-color-background-container-accent: var(--jkl-color-warning-background-container-accent);
+        --jkl-color-background-contrast: var(--jkl-color-warning-background-contrast);
+        --jkl-color-text-default: var(--jkl-color-warning-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-warning-text-subdued);
+        --jkl-color-text-accent: var(--jkl-color-warning-text-accent);
+        --jkl-color-text-on-contrast: var(--jkl-color-warning-text-on-contrast);
+        --jkl-color-border-default: var(--jkl-color-warning-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-warning-border-subdued);
+        --jkl-color-border-strong: var(--jkl-color-warning-border-strong);
+    }
+
+    [data-color="success"] {
+        --jkl-color-background-page: var(--jkl-color-success-background-page);
+        --jkl-color-background-container: var(--jkl-color-success-background-container);
+        --jkl-color-background-container-accent: var(--jkl-color-success-background-container-accent);
+        --jkl-color-background-contrast: var(--jkl-color-success-background-contrast);
+        --jkl-color-text-default: var(--jkl-color-success-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-success-text-subdued);
+        --jkl-color-text-accent: var(--jkl-color-success-text-accent);
+        --jkl-color-text-on-contrast: var(--jkl-color-success-text-on-contrast);
+        --jkl-color-border-default: var(--jkl-color-success-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-success-border-subdued);
+        --jkl-color-border-strong: var(--jkl-color-success-border-strong);
+    }
+
+    [data-color="info"] {
+        --jkl-color-background-page: var(--jkl-color-info-background-page);
+        --jkl-color-background-container: var(--jkl-color-info-background-container);
+        --jkl-color-background-container-accent: var(--jkl-color-info-background-container-accent);
+        --jkl-color-background-contrast: var(--jkl-color-info-background-contrast);
+        --jkl-color-text-default: var(--jkl-color-info-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-info-text-subdued);
+        --jkl-color-text-accent: var(--jkl-color-info-text-accent);
+        --jkl-color-text-on-contrast: var(--jkl-color-info-text-on-contrast);
+        --jkl-color-border-default: var(--jkl-color-info-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-info-border-subdued);
+        --jkl-color-border-strong: var(--jkl-color-info-border-strong);
+    }
+
+    [data-color="error"] {
+        --jkl-color-background-page: var(--jkl-color-error-background-page);
+        --jkl-color-background-container: var(--jkl-color-error-background-container);
+        --jkl-color-background-container-accent: var(--jkl-color-error-background-container-accent);
+        --jkl-color-background-contrast: var(--jkl-color-error-background-contrast);
+        --jkl-color-text-default: var(--jkl-color-error-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-error-text-subdued);
+        --jkl-color-text-accent: var(--jkl-color-error-text-accent);
+        --jkl-color-text-on-contrast: var(--jkl-color-error-text-on-contrast);
+        --jkl-color-border-default: var(--jkl-color-error-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-error-border-subdued);
+        --jkl-color-border-strong: var(--jkl-color-error-border-strong);
+    }
+}

package/styles/theme/_color-scheme.scss

@@ -7,118 +7,61 @@
     :root {
         color-scheme: light dark;
 
-        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
-        --jkl-color-background-page: #F3F0ED;
         --jkl-color-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-background-container: #FFFFFF;
         --jkl-color-background-container: light-dark(#FFFFFF, #262221);
-        --jkl-color-background-container-accent: #E4DFD8;
         --jkl-color-background-container-accent: light-dark(#E4DFD8, #3C3434);
-        --jkl-color-background-contrast: #262221;
         --jkl-color-background-contrast: light-dark(#262221, #F3F0ED);
-        --jkl-color-text-default: #0E0D0C;
         --jkl-color-text-default: light-dark(#0E0D0C, #FFFFFF);
-        --jkl-color-text-subdued: #636060;
         --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-text-accent: #0E0D0C;
         --jkl-color-text-accent: light-dark(#0E0D0C, #FFFFFF);
-        --jkl-color-text-on-contrast: #FFFFFF;
         --jkl-color-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-border-default: #636060;
         --jkl-color-border-default: light-dark(#636060, #C8C5C3);
-        --jkl-color-border-subdued: #C8C5C3;
         --jkl-color-border-subdued: light-dark(#C8C5C3, #636060);
-        --jkl-color-border-strong: #0E0D0C;
         --jkl-color-border-strong: light-dark(#0E0D0C, #FFFFFF);
-        --jkl-color-warning-background-page: #F3F0ED;
         --jkl-color-warning-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-warning-background-container: #EED9C3;
         --jkl-color-warning-background-container: light-dark(#EED9C3, #48351E);
-        --jkl-color-warning-background-container-accent: #E4BC8A;
         --jkl-color-warning-background-container-accent: light-dark(#E4BC8A, #61492D);
-        --jkl-color-warning-background-contrast: #D3770B;
         --jkl-color-warning-background-contrast: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-text-default: #522E04;
         --jkl-color-warning-text-default: light-dark(#522E04, #FDECD8);
-        --jkl-color-warning-text-subdued: #636060;
         --jkl-color-warning-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-warning-text-accent: #D3770B;
         --jkl-color-warning-text-accent: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-text-on-contrast: #FFFFFF;
         --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-warning-border-default: #D3770B;
         --jkl-color-warning-border-default: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-border-subdued: #E4BC8A;
         --jkl-color-warning-border-subdued: light-dark(#E4BC8A, #61492D);
-        --jkl-color-warning-border-strong: #522E04;
         --jkl-color-warning-border-strong: light-dark(#522E04, #FDECD8);
-        --jkl-color-success-background-page: #F3F0ED;
         --jkl-color-success-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-success-background-container: #D2E9CB;
         --jkl-color-success-background-container: light-dark(#D2E9CB, #334D34);
-        --jkl-color-success-background-container-accent: #B7CFAF;
         --jkl-color-success-background-container-accent: light-dark(#B7CFAF, #3F5F41);
-        --jkl-color-success-background-contrast: #24753A;
         --jkl-color-success-background-contrast: light-dark(#24753A, #81E49C);
-        --jkl-color-success-text-default: #0A430D;
         --jkl-color-success-text-default: light-dark(#0A430D, #DCF9E0);
-        --jkl-color-success-text-subdued: #636060;
         --jkl-color-success-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-success-text-accent: #24753A;
         --jkl-color-success-text-accent: light-dark(#24753A, #81E49C);
-        --jkl-color-success-text-on-contrast: #FFFFFF;
         --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-success-border-default: #24753A;
         --jkl-color-success-border-default: light-dark(#24753A, #81E49C);
-        --jkl-color-success-border-subdued: #B7CFAF;
         --jkl-color-success-border-subdued: light-dark(#B7CFAF, #3F5F41);
-        --jkl-color-success-border-strong: #0A430D;
         --jkl-color-success-border-strong: light-dark(#0A430D, #DCF9E0);
-        --jkl-color-info-background-page: #F3F0ED;
         --jkl-color-info-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-info-background-container: #D3D3F6;
         --jkl-color-info-background-container: light-dark(#D3D3F6, #35355B);
-        --jkl-color-info-background-container-accent: #B5B5EB;
         --jkl-color-info-background-container-accent: light-dark(#B5B5EB, #4B4B89);
-        --jkl-color-info-background-contrast: #4646D1;
         --jkl-color-info-background-contrast: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-text-default: #111145;
         --jkl-color-info-text-default: light-dark(#111145, #D8D8FD);
-        --jkl-color-info-text-subdued: #636060;
         --jkl-color-info-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-info-text-accent: #4646D1;
         --jkl-color-info-text-accent: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-text-on-contrast: #FFFFFF;
         --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-info-border-default: #4646D1;
         --jkl-color-info-border-default: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-border-subdued: #B5B5EB;
         --jkl-color-info-border-subdued: light-dark(#B5B5EB, #4B4B89);
-        --jkl-color-info-border-strong: #111145;
         --jkl-color-info-border-strong: light-dark(#111145, #D8D8FD);
-        --jkl-color-error-background-page: #F3F0ED;
         --jkl-color-error-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-error-background-container: #F0D6D6;
         --jkl-color-error-background-container: light-dark(#F0D6D6, #4C2A28);
-        --jkl-color-error-background-container-accent: #E4B7B6;
         --jkl-color-error-background-container-accent: light-dark(#E4B7B6, #6A3C39);
-        --jkl-color-error-background-contrast: #B32424;
         --jkl-color-error-background-contrast: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-text-default: #4A0D0D;
         --jkl-color-error-text-default: light-dark(#4A0D0D, #FCD9D9);
-        --jkl-color-error-text-subdued: #636060;
         --jkl-color-error-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-error-text-accent: #B32424;
         --jkl-color-error-text-accent: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-text-on-contrast: #FFFFFF;
         --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-error-border-default: #B32424;
         --jkl-color-error-border-default: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-border-subdued: #E4B7B6;
         --jkl-color-error-border-subdued: light-dark(#E4B7B6, #6A3C39);
-        --jkl-color-error-border-strong: #4A0D0D;
         --jkl-color-error-border-strong: light-dark(#4A0D0D, #FCD9D9);
-        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     }
 
     [data-theme="light"] {
@@ -128,4 +71,64 @@
     [data-theme="dark"] {
         color-scheme: dark;
     }
+
+    @supports not (color: light-dark(#000, #fff)) {
+        :root {
+            --jkl-color-background-page: #F3F0ED;
+            --jkl-color-background-container: #FFFFFF;
+            --jkl-color-background-container-accent: #E4DFD8;
+            --jkl-color-background-contrast: #262221;
+            --jkl-color-text-default: #0E0D0C;
+            --jkl-color-text-subdued: #636060;
+            --jkl-color-text-accent: #0E0D0C;
+            --jkl-color-text-on-contrast: #FFFFFF;
+            --jkl-color-border-default: #636060;
+            --jkl-color-border-subdued: #C8C5C3;
+            --jkl-color-border-strong: #0E0D0C;
+            --jkl-color-warning-background-page: #F3F0ED;
+            --jkl-color-warning-background-container: #EED9C3;
+            --jkl-color-warning-background-container-accent: #E4BC8A;
+            --jkl-color-warning-background-contrast: #D3770B;
+            --jkl-color-warning-text-default: #522E04;
+            --jkl-color-warning-text-subdued: #636060;
+            --jkl-color-warning-text-accent: #D3770B;
+            --jkl-color-warning-text-on-contrast: #FFFFFF;
+            --jkl-color-warning-border-default: #D3770B;
+            --jkl-color-warning-border-subdued: #E4BC8A;
+            --jkl-color-warning-border-strong: #522E04;
+            --jkl-color-success-background-page: #F3F0ED;
+            --jkl-color-success-background-container: #D2E9CB;
+            --jkl-color-success-background-container-accent: #B7CFAF;
+            --jkl-color-success-background-contrast: #24753A;
+            --jkl-color-success-text-default: #0A430D;
+            --jkl-color-success-text-subdued: #636060;
+            --jkl-color-success-text-accent: #24753A;
+            --jkl-color-success-text-on-contrast: #FFFFFF;
+            --jkl-color-success-border-default: #24753A;
+            --jkl-color-success-border-subdued: #B7CFAF;
+            --jkl-color-success-border-strong: #0A430D;
+            --jkl-color-info-background-page: #F3F0ED;
+            --jkl-color-info-background-container: #D3D3F6;
+            --jkl-color-info-background-container-accent: #B5B5EB;
+            --jkl-color-info-background-contrast: #4646D1;
+            --jkl-color-info-text-default: #111145;
+            --jkl-color-info-text-subdued: #636060;
+            --jkl-color-info-text-accent: #4646D1;
+            --jkl-color-info-text-on-contrast: #FFFFFF;
+            --jkl-color-info-border-default: #4646D1;
+            --jkl-color-info-border-subdued: #B5B5EB;
+            --jkl-color-info-border-strong: #111145;
+            --jkl-color-error-background-page: #F3F0ED;
+            --jkl-color-error-background-container: #F0D6D6;
+            --jkl-color-error-background-container-accent: #E4B7B6;
+            --jkl-color-error-background-contrast: #B32424;
+            --jkl-color-error-text-default: #4A0D0D;
+            --jkl-color-error-text-subdued: #636060;
+            --jkl-color-error-text-accent: #B32424;
+            --jkl-color-error-text-on-contrast: #FFFFFF;
+            --jkl-color-error-border-default: #B32424;
+            --jkl-color-error-border-subdued: #E4B7B6;
+            --jkl-color-error-border-strong: #4A0D0D;
+        }
+    }
 }

package/styles/theme/_data-theme.scss

@@ -0,0 +1,21 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    :root,
+    [data-theme="light"] {
+        --jkl-opacity-hover: 10%;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        :root:not([data-theme="light"]) {
+            --jkl-opacity-hover: 15%;
+        }
+    }
+
+    [data-theme="dark"] {
+        --jkl-opacity-hover: 15%;
+    }
+}

package/styles/theme/_index.scss

@@ -1,6 +1,8 @@
 @forward "fonts";
 @forward "dynamic-spacing";
 @forward "color-scheme";
+@forward "color-mode";
 @forward "size";
+@forward "data-theme";
 @forward "tokens";
 @forward "brands";

package/styles/theme/_tokens.scss

@@ -80,8 +80,8 @@
         --jkl-spacing-2xl: var(--jkl-spacing-104);
         --jkl-text-style-title: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
         --jkl-text-style-title-small: var(--jkl-font-weight-normal) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-        --jkl-text-style-heading-1: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-        --jkl-text-style-heading-2: var(--jkl-font-weight-normal) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+        --jkl-text-style-heading-1: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-display);
+        --jkl-text-style-heading-2: var(--jkl-font-weight-normal) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-display);
         --jkl-text-style-heading-3: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
         --jkl-text-style-heading-4: var(--jkl-font-weight-bold) var(--jkl-font-size-4)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
         --jkl-text-style-heading-5: var(--jkl-font-weight-bold) var(--jkl-font-size-3)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);

package/styles/theme/brands/dnb/_color-scheme.scss

@@ -5,117 +5,120 @@
 
 @layer jokul.theme {
     [data-brand="dnb"] {
-        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
-        --jkl-color-background-page: #F8F8F8;
         --jkl-color-background-page: light-dark(#F8F8F8, #000000);
-        --jkl-color-background-container: #FFFFFF;
         --jkl-color-background-container: light-dark(#FFFFFF, #2C2C2E);
-        --jkl-color-background-container-accent: #D8F3EC;
         --jkl-color-background-container-accent: light-dark(#D8F3EC, #023939);
-        --jkl-color-background-contrast: #007272;
         --jkl-color-background-contrast: light-dark(#007272, #A5E1D2);
-        --jkl-color-text-default: #333333;
         --jkl-color-text-default: light-dark(#333333, #ffffff);
-        --jkl-color-text-subdued: #6B6B6B;
         --jkl-color-text-subdued: light-dark(#6B6B6B, #9A9AA0);
-        --jkl-color-text-accent: #14555A;
         --jkl-color-text-accent: light-dark(#14555A, #A5E1D2);
-        --jkl-color-text-on-contrast: #ffffff;
         --jkl-color-text-on-contrast: light-dark(#ffffff, #023939);
-        --jkl-color-border-default: #007272;
         --jkl-color-border-default: light-dark(#007272, #A5E1D2);
-        --jkl-color-border-subdued: #CCCCCC;
         --jkl-color-border-subdued: light-dark(#CCCCCC, #48484A);
-        --jkl-color-border-strong: #007272;
         --jkl-color-border-strong: light-dark(#007272, #A5E1D2);
-        --jkl-color-warning-background-page: #F3F0ED;
         --jkl-color-warning-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-warning-background-container: #EED9C3;
         --jkl-color-warning-background-container: light-dark(#EED9C3, #48351E);
-        --jkl-color-warning-background-container-accent: #E4BC8A;
         --jkl-color-warning-background-container-accent: light-dark(#E4BC8A, #61492D);
-        --jkl-color-warning-background-contrast: #D3770B;
         --jkl-color-warning-background-contrast: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-text-default: #522E04;
         --jkl-color-warning-text-default: light-dark(#522E04, #FDECD8);
-        --jkl-color-warning-text-subdued: #636060;
         --jkl-color-warning-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-warning-text-accent: #D3770B;
         --jkl-color-warning-text-accent: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-text-on-contrast: #FFFFFF;
         --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-warning-border-default: #D3770B;
         --jkl-color-warning-border-default: light-dark(#D3770B, #EAA858);
-        --jkl-color-warning-border-subdued: #E4BC8A;
         --jkl-color-warning-border-subdued: light-dark(#E4BC8A, #61492D);
-        --jkl-color-warning-border-strong: #522E04;
         --jkl-color-warning-border-strong: light-dark(#522E04, #FDECD8);
-        --jkl-color-success-background-page: #F3F0ED;
         --jkl-color-success-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-success-background-container: #D2E9CB;
         --jkl-color-success-background-container: light-dark(#D2E9CB, #334D34);
-        --jkl-color-success-background-container-accent: #B7CFAF;
         --jkl-color-success-background-container-accent: light-dark(#B7CFAF, #3F5F41);
-        --jkl-color-success-background-contrast: #24753A;
         --jkl-color-success-background-contrast: light-dark(#24753A, #81E49C);
-        --jkl-color-success-text-default: #0A430D;
         --jkl-color-success-text-default: light-dark(#0A430D, #DCF9E0);
-        --jkl-color-success-text-subdued: #636060;
         --jkl-color-success-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-success-text-accent: #24753A;
         --jkl-color-success-text-accent: light-dark(#24753A, #81E49C);
-        --jkl-color-success-text-on-contrast: #FFFFFF;
         --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-success-border-default: #24753A;
         --jkl-color-success-border-default: light-dark(#24753A, #81E49C);
-        --jkl-color-success-border-subdued: #B7CFAF;
         --jkl-color-success-border-subdued: light-dark(#B7CFAF, #3F5F41);
-        --jkl-color-success-border-strong: #0A430D;
         --jkl-color-success-border-strong: light-dark(#0A430D, #DCF9E0);
-        --jkl-color-info-background-page: #F3F0ED;
         --jkl-color-info-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-info-background-container: #D3D3F6;
         --jkl-color-info-background-container: light-dark(#D3D3F6, #35355B);
-        --jkl-color-info-background-container-accent: #B5B5EB;
         --jkl-color-info-background-container-accent: light-dark(#B5B5EB, #4B4B89);
-        --jkl-color-info-background-contrast: #4646D1;
         --jkl-color-info-background-contrast: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-text-default: #111145;
         --jkl-color-info-text-default: light-dark(#111145, #D8D8FD);
-        --jkl-color-info-text-subdued: #636060;
         --jkl-color-info-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-info-text-accent: #4646D1;
         --jkl-color-info-text-accent: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-text-on-contrast: #FFFFFF;
         --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-info-border-default: #4646D1;
         --jkl-color-info-border-default: light-dark(#4646D1, #9A9AEB);
-        --jkl-color-info-border-subdued: #B5B5EB;
         --jkl-color-info-border-subdued: light-dark(#B5B5EB, #4B4B89);
-        --jkl-color-info-border-strong: #111145;
         --jkl-color-info-border-strong: light-dark(#111145, #D8D8FD);
-        --jkl-color-error-background-page: #F3F0ED;
         --jkl-color-error-background-page: light-dark(#F3F0ED, #0E0D0C);
-        --jkl-color-error-background-container: #F0D6D6;
         --jkl-color-error-background-container: light-dark(#F0D6D6, #4C2A28);
-        --jkl-color-error-background-container-accent: #E4B7B6;
         --jkl-color-error-background-container-accent: light-dark(#E4B7B6, #6A3C39);
-        --jkl-color-error-background-contrast: #B32424;
         --jkl-color-error-background-contrast: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-text-default: #4A0D0D;
         --jkl-color-error-text-default: light-dark(#4A0D0D, #FCD9D9);
-        --jkl-color-error-text-subdued: #636060;
         --jkl-color-error-text-subdued: light-dark(#636060, #C8C5C3);
-        --jkl-color-error-text-accent: #B32424;
         --jkl-color-error-text-accent: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-text-on-contrast: #FFFFFF;
         --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
-        --jkl-color-error-border-default: #B32424;
         --jkl-color-error-border-default: light-dark(#B32424, #F38C8C);
-        --jkl-color-error-border-subdued: #E4B7B6;
         --jkl-color-error-border-subdued: light-dark(#E4B7B6, #6A3C39);
-        --jkl-color-error-border-strong: #4A0D0D;
         --jkl-color-error-border-strong: light-dark(#4A0D0D, #FCD9D9);
-        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+
+    @supports not (color: light-dark(#000, #fff)) {
+        [data-brand="dnb"] {
+            --jkl-color-background-page: #F8F8F8;
+            --jkl-color-background-container: #FFFFFF;
+            --jkl-color-background-container-accent: #D8F3EC;
+            --jkl-color-background-contrast: #007272;
+            --jkl-color-text-default: #333333;
+            --jkl-color-text-subdued: #6B6B6B;
+            --jkl-color-text-accent: #14555A;
+            --jkl-color-text-on-contrast: #ffffff;
+            --jkl-color-border-default: #007272;
+            --jkl-color-border-subdued: #CCCCCC;
+            --jkl-color-border-strong: #007272;
+            --jkl-color-warning-background-page: #F3F0ED;
+            --jkl-color-warning-background-container: #EED9C3;
+            --jkl-color-warning-background-container-accent: #E4BC8A;
+            --jkl-color-warning-background-contrast: #D3770B;
+            --jkl-color-warning-text-default: #522E04;
+            --jkl-color-warning-text-subdued: #636060;
+            --jkl-color-warning-text-accent: #D3770B;
+            --jkl-color-warning-text-on-contrast: #FFFFFF;
+            --jkl-color-warning-border-default: #D3770B;
+            --jkl-color-warning-border-subdued: #E4BC8A;
+            --jkl-color-warning-border-strong: #522E04;
+            --jkl-color-success-background-page: #F3F0ED;
+            --jkl-color-success-background-container: #D2E9CB;
+            --jkl-color-success-background-container-accent: #B7CFAF;
+            --jkl-color-success-background-contrast: #24753A;
+            --jkl-color-success-text-default: #0A430D;
+            --jkl-color-success-text-subdued: #636060;
+            --jkl-color-success-text-accent: #24753A;
+            --jkl-color-success-text-on-contrast: #FFFFFF;
+            --jkl-color-success-border-default: #24753A;
+            --jkl-color-success-border-subdued: #B7CFAF;
+            --jkl-color-success-border-strong: #0A430D;
+            --jkl-color-info-background-page: #F3F0ED;
+            --jkl-color-info-background-container: #D3D3F6;
+            --jkl-color-info-background-container-accent: #B5B5EB;
+            --jkl-color-info-background-contrast: #4646D1;
+            --jkl-color-info-text-default: #111145;
+            --jkl-color-info-text-subdued: #636060;
+            --jkl-color-info-text-accent: #4646D1;
+            --jkl-color-info-text-on-contrast: #FFFFFF;
+            --jkl-color-info-border-default: #4646D1;
+            --jkl-color-info-border-subdued: #B5B5EB;
+            --jkl-color-info-border-strong: #111145;
+            --jkl-color-error-background-page: #F3F0ED;
+            --jkl-color-error-background-container: #F0D6D6;
+            --jkl-color-error-background-container-accent: #E4B7B6;
+            --jkl-color-error-background-contrast: #B32424;
+            --jkl-color-error-text-default: #4A0D0D;
+            --jkl-color-error-text-subdued: #636060;
+            --jkl-color-error-text-accent: #B32424;
+            --jkl-color-error-text-on-contrast: #FFFFFF;
+            --jkl-color-error-border-default: #B32424;
+            --jkl-color-error-border-subdued: #E4B7B6;
+            --jkl-color-error-border-strong: #4A0D0D;
+        }
     }
 }