@fremtind/jokul 1.4.1 → 1.5.1

package/styles/core/theme/_legacy-color-tokens.scss

@@ -0,0 +1,81 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+/* stylelint-disable */
+@use "../jkl";
+
+@layer jokul.theme {
+    @include jkl.light-mode-variables {
+        --jkl-color-background-page: #F4F2EF;
+        --jkl-color-background-page-variant: #F9F9F9;
+        --jkl-color-background-container: #F9F9F9;
+        --jkl-color-background-container-low: #ECE9E5;
+        --jkl-color-background-container-high: #FFFFFF;
+        --jkl-color-background-container-inverted: #1B1917;
+        --jkl-color-background-container-subdued: #C8C5C3;
+        --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+        --jkl-color-background-input-focus: #FFFFFF;
+        --jkl-color-background-action: #1B1917;
+        --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+        --jkl-color-background-interactive-hover: #ECE9E5;
+        --jkl-color-background-interactive-selected: #E0DBD4;
+        --jkl-color-background-alert-neutral: #E0DBD4;
+        --jkl-color-background-alert-info: #D3D3F6;
+        --jkl-color-background-alert-success: #ACD3B5;
+        --jkl-color-background-alert-warning: #EFDD9E;
+        --jkl-color-background-alert-error: #F6B3B3;
+        --jkl-color-text-default: #1B1917;
+        --jkl-color-text-subdued: #636060;
+        --jkl-color-text-inverted: #F9F9F9;
+        --jkl-color-text-on-action: #F9F9F9;
+        --jkl-color-text-interactive: #1B1917;
+        --jkl-color-text-interactive-hover: #636060;
+        --jkl-color-text-on-alert: #1B1917;
+        --jkl-color-text-on-alert-subdued: #444141;
+        --jkl-color-border-action: #1B1917;
+        --jkl-color-border-input: #636060;
+        --jkl-color-border-input-focus: #1B1917;
+        --jkl-color-border-separator: #C8C5C3;
+        --jkl-color-border-separator-strong: #636060;
+        --jkl-color-border-separator-hover: #1B1917;
+        --jkl-color-border-subdued: #C8C5C3;
+    }
+
+    @include jkl.dark-mode-variables {
+        --jkl-color-background-page: #1B1917;
+        --jkl-color-background-page-variant: #1B1917;
+        --jkl-color-background-container: #313030;
+        --jkl-color-background-container-low: #000000;
+        --jkl-color-background-container-high: #313030;
+        --jkl-color-background-container-inverted: #F9F9F9;
+        --jkl-color-background-container-subdued: #636060;
+        --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+        --jkl-color-background-input-focus: #313030;
+        --jkl-color-background-action: #F9F9F9;
+        --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+        --jkl-color-background-interactive-hover: #444141;
+        --jkl-color-background-interactive-selected: #636060;
+        --jkl-color-background-alert-neutral: #E0DBD4;
+        --jkl-color-background-alert-info: #A9A9CA;
+        --jkl-color-background-alert-success: #94B79B;
+        --jkl-color-background-alert-warning: #DECC8D;
+        --jkl-color-background-alert-error: #DE9E9E;
+        --jkl-color-text-default: #F9F9F9;
+        --jkl-color-text-subdued: #C8C5C3;
+        --jkl-color-text-inverted: #1B1917;
+        --jkl-color-text-on-action: #1B1917;
+        --jkl-color-text-interactive: #F9F9F9;
+        --jkl-color-text-interactive-hover: #C8C5C3;
+        --jkl-color-text-on-alert: #1B1917;
+        --jkl-color-text-on-alert-subdued: #444141;
+        --jkl-color-border-action: #F9F9F9;
+        --jkl-color-border-input: #C8C5C3;
+        --jkl-color-border-input-focus: #F9F9F9;
+        --jkl-color-border-separator: #636060;
+        --jkl-color-border-separator-strong: #C8C5C3;
+        --jkl-color-border-separator-hover: #F9F9F9;
+        --jkl-color-border-subdued: #636060;
+    }
+}

package/styles/core/theme/_legacy-tokens.scss

