@fremtind/jokul 0.71.1 → 1.0.0

package/styles/core/jkl/_typography.scss

@@ -5,86 +5,6 @@
 @use "tokens" as *;
 @use "responsive-units";
 
-/// Tilsvarer 16px
-/// @deprecated Bruk heller $typography-font-size-16
-/// @type Number
-$typography-font-size-1: $typography-font-size-16;
-
-/// Tilsvarer 18px
-/// @deprecated Bruk heller $typography-font-size-18
-/// @type Number
-$typography-font-size-2: $typography-font-size-18;
-
-/// Tilsvarer 20px
-/// @deprecated Bruk heller $typography-font-size-20
-/// @type Number
-$typography-font-size-3: $typography-font-size-20;
-
-/// Tilsvarer 21px
-/// @deprecated Bruk heller $typography-font-size-21
-/// @type Number
-$typography-font-size-4: $typography-font-size-21;
-
-/// Tilsvarer 23px
-/// @deprecated Bruk heller $typography-font-size-23
-/// @type Number
-$typography-font-size-5: $typography-font-size-23;
-
-/// Tilsvarer 25px
-/// @deprecated Bruk heller $typography-font-size-25
-/// @type Number
-$typography-font-size-6: $typography-font-size-25;
-
-/// Tilsvarer 26px
-/// @deprecated Bruk heller $typography-font-size-26
-/// @type Number
-$typography-font-size-7: $typography-font-size-26;
-
-/// Tilsvarer 28px
-/// @deprecated Bruk heller $typography-font-size-28
-/// @type Number
-$typography-font-size-8: $typography-font-size-28;
-
-/// Tilsvarer 36px
-/// @deprecated Bruk heller $typography-font-size-36
-/// @type Number
-$typography-font-size-9: $typography-font-size-36;
-
-/// Tilsvarer 56px
-/// @deprecated Bruk heller $typography-font-size-56
-/// @type Number
-$typography-font-size-10: $typography-font-size-56;
-
-/// Tilsvarer 24px
-/// @deprecated Bruk heller $typography-line-height-24
-/// @type Number
-$typography-line-height-1: $typography-line-height-24;
-
-/// Tilsvarer 28px
-/// @deprecated Bruk heller $typography-line-height-28
-/// @type Number
-$typography-line-height-2: $typography-line-height-28;
-
-/// Tilsvarer 32px
-/// @deprecated Bruk heller $typography-line-height-32
-/// @type Number
-$typography-line-height-3: $typography-line-height-32;
-
-/// Tilsvarer 40px
-/// @deprecated Bruk heller $typography-line-height-40
-/// @type Number
-$typography-line-height-4: $typography-line-height-40;
-
-/// Tilsvarer 44px
-/// @deprecated Bruk heller $typography-line-height-44
-/// @type Number
-$typography-line-height-5: $typography-line-height-44;
-
-/// Tilsvarer 64px
-/// @deprecated Bruk heller $typography-line-height-64
-/// @type Number
-$typography-line-height-6: $typography-line-height-64;
-
 /// @access private - forwardes ikke ut av modulen, men er tilgjengelig ved direkteimport. KUN FOR INTERN BRUK I JØKUL.
 $text-styles: (
     "title": (
@@ -262,16 +182,17 @@ $text-styles: (
             @each $property, $value in map.get($variants, "small-screen") {
                 #{$property}: $value;
             }
+
             @content;
 
             // 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;
                 }
             }
@@ -280,6 +201,7 @@ $text-styles: (
                 @each $property, $value in map.get($variants, $variant) {
                     #{$property}: $value;
                 }
+
                 @content;
             } @else {
                 @error "The text style #{$style} has no variant called #{$variant}. Try one of these: #{map.keys(map.get($new-text-styles, $style))}";
@@ -328,9 +250,7 @@ $text-styles: (
 }
 
 $_valid-font-family-values: (
-    "Fremtind Grotesk",
-    "Fremtind Grotesk Display",
-    "Fremtind Grotesk Mono"
+    "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.
@@ -342,13 +262,23 @@ $_valid-font-family-values: (
     }
 
     @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,
+        font-family:
+            "Fremtind Grotesk",
+            "Adjusted Arial Fallback",
+            Arial,
             sans-serif;
     }
 }

package/styles/shared/input/shared-input-styles.css

@@ -11,8 +11,9 @@
   --jkl-text-input-height: 3rem;
   --jkl-text-input-vertical-padding: 0.5rem;
   --jkl-text-input-horizontal-padding: 0.75rem;
-  --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-action-button-size: 3rem;
   --jkl-text-input-action-button-icon-size: 1.25rem;
   --jkl-text-input-action-button-padding: 0.5rem 0;
@@ -35,8 +36,9 @@
   --jkl-text-input-height: 2rem;
   --jkl-text-input-vertical-padding: 0.25rem;
   --jkl-text-input-horizontal-padding: 0.5rem;
-  --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-action-button-size: 2rem;
   --jkl-text-input-action-button-icon-size: 1.125rem;
   --jkl-text-input-action-button-padding: 0;

package/styles/shared/input/shared-input-styles.min.css

@@ -1 +1,5 @@
-:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}
+:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-font-size:var(--jkl-body-font-size);--jkl-text-input-line-height:var(--jkl-body-line-height);--jkl-text-input-font-weight:var(--jkl-body-font-weight);--jkl-text-input-height:3rem;--jkl-text-input-vertical-padding:0.5rem;--jkl-text-input-horizontal-padding:0.75rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:3rem;--jkl-text-input-action-button-icon-size:1.25rem;--jkl-text-input-action-button-padding:0.5rem 0;--jkl-text-input-action-button-focus-position:0.375rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-text-input-height:2.75rem;--jkl-text-input-action-button-size:2.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-text-input-font-size:var(--jkl-small-font-size);--jkl-text-input-line-height:var(--jkl-small-line-height);--jkl-text-input-font-weight:var(--jkl-small-font-weight);--jkl-text-input-height:2rem;--jkl-text-input-vertical-padding:0.25rem;--jkl-text-input-horizontal-padding:0.5rem;--jkl-text-input-padding:var(--jkl-text-input-vertical-padding) var(
+      --jkl-text-input-horizontal-padding
+  );--jkl-text-input-action-button-size:2rem;--jkl-text-input-action-button-icon-size:1.125rem;--jkl-text-input-action-button-padding:0;--jkl-text-input-action-button-focus-position:0}

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

