@fremtind/jokul 5.0.0-next.1 → 5.0.0-next.11

package/styles/theme/_tokens.scss

@@ -45,11 +45,11 @@
         --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-font-weight-normal: 380;
+        --jkl-font-weight-bold: 530;
+        --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;
@@ -76,17 +76,17 @@
         --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-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-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);
+        --jkl-text-style-paragraph-large: var(--jkl-font-weight-normal) var(--jkl-font-size-4)/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-large: var(--jkl-font-weight-normal) var(--jkl-font-size-4)/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);

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

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@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: #FFFFFF;
+        --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-background-container: #D8F3EC;
+        --jkl-color-background-container: light-dark(#D8F3EC, #D8F3EC);
+        --jkl-color-background-container-accent: #A5E1D2;
+        --jkl-color-background-container-accent: light-dark(#A5E1D2, #A5E1D2);
+        --jkl-color-background-contrast: #007272;
+        --jkl-color-background-contrast: light-dark(#007272, #007272);
+        --jkl-color-text-default: #333333;
+        --jkl-color-text-default: light-dark(#333333, #333333);
+        --jkl-color-text-subdued: #737373;
+        --jkl-color-text-subdued: light-dark(#737373, #737373);
+        --jkl-color-text-accent: #FFFFFF;
+        --jkl-color-text-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-text-on-contrast: #FFFFFF;
+        --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-border-default: #007272;
+        --jkl-color-border-default: light-dark(#007272, #007272);
+        --jkl-color-border-subdued: #FFFFFF;
+        --jkl-color-border-subdued: light-dark(#FFFFFF, #F7F4F2);
+        --jkl-color-border-strong: #FFFFFF;
+        --jkl-color-border-strong: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-background-page: #FFFFFF;
+        --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-background-container: #FBF6EC;
+        --jkl-color-warning-background-container: light-dark(#FBF6EC, #FBF6EC);
+        --jkl-color-warning-background-container-accent: #FFFFFF;
+        --jkl-color-warning-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-background-contrast: #FDBB31;
+        --jkl-color-warning-background-contrast: light-dark(#FDBB31, #FDBB31);
+        --jkl-color-warning-text-default: #333333;
+        --jkl-color-warning-text-default: light-dark(#333333, #333333);
+        --jkl-color-warning-text-subdued: #737373;
+        --jkl-color-warning-text-subdued: light-dark(#737373, #737373);
+        --jkl-color-warning-text-accent: #805B0E;
+        --jkl-color-warning-text-accent: light-dark(#805B0E, #805B0E);
+        --jkl-color-warning-text-on-contrast: #FFFFFF;
+        --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-border-default: #FDBB31;
+        --jkl-color-warning-border-default: light-dark(#FDBB31, #FDBB31);
+        --jkl-color-warning-border-subdued: #FFFFFF;
+        --jkl-color-warning-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-border-strong: #FFFFFF;
+        --jkl-color-warning-border-strong: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-background-page: #FFFFFF;
+        --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-background-container: #EBF4F2;
+        --jkl-color-success-background-container: light-dark(#EBF4F2, #EBF4F2);
+        --jkl-color-success-background-container-accent: #FFFFFF;
+        --jkl-color-success-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-background-contrast: #007B5E;
+        --jkl-color-success-background-contrast: light-dark(#007B5E, #007B5E);
+        --jkl-color-success-text-default: #333333;
+        --jkl-color-success-text-default: light-dark(#333333, #333333);
+        --jkl-color-success-text-subdued: #737373;
+        --jkl-color-success-text-subdued: light-dark(#737373, #737373);
+        --jkl-color-success-text-accent: #28B482;
+        --jkl-color-success-text-accent: light-dark(#28B482, #28B482);
+        --jkl-color-success-text-on-contrast: #FFFFFF;
+        --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-border-default: #007B5E;
+        --jkl-color-success-border-default: light-dark(#007B5E, #007B5E);
+        --jkl-color-success-border-subdued: #FFFFFF;
+        --jkl-color-success-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-border-strong: #FFFFFF;
+        --jkl-color-success-border-strong: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-background-page: #FFFFFF;
+        --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-background-container: #FFFFFF;
+        --jkl-color-info-background-container: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-background-container-accent: #FFFFFF;
+        --jkl-color-info-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-background-contrast: #007272;
+        --jkl-color-info-background-contrast: light-dark(#007272, #007272);
+        --jkl-color-info-text-default: #333333;
+        --jkl-color-info-text-default: light-dark(#333333, #333333);
+        --jkl-color-info-text-subdued: #737373;
+        --jkl-color-info-text-subdued: light-dark(#737373, #737373);
+        --jkl-color-info-text-accent: #FFFFFF;
+        --jkl-color-info-text-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-text-on-contrast: #FFFFFF;
+        --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-border-default: #007272;
+        --jkl-color-info-border-default: light-dark(#007272, #007272);
+        --jkl-color-info-border-subdued: #FFFFFF;
+        --jkl-color-info-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-border-strong: #FFFFFF;
+        --jkl-color-info-border-strong: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-background-page: #FFFFFF;
+        --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-background-container: #FCEEEE;
+        --jkl-color-error-background-container: light-dark(#FCEEEE, #FCEEEE);
+        --jkl-color-error-background-container-accent: #FFFFFF;
+        --jkl-color-error-background-container-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-background-contrast: #D52525;
+        --jkl-color-error-background-contrast: light-dark(#D52525, #D52525);
+        --jkl-color-error-text-default: #333333;
+        --jkl-color-error-text-default: light-dark(#333333, #333333);
+        --jkl-color-error-text-subdued: #737373;
+        --jkl-color-error-text-subdued: light-dark(#737373, #737373);
+        --jkl-color-error-text-accent: #FFFFFF;
+        --jkl-color-error-text-accent: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-text-on-contrast: #FFFFFF;
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-border-default: #D52525;
+        --jkl-color-error-border-default: light-dark(#D52525, #D52525);
+        --jkl-color-error-border-subdued: #FFFFFF;
+        --jkl-color-error-border-subdued: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-border-strong: #FFFFFF;
+        --jkl-color-error-border-strong: light-dark(#FFFFFF, #FFFFFF);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+}

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/dnb/_index.scss

@@ -0,0 +1,2 @@
+@forward "color-scheme";
+@forward "fonts";

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

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [data-brand="eika"] {
+        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback and light-dark() declarations are intentionally paired. */
+        --jkl-color-background-page: #FFFFFF;
+        --jkl-color-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-background-container: #FBFAFA;
+        --jkl-color-background-container: light-dark(#FBFAFA, #ECE5E0);
+        --jkl-color-background-container-accent: #ECE5E0;
+        --jkl-color-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-background-contrast: #00383D;
+        --jkl-color-background-contrast: light-dark(#00383D, #00383D);
+        --jkl-color-text-default: #00383D;
+        --jkl-color-text-default: light-dark(#00383D, #00383D);
+        --jkl-color-text-subdued: #4D7477;
+        --jkl-color-text-subdued: light-dark(#4D7477, #4D7477);
+        --jkl-color-text-accent: #00383D;
+        --jkl-color-text-accent: light-dark(#00383D, #00383D);
+        --jkl-color-text-on-contrast: #FFFFFF;
+        --jkl-color-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-border-default: #ECE5E0;
+        --jkl-color-border-default: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-border-subdued: #F7F4F2;
+        --jkl-color-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+        --jkl-color-border-strong: #4D7477;
+        --jkl-color-border-strong: light-dark(#4D7477, #4D7477);
+        --jkl-color-warning-background-page: #FFFFFF;
+        --jkl-color-warning-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-background-container: #FFE5C7;
+        --jkl-color-warning-background-container: light-dark(#FFE5C7, #FFE5C7);
+        --jkl-color-warning-background-container-accent: #ECE5E0;
+        --jkl-color-warning-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-warning-background-contrast: #FFBD74;
+        --jkl-color-warning-background-contrast: light-dark(#FFBD74, #FFBD74);
+        --jkl-color-warning-text-default: #00383D;
+        --jkl-color-warning-text-default: light-dark(#00383D, #00383D);
+        --jkl-color-warning-text-subdued: #4D7477;
+        --jkl-color-warning-text-subdued: light-dark(#4D7477, #4D7477);
+        --jkl-color-warning-text-accent: #00383D;
+        --jkl-color-warning-text-accent: light-dark(#00383D, #00383D);
+        --jkl-color-warning-text-on-contrast: #FFFFFF;
+        --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-warning-border-default: #ECE5E0;
+        --jkl-color-warning-border-default: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-warning-border-subdued: #F7F4F2;
+        --jkl-color-warning-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+        --jkl-color-warning-border-strong: #4D7477;
+        --jkl-color-warning-border-strong: light-dark(#4D7477, #4D7477);
+        --jkl-color-success-background-page: #FFFFFF;
+        --jkl-color-success-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-background-container: #ECF7D4;
+        --jkl-color-success-background-container: light-dark(#ECF7D4, #ECF7D4);
+        --jkl-color-success-background-container-accent: #ECE5E0;
+        --jkl-color-success-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-success-background-contrast: #00383D;
+        --jkl-color-success-background-contrast: light-dark(#00383D, #00383D);
+        --jkl-color-success-text-default: #00383D;
+        --jkl-color-success-text-default: light-dark(#00383D, #00383D);
+        --jkl-color-success-text-subdued: #4D7477;
+        --jkl-color-success-text-subdued: light-dark(#4D7477, #4D7477);
+        --jkl-color-success-text-accent: #00383D;
+        --jkl-color-success-text-accent: light-dark(#00383D, #00383D);
+        --jkl-color-success-text-on-contrast: #FFFFFF;
+        --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-success-border-default: #ECE5E0;
+        --jkl-color-success-border-default: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-success-border-subdued: #F7F4F2;
+        --jkl-color-success-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+        --jkl-color-success-border-strong: #4D7477;
+        --jkl-color-success-border-strong: light-dark(#4D7477, #4D7477);
+        --jkl-color-info-background-page: #FFFFFF;
+        --jkl-color-info-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-background-container: #E6F3F5;
+        --jkl-color-info-background-container: light-dark(#E6F3F5, #E6F3F5);
+        --jkl-color-info-background-container-accent: #ECE5E0;
+        --jkl-color-info-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-info-background-contrast: #00383D;
+        --jkl-color-info-background-contrast: light-dark(#00383D, #00383D);
+        --jkl-color-info-text-default: #00383D;
+        --jkl-color-info-text-default: light-dark(#00383D, #00383D);
+        --jkl-color-info-text-subdued: #4D7477;
+        --jkl-color-info-text-subdued: light-dark(#4D7477, #4D7477);
+        --jkl-color-info-text-accent: #00383D;
+        --jkl-color-info-text-accent: light-dark(#00383D, #00383D);
+        --jkl-color-info-text-on-contrast: #FFFFFF;
+        --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-info-border-default: #ECE5E0;
+        --jkl-color-info-border-default: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-info-border-subdued: #F7F4F2;
+        --jkl-color-info-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+        --jkl-color-info-border-strong: #4D7477;
+        --jkl-color-info-border-strong: light-dark(#4D7477, #4D7477);
+        --jkl-color-error-background-page: #FFFFFF;
+        --jkl-color-error-background-page: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-background-container: #FDDEE6;
+        --jkl-color-error-background-container: light-dark(#FDDEE6, #FDDEE6);
+        --jkl-color-error-background-container-accent: #ECE5E0;
+        --jkl-color-error-background-container-accent: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-error-background-contrast: #B83653;
+        --jkl-color-error-background-contrast: light-dark(#B83653, #B83653);
+        --jkl-color-error-text-default: #00383D;
+        --jkl-color-error-text-default: light-dark(#00383D, #00383D);
+        --jkl-color-error-text-subdued: #4D7477;
+        --jkl-color-error-text-subdued: light-dark(#4D7477, #4D7477);
+        --jkl-color-error-text-accent: #00383D;
+        --jkl-color-error-text-accent: light-dark(#00383D, #00383D);
+        --jkl-color-error-text-on-contrast: #FFFFFF;
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-border-default: #ECE5E0;
+        --jkl-color-error-border-default: light-dark(#ECE5E0, #ECE5E0);
+        --jkl-color-error-border-subdued: #F7F4F2;
+        --jkl-color-error-border-subdued: light-dark(#F7F4F2, #F7F4F2);
+        --jkl-color-error-border-strong: #4D7477;
+        --jkl-color-error-border-strong: light-dark(#4D7477, #4D7477);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+}

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/eika/_index.scss

@@ -0,0 +1,2 @@
+@forward "color-scheme";
+@forward "fonts";

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

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    [data-brand="fremtind"] {
+        /* 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, #3E3A36);
+        --jkl-color-background-container-accent: #E6E2DB;
+        --jkl-color-background-container-accent: light-dark(#E6E2DB, #2A2724);
+        --jkl-color-background-contrast: #1B1917;
+        --jkl-color-background-contrast: light-dark(#1B1917, #F3F0ED);
+        --jkl-color-text-default: #1B1917;
+        --jkl-color-text-default: light-dark(#1B1917, #F9F9F9);
+        --jkl-color-text-subdued: #636060;
+        --jkl-color-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-text-accent: #000000;
+        --jkl-color-text-accent: light-dark(#000000, #FFFFFF);
+        --jkl-color-text-on-contrast: #F9F9F9;
+        --jkl-color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
+        --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: #1B1917;
+        --jkl-color-border-strong: light-dark(#1B1917, #F9F9F9);
+        --jkl-color-warning-background-page: #FFFFFF;
+        --jkl-color-warning-background-page: light-dark(#FFFFFF, #000000);
+        --jkl-color-warning-background-container: #F1DFD1;
+        --jkl-color-warning-background-container: light-dark(#F1DFD1, #61441F);
+        --jkl-color-warning-background-container-accent: #EAC7A8;
+        --jkl-color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
+        --jkl-color-warning-background-contrast: #8B6539;
+        --jkl-color-warning-background-contrast: light-dark(#8B6539, #8B6539);
+        --jkl-color-warning-text-default: #000000;
+        --jkl-color-warning-text-default: light-dark(#000000, #FFFFFF);
+        --jkl-color-warning-text-subdued: #3E3A36;
+        --jkl-color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
+        --jkl-color-warning-text-accent: #000000;
+        --jkl-color-warning-text-accent: light-dark(#000000, #FFFFFF);
+        --jkl-color-warning-text-on-contrast: #FFFFFF;
+        --jkl-color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
+        --jkl-color-warning-border-default: #A17747;
+        --jkl-color-warning-border-default: light-dark(#A17747, #B68957);
+        --jkl-color-warning-border-subdued: #E3B07A;
+        --jkl-color-warning-border-subdued: light-dark(#E3B07A, #75542B);
+        --jkl-color-warning-border-strong: #61441F;
+        --jkl-color-warning-border-strong: light-dark(#61441F, #A17747);
+        --jkl-color-success-background-page: #FFFFFF;
+        --jkl-color-success-background-page: light-dark(#FFFFFF, #000000);
+        --jkl-color-success-background-container: #C6E6CD;
+        --jkl-color-success-background-container: light-dark(#C6E6CD, #15341E);
+        --jkl-color-success-background-container-accent: #ACD3B5;
+        --jkl-color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
+        --jkl-color-success-background-contrast: #345F40;
+        --jkl-color-success-background-contrast: light-dark(#345F40, #467653);
+        --jkl-color-success-text-default: #000000;
+        --jkl-color-success-text-default: light-dark(#000000, #FFFFFF);
+        --jkl-color-success-text-subdued: #3E3A36;
+        --jkl-color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
+        --jkl-color-success-text-accent: #000000;
+        --jkl-color-success-text-accent: light-dark(#000000, #FFFFFF);
+        --jkl-color-success-text-on-contrast: #FFFFFF;
+        --jkl-color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
+        --jkl-color-success-border-default: #467653;
+        --jkl-color-success-border-default: light-dark(#467653, #598D67);
+        --jkl-color-success-border-subdued: #8CBC98;
+        --jkl-color-success-border-subdued: light-dark(#8CBC98, #24492E);
+        --jkl-color-success-border-strong: #15341E;
+        --jkl-color-success-border-strong: light-dark(#15341E, #467653);
+        --jkl-color-info-background-page: #FFFFFF;
+        --jkl-color-info-background-page: light-dark(#FFFFFF, #000000);
+        --jkl-color-info-background-container: #E3E3F4;
+        --jkl-color-info-background-container: light-dark(#E3E3F4, #1E1E81);
+        --jkl-color-info-background-container-accent: #D3D3F6;
+        --jkl-color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
+        --jkl-color-info-background-contrast: #4646D1;
+        --jkl-color-info-background-contrast: light-dark(#4646D1, #6262DC);
+        --jkl-color-info-text-default: #000000;
+        --jkl-color-info-text-default: light-dark(#000000, #FFFFFF);
+        --jkl-color-info-text-subdued: #3E3A36;
+        --jkl-color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
+        --jkl-color-info-text-accent: #000000;
+        --jkl-color-info-text-accent: light-dark(#000000, #FFFFFF);
+        --jkl-color-info-text-on-contrast: #FFFFFF;
+        --jkl-color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
+        --jkl-color-info-border-default: #6262DC;
+        --jkl-color-info-border-default: light-dark(#6262DC, #7E7EE4);
+        --jkl-color-info-border-subdued: #B7B7F0;
+        --jkl-color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
+        --jkl-color-info-border-strong: #1E1E81;
+        --jkl-color-info-border-strong: light-dark(#1E1E81, #6262DC);
+        --jkl-color-error-background-page: #FFFFFF;
+        --jkl-color-error-background-page: light-dark(#FFFFFF, #000000);
+        --jkl-color-error-background-container: #F3DEDE;
+        --jkl-color-error-background-container: light-dark(#F3DEDE, #610F0F);
+        --jkl-color-error-background-container-accent: #F2C9C9;
+        --jkl-color-error-background-container-accent: light-dark(#F2C9C9, #891919);
+        --jkl-color-error-background-contrast: #B32424;
+        --jkl-color-error-background-contrast: light-dark(#B32424, #DF3030);
+        --jkl-color-error-text-default: #000000;
+        --jkl-color-error-text-default: light-dark(#000000, #FFFFFF);
+        --jkl-color-error-text-subdued: #3E3A36;
+        --jkl-color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
+        --jkl-color-error-text-accent: #610F0F;
+        --jkl-color-error-text-accent: light-dark(#610F0F, #F6B3B3);
+        --jkl-color-error-text-on-contrast: #FFFFFF;
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+        --jkl-color-error-border-default: #DF3030;
+        --jkl-color-error-border-default: light-dark(#DF3030, #F15D5D);
+        --jkl-color-error-border-subdued: #F6B3B3;
+        --jkl-color-error-border-subdued: light-dark(#F6B3B3, #891919);
+        --jkl-color-error-border-strong: #610F0F;
+        --jkl-color-error-border-strong: light-dark(#610F0F, #DF3030);
+        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
+    }
+}

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

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

package/styles/theme/brands/fremtind/_index.scss

@@ -0,0 +1,2 @@
+@forward "color-scheme";
+@forward "fonts";