@@ -0,0 +1,150 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    :root {
+        --jkl-breakpoint-medium: 680px;
+        --jkl-breakpoint-large: 1200px;
+        --jkl-breakpoint-xl: 1600px;
+        --jkl-color-brand-snohvit: #F9F9F9;
+        --jkl-color-brand-varde: #E0DBD4;
+        --jkl-color-brand-granitt: #1B1917;
+        --jkl-color-brand-hvit: #FFFFFF;
+        --jkl-color-brand-svart: #000000;
+        --jkl-color-brand-skifer: #313030;
+        --jkl-color-brand-fjellgra: #444141;
+        --jkl-color-brand-stein: #636060;
+        --jkl-color-brand-svaberg: #C8C5C3;
+        --jkl-color-brand-dis: #ECE9E5;
+        --jkl-color-brand-sand: #F4F2EF;
+        --jkl-color-functional-info: #D3D3F6;
+        --jkl-color-functional-info-dark: #A9A9CA;
+        --jkl-color-functional-success: #ACD3B5;
+        --jkl-color-functional-success-dark: #94B79B;
+        --jkl-color-functional-warning: #EFDD9E;
+        --jkl-color-functional-warning-dark: #DECC8D;
+        --jkl-color-functional-error: #F6B3B3;
+        --jkl-color-functional-error-dark: #DE9E9E;
+        --jkl-color-svart: #000;
+        --jkl-color-granitt: #1b1917;
+        --jkl-color-skifer: #313030;
+        --jkl-color-fjellgra: #444141;
+        --jkl-color-stein: #636060;
+        --jkl-color-svaberg: #c8c5c3;
+        --jkl-color-varde: #e0dbd4;
+        --jkl-color-dis: #ece9e5;
+        --jkl-color-sand: #f4f2ef;
+        --jkl-color-snohvit: #f9f9f9;
+        --jkl-color-hvit: #fff;
+        --jkl-color-suksess: #acd3b5;
+        --jkl-color-suksess-dark: #94b79b;
+        --jkl-color-feil: #f6b3b3;
+        --jkl-color-feil-dark: #de9e9e;
+        --jkl-color-info: #d3d3f6;
+        --jkl-color-info-dark: #a9a9ca;
+        --jkl-color-advarsel: #efdd9e;
+        --jkl-color-advarsel-dark: #decc8d;
+        --jkl-motion-timing-energetic: 75ms;
+        --jkl-motion-timing-snappy: 100ms;
+        --jkl-motion-timing-productive: 150ms;
+        --jkl-motion-timing-expressive: 250ms;
+        --jkl-motion-timing-lazy: 400ms;
+        --jkl-motion-easing-standard: ease;
+        --jkl-motion-easing-entrance: ease-out;
+        --jkl-motion-easing-exit: ease-in;
+        --jkl-motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
+        --jkl-motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
+        --jkl-spacing-0: 0rem;
+        --jkl-spacing-2: 0.125rem;
+        --jkl-spacing-4: 0.25rem;
+        --jkl-spacing-8: 0.5rem;
+        --jkl-spacing-12: 0.75rem;
+        --jkl-spacing-16: 1rem;
+        --jkl-spacing-24: 1.5rem;
+        --jkl-spacing-32: 2rem;
+        --jkl-spacing-40: 2.5rem;
+        --jkl-spacing-64: 4rem;
+        --jkl-spacing-104: 6.5rem;
+        --jkl-spacing-168: 10.5rem;
+        --jkl-icon-weight-normal: 300;
+        --jkl-icon-weight-bold: 400;
+        --jkl-typography-weight-normal: 400;
+        --jkl-typography-weight-bold: 700;
+        --jkl-typography-font-size-16: 1rem;
+        --jkl-typography-font-size-18: 1.125rem;
+        --jkl-typography-font-size-20: 1.25rem;
+        --jkl-typography-font-size-21: 1.3125rem;
+        --jkl-typography-font-size-23: 1.4375rem;
+        --jkl-typography-font-size-25: 1.5625rem;
+        --jkl-typography-font-size-26: 1.625rem;
+        --jkl-typography-font-size-28: 1.75rem;
+        --jkl-typography-font-size-30: 1.875rem;
+        --jkl-typography-font-size-36: 2.25rem;
+        --jkl-typography-font-size-44: 2.75rem;
+        --jkl-typography-font-size-56: 3.5rem;
+        --jkl-typography-line-height-24: 1.5rem;
+        --jkl-typography-line-height-28: 1.75rem;
+        --jkl-typography-line-height-32: 2rem;
+        --jkl-typography-line-height-36: 2.25rem;
+        --jkl-typography-line-height-40: 2.5rem;
+        --jkl-typography-line-height-44: 2.75rem;
+        --jkl-typography-line-height-52: 3.25rem;
+        --jkl-typography-line-height-64: 4rem;
+        --jkl-typography-title-small-font-size: 2.25rem;
+        --jkl-typography-title-small-line-height: 2.75rem;
+        --jkl-typography-title-small-font-weight: 400;
+        --jkl-typography-title-base-font-size: 3.5rem;
+        --jkl-typography-title-base-line-height: 4rem;
+        --jkl-typography-title-base-font-weight: 400;
+        --jkl-typography-title-small-small-font-size: 1.875rem;
+        --jkl-typography-title-small-small-line-height: 2.25rem;
+        --jkl-typography-title-small-small-font-weight: 400;
+        --jkl-typography-title-small-base-font-size: 2.75rem;
+        --jkl-typography-title-small-base-line-height: 3.25rem;
+        --jkl-typography-title-small-base-font-weight: 400;
+        --jkl-typography-heading-1-small-font-size: 1.625rem;
+        --jkl-typography-heading-1-small-line-height: 2rem;
+        --jkl-typography-heading-1-small-font-weight: 400;
+        --jkl-typography-heading-1-base-font-size: 2.25rem;
+        --jkl-typography-heading-1-base-line-height: 2.75rem;
+        --jkl-typography-heading-1-base-font-weight: 400;
+        --jkl-typography-heading-2-small-font-size: 1.4375rem;
+        --jkl-typography-heading-2-small-line-height: 2rem;
+        --jkl-typography-heading-2-small-font-weight: 400;
+        --jkl-typography-heading-2-base-font-size: 1.75rem;
+        --jkl-typography-heading-2-base-line-height: 2.5rem;
+        --jkl-typography-heading-2-base-font-weight: 400;
+        --jkl-typography-heading-3-small-font-size: 1.3125rem;
+        --jkl-typography-heading-3-small-line-height: 1.75rem;
+        --jkl-typography-heading-3-small-font-weight: 700;
+        --jkl-typography-heading-3-base-font-size: 1.5625rem;
+        --jkl-typography-heading-3-base-line-height: 2rem;
+        --jkl-typography-heading-3-base-font-weight: 700;
+        --jkl-typography-heading-4-small-font-size: 1.125rem;
+        --jkl-typography-heading-4-small-line-height: 1.5rem;
+        --jkl-typography-heading-4-small-font-weight: 700;
+        --jkl-typography-heading-4-base-font-size: 1.3125rem;
+        --jkl-typography-heading-4-base-line-height: 1.75rem;
+        --jkl-typography-heading-4-base-font-weight: 700;
+        --jkl-typography-heading-5-small-font-size: 1rem;
+        --jkl-typography-heading-5-small-line-height: 1.5rem;
+        --jkl-typography-heading-5-small-font-weight: 700;
+        --jkl-typography-heading-5-base-font-size: 1rem;
+        --jkl-typography-heading-5-base-line-height: 1.5rem;
+        --jkl-typography-heading-5-base-font-weight: 700;
+        --jkl-typography-body-small-font-size: 1.125rem;
+        --jkl-typography-body-small-line-height: 1.75rem;
+        --jkl-typography-body-small-font-weight: 400;
+        --jkl-typography-body-base-font-size: 1.25rem;
+        --jkl-typography-body-base-line-height: 2rem;
+        --jkl-typography-body-base-font-weight: 400;
+        --jkl-typography-small-small-font-size: 1rem;
+        --jkl-typography-small-small-line-height: 1.5rem;
+        --jkl-typography-small-small-font-weight: 400;
+        --jkl-typography-small-base-font-size: 1rem;
+        --jkl-typography-small-base-line-height: 1.5rem;
+        --jkl-typography-small-base-font-weight: 400;
+    }
+}

