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

package/styles/tailwind.css

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

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

@@ -1,6 +1,7 @@
 @use "sass:list";
 @use "sass:map";
 @use "sass:string";
+@use "../jkl";
 @use "../jkl/screens";
 @use "../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,97 @@
+@charset "UTF-8";
+
+$webfonts-dir: "/fonts" !default;
+
+@layer jokul.theme {
+    @font-face {
+        font-family: Jokul;
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: Jokul;
+        font-display: fallback;
+        font-weight: 700;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Jokul Display";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Jokul Mono";
+        font-display: fallback;
+        font-weight: 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
+    }
+
+    @font-face {
+        font-family: "Jokul Icons";
+        font-weight: 300 400;
+        font-style: normal;
+        src: url("#{$webfonts-dir}/Fremtind-Material-Symbols.woff2")
+            format("woff2");
+    }
+
+    @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: "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: "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: "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: "Jokul Icons Fallback";
+        src: local(courier new);
+        font-weight: 300 400;
+        font-style: normal;
+        size-adjust: 0%;
+    }
+}

package/styles/theme/_index.scss

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

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;
+    }
+}

package/styles/theme/_tokens.scss

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