@@ -4,17 +4,17 @@
 $_text-input-height: jkl.rem(48px);
 $_text-input-height--mobile: jkl.rem(44px);
 $_text-input-height--compact: jkl.rem(32px);
-$_text-input-vertical-padding: jkl.$spacing-xs;
-$_text-input-vertical-padding--compact: jkl.$spacing-2xs;
-$_text-input-horizontal-padding: jkl.$spacing-s;
-$_text-input-horizontal-padding--compact: jkl.$spacing-xs;
+$_text-input-vertical-padding: jkl.$spacing-8;
+$_text-input-vertical-padding--compact: jkl.$spacing-4;
+$_text-input-horizontal-padding: jkl.$spacing-12;
+$_text-input-horizontal-padding--compact: jkl.$spacing-8;
 
 $_action-button-size: jkl.rem(48px);
 $_action-button-size--mobile: jkl.rem(44px);
 $_action-button-size--compact: jkl.rem(32px);
 $_action-button-icon-size: jkl.rem(20px);
 $_action-button-icon-size--compact: jkl.rem(18px);
-$_action-button-padding: jkl.$spacing-xs 0;
+$_action-button-padding: jkl.$spacing-8 0;
 $_action-button-padding--compact: 0;
 $_action-button-focus-position: jkl.rem(6px);
 $_action-button-focus-position--compact: 0;
@@ -25,8 +25,9 @@ $_action-button-focus-position--compact: 0;
     --jkl-text-input-height: #{$_text-input-height};
     --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding};
     --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding};
-    --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-action-button-size: #{$_action-button-size};
     --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size};
     --jkl-text-input-action-button-padding: #{$_action-button-padding};
@@ -44,8 +45,9 @@ $_action-button-focus-position--compact: 0;
     --jkl-text-input-height: #{$_text-input-height--compact};
     --jkl-text-input-vertical-padding: #{$_text-input-vertical-padding--compact};
     --jkl-text-input-horizontal-padding: #{$_text-input-horizontal-padding--compact};
-    --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-action-button-size: #{$_action-button-size--compact};
     --jkl-text-input-action-button-icon-size: #{$_action-button-icon-size--compact};
     --jkl-text-input-action-button-padding: #{$_action-button-padding--compact};
@@ -73,7 +75,8 @@ $_action-button-focus-position--compact: 0;
 
     background-color: var(--background-color);
     color: var(--text-color);
-    box-shadow: inset 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) transparent;
 
     &:focus-within,
@@ -94,7 +97,8 @@ $_action-button-focus-position--compact: 0;
     &:has([data-focused="true"]) {
         --border-color: var(--jkl-color-border-input-focus);
 
-        box-shadow: inset 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 {