package/styles/core/theme/_old-vars.scss

@@ -0,0 +1,30 @@
+@use "../jkl";
+
+@layer jokul.theme {
+    /* Used by menu to figure out if it should render a compact or comfortable view */
+    @include jkl.comfortable-density-variables {
+        --jkl-density: "comfortable";
+    }
+
+    @include jkl.compact-density-variables {
+        --jkl-density: "compact";
+    }
+
+    @include jkl.light-mode-variables {
+        --jkl-background-color: #{jkl.$color-snohvit};
+        --jkl-color: #{jkl.$color-granitt};
+        --jkl-error: #{jkl.$color-feil};
+        --jkl-info: #{jkl.$color-info};
+        --jkl-warning: #{jkl.$color-advarsel};
+        --jkl-success: #{jkl.$color-suksess};
+    }
+
+    @include jkl.dark-mode-variables {
+        --jkl-background-color: #{jkl.$color-granitt};
+        --jkl-color: #{jkl.$color-snohvit};
+        --jkl-error: #{jkl.$color-feil-dark};
+        --jkl-info: #{jkl.$color-info-dark};
+        --jkl-warning: #{jkl.$color-advarsel-dark};
+        --jkl-success: #{jkl.$color-suksess-dark};
+    }
+}

package/styles/core/theme/_spacing-tokens.scss

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    :root {
+        --jkl-unit-10: 0.5rem;
+        --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
+        --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
+        --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
+        --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
+        --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
+        --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
+        --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
+        --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
+        --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
+        --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
+        --jkl-unit-130: calc(var(--jkl-unit-10) * 13);
+        --jkl-unit-210: calc(var(--jkl-unit-10) * 21);
+        --jkl-unit-02: calc(var(--jkl-unit-10) * .25);
+        --jkl-unit-05: calc(var(--jkl-unit-10) * .5);
+        --jkl-spacing-xs: 0.5rem;
+        --jkl-spacing-s: calc(var(--jkl-unit-10) * 2);
+        --jkl-spacing-m: calc(var(--jkl-unit-10) * 3);
+        --jkl-spacing-l: calc(var(--jkl-unit-10) * 5);
+        --jkl-spacing-xl: calc(var(--jkl-unit-10) * 8);
+        --jkl-spacing-2xl: calc(var(--jkl-unit-10) * 13);
+    }
+}

