@fremtind/jokul 0.27.2 → 0.27.4

package/styles/core/_spacing.scss

@@ -17,7 +17,10 @@
     @each $spacing-combination in spacing.$combinations {
         $_step: list.nth($spacing-combination, 1);
 
-        --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+        --#{get-class-name($spacing-combination)}: #{map.get(
+                spacing.$spacing,
+                $_step
+            )};
     }
 
     @include screens.from-medium-device {
@@ -25,7 +28,10 @@
             @if list.length($spacing-combination) > 1 {
                 $_step: list.nth($spacing-combination, 2);
 
-                --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+                --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
             }
         }
     }
@@ -35,7 +41,10 @@
             @if list.length($spacing-combination) > 2 {
                 $_step: list.nth($spacing-combination, 3);
 
-                --#{get-class-name($spacing-combination)}: #{map.get(spacing.$spacing, $_step)};
+                --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
             }
         }
     }

package/styles/core/core.scss

@@ -32,14 +32,19 @@
 
 :root {
     @each $level, $values in typography.$text-styles {
-        @each $property, $value in map.get(typography.$text-styles, $level, "small-screen") {
+        @each $property,
+            $value in map.get(typography.$text-styles, $level, "small-screen")
+        {
             --jkl-#{$level}-#{$property}: #{$value};
         }
     }
 
     @include jkl.from-medium-device {
         @each $level, $values in typography.$text-styles {
-            @each $property, $value in map.get(typography.$text-styles, $level, "large-screen") {
+            @each $property,
+                $value
+                    in map.get(typography.$text-styles, $level, "large-screen")
+            {
                 --jkl-#{$level}-#{$property}: #{$value};
             }
         }

package/styles/core/jkl/_convert.scss

@@ -35,7 +35,10 @@
         $character: string.slice($value, $i, $i);
 
         @if not(index(map.keys($numbers), $character) or $character == ".") {
-            @return to-length(if($minus, -$result, $result), string.slice($value, $i));
+            @return to-length(
+                if($minus, -$result, $result),
+                string.slice($value, $i)
+            );
         }
 
         @if $character == "." {

package/styles/core/jkl/_helpers.scss

@@ -14,7 +14,13 @@
 /// @param {String} $left [initial]
 /// @param {String} $right [initial]
 /// @param {String} $bottom [initial]
-@mixin position($position, $top: initial, $left: initial, $right: initial, $bottom: initial) {
+@mixin position(
+    $position,
+    $top: initial,
+    $left: initial,
+    $right: initial,
+    $bottom: initial
+) {
     position: $position;
     inset: $top $right $bottom $left;
 }

package/styles/core/jkl/_ornaments.scss

@@ -6,7 +6,9 @@
     height: $size;
 
     transform-origin: 26.33% 73.66%; // places origin in center of chevron
-    transform: rotate((-45 + $rotate) * 1deg); // default orientation is pointing down
+    transform: rotate(
+        (-45 + $rotate) * 1deg
+    ); // default orientation is pointing down
 
     border-left: $weight solid $color;
     border-bottom: $weight solid $color;

package/styles/core/jkl/_spacing.scss

@@ -145,7 +145,10 @@ $positions: (top, bottom, left, right);
 
     $first-value: string.slice($string, 0, $delimiter-index - 1);
     // Finn eventuelt flere substrenger ved å kjøre funksjonen rekursivt
-    $other-values: _split-string(string.slice($string, $delimiter-index + 1), $delimiter);
+    $other-values: _split-string(
+        string.slice($string, $delimiter-index + 1),
+        $delimiter
+    );
 
     // Returner en kommaseparert liste over substrengene
     @return list.join($first-value, $other-values, "comma");

package/styles/core/jkl/_tokens.scss

@@ -132,14 +132,22 @@ $color-background-page-variant: var(--jkl-color-background-page-variant);
 $color-background-container: var(--jkl-color-background-container);
 $color-background-container-low: var(--jkl-color-background-container-low);
 $color-background-container-high: var(--jkl-color-background-container-high);
-$color-background-container-inverted: var(--jkl-color-background-container-inverted);
-$color-background-container-subdued: var(--jkl-color-background-container-subdued);
+$color-background-container-inverted: var(
+    --jkl-color-background-container-inverted
+);
+$color-background-container-subdued: var(
+    --jkl-color-background-container-subdued
+);
 $color-background-input-base: var(--jkl-color-background-input-base);
 $color-background-input-focus: var(--jkl-color-background-input-focus);
 $color-background-action: var(--jkl-color-background-action);
 $color-background-interactive: var(--jkl-color-background-interactive);
-$color-background-interactive-hover: var(--jkl-color-background-interactive-hover);
-$color-background-interactive-selected: var(--jkl-color-background-interactive-selected);
+$color-background-interactive-hover: var(
+    --jkl-color-background-interactive-hover
+);
+$color-background-interactive-selected: var(
+    --jkl-color-background-interactive-selected
+);
 $color-background-alert-neutral: var(--jkl-color-background-alert-neutral);
 $color-background-alert-info: var(--jkl-color-background-alert-info);
 $color-background-alert-success: var(--jkl-color-background-alert-success);

package/styles/core/jkl/_typography.scss

@@ -267,7 +267,9 @@ $text-styles: (
             // Styles heading-5 and small are the same size on small and large screens. Skip to generate less CSS.
             @if $style != "small" and $style != "heading-5" {
                 @include screens.from-medium-device {
-                    @each $property, $value in map.get($variants, "large-screen") {
+                    @each $property,
+                        $value in map.get($variants, "large-screen")
+                    {
                         #{$property}: $value;
                     }
                     @content;
@@ -325,7 +327,11 @@ $text-styles: (
     font-weight: var(--#{$name}-font-weight);
 }
 
-$_valid-font-family-values: ("Fremtind Grotesk", "Fremtind Grotesk Display", "Fremtind Grotesk Mono");
+$_valid-font-family-values: (
+    "Fremtind Grotesk",
+    "Fremtind Grotesk Display",
+    "Fremtind Grotesk Mono"
+);
 
 /// Hjelper sette riktig remse med fallback-fonts for Fremtind Grotesk, Fremtind Grotesk Display, og Fremtind Grotesk Mono.
 /// @param {"Fremtind Grotesk" | "Fremtind Grotesk Mono" | "Fremtind Grotesk Display"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
@@ -336,11 +342,13 @@ $_valid-font-family-values: ("Fremtind Grotesk", "Fremtind Grotesk Display", "Fr
     }
 
     @if $font == "Fremtind Grotesk Mono" {
-        font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback", -apple-system, BlinkMacSystemFont,
-            monospace;
+        font-family: "Fremtind Grotesk Mono", "Adjusted Courier New Fallback",
+            -apple-system, BlinkMacSystemFont, monospace;
     } @else if $font == "Fremtind Grotesk Display" {
-        font-family: "Fremtind Grotesk Display", "Adjusted Arial Display Fallback", Arial, sans-serif;
+        font-family: "Fremtind Grotesk Display",
+            "Adjusted Arial Display Fallback", Arial, sans-serif;
     } @else {
-        font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+        font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial,
+            sans-serif;
     }
 }

package/styles/fonts/webfonts.scss

@@ -7,7 +7,8 @@ $webfonts-dir: "/fonts" !default;
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("#{$webfonts-dir}/FremtindGrotesk-Regular-Web.woff2") format("woff2"),
+    src: url("#{$webfonts-dir}/FremtindGrotesk-Regular-Web.woff2")
+            format("woff2"),
         url("#{$webfonts-dir}/FremtindGrotesk-Regular-Web.woff") format("woff");
 }
 
@@ -47,7 +48,8 @@ $webfonts-dir: "/fonts" !default;
     font-display: fallback;
     font-weight: 400;
     font-style: italic;
-    src: url("#{$webfonts-dir}/FremtindGrotesk-Italic-Web.woff2") format("woff2"),
+    src: url("#{$webfonts-dir}/FremtindGrotesk-Italic-Web.woff2")
+            format("woff2"),
         url("#{$webfonts-dir}/FremtindGrotesk-Italic-Web.woff") format("woff");
 }
 
@@ -67,8 +69,10 @@ $webfonts-dir: "/fonts" !default;
     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");
+    src: url("#{$webfonts-dir}/FremtindGrotesk-BoldItalic-Web.woff2")
+            format("woff2"),
+        url("#{$webfonts-dir}/FremtindGrotesk-BoldItalic-Web.woff")
+            format("woff");
 }
 
 @font-face {
@@ -87,7 +91,8 @@ $webfonts-dir: "/fonts" !default;
     font-display: fallback;
     font-weight: 400;
     font-style: normal;
-    src: url("#{$webfonts-dir}/FremtindGrotesk-Display-Web.woff2") format("woff2"),
+    src: url("#{$webfonts-dir}/FremtindGrotesk-Display-Web.woff2")
+            format("woff2"),
         url("#{$webfonts-dir}/FremtindGrotesk-Display-Web.woff") format("woff");
 }
 
@@ -107,8 +112,10 @@ $webfonts-dir: "/fonts" !default;
     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");
+    src: url("#{$webfonts-dir}/FremtindGroteskMono-Regular-Web.woff2")
+            format("woff2"),
+        url("#{$webfonts-dir}/FremtindGroteskMono-Regular-Web.woff")
+            format("woff");
 }
 
 @font-face {