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

package/styles/components.scss

@@ -1,52 +1,53 @@
-@use "components/autosuggest" as autosuggest;
-@use "components/breadcrumb" as breadcrumb;
-@use "components/button" as button;
-@use "components/card" as card;
-@use "components/checkbox" as checkbox;
-@use "components/checkbox-panel" as checkbox-panel;
-@use "components/chip" as chip;
-@use "components/combobox" as combobox;
-@use "components/cookie-consent" as cookie-consent;
-@use "components/countdown" as countdown;
-@use "components/datepicker" as datepicker;
-@use "components/description-list" as description-list;
-@use "components/expander" as expander;
-@use "components/feedback" as feedback;
-@use "components/file" as file;
-@use "components/file-input" as file-input;
-@use "components/icon" as icon;
-@use "components/icon-button" as icon-button;
-@use "components/image" as image;
-@use "components/input-group" as input-group;
-@use "components/link" as link;
-@use "components/link-list" as link-list;
-@use "components/list" as list;
-@use "components/loader" as loader;
-@use "components/logo" as logo;
-@use "components/menu" as menu;
-@use "components/message" as message;
-@use "components/modal" as modal;
-@use "components/nav-link" as nav-link;
-@use "components/beta/nav-link" as nav-link-beta;
-@use "components/pagination" as pagination;
-@use "components/popover" as popover;
-@use "components/progress-bar" as progress-bar;
-@use "components/radio-button" as radio-button;
-@use "components/radio-panel" as radio-panel;
-@use "components/select" as select;
-@use "components/beta/select" as select-beta;
-@use "components/search" as search;
-@use "components/segmented-control" as segmented-control;
-@use "components/summary-table" as summary-table;
-@use "components/system-message" as system-message;
-@use "components/table" as table;
-@use "components/table-of-contents" as table-of-contents;
-@use "components/tabs" as tabs;
-@use "components/tag" as tag;
-@use "components/text-area" as text-area;
-@use "components/text-input" as text-input;
-@use "components/toast" as toast;
-@use "components/toggle-switch" as toggle-switch;
-@use "components/tooltip" as tooltip;
-@use "components/help" as help;
-@use "components/flex" as flex;
+@use "./components/autosuggest" as autosuggest;
+@use "./components/breadcrumb" as breadcrumb;
+@use "./components/button" as button;
+@use "./components/card" as card;
+@use "./components/checkbox" as checkbox;
+@use "./components/checkbox-panel" as checkbox-panel;
+@use "./components/chip" as chip;
+@use "./components/combobox" as combobox;
+@use "./components/cookie-consent" as cookie-consent;
+@use "./components/countdown" as countdown;
+@use "./components/datepicker" as datepicker;
+@use "./components/description-list" as description-list;
+@use "./components/expander" as expander;
+@use "./components/feedback" as feedback;
+@use "./components/file" as file;
+@use "./components/file-input" as file-input;
+@use "./components/icon" as icon;
+@use "./components/icon-button" as icon-button;
+@use "./components/image" as image;
+@use "./components/input-group" as input-group;
+@use "./components/link" as link;
+@use "./components/link-list" as link-list;
+@use "./components/list" as list;
+@use "./components/loader" as loader;
+@use "./components/logo" as logo;
+@use "./components/menu" as menu;
+@use "./components/message" as message;
+@use "./components/modal" as modal;
+@use "./components/nav-link" as nav-link;
+@use "./components/beta/nav-link" as nav-link-beta;
+@use "./components/pagination" as pagination;
+@use "./components/popover" as popover;
+@use "./components/progress-bar" as progress-bar;
+@use "./components/radio-button" as radio-button;
+@use "./components/radio-panel" as radio-panel;
+@use "./components/select" as select;
+@use "./components/beta/select" as select-beta;
+@use "./components/search" as search;
+@use "./components/segmented-control" as segmented-control;
+@use "./components/summary-table" as summary-table;
+@use "./components/system-message" as system-message;
+@use "./components/table" as table;
+@use "./components/table-of-contents" as table-of-contents;
+@use "./components/tabs" as tabs;
+@use "./components/tag" as tag;
+@use "./components/text-area" as text-area;
+@use "./components/text-input" as text-input;
+@use "./components/toast" as toast;
+@use "./components/toggle-switch" as toggle-switch;
+@use "./components/tooltip" as tooltip;
+@use "./components/typography" as typography;
+@use "./components/help" as help;
+@use "./components/flex" as flex;