package/styles/core/theme/_tokens.scss

@@ -0,0 +1,30 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+
+@layer jokul.theme {
+    :root {
+        --jkl-unit-10: 0.5rem;
+        --jkl-unit-15: calc(var(--jkl-unit-10) * 1.5);
+        --jkl-unit-20: calc(var(--jkl-unit-10) * 2);
+        --jkl-unit-25: calc(var(--jkl-unit-10) * 2.5);
+        --jkl-unit-30: calc(var(--jkl-unit-10) * 3);
+        --jkl-unit-40: calc(var(--jkl-unit-10) * 4);
+        --jkl-unit-50: calc(var(--jkl-unit-10) * 5);
+        --jkl-unit-60: calc(var(--jkl-unit-10) * 6);
+        --jkl-unit-70: calc(var(--jkl-unit-10) * 7);
+        --jkl-unit-80: calc(var(--jkl-unit-10) * 8);
+        --jkl-unit-90: calc(var(--jkl-unit-10) * 9);
+        --jkl-unit-130: calc(var(--jkl-unit-10) * 13);
+        --jkl-unit-210: calc(var(--jkl-unit-10) * 21);
+        --jkl-unit-02: calc(var(--jkl-unit-10) * .25);
+        --jkl-unit-05: calc(var(--jkl-unit-10) * .5);
+        --jkl-spacing-xs: 0.5rem;
+        --jkl-spacing-s: calc(var(--jkl-unit-10) * 2);
+        --jkl-spacing-m: calc(var(--jkl-unit-10) * 3);
+        --jkl-spacing-l: calc(var(--jkl-unit-10) * 5);
+        --jkl-spacing-xl: calc(var(--jkl-unit-10) * 8);
+        --jkl-spacing-2xl: calc(var(--jkl-unit-10) * 13);
+    }
+}

