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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "6.1.0-next.4",
+  "version": "6.1.0-next.5",
   "type": "module",
   "engines": {
     "node": "^22.22.2 || ^24.15.0 || ^26.0.0"

package/styles/base.css

@@ -402,118 +402,61 @@
 @layer jokul.theme {
   :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] {
     color-scheme: light;
@@ -521,6 +464,122 @@
   [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;
+    }
+  }
+}
+/**
+ * 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);
+  }
 }
 /**
  * Do not edit directly, this file was auto-generated.
@@ -571,6 +630,23 @@
     --jkl-font-size-10: 48px;
   }
 }
+/**
+ * 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%;
+  }
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -651,8 +727,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);
@@ -673,118 +749,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;
+    }
   }
 }
 /**