@fremtind/jokul 5.0.0-next.2 → 5.0.0-next.4

package/styles/base.css

@@ -261,11 +261,11 @@
 }
 @layer jokul.theme {
   @font-face {
-    font-family: "Fremtind Grotesk";
+    font-family: Jokul;
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("/fonts/FremtindGrotesk-Regular-Web.woff2") format("woff2"), url("/fonts/FremtindGrotesk-Regular-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
@@ -278,11 +278,11 @@
     line-gap-override: 32%;
   }
   @font-face {
-    font-family: "Fremtind Grotesk";
+    font-family: Jokul;
     font-display: fallback;
     font-weight: 700;
     font-style: normal;
-    src: url("/fonts/FremtindGrotesk-Bold-Web.woff2") format("woff2"), url("/fonts/FremtindGrotesk-Bold-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
@@ -295,11 +295,11 @@
     line-gap-override: 28%;
   }
   @font-face {
-    font-family: "Fremtind Grotesk";
+    font-family: Jokul;
     font-display: fallback;
     font-weight: 400;
     font-style: italic;
-    src: url("/fonts/FremtindGrotesk-Italic-Web.woff2") format("woff2"), url("/fonts/FremtindGrotesk-Italic-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
@@ -312,11 +312,11 @@
     line-gap-override: 28%;
   }
   @font-face {
-    font-family: "Fremtind Grotesk";
+    font-family: Jokul;
     font-display: fallback;
     font-weight: 700;
     font-style: italic;
-    src: url("/fonts/FremtindGrotesk-BoldItalic-Web.woff2") format("woff2"), url("/fonts/FremtindGrotesk-BoldItalic-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Fallback";
@@ -329,11 +329,11 @@
     line-gap-override: 28%;
   }
   @font-face {
-    font-family: "Fremtind Grotesk Display";
+    font-family: "Jokul Display";
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("/fonts/FremtindGrotesk-Display-Web.woff2") format("woff2"), url("/fonts/FremtindGrotesk-Display-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Arial Display Fallback";
@@ -346,11 +346,11 @@
     line-gap-override: 40%;
   }
   @font-face {
-    font-family: "Fremtind Grotesk Mono";
+    font-family: "Jokul Mono";
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("/fonts/FremtindGroteskMono-Regular-Web.woff2") format("woff2"), url("/fonts/FremtindGroteskMono-Regular-Web.woff") format("woff");
+    src: url("/fonts/InterVariable.woff2") format("woff2");
   }
   @font-face {
     font-family: "Adjusted Courier New Fallback";
@@ -363,13 +363,13 @@
     line-gap-override: 27%;
   }
   @font-face {
-    font-family: "Fremtind Material Symbols";
+    font-family: "Jokul Material Symbols";
     font-weight: 300 400;
     font-style: normal;
     src: url("/fonts/Fremtind-Material-Symbols.woff2") format("woff2");
   }
   @font-face {
-    font-family: "Fremtind Material Symbols Fallback";
+    font-family: "Jokul Material Symbols Fallback";
     src: local(courier new);
     font-weight: 300 400;
     font-style: normal;
@@ -601,6 +601,147 @@
     color-scheme: dark;
   }
 }
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root,
+  [data-size],
+  [data-size=medium] {
+    --jkl-unit-10: 8px;
+    --jkl-unit-base: 8px;
+    --jkl-font-size-1: 14px;
+    --jkl-font-size-2: 16px;
+    --jkl-font-size-3: 18px;
+    --jkl-font-size-4: 20px;
+    --jkl-font-size-5: 24px;
+    --jkl-font-size-6: 28px;
+    --jkl-font-size-7: 32px;
+    --jkl-font-size-8: 40px;
+    --jkl-font-size-9: 48px;
+    --jkl-font-size-10: 56px;
+  }
+  [data-size=small] {
+    --jkl-unit-10: 5px;
+    --jkl-unit-base: 5px;
+    --jkl-font-size-1: 12px;
+    --jkl-font-size-2: 14px;
+    --jkl-font-size-3: 16px;
+    --jkl-font-size-4: 18px;
+    --jkl-font-size-5: 20px;
+    --jkl-font-size-6: 24px;
+    --jkl-font-size-7: 28px;
+    --jkl-font-size-8: 32px;
+    --jkl-font-size-9: 40px;
+    --jkl-font-size-10: 48px;
+  }
+  [data-size=large] {
+    --jkl-unit-10: 11px;
+    --jkl-unit-base: 11px;
+    --jkl-font-size-1: 14px;
+    --jkl-font-size-2: 16px;
+    --jkl-font-size-3: 18px;
+    --jkl-font-size-4: 20px;
+    --jkl-font-size-5: 24px;
+    --jkl-font-size-6: 28px;
+    --jkl-font-size-7: 32px;
+    --jkl-font-size-8: 40px;
+    --jkl-font-size-9: 48px;
+    --jkl-font-size-10: 56px;
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  :root,
+  [data-size],
+  [data-theme] {
+    --jkl-unit-0: 0;
+    --jkl-spacing-0: 0rem;
+    --jkl-spacing-2: 0.125rem;
+    --jkl-spacing-4: 0.25rem;
+    --jkl-spacing-8: 0.5rem;
+    --jkl-spacing-12: 0.75rem;
+    --jkl-spacing-16: 1rem;
+    --jkl-spacing-24: 1.5rem;
+    --jkl-spacing-32: 2rem;
+    --jkl-spacing-40: 2.5rem;
+    --jkl-spacing-64: 4rem;
+    --jkl-spacing-104: 6.5rem;
+    --jkl-spacing-168: 10.5rem;
+    --jkl-spacing-none: 0;
+    --jkl-border-width-1: 0.0625rem;
+    --jkl-border-width-2: 0.125rem;
+    --jkl-border-width-3: 0.1875rem;
+    --jkl-border-radius-none: 0;
+    --jkl-border-radius-xs: 0.25rem;
+    --jkl-border-radius-s: 0.5rem;
+    --jkl-border-radius-m: 0.75rem;
+    --jkl-border-radius-l: 1rem;
+    --jkl-border-radius-full: 9999px;
+    --jkl-breakpoint-small: 0;
+    --jkl-breakpoint-medium: 680px;
+    --jkl-breakpoint-large: 1200px;
+    --jkl-breakpoint-xl: 1600px;
+    --jkl-motion-timing-energetic: 75ms;
+    --jkl-motion-timing-snappy: 100ms;
+    --jkl-motion-timing-productive: 150ms;
+    --jkl-motion-timing-polite: 200ms;
+    --jkl-motion-timing-expressive: 250ms;
+    --jkl-motion-timing-lazy: 400ms;
+    --jkl-motion-easing-standard: ease;
+    --jkl-motion-easing-entrance: ease-out;
+    --jkl-motion-easing-exit: ease-in;
+    --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
+    --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
+    --jkl-font-weight-normal: 400;
+    --jkl-font-weight-bold: 700;
+    --jkl-font-family-regular: "Jokul", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "Jokul Display", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Jokul Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+    --jkl-line-height-flush: 1;
+    --jkl-line-height-tight: 1.3;
+    --jkl-line-height-relaxed: 1.6;
+    --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
+    --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
+    --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
+    --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
+    --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
+    --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
+    --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
+    --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
+    --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
+    --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
+    --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
+    --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
+    --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
+    --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
+    --jkl-unit-02: calc(var(--jkl-unit-base) * 0.25);
+    --jkl-unit-05: calc(var(--jkl-unit-base) * 0.5);
+    --jkl-spacing-2xs: var(--jkl-spacing-4);
+    --jkl-spacing-xs: var(--jkl-spacing-8);
+    --jkl-spacing-s: var(--jkl-spacing-16);
+    --jkl-spacing-m: var(--jkl-spacing-24);
+    --jkl-spacing-l: var(--jkl-spacing-40);
+    --jkl-spacing-xl: var(--jkl-spacing-64);
+    --jkl-spacing-2xl: var(--jkl-spacing-104);
+    --jkl-text-style-title: var(--jkl-font-weight-normal) var(--jkl-font-size-10)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-title-small: var(--jkl-font-weight-normal) var(--jkl-font-size-9)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-1: var(--jkl-font-weight-normal) var(--jkl-font-size-8)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-2: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-3: var(--jkl-font-weight-bold) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-4: var(--jkl-font-weight-bold) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-heading-5: var(--jkl-font-weight-bold) var(--jkl-font-size-4)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-paragraph-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
+    --jkl-text-style-text-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+    --jkl-text-style-text-micro: var(--jkl-font-weight-normal) var(--jkl-font-size-1)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+  }
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -718,6 +859,44 @@
     /* stylelint-enable declaration-block-no-duplicate-custom-properties */
   }
 }
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Medium.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Sans";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNB-Bold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "DNB Mono";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/dnb/DNBMono-Regular.woff2") format("woff2");
+  }
+  [data-brand=dnb] {
+    --jkl-font-family-regular: "DNB Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "DNB Sans", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "DNB Mono", "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+  }
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -835,6 +1014,44 @@
     /* stylelint-enable declaration-block-no-duplicate-custom-properties */
   }
 }
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 300;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Light.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Regular.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 600;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-SemiBold.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Open Sans";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/eika/OpenSans-Bold.woff2") format("woff2");
+  }
+  [data-brand=eika] {
+    --jkl-font-family-regular: "Open Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "Open Sans", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
+  }
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */
@@ -956,141 +1173,186 @@
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.theme {
-  :root,
-  [data-size],
-  [data-size=medium] {
-    --jkl-unit-10: 8px;
-    --jkl-unit-base: 8px;
-    --jkl-font-size-1: 14px;
-    --jkl-font-size-2: 16px;
-    --jkl-font-size-3: 18px;
-    --jkl-font-size-4: 20px;
-    --jkl-font-size-5: 24px;
-    --jkl-font-size-6: 28px;
-    --jkl-font-size-7: 32px;
-    --jkl-font-size-8: 40px;
-    --jkl-font-size-9: 48px;
-    --jkl-font-size-10: 56px;
+  @font-face {
+    font-family: "SpareBank1 Sans";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Regular-Web.woff2") format("woff2");
   }
-  [data-size=small] {
-    --jkl-unit-10: 5px;
-    --jkl-unit-base: 5px;
-    --jkl-font-size-1: 12px;
-    --jkl-font-size-2: 14px;
-    --jkl-font-size-3: 16px;
-    --jkl-font-size-4: 18px;
-    --jkl-font-size-5: 20px;
-    --jkl-font-size-6: 24px;
-    --jkl-font-size-7: 28px;
-    --jkl-font-size-8: 32px;
-    --jkl-font-size-9: 40px;
-    --jkl-font-size-10: 48px;
+  @font-face {
+    font-family: "SpareBank1 Sans";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Medium-Web.woff2") format("woff2");
   }
-  [data-size=large] {
-    --jkl-unit-10: 11px;
-    --jkl-unit-base: 11px;
-    --jkl-font-size-1: 14px;
-    --jkl-font-size-2: 16px;
-    --jkl-font-size-3: 18px;
-    --jkl-font-size-4: 20px;
-    --jkl-font-size-5: 24px;
-    --jkl-font-size-6: 28px;
-    --jkl-font-size-7: 32px;
-    --jkl-font-size-8: 40px;
-    --jkl-font-size-9: 48px;
-    --jkl-font-size-10: 56px;
+  @font-face {
+    font-family: "SpareBank1 Title";
+    font-display: fallback;
+    font-weight: 500;
+    font-style: normal;
+    src: url("/fonts/brands/sparebank1/SpareBank1-Title-Medium-Web.woff2") format("woff2");
+  }
+  [data-brand=sparebank1] {
+    --jkl-font-family-regular: "SpareBank1 Sans", "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: "SpareBank1 Title", "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: "Adjusted Courier New Fallback", -apple-system, blinkmacsystemfont, monospace;
   }
 }
 /**
  * Do not edit directly, this file was auto-generated.
  */
 @layer jokul.theme {
-  :root,
-  [data-size],
-  [data-theme] {
-    --jkl-unit-0: 0;
-    --jkl-spacing-0: 0rem;
-    --jkl-spacing-2: 0.125rem;
-    --jkl-spacing-4: 0.25rem;
-    --jkl-spacing-8: 0.5rem;
-    --jkl-spacing-12: 0.75rem;
-    --jkl-spacing-16: 1rem;
-    --jkl-spacing-24: 1.5rem;
-    --jkl-spacing-32: 2rem;
-    --jkl-spacing-40: 2.5rem;
-    --jkl-spacing-64: 4rem;
-    --jkl-spacing-104: 6.5rem;
-    --jkl-spacing-168: 10.5rem;
-    --jkl-spacing-none: 0;
-    --jkl-border-width-1: 0.0625rem;
-    --jkl-border-width-2: 0.125rem;
-    --jkl-border-width-3: 0.1875rem;
-    --jkl-border-radius-none: 0;
-    --jkl-border-radius-xs: 0.25rem;
-    --jkl-border-radius-s: 0.5rem;
-    --jkl-border-radius-m: 0.75rem;
-    --jkl-border-radius-l: 1rem;
-    --jkl-border-radius-full: 9999px;
-    --jkl-breakpoint-small: 0;
-    --jkl-breakpoint-medium: 680px;
-    --jkl-breakpoint-large: 1200px;
-    --jkl-breakpoint-xl: 1600px;
-    --jkl-motion-timing-energetic: 75ms;
-    --jkl-motion-timing-snappy: 100ms;
-    --jkl-motion-timing-productive: 150ms;
-    --jkl-motion-timing-polite: 200ms;
-    --jkl-motion-timing-expressive: 250ms;
-    --jkl-motion-timing-lazy: 400ms;
-    --jkl-motion-easing-standard: ease;
-    --jkl-motion-easing-entrance: ease-out;
-    --jkl-motion-easing-exit: ease-in;
-    --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
-    --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
-    --jkl-font-weight-normal: 400;
-    --jkl-font-weight-bold: 700;
-    --jkl-font-family-regular: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
-    --jkl-font-family-display: "Fremtind Grotesk Display", "Adjusted Arial Display Fallback", Arial, sans-serif;
-    --jkl-font-family-mono: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont, monospace;
-    --jkl-line-height-flush: 1;
-    --jkl-line-height-tight: 1.3;
-    --jkl-line-height-relaxed: 1.6;
-    --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
-    --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
-    --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
-    --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
-    --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
-    --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
-    --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
-    --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
-    --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
-    --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
-    --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
-    --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
-    --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
-    --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
-    --jkl-unit-02: calc(var(--jkl-unit-base) * 0.25);
-    --jkl-unit-05: calc(var(--jkl-unit-base) * 0.5);
-    --jkl-spacing-2xs: var(--jkl-spacing-4);
-    --jkl-spacing-xs: var(--jkl-spacing-8);
-    --jkl-spacing-s: var(--jkl-spacing-16);
-    --jkl-spacing-m: var(--jkl-spacing-24);
-    --jkl-spacing-l: var(--jkl-spacing-40);
-    --jkl-spacing-xl: var(--jkl-spacing-64);
-    --jkl-spacing-2xl: var(--jkl-spacing-104);
-    --jkl-text-style-title: var(--jkl-font-weight-normal) var(--jkl-font-size-10)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-title-small: var(--jkl-font-weight-normal) var(--jkl-font-size-9)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-heading-1: var(--jkl-font-weight-normal) var(--jkl-font-size-8)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-heading-2: var(--jkl-font-weight-normal) var(--jkl-font-size-7)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-heading-3: var(--jkl-font-weight-bold) var(--jkl-font-size-6)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-heading-4: var(--jkl-font-weight-bold) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-heading-5: var(--jkl-font-weight-bold) var(--jkl-font-size-4)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-paragraph-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
-    --jkl-text-style-paragraph-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
-    --jkl-text-style-paragraph-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-relaxed) var(--jkl-font-family-regular);
-    --jkl-text-style-text-large: var(--jkl-font-weight-normal) var(--jkl-font-size-5)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-text-medium: var(--jkl-font-weight-normal) var(--jkl-font-size-3)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-text-small: var(--jkl-font-weight-normal) var(--jkl-font-size-2)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
-    --jkl-text-style-text-micro: var(--jkl-font-weight-normal) var(--jkl-font-size-1)/var(--jkl-line-height-tight) var(--jkl-font-family-regular);
+  [data-brand=jokul] {
+    /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+    --jkl-color-neutral-background-page: #F4F2EF;
+    --jkl-color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
+    --jkl-color-neutral-background-container: #F9F9F9;
+    --jkl-color-neutral-background-container: light-dark(#F9F9F9, #313030);
+    --jkl-color-neutral-background-action: #1B1917;
+    --jkl-color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-neutral-text-default: #1B1917;
+    --jkl-color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-neutral-text-subdued: #636060;
+    --jkl-color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
+    --jkl-color-neutral-text-on-action: #F9F9F9;
+    --jkl-color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-neutral-border-strong: #1B1917;
+    --jkl-color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-neutral-border-default: #636060;
+    --jkl-color-neutral-border-default: light-dark(#636060, #C8C5C3);
+    --jkl-color-neutral-border-subdued: #C8C5C3;
+    --jkl-color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
+    --jkl-color-accent-background-page: #F4F2EF;
+    --jkl-color-accent-background-page: light-dark(#F4F2EF, #1B1917);
+    --jkl-color-accent-background-container: #F9F9F9;
+    --jkl-color-accent-background-container: light-dark(#F9F9F9, #313030);
+    --jkl-color-accent-background-action: #1B1917;
+    --jkl-color-accent-background-action: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-accent-text-default: #1B1917;
+    --jkl-color-accent-text-default: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-accent-text-subdued: #636060;
+    --jkl-color-accent-text-subdued: light-dark(#636060, #C8C5C3);
+    --jkl-color-accent-text-on-action: #F9F9F9;
+    --jkl-color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-accent-border-strong: #1B1917;
+    --jkl-color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
+    --jkl-color-accent-border-default: #636060;
+    --jkl-color-accent-border-default: light-dark(#636060, #C8C5C3);
+    --jkl-color-accent-border-subdued: #C8C5C3;
+    --jkl-color-accent-border-subdued: light-dark(#C8C5C3, #636060);
+    --jkl-color-warning-background-page: #FCF7E8;
+    --jkl-color-warning-background-page: light-dark(#FCF7E8, #392B10);
+    --jkl-color-warning-background-container: #F7EBC2;
+    --jkl-color-warning-background-container: light-dark(#F7EBC2, #5A4519);
+    --jkl-color-warning-background-action: #B98900;
+    --jkl-color-warning-background-action: light-dark(#B98900, #E4B63A);
+    --jkl-color-warning-text-default: #5B4200;
+    --jkl-color-warning-text-default: light-dark(#5B4200, #FFF5D9);
+    --jkl-color-warning-text-subdued: #8B6B22;
+    --jkl-color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
+    --jkl-color-warning-text-on-action: #1B1917;
+    --jkl-color-warning-text-on-action: light-dark(#1B1917, #1B1917);
+    --jkl-color-warning-border-strong: #B98900;
+    --jkl-color-warning-border-strong: light-dark(#B98900, #E4B63A);
+    --jkl-color-warning-border-default: #B98900;
+    --jkl-color-warning-border-default: light-dark(#B98900, #E4B63A);
+    --jkl-color-warning-border-subdued: #DECC8D;
+    --jkl-color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
+    --jkl-color-success-background-page: #EEF7F0;
+    --jkl-color-success-background-page: light-dark(#EEF7F0, #173122);
+    --jkl-color-success-background-container: #D7EADB;
+    --jkl-color-success-background-container: light-dark(#D7EADB, #234530);
+    --jkl-color-success-background-action: #2E8C4A;
+    --jkl-color-success-background-action: light-dark(#2E8C4A, #67B479);
+    --jkl-color-success-text-default: #1E5D31;
+    --jkl-color-success-text-default: light-dark(#1E5D31, #F1FBF3);
+    --jkl-color-success-text-subdued: #507A5B;
+    --jkl-color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
+    --jkl-color-success-text-on-action: #F9F9F9;
+    --jkl-color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-success-border-strong: #2E8C4A;
+    --jkl-color-success-border-strong: light-dark(#2E8C4A, #67B479);
+    --jkl-color-success-border-default: #2E8C4A;
+    --jkl-color-success-border-default: light-dark(#2E8C4A, #67B479);
+    --jkl-color-success-border-subdued: #94B79B;
+    --jkl-color-success-border-subdued: light-dark(#94B79B, #507A5B);
+    --jkl-color-info-background-page: #EEF5FE;
+    --jkl-color-info-background-page: light-dark(#EEF5FE, #162A40);
+    --jkl-color-info-background-container: #DDEBFB;
+    --jkl-color-info-background-container: light-dark(#DDEBFB, #264261);
+    --jkl-color-info-background-action: #4AA3F0;
+    --jkl-color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
+    --jkl-color-info-text-default: #1B3B60;
+    --jkl-color-info-text-default: light-dark(#1B3B60, #F5FAFF);
+    --jkl-color-info-text-subdued: #4E6C8E;
+    --jkl-color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
+    --jkl-color-info-text-on-action: #F9F9F9;
+    --jkl-color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-info-border-strong: #4AA3F0;
+    --jkl-color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
+    --jkl-color-info-border-default: #4AA3F0;
+    --jkl-color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
+    --jkl-color-info-border-subdued: #A9A9CA;
+    --jkl-color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
+    --jkl-color-error-background-page: #FDEEEE;
+    --jkl-color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
+    --jkl-color-error-background-container: #F8D1D1;
+    --jkl-color-error-background-container: light-dark(#F8D1D1, #5B2828);
+    --jkl-color-error-background-action: #E84B3C;
+    --jkl-color-error-background-action: light-dark(#E84B3C, #F27B70);
+    --jkl-color-error-text-default: #7B1F18;
+    --jkl-color-error-text-default: light-dark(#7B1F18, #FFF1EF);
+    --jkl-color-error-text-subdued: #A14E46;
+    --jkl-color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
+    --jkl-color-error-text-on-action: #F9F9F9;
+    --jkl-color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --jkl-color-error-border-strong: #E84B3C;
+    --jkl-color-error-border-strong: light-dark(#E84B3C, #F27B70);
+    --jkl-color-error-border-default: #E84B3C;
+    --jkl-color-error-border-default: light-dark(#E84B3C, #F27B70);
+    --jkl-color-error-border-subdued: #DE9E9E;
+    --jkl-color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
+    /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+  }
+}
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+@layer jokul.theme {
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 300;
+    font-style: normal;
+    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 400;
+    font-style: normal;
+    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 600;
+    font-style: normal;
+    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+  }
+  @font-face {
+    font-family: "Inter";
+    font-display: fallback;
+    font-weight: 700;
+    font-style: normal;
+    src: url("/fonts/brands/jokul/InterVariable.woff2") format("woff2");
+  }
+  [data-brand=jokul] {
+    --jkl-font-family-regular: Inter, "Adjusted Arial Fallback", arial, sans-serif;
+    --jkl-font-family-display: Inter, "Adjusted Arial Display Fallback", arial, sans-serif;
+    --jkl-font-family-mono: monospace, -apple-system, blinkmacsystemfont;
   }
 }
 @layer jokul.global {
@@ -1110,7 +1372,7 @@
     -moz-osx-font-smoothing: grayscale;
     background-color: var(--jkl-background-color);
     color: var(--jkl-color);
-    font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+    font-family: var(--jkl-font-family-regular);
   }
   .jkl strong {
     font-weight: var(--jkl-font-weight-bold);