package/styles/core/theme/_typography.scss

@@ -0,0 +1,27 @@
+@use "sass:map";
+@use "../jkl";
+@use "../jkl/typography";
+
+@layer jokul.theme {
+    :root {
+        @each $level, $values in typography.$text-styles {
+            @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"
+                    ) {
+                    --jkl-#{$level}-#{$property}: #{$value};
+                }
+            }
+        }
+    }
+}

package/styles/core/utility/_headings.scss

@@ -0,0 +1,31 @@
+@use "../jkl";
+
+@layer jokul.utility {
+    .jkl-title {
+        @include jkl.text-style("title");
+    }
+
+    .jkl-title-small {
+        @include jkl.text-style("title-small");
+    }
+
+    .jkl-heading-1 {
+        @include jkl.text-style("heading-1");
+    }
+
+    .jkl-heading-2 {
+        @include jkl.text-style("heading-2");
+    }
+
+    .jkl-heading-3 {
+        @include jkl.text-style("heading-3");
+    }
+
+    .jkl-heading-4 {
+        @include jkl.text-style("heading-4");
+    }
+
+    .jkl-heading-5 {
+        @include jkl.text-style("heading-5");
+    }
+}

package/styles/core/utility/_index.scss

@@ -0,0 +1,4 @@
+@forward "headings";
+@forward "paragraphs";
+@forward "screen-reader";
+@forward "spacing";

package/styles/core/utility/_paragraphs.scss

@@ -0,0 +1,18 @@
+@use "../jkl";
+
+@layer jokul.utility {
+    .jkl-body {
+        @include jkl.text-style("body");
+    }
+
+    .jkl-bold {
+        @include jkl.text-style("body") {
+            --jkl-icon-weight: #{jkl.$icon-weight-bold};
+            font-weight: jkl.$typography-weight-bold;
+        }
+    }
+
+    .jkl-small {
+        @include jkl.text-style("small");
+    }
+}

package/styles/core/utility/_screen-reader.scss

@@ -0,0 +1,11 @@
+@use "../jkl";
+
+@layer jokul.utility {
+    .jkl-sr-only {
+        @include jkl.screenreader-only;
+
+        &--focusable {
+            @include jkl.screenreader-only-focusable;
+        }
+    }
+}

package/styles/core/utility/_spacing.scss

@@ -0,0 +1,49 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "../jkl/spacing";
+
+@function get-class-name($spacing-combination) {
+    $class-name: "jkl-spacing";
+
+    @each $spacing in $spacing-combination {
+        $class-name: "#{$class-name}-#{$spacing}";
+    }
+
+    @return $class-name;
+}
+
+@layer jokul.utility {
+    // Lag nytteklasser for alle spacing-kombinasjoner og -posisjoner
+    @each $spacing-combination in spacing.$combinations {
+        $_class-name: get-class-name($spacing-combination);
+        .#{$_class-name} {
+            &--all {
+                margin: var(--#{$_class-name});
+            }
+
+            @each $position in spacing.$positions {
+                &--#{$position} {
+                    margin-#{$position}: var(--#{$_class-name});
+                }
+            }
+        }
+    }
+
+    // Lag nytteklasser for de gamle spacingene for å sikre bakoverkompatibilitet
+    @each $spacing, $value in spacing.$spacing {
+        @if not list.index(spacing.$combinations, $spacing) {
+            .jkl-spacing-#{$spacing} {
+                &--all {
+                    margin: $value;
+                }
+
+                @each $position in spacing.$positions {
+                    &--#{$position} {
+                        margin-#{$position}: $value;
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -1,6 +1,8 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 :root,
 [data-layout-density=comfortable],

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

@@ -1,6 +1,8 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */
 .jkl-input-panel {
   --outer-border-color: var(--jkl-color-border-input);

package/styles/shared/track/track.css

@@ -1,4 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed, 18 Dec 2024 12:25:37 GMT
+ * Do not edit directly, this file was auto-generated.
+ */
+/**
+ * Do not edit directly, this file was auto-generated.
  */