package/styles/core/utility/_paragraphs.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "../jkl";
+@use "../jkl/typography";
+
+@layer jokul.utility {
+    .jkl-body {
+        @include jkl.text-style("paragraph-medium");
+    }
+
+    .jkl-bold {
+        @include jkl.text-style("paragraph-medium") {
+            --jkl-icon-weight: #{jkl.$icon-weight-bold};
+            font-weight: jkl.$typography-weight-bold;
+        }
+    }
+
+    .jkl-small {
+        @include jkl.text-style("paragraph-small");
+    }
+
+    @each $style, $_ in typography.$text-styles {
+        // Title-komponenten bruker `.jkl-title` som klasse og styrer
+        // stilen via `data-text-size`. Utility-laget vinner over
+        // components-laget i cascade, så vi må ekskludere komponenten her
+        // for at `size`-propen fortsatt skal ha effekt.
+        $selector: if(
+            $style == "title",
+            ".jkl-title:not([data-text-size])",
+            ".jkl-#{$style}"
+        );
+
+        #{$selector} {
+            @each $property, $value in map.get(typography.$text-styles, $style)
+            {
+                #{$property}: $value;
+            }
+        }
+    }
+}

package/styles/global/_base-class.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.global {
     /* Legger til støtte for fontskalering via OS-innstillinger på Apple-enheter */
@@ -21,7 +21,7 @@
         background-color: var(--jkl-background-color);
         color: var(--jkl-color);
 
-        @include jkl.use-font-family("Fremtind Grotesk");
+        @include jkl.use-font-family("Jokul");
 
         strong {
             font-weight: jkl.$font-weight-bold;

package/styles/global/_top-layer.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.global {
     [popover] {

package/styles/hooks/stories/styles.scss

@@ -1,4 +1,4 @@
-@use "../jkl";
+@use "../../jkl";
 
 .lorem-text {
     margin-top: var(--jkl-spacing-16);

package/styles/jkl/_typography.scss

@@ -67,37 +67,29 @@
 }
 
 $_valid-font-family-values: (
-    "Fremtind Grotesk",
-    "Fremtind Grotesk Display",
-    "Fremtind Grotesk Mono",
-    "Fremtind Material Symbols"
+    "Jokul",
+    "Jokul Display",
+    "Jokul Mono",
+    "Jokul Material Symbols"
 );
 
-/// Hjelper sette riktig remse med fallback-fonts for Fremtind Grotesk, Fremtind Grotesk Display, og Fremtind Grotesk Mono.
-/// @param {"Fremtind Grotesk" | "Fremtind Grotesk Mono" | "Fremtind Grotesk Display" | "Fremtind Material Symbols"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
+/// Hjelper sette riktig remse med fallback-fonts for Jokul, Jokul Display, og Jokul Mono.
+/// @param {"Jokul" | "Jokul Mono" | "Jokul Display" | "Jokul Material Symbols"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
 /// @output - Ønsket fontfamilie med justert fallbackfont.
 @mixin use-font-family($font) {
     @if not list.index($_valid-font-family-values, $font) {
         @error "#{$font} will not be used for font-family. Valid options are: #{$_valid-font-family-values}.";
     }
 
-    @if $font == "Fremtind Grotesk Mono" {
+    @if $font == "Jokul Mono" {
+        font-family: var(--jkl-font-family-mono);
+    } @else if $font == "Jokul Display" {
+        font-family: var(--jkl-font-family-display);
+    } @else if $font == "Jokul Material Symbols" {
         font-family:
-            "Fremtind Grotesk Mono",
-            "Adjusted Courier New Fallback",
-            -apple-system,
-            BlinkMacSystemFont,
-            monospace;
-    } @else if $font == "Fremtind Grotesk Display" {
-        font-family:
-            "Fremtind Grotesk Display", "Adjusted Arial Display Fallback",
-            Arial, sans-serif;
-    } @else if $font == "Fremtind Material Symbols" {
-        font-family:
-            "Fremtind Material Symbols", "Fremtind Material Symbols Fallback",
+            "Jokul Material Symbols", "Jokul Material Symbols Fallback",
             monospace;
     } @else {
-        font-family:
-            "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+        font-family: var(--jkl-font-family-regular);
     }
 }

package/styles/theme/_dynamic-spacing.scss

@@ -1,9 +1,9 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
-@use "jkl";
-@use "jkl/screens";
-@use "jkl/spacing";
+@use "../jkl";
+@use "../jkl/screens";
+@use "../jkl/spacing";
 
 @function get-class-name($spacing-combination) {
     $class-name: "jkl-spacing";

package/styles/theme/_fonts.scss

@@ -4,13 +4,11 @@ $webfonts-dir: "/fonts" !default;
 
 @layer jokul.theme {
     @font-face {
-        font-family: "Fremtind Grotesk";
+        font-family: Jokul;
         font-display: fallback;
         font-weight: 400;
         font-style: normal;
-        src: url("#{$webfonts-dir}/FremtindGrotesk-Regular-Web.woff2")
-                format("woff2"),
-            url("#{$webfonts-dir}/FremtindGrotesk-Regular-Web.woff") format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -25,12 +23,11 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk";
+        font-family: Jokul;
         font-display: fallback;
         font-weight: 700;
         font-style: normal;
-        src: url("#{$webfonts-dir}/FremtindGrotesk-Bold-Web.woff2") format("woff2"),
-            url("#{$webfonts-dir}/FremtindGrotesk-Bold-Web.woff") format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -45,13 +42,11 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk";
+        font-family: Jokul;
         font-display: fallback;
         font-weight: 400;
         font-style: italic;
-        src: url("#{$webfonts-dir}/FremtindGrotesk-Italic-Web.woff2")
-                format("woff2"),
-            url("#{$webfonts-dir}/FremtindGrotesk-Italic-Web.woff") format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -66,14 +61,11 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk";
+        font-family: Jokul;
         font-display: fallback;
         font-weight: 700;
         font-style: italic;
-        src: url("#{$webfonts-dir}/FremtindGrotesk-BoldItalic-Web.woff2")
-                format("woff2"),
-            url("#{$webfonts-dir}/FremtindGrotesk-BoldItalic-Web.woff")
-                format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -88,13 +80,11 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk Display";
+        font-family: "Jokul Display";
         font-display: fallback;
         font-weight: 400;
         font-style: normal;
-        src: url("#{$webfonts-dir}/FremtindGrotesk-Display-Web.woff2")
-                format("woff2"),
-            url("#{$webfonts-dir}/FremtindGrotesk-Display-Web.woff") format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -109,14 +99,11 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk Mono";
+        font-family: "Jokul Mono";
         font-display: fallback;
         font-weight: 400;
         font-style: normal;
-        src: url("#{$webfonts-dir}/FremtindGroteskMono-Regular-Web.woff2")
-                format("woff2"),
-            url("#{$webfonts-dir}/FremtindGroteskMono-Regular-Web.woff")
-                format("woff");
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
@@ -131,14 +118,15 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @font-face {
-        font-family: "Fremtind Material Symbols";
+        font-family: "Jokul Material Symbols";
         font-weight: 300 400;
         font-style: normal;
-        src: url("#{$webfonts-dir}/Fremtind-Material-Symbols.woff2") format("woff2");
+        src: url("#{$webfonts-dir}/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;

package/styles/theme/_index.scss

@@ -6,3 +6,6 @@
 @forward "brands/sparebank1/color-scheme";
 @forward "size";
 @forward "tokens";
+@forward "brands/dnb/fonts";
+@forward "brands/eika/fonts";
+@forward "brands/sparebank1/fonts";

package/styles/theme/_tokens.scss

@@ -47,9 +47,9 @@
         --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-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;

package/styles/theme/brands/dnb/_fonts.scss

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+$webfonts-dir-dnb: "/fonts/brands/dnb" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "DNB Sans";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNB-Regular.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "DNB Sans";
+        font-display: fallback;
+        font-weight: 500;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNB-Medium.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "DNB Sans";
+        font-display: fallback;
+        font-weight: 700;
+        font-style: normal;
+        src: url("#{$webfonts-dir-dnb}/DNB-Bold.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "DNB Mono";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-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;
+    }
+}

package/styles/theme/brands/eika/_fonts.scss

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+$webfonts-dir-eika: "/fonts/brands/eika" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "Open Sans";
+        font-display: fallback;
+        font-weight: 300;
+        font-style: normal;
+        src: url("#{$webfonts-dir-eika}/OpenSans-Light.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Open Sans";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-eika}/OpenSans-Regular.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Open Sans";
+        font-display: fallback;
+        font-weight: 600;
+        font-style: normal;
+        src: url("#{$webfonts-dir-eika}/OpenSans-SemiBold.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Open Sans";
+        font-display: fallback;
+        font-weight: 700;
+        font-style: normal;
+        src: url("#{$webfonts-dir-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;
+    }
+}

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

@@ -0,0 +1,119 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [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 */
+    }
+}

package/styles/theme/brands/jokul/_fonts.scss

@@ -0,0 +1,46 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+$webfonts-dir-jokul: "/fonts/brands/jokul" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "Inter";
+        font-display: fallback;
+        font-weight: 300;
+        font-style: normal;
+        src: url("#{$webfonts-dir-jokul}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Inter";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir-jokul}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Inter";
+        font-display: fallback;
+        font-weight: 600;
+        font-style: normal;
+        src: url("#{$webfonts-dir-jokul}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Inter";
+        font-display: fallback;
+        font-weight: 700;
+        font-style: normal;
+        src: url("#{$webfonts-dir-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;
+    }
+}