@fremtind/jokul 5.0.5 → 5.2.0

package/styles/global/_base-class.scss

@@ -22,9 +22,10 @@
         color: var(--jkl-color);
 
         @include jkl.use-font-family("Jokul");
+        font-weight: var(--jkl-font-weight-normal);
 
         strong {
-            font-weight: jkl.$font-weight-bold;
+            font-weight: var(--jkl-font-weight-bold);
         }
 
         a, button:not(:disabled) {

package/styles/global/_top-layer.scss

@@ -3,11 +3,20 @@
 @layer jokul.global {
     [popover] {
         opacity: 0;
-        transition: opacity,
+
+        // Safari has not implemented the `overlay` CSS property (see
+        // [WebKit bug 276727](https://bugs.webkit.org/show_bug.cgi?id=276727)).
+        // Without `overlay allow-discrete`, the element is removed from the top layer
+        // immediately on close while the opacity transition is still running — leaving
+        // a transparent but fully interactive fixed element covering the viewport.
+        // We only apply the animated exit on browsers that support `overlay`.
+        @supports (overlay: auto) {
+            transition: opacity,
             overlay allow-discrete,
             display allow-discrete;
 
-        @include jkl.motion("standard", "productive");
+            @include jkl.motion("standard", "productive");
+        }
 
         &:popover-open {
             opacity: 1;
@@ -15,6 +24,13 @@
             @starting-style {
                 opacity: 0;
             }
+
+            // Entry transition works on all browsers since it doesn't depend on overlay.
+            @supports not (overlay: auto) {
+                transition: opacity;
+
+                @include jkl.motion("standard", "productive");
+            }
         }
     }
-}
+}

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

@@ -17,6 +17,7 @@
     border-radius: var(--jkl-border-radius-s);
     box-sizing: border-box;
     max-width: 100%;
+    overflow: hidden;
 
     position: relative;
     display: flex;
@@ -28,9 +29,8 @@
 
     background-color: var(--background-color);
     color: var(--text-color);
-    box-shadow:
-        inset 0 0 0 jkl.rem(1px) var(--border-color),
-        0 0 0 jkl.rem(1px) transparent;
+    box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+    0 0 0 jkl.rem(1px) transparent;
 
     &:focus-within,
     &:has([data-focused="true"]) {
@@ -38,7 +38,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);
@@ -49,9 +48,8 @@
     &:has([data-focused="true"]) {
         --border-color: var(--jkl-color-border-strong);
 
-        box-shadow:
-            inset 0 0 0 jkl.rem(1px) var(--border-color),
-            0 0 0 jkl.rem(1px) var(--border-color);
+        box-shadow: inset 0 0 0 jkl.rem(1px) var(--border-color),
+        0 0 0 jkl.rem(1px) var(--border-color);
 
         @include jkl.forced-colors-mode {
             border: jkl.rem(2px) solid ButtonText;
@@ -84,7 +82,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);
@@ -129,3 +129,27 @@
         color: var(--placeholder-color);
     }
 }
+
+@mixin input-separator {
+    --inset-size: 1ex;
+    --separator-color: var(--jkl-color-border-subdued);
+
+    position: relative;
+
+    &::before {
+        content: "";
+        position: absolute;
+        block-size: calc(100% * var(--inset-size));
+        top: 0;
+        left: 0;
+        inset-block: var(--inset-size);
+        border-inline-end: 1px solid var(--separator-color);
+        z-index: 1;
+        @include jkl.motion("standard", "productive", inset, border-color);
+    }
+
+    &:hover, &:focus-within {
+        --inset-size: 1px;
+        --separator-color: var(--jkl-color-border-subdued);
+    }
+}

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;