@fremtind/jokul 5.0.5 → 5.1.0

package/styles/jkl/_tokens.scss

@@ -136,6 +136,7 @@ $font-weight-bold: var(--jkl-font-weight-bold) !default;
 $font-family-regular: var(--jkl-font-family-regular) !default;
 $font-family-display: var(--jkl-font-family-display) !default;
 $font-family-mono: var(--jkl-font-family-mono) !default;
+$font-family-icons: var(--jkl-font-family-icons) !default;
 $line-height-flush: var(--jkl-line-height-flush) !default;
 $line-height-tight: var(--jkl-line-height-tight) !default;
 $line-height-relaxed: var(--jkl-line-height-relaxed) !default;
@@ -353,7 +354,8 @@ $tokens: (
     'family': (
       'regular': $font-family-regular,
       'display': $font-family-display,
-      'mono': $font-family-mono
+      'mono': $font-family-mono,
+      'icons': $font-family-icons
     )
   ),
   'lineHeight': (

package/styles/jkl/_typography.scss

@@ -86,9 +86,7 @@ $_valid-font-family-values: (
     } @else if $font == "Jokul Display" {
         font-family: var(--jkl-font-family-display);
     } @else if $font == "Jokul Icons" {
-        font-family:
-            "Jokul Icons", "Jokul Icons Fallback",
-            monospace;
+        font-family: var(--jkl-font-family-icons);
     } @else {
         font-family: var(--jkl-font-family-regular);
     }

package/styles/shared/input/shared-input-styles.scss

@@ -2,7 +2,8 @@
 @use "../../jkl";
 
 @mixin wrapper-styles {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
+        var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -38,7 +39,6 @@
     }
 
     &[data-invalid="true"]:not(:focus-within):not(:has([data-focused="true"])) {
-        --background-color: var(--jkl-color-error-background-container);
         --text-color: var(--jkl-color-error-text-default);
         --border-color: var(--jkl-color-error-border-default);
         --placeholder-color: var(--jkl-color-error-text-subdued);
@@ -84,7 +84,9 @@
         width: var(--jkl-text-input-action-button-size);
 
         // Unngå for langt mellomrom mellom ikon og teksten i feltet
-        margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
+        margin-inline-start: calc(
+            var(--jkl-text-input-horizontal-padding) * -1
+        );
 
         .jkl-icon-button__icon {
             height: var(--jkl-text-input-action-button-icon-size);

package/styles/theme/_fonts.scss

@@ -19,14 +19,6 @@ $webfonts-dir: "/fonts" !default;
         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;
@@ -85,4 +77,4 @@ $webfonts-dir: "/fonts" !default;
         font-style: normal;
         size-adjust: 0%;
     }
-}
+}

package/styles/theme/_tokens.scss

@@ -49,7 +49,8 @@
         --jkl-font-weight-bold: 530;
         --jkl-font-family-regular: 'Jokul', 'Adjusted Arial Fallback', arial, sans-serif;
         --jkl-font-family-display: 'Jokul Display', 'Adjusted Arial Display Fallback', arial, sans-serif;
-        --jkl-font-family-mono: 'Jokul Mono', 'Adjusted Courier New Fallback', -apple-system, blinkmacsystemfont, monospace;
+        --jkl-font-family-mono: monospace;
+        --jkl-font-family-icons: 'Jokul Icons', 'Jokul Icons Fallback', monospace;
         --jkl-line-height-flush: 1;
         --jkl-line-height-tight: 1.3;
         --jkl-line-height-relaxed: 1.6;