@fremtind/jokul 5.0.0-next.9 → 5.0.0

package/styles/components.scss

@@ -27,6 +27,7 @@
 @use "./components/message" as message;
 @use "./components/modal" as modal;
 @use "./components/nav-link" as nav-link;
+@use "./components/number-input" as number-input;
 @use "./components/beta/nav-link" as nav-link-beta;
 @use "./components/pagination" as pagination;
 @use "./components/popover" as popover;
@@ -50,4 +51,4 @@
 @use "./components/tooltip" as tooltip;
 @use "./components/typography" as typography;
 @use "./components/help" as help;
-@use "./components/flex" as flex;
+@use "./components/flex" as flex;

package/styles/jkl/_convert.scss

@@ -33,15 +33,21 @@
         "9": 9,
     );
 
-    @for $i from if($minus, 2, 1) through string.length($value) {
+    $start: 1;
+    @if $minus {
+        $start: 2;
+    }
+
+    @for $i from $start through string.length($value) {
         $character: string.slice($value, $i, $i);
 
         @if not(list.index(map.keys($numbers), $character) or $character == ".")
         {
-            @return to-length(
-                if($minus, -$result, $result),
-                string.slice($value, $i)
-            );
+            $signed-result: $result;
+            @if $minus {
+                $signed-result: -$result;
+            }
+            @return to-length($signed-result, string.slice($value, $i));
         }
 
         @if $character == "." {
@@ -54,7 +60,10 @@
         }
     }
 
-    @return if($minus, -$result, $result);
+    @if $minus {
+        @return -$result;
+    }
+    @return $result;
 }
 
 /// Add `$unit` to `$value`

package/styles/jkl/_tokens.scss

@@ -106,10 +106,10 @@ $border-radius-s: var(--jkl-border-radius-s) !default;
 $border-radius-m: var(--jkl-border-radius-m) !default;
 $border-radius-l: var(--jkl-border-radius-l) !default;
 $border-radius-full: var(--jkl-border-radius-full) !default;
-$breakpoint-small: var(--jkl-breakpoint-small) !default;
-$breakpoint-medium: var(--jkl-breakpoint-medium) !default;
-$breakpoint-large: var(--jkl-breakpoint-large) !default;
-$breakpoint-xl: var(--jkl-breakpoint-xl) !default;
+$breakpoint-small: 0 !default;
+$breakpoint-medium: 680px !default;
+$breakpoint-large: 1200px !default;
+$breakpoint-xl: 1600px !default;
 $motion-timing-energetic: var(--jkl-motion-timing-energetic) !default;
 $motion-timing-snappy: var(--jkl-motion-timing-snappy) !default;
 $motion-timing-productive: var(--jkl-motion-timing-productive) !default;

package/styles/tailwind.css

