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

package/styles/tailwind.css

@@ -6,72 +6,116 @@
 @theme {
     --*: initial;
 
-    --color-background-page: #F4F2EF;
-    --color-background-page: light-dark(#F4F2EF, #1B1917);
-    --color-background-page-variant: #F9F9F9;
-    --color-background-page-variant: light-dark(#F9F9F9, #1B1917);
-    --color-background-container: #F9F9F9;
-    --color-background-container: light-dark(#F9F9F9, #313030);
-    --color-background-container-low: #ECE9E5;
-    --color-background-container-low: light-dark(#ECE9E5, #000000);
-    --color-background-container-high: #FFFFFF;
-    --color-background-container-high: light-dark(#FFFFFF, #313030);
-    --color-background-container-inverted: #1B1917;
-    --color-background-container-inverted: light-dark(#1B1917, #F9F9F9);
-    --color-background-container-subdued: #C8C5C3;
-    --color-background-container-subdued: light-dark(#C8C5C3, #636060);
-    --color-background-input-base: transparent;
-    --color-background-input-base: light-dark(transparent, transparent);
-    --color-background-input-focus: #FFFFFF;
-    --color-background-input-focus: light-dark(#FFFFFF, #313030);
-    --color-background-action: #1B1917;
-    --color-background-action: light-dark(#1B1917, #F9F9F9);
-    --color-background-interactive: transparent;
-    --color-background-interactive: light-dark(transparent, transparent);
-    --color-background-interactive-hover: #ECE9E5;
-    --color-background-interactive-hover: light-dark(#ECE9E5, #444141);
-    --color-background-interactive-selected: #E0DBD4;
-    --color-background-interactive-selected: light-dark(#E0DBD4, #636060);
-    --color-background-alert-neutral: #E0DBD4;
-    --color-background-alert-neutral: light-dark(#E0DBD4, #E0DBD4);
-    --color-background-alert-info: #D3D3F6;
-    --color-background-alert-info: light-dark(#D3D3F6, #A9A9CA);
-    --color-background-alert-success: #ACD3B5;
-    --color-background-alert-success: light-dark(#ACD3B5, #94B79B);
-    --color-background-alert-warning: #EFDD9E;
-    --color-background-alert-warning: light-dark(#EFDD9E, #DECC8D);
-    --color-background-alert-error: #F6B3B3;
-    --color-background-alert-error: light-dark(#F6B3B3, #DE9E9E);
+    --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-inverted: #F9F9F9;
-    --color-text-inverted: light-dark(#F9F9F9, #1B1917);
-    --color-text-on-action: #F9F9F9;
-    --color-text-on-action: light-dark(#F9F9F9, #1B1917);
-    --color-text-interactive: #1B1917;
-    --color-text-interactive: light-dark(#1B1917, #F9F9F9);
-    --color-text-interactive-hover: #636060;
-    --color-text-interactive-hover: light-dark(#636060, #C8C5C3);
-    --color-text-on-alert: #1B1917;
-    --color-text-on-alert: light-dark(#1B1917, #1B1917);
-    --color-text-on-alert-subdued: #444141;
-    --color-text-on-alert-subdued: light-dark(#444141, #444141);
-    --color-border-action: #1B1917;
-    --color-border-action: light-dark(#1B1917, #F9F9F9);
-    --color-border-input: #636060;
-    --color-border-input: light-dark(#636060, #C8C5C3);
-    --color-border-input-focus: #1B1917;
-    --color-border-input-focus: light-dark(#1B1917, #F9F9F9);
-    --color-border-separator: #C8C5C3;
-    --color-border-separator: light-dark(#C8C5C3, #636060);
-    --color-border-separator-strong: #636060;
-    --color-border-separator-strong: light-dark(#636060, #C8C5C3);
-    --color-border-separator-hover: #1B1917;
-    --color-border-separator-hover: light-dark(#1B1917, #F9F9F9);
+    --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;

package/styles/theme/_color-scheme.scss

@@ -7,77 +7,124 @@
     :root {
         color-scheme: light dark;
 
-        --jkl-color-background-page: #F4F2EF;
-        --jkl-color-background-page: light-dark(#F4F2EF, #1B1917);
-        --jkl-color-background-page-variant: #F9F9F9;
-        --jkl-color-background-page-variant: light-dark(#F9F9F9, #1B1917);
-        --jkl-color-background-container: #F9F9F9;
-        --jkl-color-background-container: light-dark(#F9F9F9, #313030);
-        --jkl-color-background-container-low: #ECE9E5;
-        --jkl-color-background-container-low: light-dark(#ECE9E5, #000000);
-        --jkl-color-background-container-high: #FFFFFF;
-        --jkl-color-background-container-high: light-dark(#FFFFFF, #313030);
-        --jkl-color-background-container-inverted: #1B1917;
-        --jkl-color-background-container-inverted: light-dark(#1B1917, #F9F9F9);
-        --jkl-color-background-container-subdued: #C8C5C3;
-        --jkl-color-background-container-subdued: light-dark(#C8C5C3, #636060);
-        --jkl-color-background-input-base: transparent;
-        --jkl-color-background-input-base: light-dark(transparent, transparent);
-        --jkl-color-background-input-focus: #FFFFFF;
-        --jkl-color-background-input-focus: light-dark(#FFFFFF, #313030);
-        --jkl-color-background-action: #1B1917;
-        --jkl-color-background-action: light-dark(#1B1917, #F9F9F9);
-        --jkl-color-background-interactive: transparent;
-        --jkl-color-background-interactive: light-dark(transparent, transparent);
-        --jkl-color-background-interactive-hover: #ECE9E5;
-        --jkl-color-background-interactive-hover: light-dark(#ECE9E5, #444141);
-        --jkl-color-background-interactive-selected: #E0DBD4;
-        --jkl-color-background-interactive-selected: light-dark(#E0DBD4, #636060);
-        --jkl-color-background-alert-neutral: #E0DBD4;
-        --jkl-color-background-alert-neutral: light-dark(#E0DBD4, #E0DBD4);
-        --jkl-color-background-alert-info: #D3D3F6;
-        --jkl-color-background-alert-info: light-dark(#D3D3F6, #A9A9CA);
-        --jkl-color-background-alert-success: #ACD3B5;
-        --jkl-color-background-alert-success: light-dark(#ACD3B5, #94B79B);
-        --jkl-color-background-alert-warning: #EFDD9E;
-        --jkl-color-background-alert-warning: light-dark(#EFDD9E, #DECC8D);
-        --jkl-color-background-alert-error: #F6B3B3;
-        --jkl-color-background-alert-error: light-dark(#F6B3B3, #DE9E9E);
+        /* 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-inverted: #F9F9F9;
-        --jkl-color-text-inverted: light-dark(#F9F9F9, #1B1917);
-        --jkl-color-text-on-action: #F9F9F9;
-        --jkl-color-text-on-action: light-dark(#F9F9F9, #1B1917);
-        --jkl-color-text-interactive: #1B1917;
-        --jkl-color-text-interactive: light-dark(#1B1917, #F9F9F9);
-        --jkl-color-text-interactive-hover: #636060;
-        --jkl-color-text-interactive-hover: light-dark(#636060, #C8C5C3);
-        --jkl-color-text-on-alert: #1B1917;
-        --jkl-color-text-on-alert: light-dark(#1B1917, #1B1917);
-        --jkl-color-text-on-alert-subdued: #444141;
-        --jkl-color-text-on-alert-subdued: light-dark(#444141, #444141);
-        --jkl-color-border-action: #1B1917;
-        --jkl-color-border-action: light-dark(#1B1917, #F9F9F9);
-        --jkl-color-border-input: #636060;
-        --jkl-color-border-input: light-dark(#636060, #C8C5C3);
-        --jkl-color-border-input-focus: #1B1917;
-        --jkl-color-border-input-focus: light-dark(#1B1917, #F9F9F9);
-        --jkl-color-border-separator: #C8C5C3;
-        --jkl-color-border-separator: light-dark(#C8C5C3, #636060);
-        --jkl-color-border-separator-strong: #636060;
-        --jkl-color-border-separator-strong: light-dark(#636060, #C8C5C3);
-        --jkl-color-border-separator-hover: #1B1917;
-        --jkl-color-border-separator-hover: light-dark(#1B1917, #F9F9F9);
+        --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/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";
@@ -23,7 +23,7 @@
 
             --#{get-class-name($spacing-combination)}: #{map.get(
                 jkl.$tokens,
-                "spacing"
+                "spacing",
                 $_step
             )};
         }
@@ -35,7 +35,7 @@
 
                     --#{get-class-name($spacing-combination)}: #{map.get(
                         jkl.$tokens,
-                        "spacing"
+                        "spacing",
                         $_step
                     )};
                 }
@@ -49,7 +49,7 @@
 
                     --#{get-class-name($spacing-combination)}: #{map.get(
                         jkl.$tokens,
-                        "spacing"
+                        "spacing",
                         $_step
                     )};
                 }

package/styles/theme/_fonts.scss

@@ -4,82 +4,60 @@ $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 {
-        font-family: "Adjusted Arial Fallback";
-        font-weight: 400;
+        font-family: Jokul;
+        font-display: fallback;
+        font-weight: 700;
         font-style: normal;
-        src: local(arial);
-        size-adjust: 104%;
-        ascent-override: 82%;
-        descent-override: normal;
-        line-gap-override: 32%;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @font-face {
-        font-family: "Fremtind Grotesk";
+        font-family: "Jokul Display";
         font-display: fallback;
-        font-weight: 700;
+        font-weight: 400;
         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 {
-        font-family: "Adjusted Arial Fallback";
-        font-weight: 700;
+        font-family: "Jokul Mono";
+        font-display: fallback;
+        font-weight: 400;
         font-style: normal;
-        src: local(arial);
-        size-adjust: 108%;
-        ascent-override: 83%;
-        descent-override: normal;
-        line-gap-override: 28%;
+        src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
 
     @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-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: italic;
+        font-style: normal;
         src: local(arial);
-        size-adjust: 106%;
-        ascent-override: 83%;
+        size-adjust: 104%;
+        ascent-override: 82%;
         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");
+        line-gap-override: 32%;
     }
 
     @font-face {
         font-family: "Adjusted Arial Fallback";
         font-weight: 700;
-        font-style: italic;
+        font-style: normal;
         src: local(arial);
         size-adjust: 108%;
         ascent-override: 83%;
@@ -87,16 +65,6 @@ $webfonts-dir: "/fonts" !default;
         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;
@@ -108,17 +76,6 @@ $webfonts-dir: "/fonts" !default;
         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;
@@ -131,14 +88,7 @@ $webfonts-dir: "/fonts" !default;
     }
 
     @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";
+        font-family: "Jokul Icons Fallback";
         src: local(courier new);
         font-weight: 300 400;
         font-style: normal;

package/styles/theme/_index.scss

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

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;