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

package/styles/tailwind.css

@@ -0,0 +1,213 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@theme {
+    --*: initial;
+
+    --color-neutral-background-page: #F4F2EF;
+    --color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
+    --color-neutral-background-container: #F9F9F9;
+    --color-neutral-background-container: light-dark(#F9F9F9, #313030);
+    --color-neutral-background-action: #1B1917;
+    --color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-text-default: #1B1917;
+    --color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-text-subdued: #636060;
+    --color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-neutral-text-on-action: #F9F9F9;
+    --color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-neutral-border-strong: #1B1917;
+    --color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-border-default: #636060;
+    --color-neutral-border-default: light-dark(#636060, #C8C5C3);
+    --color-neutral-border-subdued: #C8C5C3;
+    --color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-accent-background-page: #F4F2EF;
+    --color-accent-background-page: light-dark(#F4F2EF, #1B1917);
+    --color-accent-background-container: #F9F9F9;
+    --color-accent-background-container: light-dark(#F9F9F9, #313030);
+    --color-accent-background-action: #1B1917;
+    --color-accent-background-action: light-dark(#1B1917, #F9F9F9);
+    --color-accent-text-default: #1B1917;
+    --color-accent-text-default: light-dark(#1B1917, #F9F9F9);
+    --color-accent-text-subdued: #636060;
+    --color-accent-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-accent-text-on-action: #F9F9F9;
+    --color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-accent-border-strong: #1B1917;
+    --color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
+    --color-accent-border-default: #636060;
+    --color-accent-border-default: light-dark(#636060, #C8C5C3);
+    --color-accent-border-subdued: #C8C5C3;
+    --color-accent-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-warning-background-page: #FCF7E8;
+    --color-warning-background-page: light-dark(#FCF7E8, #392B10);
+    --color-warning-background-container: #F7EBC2;
+    --color-warning-background-container: light-dark(#F7EBC2, #5A4519);
+    --color-warning-background-action: #B98900;
+    --color-warning-background-action: light-dark(#B98900, #E4B63A);
+    --color-warning-text-default: #5B4200;
+    --color-warning-text-default: light-dark(#5B4200, #FFF5D9);
+    --color-warning-text-subdued: #8B6B22;
+    --color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
+    --color-warning-text-on-action: #1B1917;
+    --color-warning-text-on-action: light-dark(#1B1917, #1B1917);
+    --color-warning-border-strong: #B98900;
+    --color-warning-border-strong: light-dark(#B98900, #E4B63A);
+    --color-warning-border-default: #B98900;
+    --color-warning-border-default: light-dark(#B98900, #E4B63A);
+    --color-warning-border-subdued: #DECC8D;
+    --color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
+    --color-success-background-page: #EEF7F0;
+    --color-success-background-page: light-dark(#EEF7F0, #173122);
+    --color-success-background-container: #D7EADB;
+    --color-success-background-container: light-dark(#D7EADB, #234530);
+    --color-success-background-action: #2E8C4A;
+    --color-success-background-action: light-dark(#2E8C4A, #67B479);
+    --color-success-text-default: #1E5D31;
+    --color-success-text-default: light-dark(#1E5D31, #F1FBF3);
+    --color-success-text-subdued: #507A5B;
+    --color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
+    --color-success-text-on-action: #F9F9F9;
+    --color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-success-border-strong: #2E8C4A;
+    --color-success-border-strong: light-dark(#2E8C4A, #67B479);
+    --color-success-border-default: #2E8C4A;
+    --color-success-border-default: light-dark(#2E8C4A, #67B479);
+    --color-success-border-subdued: #94B79B;
+    --color-success-border-subdued: light-dark(#94B79B, #507A5B);
+    --color-info-background-page: #EEF5FE;
+    --color-info-background-page: light-dark(#EEF5FE, #162A40);
+    --color-info-background-container: #DDEBFB;
+    --color-info-background-container: light-dark(#DDEBFB, #264261);
+    --color-info-background-action: #4AA3F0;
+    --color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-text-default: #1B3B60;
+    --color-info-text-default: light-dark(#1B3B60, #F5FAFF);
+    --color-info-text-subdued: #4E6C8E;
+    --color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
+    --color-info-text-on-action: #F9F9F9;
+    --color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-info-border-strong: #4AA3F0;
+    --color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-border-default: #4AA3F0;
+    --color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-border-subdued: #A9A9CA;
+    --color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
+    --color-error-background-page: #FDEEEE;
+    --color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
+    --color-error-background-container: #F8D1D1;
+    --color-error-background-container: light-dark(#F8D1D1, #5B2828);
+    --color-error-background-action: #E84B3C;
+    --color-error-background-action: light-dark(#E84B3C, #F27B70);
+    --color-error-text-default: #7B1F18;
+    --color-error-text-default: light-dark(#7B1F18, #FFF1EF);
+    --color-error-text-subdued: #A14E46;
+    --color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
+    --color-error-text-on-action: #F9F9F9;
+    --color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-error-border-strong: #E84B3C;
+    --color-error-border-strong: light-dark(#E84B3C, #F27B70);
+    --color-error-border-default: #E84B3C;
+    --color-error-border-default: light-dark(#E84B3C, #F27B70);
+    --color-error-border-subdued: #DE9E9E;
+    --color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
+
+    --spacing-0: 0rem;
+    --spacing-2: 0.125rem;
+    --spacing-4: 0.25rem;
+    --spacing-8: 0.5rem;
+    --spacing-12: 0.75rem;
+    --spacing-16: 1rem;
+    --spacing-24: 1.5rem;
+    --spacing-32: 2rem;
+    --spacing-40: 2.5rem;
+    --spacing-64: 4rem;
+    --spacing-104: 6.5rem;
+    --spacing-168: 10.5rem;
+    --spacing-none: 0;
+    --spacing-2xs: 0.25rem;
+    --spacing-xs: 0.5rem;
+    --spacing-s: 1rem;
+    --spacing-m: 1.5rem;
+    --spacing-l: 2.5rem;
+    --spacing-xl: 4rem;
+    --spacing-2xl: 6.5rem;
+
+    --font-weight-normal: 400;
+    --font-weight-bold: 700;
+
+    --breakpoint-small: 0;
+    --breakpoint-medium: 680px;
+    --breakpoint-large: 1200px;
+    --breakpoint-xl: 1600px;
+
+    --radius-none: 0;
+    --radius-xs: 0.25rem;
+    --radius-s: 0.5rem;
+    --radius-m: 0.75rem;
+    --radius-l: 1rem;
+    --radius-full: 9999px;
+
+    --border-width-1: 0.0625rem;
+    --border-width-2: 0.125rem;
+    --border-width-3: 0.1875rem;
+}
+
+@utility title {
+    font: var(--jkl-text-style-title);
+}
+
+@utility title-small {
+    font: var(--jkl-text-style-title-small);
+}
+
+@utility heading-1 {
+    font: var(--jkl-text-style-heading-1);
+}
+
+@utility heading-2 {
+    font: var(--jkl-text-style-heading-2);
+}
+
+@utility heading-3 {
+    font: var(--jkl-text-style-heading-3);
+}
+
+@utility heading-4 {
+    font: var(--jkl-text-style-heading-4);
+}
+
+@utility heading-5 {
+    font: var(--jkl-text-style-heading-5);
+}
+
+@utility paragraph-large {
+    font: var(--jkl-text-style-paragraph-large);
+}
+
+@utility paragraph-medium {
+    font: var(--jkl-text-style-paragraph-medium);
+}
+
+@utility paragraph-small {
+    font: var(--jkl-text-style-paragraph-small);
+}
+
+@utility text-large {
+    font: var(--jkl-text-style-text-large);
+}
+
+@utility text-medium {
+    font: var(--jkl-text-style-text-medium);
+}
+
+@utility text-small {
+    font: var(--jkl-text-style-text-small);
+}
+
+@utility text-micro {
+    font: var(--jkl-text-style-text-micro);
+}

package/styles/theme/_color-scheme.scss

@@ -0,0 +1,153 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@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-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 */
+    }
+
+    :root, [data-variant="neutral"] {
+        --jkl-color-background-page: var(--jkl-color-neutral-background-page);
+        --jkl-color-background-container: var(--jkl-color-neutral-background-container);
+        --jkl-color-background-action: var(--jkl-color-neutral-background-action);
+        --jkl-color-text-default: var(--jkl-color-neutral-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-neutral-text-subdued);
+        --jkl-color-text-on-action: var(--jkl-color-neutral-text-on-action);
+        --jkl-color-border-strong: var(--jkl-color-neutral-border-strong);
+        --jkl-color-border-default: var(--jkl-color-neutral-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-neutral-border-subdued);
+    }
+
+    [data-variant="accent"] {
+        --jkl-color-background-page: var(--jkl-color-accent-background-page);
+        --jkl-color-background-container: var(--jkl-color-accent-background-container);
+        --jkl-color-background-action: var(--jkl-color-accent-background-action);
+        --jkl-color-text-default: var(--jkl-color-accent-text-default);
+        --jkl-color-text-subdued: var(--jkl-color-accent-text-subdued);
+        --jkl-color-text-on-action: var(--jkl-color-accent-text-on-action);
+        --jkl-color-border-strong: var(--jkl-color-accent-border-strong);
+        --jkl-color-border-default: var(--jkl-color-accent-border-default);
+        --jkl-color-border-subdued: var(--jkl-color-accent-border-subdued);
+    }
+
+    [data-theme="light"] {
+        color-scheme: light;
+    }
+
+    [data-theme="dark"] {
+        color-scheme: dark;
+    }
+}

package/styles/{core/theme → theme}/_dynamic-spacing.scss

@@ -1,8 +1,9 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
-@use "../jkl/screens";
-@use "../jkl/spacing";
+@use "jkl";
+@use "jkl/screens";
+@use "jkl/spacing";
 
 @function get-class-name($spacing-combination) {
     $class-name: "jkl-spacing";
@@ -21,7 +22,8 @@
             $_step: list.nth($spacing-combination, 1);
 
             --#{get-class-name($spacing-combination)}: #{map.get(
-                spacing.$spacing,
+                jkl.$tokens,
+                "spacing"
                 $_step
             )};
         }
@@ -32,7 +34,8 @@
                     $_step: list.nth($spacing-combination, 2);
 
                     --#{get-class-name($spacing-combination)}: #{map.get(
-                        spacing.$spacing,
+                        jkl.$tokens,
+                        "spacing"
                         $_step
                     )};
                 }
@@ -45,7 +48,8 @@
                     $_step: list.nth($spacing-combination, 3);
 
                     --#{get-class-name($spacing-combination)}: #{map.get(
-                        spacing.$spacing,
+                        jkl.$tokens,
+                        "spacing"
                         $_step
                     )};
                 }

package/styles/theme/_fonts.scss

@@ -0,0 +1,147 @@
+@charset "UTF-8";
+
+$webfonts-dir: "/fonts" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: "Fremtind Grotesk";
+        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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Arial Fallback";
+        font-weight: 400;
+        font-style: normal;
+        src: local(arial);
+        size-adjust: 104%;
+        ascent-override: 82%;
+        descent-override: normal;
+        line-gap-override: 32%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Grotesk";
+        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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Arial Fallback";
+        font-weight: 700;
+        font-style: normal;
+        src: local(arial);
+        size-adjust: 108%;
+        ascent-override: 83%;
+        descent-override: normal;
+        line-gap-override: 28%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Grotesk";
+        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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Arial Fallback";
+        font-weight: 400;
+        font-style: italic;
+        src: local(arial);
+        size-adjust: 106%;
+        ascent-override: 83%;
+        descent-override: normal;
+        line-gap-override: 28%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Grotesk";
+        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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Arial Fallback";
+        font-weight: 700;
+        font-style: italic;
+        src: local(arial);
+        size-adjust: 108%;
+        ascent-override: 83%;
+        descent-override: normal;
+        line-gap-override: 28%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Grotesk 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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Arial Display Fallback";
+        font-weight: 400;
+        font-style: normal;
+        src: local(arial);
+        size-adjust: 102%;
+        ascent-override: 76%;
+        descent-override: normal;
+        line-gap-override: 40%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Grotesk 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");
+    }
+
+    @font-face {
+        font-family: "Adjusted Courier New Fallback";
+        font-weight: 400;
+        font-style: normal;
+        src: local(courier new);
+        size-adjust: 100%;
+        ascent-override: 83%;
+        descent-override: normal;
+        line-gap-override: 27%;
+    }
+
+    @font-face {
+        font-family: "Fremtind Material Symbols";
+        font-weight: 300 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/Fremtind-Material-Symbols.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Fremtind Material Symbols Fallback";
+        src: local(courier new);
+        font-weight: 300 400;
+        font-style: normal;
+        size-adjust: 0%;
+    }
+}

package/styles/theme/_index.scss

@@ -0,0 +1,8 @@
+@forward "fonts";
+@forward "dynamic-spacing";
+@forward "color-scheme";
+@forward "brands/dnb/color-scheme";
+@forward "brands/eika/color-scheme";
+@forward "brands/sparebank1/color-scheme";
+@forward "size";
+@forward "tokens";

package/styles/theme/_size.scss

@@ -0,0 +1,53 @@
+/**
+ * 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;
+    }
+}