@@ -9,113 +9,113 @@
     --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-background-container: light-dark(#FFFFFF, #262221);
+    --color-background-container-accent: #E4DFD8;
+    --color-background-container-accent: light-dark(#E4DFD8, #3C3434);
+    --color-background-contrast: #262221;
+    --color-background-contrast: light-dark(#262221, #F3F0ED);
+    --color-text-default: #0E0D0C;
+    --color-text-default: light-dark(#0E0D0C, #FFFFFF);
     --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-text-accent: #0E0D0C;
+    --color-text-accent: light-dark(#0E0D0C, #FFFFFF);
+    --color-text-on-contrast: #FFFFFF;
+    --color-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
     --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-border-strong: #0E0D0C;
+    --color-border-strong: light-dark(#0E0D0C, #FFFFFF);
+    --color-warning-background-page: #F3F0ED;
+    --color-warning-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --color-warning-background-container: #EED9C3;
+    --color-warning-background-container: light-dark(#EED9C3, #48351E);
+    --color-warning-background-container-accent: #E4BC8A;
+    --color-warning-background-container-accent: light-dark(#E4BC8A, #61492D);
+    --color-warning-background-contrast: #D3770B;
+    --color-warning-background-contrast: light-dark(#D3770B, #EAA858);
+    --color-warning-text-default: #522E04;
+    --color-warning-text-default: light-dark(#522E04, #FDECD8);
+    --color-warning-text-subdued: #636060;
+    --color-warning-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-warning-text-accent: #D3770B;
+    --color-warning-text-accent: light-dark(#D3770B, #EAA858);
     --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-warning-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+    --color-warning-border-default: #D3770B;
+    --color-warning-border-default: light-dark(#D3770B, #EAA858);
+    --color-warning-border-subdued: #E4BC8A;
+    --color-warning-border-subdued: light-dark(#E4BC8A, #61492D);
+    --color-warning-border-strong: #522E04;
+    --color-warning-border-strong: light-dark(#522E04, #FDECD8);
+    --color-success-background-page: #F3F0ED;
+    --color-success-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --color-success-background-container: #D2E9CB;
+    --color-success-background-container: light-dark(#D2E9CB, #334D34);
+    --color-success-background-container-accent: #B7CFAF;
+    --color-success-background-container-accent: light-dark(#B7CFAF, #3F5F41);
+    --color-success-background-contrast: #24753A;
+    --color-success-background-contrast: light-dark(#24753A, #81E49C);
+    --color-success-text-default: #0A430D;
+    --color-success-text-default: light-dark(#0A430D, #DCF9E0);
+    --color-success-text-subdued: #636060;
+    --color-success-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-success-text-accent: #24753A;
+    --color-success-text-accent: light-dark(#24753A, #81E49C);
     --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-success-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+    --color-success-border-default: #24753A;
+    --color-success-border-default: light-dark(#24753A, #81E49C);
+    --color-success-border-subdued: #B7CFAF;
+    --color-success-border-subdued: light-dark(#B7CFAF, #3F5F41);
+    --color-success-border-strong: #0A430D;
+    --color-success-border-strong: light-dark(#0A430D, #DCF9E0);
+    --color-info-background-page: #F3F0ED;
+    --color-info-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --color-info-background-container: #D3D3F6;
+    --color-info-background-container: light-dark(#D3D3F6, #35355B);
+    --color-info-background-container-accent: #B5B5EB;
+    --color-info-background-container-accent: light-dark(#B5B5EB, #4B4B89);
     --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-background-contrast: light-dark(#4646D1, #9A9AEB);
+    --color-info-text-default: #111145;
+    --color-info-text-default: light-dark(#111145, #D8D8FD);
+    --color-info-text-subdued: #636060;
+    --color-info-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-info-text-accent: #4646D1;
+    --color-info-text-accent: light-dark(#4646D1, #9A9AEB);
     --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-info-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+    --color-info-border-default: #4646D1;
+    --color-info-border-default: light-dark(#4646D1, #9A9AEB);
+    --color-info-border-subdued: #B5B5EB;
+    --color-info-border-subdued: light-dark(#B5B5EB, #4B4B89);
+    --color-info-border-strong: #111145;
+    --color-info-border-strong: light-dark(#111145, #D8D8FD);
+    --color-error-background-page: #F3F0ED;
+    --color-error-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --color-error-background-container: #F0D6D6;
+    --color-error-background-container: light-dark(#F0D6D6, #4C2A28);
+    --color-error-background-container-accent: #E4B7B6;
+    --color-error-background-container-accent: light-dark(#E4B7B6, #6A3C39);
     --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-background-contrast: light-dark(#B32424, #F38C8C);
+    --color-error-text-default: #4A0D0D;
+    --color-error-text-default: light-dark(#4A0D0D, #FCD9D9);
+    --color-error-text-subdued: #636060;
+    --color-error-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-error-text-accent: #B32424;
+    --color-error-text-accent: light-dark(#B32424, #F38C8C);
     --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);
+    --color-error-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+    --color-error-border-default: #B32424;
+    --color-error-border-default: light-dark(#B32424, #F38C8C);
+    --color-error-border-subdued: #E4B7B6;
+    --color-error-border-subdued: light-dark(#E4B7B6, #6A3C39);
+    --color-error-border-strong: #4A0D0D;
+    --color-error-border-strong: light-dark(#4A0D0D, #FCD9D9);
 
     --spacing-0: 0rem;
     --spacing-2: 0.125rem;
@@ -138,8 +138,8 @@
     --spacing-xl: 4rem;
     --spacing-2xl: 6.5rem;
 
-    --font-weight-normal: 400;
-    --font-weight-bold: 700;
+    --font-weight-normal: 380;
+    --font-weight-bold: 530;
 
     --breakpoint-small: 0;
     --breakpoint-medium: 680px;

package/styles/theme/_color-scheme.scss

@@ -11,113 +11,113 @@
         --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-background-container: light-dark(#FFFFFF, #262221);
+        --jkl-color-background-container-accent: #E4DFD8;
+        --jkl-color-background-container-accent: light-dark(#E4DFD8, #3C3434);
+        --jkl-color-background-contrast: #262221;
+        --jkl-color-background-contrast: light-dark(#262221, #F3F0ED);
+        --jkl-color-text-default: #0E0D0C;
+        --jkl-color-text-default: light-dark(#0E0D0C, #FFFFFF);
         --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-text-accent: #0E0D0C;
+        --jkl-color-text-accent: light-dark(#0E0D0C, #FFFFFF);
+        --jkl-color-text-on-contrast: #FFFFFF;
+        --jkl-color-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
         --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-border-strong: #0E0D0C;
+        --jkl-color-border-strong: light-dark(#0E0D0C, #FFFFFF);
+        --jkl-color-warning-background-page: #F3F0ED;
+        --jkl-color-warning-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-warning-background-container: #EED9C3;
+        --jkl-color-warning-background-container: light-dark(#EED9C3, #48351E);
+        --jkl-color-warning-background-container-accent: #E4BC8A;
+        --jkl-color-warning-background-container-accent: light-dark(#E4BC8A, #61492D);
+        --jkl-color-warning-background-contrast: #D3770B;
+        --jkl-color-warning-background-contrast: light-dark(#D3770B, #EAA858);
+        --jkl-color-warning-text-default: #522E04;
+        --jkl-color-warning-text-default: light-dark(#522E04, #FDECD8);
+        --jkl-color-warning-text-subdued: #636060;
+        --jkl-color-warning-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-warning-text-accent: #D3770B;
+        --jkl-color-warning-text-accent: light-dark(#D3770B, #EAA858);
         --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-warning-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-warning-border-default: #D3770B;
+        --jkl-color-warning-border-default: light-dark(#D3770B, #EAA858);
+        --jkl-color-warning-border-subdued: #E4BC8A;
+        --jkl-color-warning-border-subdued: light-dark(#E4BC8A, #61492D);
+        --jkl-color-warning-border-strong: #522E04;
+        --jkl-color-warning-border-strong: light-dark(#522E04, #FDECD8);
+        --jkl-color-success-background-page: #F3F0ED;
+        --jkl-color-success-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-success-background-container: #D2E9CB;
+        --jkl-color-success-background-container: light-dark(#D2E9CB, #334D34);
+        --jkl-color-success-background-container-accent: #B7CFAF;
+        --jkl-color-success-background-container-accent: light-dark(#B7CFAF, #3F5F41);
+        --jkl-color-success-background-contrast: #24753A;
+        --jkl-color-success-background-contrast: light-dark(#24753A, #81E49C);
+        --jkl-color-success-text-default: #0A430D;
+        --jkl-color-success-text-default: light-dark(#0A430D, #DCF9E0);
+        --jkl-color-success-text-subdued: #636060;
+        --jkl-color-success-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-success-text-accent: #24753A;
+        --jkl-color-success-text-accent: light-dark(#24753A, #81E49C);
         --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-success-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-success-border-default: #24753A;
+        --jkl-color-success-border-default: light-dark(#24753A, #81E49C);
+        --jkl-color-success-border-subdued: #B7CFAF;
+        --jkl-color-success-border-subdued: light-dark(#B7CFAF, #3F5F41);
+        --jkl-color-success-border-strong: #0A430D;
+        --jkl-color-success-border-strong: light-dark(#0A430D, #DCF9E0);
+        --jkl-color-info-background-page: #F3F0ED;
+        --jkl-color-info-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-info-background-container: #D3D3F6;
+        --jkl-color-info-background-container: light-dark(#D3D3F6, #35355B);
+        --jkl-color-info-background-container-accent: #B5B5EB;
+        --jkl-color-info-background-container-accent: light-dark(#B5B5EB, #4B4B89);
         --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-background-contrast: light-dark(#4646D1, #9A9AEB);
+        --jkl-color-info-text-default: #111145;
+        --jkl-color-info-text-default: light-dark(#111145, #D8D8FD);
+        --jkl-color-info-text-subdued: #636060;
+        --jkl-color-info-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-info-text-accent: #4646D1;
+        --jkl-color-info-text-accent: light-dark(#4646D1, #9A9AEB);
         --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-info-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-info-border-default: #4646D1;
+        --jkl-color-info-border-default: light-dark(#4646D1, #9A9AEB);
+        --jkl-color-info-border-subdued: #B5B5EB;
+        --jkl-color-info-border-subdued: light-dark(#B5B5EB, #4B4B89);
+        --jkl-color-info-border-strong: #111145;
+        --jkl-color-info-border-strong: light-dark(#111145, #D8D8FD);
+        --jkl-color-error-background-page: #F3F0ED;
+        --jkl-color-error-background-page: light-dark(#F3F0ED, #0E0D0C);
+        --jkl-color-error-background-container: #F0D6D6;
+        --jkl-color-error-background-container: light-dark(#F0D6D6, #4C2A28);
+        --jkl-color-error-background-container-accent: #E4B7B6;
+        --jkl-color-error-background-container-accent: light-dark(#E4B7B6, #6A3C39);
         --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-background-contrast: light-dark(#B32424, #F38C8C);
+        --jkl-color-error-text-default: #4A0D0D;
+        --jkl-color-error-text-default: light-dark(#4A0D0D, #FCD9D9);
+        --jkl-color-error-text-subdued: #636060;
+        --jkl-color-error-text-subdued: light-dark(#636060, #C8C5C3);
+        --jkl-color-error-text-accent: #B32424;
+        --jkl-color-error-text-accent: light-dark(#B32424, #F38C8C);
         --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);
+        --jkl-color-error-text-on-contrast: light-dark(#FFFFFF, #0E0D0C);
+        --jkl-color-error-border-default: #B32424;
+        --jkl-color-error-border-default: light-dark(#B32424, #F38C8C);
+        --jkl-color-error-border-subdued: #E4B7B6;
+        --jkl-color-error-border-subdued: light-dark(#E4B7B6, #6A3C39);
+        --jkl-color-error-border-strong: #4A0D0D;
+        --jkl-color-error-border-strong: light-dark(#4A0D0D, #FCD9D9);
         /* stylelint-enable declaration-block-no-duplicate-custom-properties */
     }
 

package/styles/theme/_dynamic-spacing.scss

@@ -20,24 +20,29 @@
     :root {
         @each $spacing-combination in spacing.$combinations {
             $_step: list.nth($spacing-combination, 1);
+            $_value: map.get(jkl.$tokens, "spacing", $_step);
 
-            --#{get-class-name($spacing-combination)}: #{map.get(
-                jkl.$tokens,
-                "spacing"
-                $_step
-            )};
+            @if not $_value {
+                @error "Forsøker å lage en dynamisk spacing-variabel med en avstand som ikke finnes (#{$_step})!"
+            }
+
+            // Vi trenger ikke redefinere de vanlige spacing-variablene (de som bare har én verdi)
+            @if list.length($spacing-combination) != 1 {
+                --#{get-class-name($spacing-combination)}: #{$_value};
+            }
         }
 
         @include screens.from-medium-device {
             @each $spacing-combination in spacing.$combinations {
                 @if list.length($spacing-combination) > 1 {
                     $_step: list.nth($spacing-combination, 2);
+                    $_value: map.get(jkl.$tokens, "spacing", $_step);
 
-                    --#{get-class-name($spacing-combination)}: #{map.get(
-                        jkl.$tokens,
-                        "spacing"
-                        $_step
-                    )};
+                    @if not $_value {
+                        @error "Forsøker å lage en dynamisk spacing-variabel med en avstand som ikke finnes (#{$_step})!"
+                    }
+
+                    --#{get-class-name($spacing-combination)}: #{$_value};
                 }
             }
         }
@@ -46,12 +51,13 @@
             @each $spacing-combination in spacing.$combinations {
                 @if list.length($spacing-combination) > 2 {
                     $_step: list.nth($spacing-combination, 3);
+                    $_value: map.get(jkl.$tokens, "spacing", $_step);
+
+                    @if not $_value {
+                        @error "Forsøker å lage en dynamisk spacing-variabel med en avstand som ikke finnes (#{$_step})!"
+                    }
 
-                    --#{get-class-name($spacing-combination)}: #{map.get(
-                        jkl.$tokens,
-                        "spacing"
-                        $_step
-                    )};
+                    --#{get-class-name($spacing-combination)}: #{$_value};
                 }
             }
         }

package/styles/theme/_fonts.scss

@@ -6,15 +6,7 @@ $webfonts-dir: "/fonts" !default;
     @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-weight: 100 900;
         font-style: normal;
         src: url("#{$webfonts-dir}/InterVariable.woff2") format("woff2");
     }
@@ -39,8 +31,7 @@ $webfonts-dir: "/fonts" !default;
         font-family: "Jokul Icons";
         font-weight: 300 400;
         font-style: normal;
-        src: url("#{$webfonts-dir}/Fremtind-Material-Symbols.woff2")
-            format("woff2");
+        src: url("#{$webfonts-dir}/Fremtind-Material-Symbols.woff2") format("woff2");
     }
 
     @font-face {
@@ -94,4 +85,4 @@ $webfonts-dir: "/fonts" !default;
         font-style: normal;
         size-adjust: 0%;
     }
-}
+}

package/styles/theme/_index.scss

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