@fremtind/jokul 0.1.1

package/src/core/jkl/_tokens.scss

@@ -0,0 +1,148 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+
+$color-brand-snohvit: #f9f9f9;
+$color-brand-varde: #e0dbd4;
+$color-brand-granitt: #1b1917;
+$color-brand-hvit: #ffffff;
+$color-brand-svart: #000000;
+$color-brand-skifer: #313030;
+$color-brand-fjellgra: #444141;
+$color-brand-stein: #636060;
+$color-brand-svaberg: #c8c5c3;
+$color-brand-dis: #ece9e5;
+$color-brand-sand: #f4f2ef;
+$color-functional-info: #d3d3f6;
+$color-functional-info-dark: #a9a9ca;
+$color-functional-success: #acd3b5;
+$color-functional-success-dark: #94b79b;
+$color-functional-warning: #efdd9e;
+$color-functional-warning-dark: #decc8d;
+$color-functional-error: #f6b3b3;
+$color-functional-error-dark: #de9e9e;
+$spacing-0: 0;
+$spacing-2: 0.125rem;
+$spacing-4: 0.25rem;
+$spacing-8: 0.5rem;
+$spacing-12: 0.75rem;
+$spacing-16: 1rem;
+$spacing-24: 1.5rem;
+$spacing-32: 2rem;
+$spacing-40: 2.5rem;
+$spacing-64: 4rem;
+$spacing-104: 6.5rem;
+$spacing-168: 10.5rem;
+$icon-weight-normal: 300;
+$icon-weight-bold: 500;
+$typography-weight-normal: 400;
+$typography-weight-bold: 700;
+$typography-font-size-16: 1rem;
+$typography-font-size-18: 1.125rem;
+$typography-font-size-20: 1.25rem;
+$typography-font-size-21: 1.3125rem;
+$typography-font-size-23: 1.4375rem;
+$typography-font-size-25: 1.5625rem;
+$typography-font-size-26: 1.625rem;
+$typography-font-size-28: 1.75rem;
+$typography-font-size-30: 1.875rem;
+$typography-font-size-36: 2.25rem;
+$typography-font-size-44: 2.75rem;
+$typography-font-size-56: 3.5rem;
+$typography-line-height-24: 1.5rem;
+$typography-line-height-28: 1.75rem;
+$typography-line-height-32: 2rem;
+$typography-line-height-36: 2.25rem;
+$typography-line-height-40: 2.5rem;
+$typography-line-height-44: 2.75rem;
+$typography-line-height-52: 3.25rem;
+$typography-line-height-64: 4rem;
+$typography-title-small-font-size: 2.25rem;
+$typography-title-small-line-height: 2.75rem;
+$typography-title-small-font-weight: 400;
+$typography-title-base-font-size: 3.5rem;
+$typography-title-base-line-height: 4rem;
+$typography-title-base-font-weight: 400;
+$typography-title-small-small-font-size: 1.875rem;
+$typography-title-small-small-line-height: 2.25rem;
+$typography-title-small-small-font-weight: 400;
+$typography-title-small-base-font-size: 2.75rem;
+$typography-title-small-base-line-height: 3.25rem;
+$typography-title-small-base-font-weight: 400;
+$typography-heading-1-small-font-size: 1.625rem;
+$typography-heading-1-small-line-height: 2rem;
+$typography-heading-1-small-font-weight: 400;
+$typography-heading-1-base-font-size: 2.25rem;
+$typography-heading-1-base-line-height: 2.75rem;
+$typography-heading-1-base-font-weight: 400;
+$typography-heading-2-small-font-size: 1.4375rem;
+$typography-heading-2-small-line-height: 2rem;
+$typography-heading-2-small-font-weight: 400;
+$typography-heading-2-base-font-size: 1.75rem;
+$typography-heading-2-base-line-height: 2.5rem;
+$typography-heading-2-base-font-weight: 400;
+$typography-heading-3-small-font-size: 1.3125rem;
+$typography-heading-3-small-line-height: 1.75rem;
+$typography-heading-3-small-font-weight: 700;
+$typography-heading-3-base-font-size: 1.5625rem;
+$typography-heading-3-base-line-height: 2rem;
+$typography-heading-3-base-font-weight: 700;
+$typography-heading-4-small-font-size: 1.125rem;
+$typography-heading-4-small-line-height: 1.5rem;
+$typography-heading-4-small-font-weight: 700;
+$typography-heading-4-base-font-size: 1.3125rem;
+$typography-heading-4-base-line-height: 1.75rem;
+$typography-heading-4-base-font-weight: 700;
+$typography-heading-5-small-font-size: 1rem;
+$typography-heading-5-small-line-height: 1.5rem;
+$typography-heading-5-small-font-weight: 700;
+$typography-heading-5-base-font-size: 1rem;
+$typography-heading-5-base-line-height: 1.5rem;
+$typography-heading-5-base-font-weight: 700;
+$typography-body-small-font-size: 1.125rem;
+$typography-body-small-line-height: 1.75rem;
+$typography-body-small-font-weight: 400;
+$typography-body-base-font-size: 1.25rem;
+$typography-body-base-line-height: 2rem;
+$typography-body-base-font-weight: 400;
+$typography-small-small-font-size: 1rem;
+$typography-small-small-line-height: 1.5rem;
+$typography-small-small-font-weight: 400;
+$typography-small-base-font-size: 1rem;
+$typography-small-base-line-height: 1.5rem;
+$typography-small-base-font-weight: 400;
+
+// Dynamiske variabler for farge, via referanse til CSS-variabler
+$color-background-page: var(--jkl-color-background-page);
+$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-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-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);
+$color-background-alert-warning: var(--jkl-color-background-alert-warning);
+$color-background-alert-error: var(--jkl-color-background-alert-error);
+$color-text-default: var(--jkl-color-text-default);
+$color-text-subdued: var(--jkl-color-text-subdued);
+$color-text-inverted: var(--jkl-color-text-inverted);
+$color-text-on-action: var(--jkl-color-text-on-action);
+$color-text-interactive: var(--jkl-color-text-interactive);
+$color-text-interactive-hover: var(--jkl-color-text-interactive-hover);
+$color-text-on-alert: var(--jkl-color-text-on-alert);
+$color-border-action: var(--jkl-color-border-action);
+$color-border-input: var(--jkl-color-border-input);
+$color-border-input-focus: var(--jkl-color-border-input-focus);
+$color-border-separator: var(--jkl-color-border-separator);
+$color-border-separator-strong: var(--jkl-color-border-separator-strong);
+$color-border-separator-hover: var(--jkl-color-border-separator-hover);
+$color-border-subdued: var(--jkl-color-border-subdued);

package/src/core/jkl/_typography.scss

@@ -0,0 +1,327 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:list";
+@use "screens";
+@use "tokens" as *;
+
+/// 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": (
+        "small-screen": (
+            "font-size": $typography-title-small-font-size,
+            "line-height": $typography-title-small-line-height,
+            "font-weight": $typography-title-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-title-base-font-size,
+            "line-height": $typography-title-base-line-height,
+            "font-weight": $typography-title-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+    "title-small": (
+        "small-screen": (
+            "font-size": $typography-title-small-small-font-size,
+            "line-height": $typography-title-small-small-line-height,
+            "font-weight": $typography-title-small-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-title-small-base-font-size,
+            "line-height": $typography-title-small-base-line-height,
+            "font-weight": $typography-title-small-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+    "heading-1": (
+        "small-screen": (
+            "font-size": $typography-heading-1-small-font-size,
+            "line-height": $typography-heading-1-small-line-height,
+            "font-weight": $typography-heading-1-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-heading-1-base-font-size,
+            "line-height": $typography-heading-1-base-line-height,
+            "font-weight": $typography-heading-1-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+    "heading-2": (
+        "small-screen": (
+            "font-size": $typography-heading-2-small-font-size,
+            "line-height": $typography-heading-2-small-line-height,
+            "font-weight": $typography-heading-2-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-heading-2-base-font-size,
+            "line-height": $typography-heading-2-base-line-height,
+            "font-weight": $typography-heading-2-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+    "heading-3": (
+        "small-screen": (
+            "font-size": $typography-heading-3-small-font-size,
+            "line-height": $typography-heading-3-small-line-height,
+            "font-weight": $typography-heading-3-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+        "large-screen": (
+            "font-size": $typography-heading-3-base-font-size,
+            "line-height": $typography-heading-3-base-line-height,
+            "font-weight": $typography-heading-3-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+    ),
+    "heading-4": (
+        "small-screen": (
+            "font-size": $typography-heading-4-small-font-size,
+            "line-height": $typography-heading-4-small-line-height,
+            "font-weight": $typography-heading-4-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+        "large-screen": (
+            "font-size": $typography-heading-4-base-font-size,
+            "line-height": $typography-heading-4-base-line-height,
+            "font-weight": $typography-heading-4-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+    ),
+    "heading-5": (
+        "small-screen": (
+            "font-size": $typography-heading-5-small-font-size,
+            "line-height": $typography-heading-5-small-line-height,
+            "font-weight": $typography-heading-5-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+        "large-screen": (
+            "font-size": $typography-heading-5-base-font-size,
+            "line-height": $typography-heading-5-base-line-height,
+            "font-weight": $typography-heading-5-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-bold,
+        ),
+    ),
+    "body": (
+        "small-screen": (
+            "font-size": $typography-body-small-font-size,
+            "line-height": $typography-body-small-line-height,
+            "font-weight": $typography-body-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-body-base-font-size,
+            "line-height": $typography-body-base-line-height,
+            "font-weight": $typography-body-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+    "small": (
+        "small-screen": (
+            "font-size": $typography-small-small-font-size,
+            "line-height": $typography-small-small-line-height,
+            "font-weight": $typography-small-small-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+        "large-screen": (
+            "font-size": $typography-small-base-font-size,
+            "line-height": $typography-small-base-line-height,
+            "font-weight": $typography-small-base-font-weight,
+            "--jkl-icon-weight": $icon-weight-normal,
+        ),
+    ),
+);
+
+/// Gir deg responsive font-size, line-height og font-weight basert på navnet på typografien.
+/// Du kan overstyre standardverdier ved å bruke `@content`. Dette er ment som en "escape hatch".
+/// Ikke tukle med typografiskalaen med mindre du har en god grunn til det.
+/// @param {"title" | "title-small" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "body" | "small" | "title/large-screen" | "heading-1/large-screen" | "heading-2/large-screen" | "heading-3/large-screen" | "heading-4/large-screen" | "heading-5/large-screen" | "body/large-screen" | "small/large-screen" | "title/small-screen" | "heading-1/small-screen" | "heading-2/small-screen" | "heading-3/small-screen" | "heading-4/small-screen" | "heading-5/small-screen" | "body/small-screen" | "small/small-screen"} $style-name - Ønsket stilnavn. Støtter å hente small-screen og large-screen også, om du trenger stilene fra en spesifik skjermstørrelse.
+/// @content Plasseres alltid etter mixinen har satt sine verdier, slik at du kan velge å overstyre deler av dem.
+/// @example
+///     .class {
+///         @include jkl.text-style("body");
+///     }
+/// @example
+///     .bold {
+///         @include jkl.text-style("body") {
+///             font-weight: jkl.$typography-weight-bold;
+///         }
+///     }
+@mixin text-style($style-name) {
+    // Separate style/variant into style and variant variables:
+    $start-index: string.index($style-name, "/") or 0;
+    $end-index: string.index($style-name, "/") or 9999999;
+    $style: string.slice($style-name, 0, $start-index - 1);
+    $variant: string.slice($style-name, $end-index + 1);
+
+    @if map.has-key($text-styles, $style) {
+        $variants: map.get($text-styles, $style);
+
+        @if string.length($variant) == 0 {
+            @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") {
+                        #{$property}: $value;
+                    }
+                    @content;
+                }
+            }
+        } @else {
+            @if map.has-key($variants, $variant) {
+                @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))}";
+            }
+        }
+    } @else {
+        @error "No text style with the name #{$style} was found. Try one of these: #{map.keys($new-text-styles)}";
+    }
+}
+
+/// Makes text bold without changing the space it takes up on screen.
+/// Not perfect for all lengths of text, but close enough!
+@mixin no-grow-bold {
+    --jkl-icon-weight: #{$icon-weight-bold};
+    font-weight: $typography-weight-bold;
+    letter-spacing: -0.014em;
+}
+
+/// Definer egne variabler for fontstørrelse basert på design tokens fra :root. Kan enkelt brukes med `use-font-variables`.
+/// @param {String} $name - Navn på variablen. Postfixes med `-font-size`, `-line-height`, og `-font-weight`.
+/// @param {"title" | "title-small" | "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5" | "body" | "small"} $level - Nivå i fontskalaen.
+/// @output - CSS-variabler fro font-size, line-height, og font-weight.
+/// @see use-font-variables
+/// @example
+///     @include jkl.declare-font-variables("jkl-accordion-title", "body");
+/// @example
+///     @include jkl.use-font-variables("jkl-accordion-title");
+@mixin declare-font-variables($name, $level) {
+    --#{$name}-font-size: var(--jkl-#{$level}-font-size);
+    --#{$name}-line-height: var(--jkl-#{$level}-line-height);
+    --#{$name}-font-weight: var(--jkl-#{$level}-font-weight);
+}
+
+/// Ta i bruk variabler du har laget med  `declare-font-variables`.
+/// @param {String} $name - Navn på variablen. Postfixes med `-font-size`, `-line-height`, og `-font-weight`.
+/// @output - CSS som setter font-size, line-height, og font-weight basert på CSS-variabler som følger standard format fra  `declare-font-variables`.
+/// @see declare-font-variables
+/// @example
+///     @include jkl.use-font-variables("jkl-accordion-title");
+/// @example
+///     @include jkl.declare-font-variables("jkl-accordion-title", "body");
+@mixin use-font-variables($name) {
+    font-size: var(--#{$name}-font-size);
+    line-height: var(--#{$name}-line-height);
+    font-weight: var(--#{$name}-font-weight);
+}
+
+$_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.
+/// @output - Ønsket fontfamilie med justert fallbackfont.
+@mixin use-font-family($font) {
+    @if not list.index($_valid-font-family-values, $font) {
+        @error "#{$font} will not be used for font-family. Valid options are: #{$_valid-font-family-values}.";
+    }
+
+    @if $font == "Fremtind Grotesk Mono" {
+        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;
+    } @else {
+        font-family: "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+    }
+}

package/src/core/jkl/_underline.scss

@@ -0,0 +1,16 @@
+@use "responsive-units" as ru;
+
+/// Gir deg en understrek-effekt med box-shadow
+/// @param {Color} $color - Standardfarge, og farge ved hover
+/// @param {Color} $focus-color - Farge ved tastaturfokus
+@mixin underline-color($color, $focus-color) {
+    box-shadow: inset 0 ru.rem(-2px) 0 0 $color;
+
+    html:not([data-mousenavigation]) &:focus {
+        box-shadow: inset 0 ru.rem(-4px) 0 0 $focus-color;
+    }
+
+    &:hover {
+        box-shadow: inset 0 ru.rem(-4px) 0 0 $color;
+    }
+}

package/src/core/jkl/_z-index.scss

@@ -0,0 +1,23 @@
+/// @type Number
+$z-index--floating: 10000;
+
+/// @type Number
+$z-index--modal: 9000;
+
+/// @type Number
+$z-index--overlay: 8000;
+
+/// @type Number
+$z-index--dropdown: 7000;
+
+/// @type Number
+$z-index--header: 6000;
+
+/// @type Number
+$z-index--footer: 5000;
+
+/// @type Number
+$z-index--hidden: -1;
+
+/// @type Number
+$z-index--overflow-hidden: -1;

package/src/core/styles/_color-tokens.scss

@@ -0,0 +1,75 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+
+@use "../jkl";
+
+@include jkl.light-mode-variables {
+    --jkl-color-background-page: #{jkl.$color-brand-sand};
+    --jkl-color-background-page-variant: #{jkl.$color-brand-snohvit};
+    --jkl-color-background-container: #{jkl.$color-brand-snohvit};
+    --jkl-color-background-container-low: #{jkl.$color-brand-dis};
+    --jkl-color-background-container-high: #{jkl.$color-brand-hvit};
+    --jkl-color-background-container-inverted: #{jkl.$color-brand-granitt};
+    --jkl-color-background-container-subdued: #{jkl.$color-brand-svaberg};
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-focus: #{jkl.$color-brand-hvit};
+    --jkl-color-background-action: #{jkl.$color-brand-granitt};
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive-hover: #{jkl.$color-brand-dis};
+    --jkl-color-background-interactive-selected: #{jkl.$color-brand-varde};
+    --jkl-color-background-alert-neutral: #{jkl.$color-brand-varde};
+    --jkl-color-background-alert-info: #{jkl.$color-functional-info};
+    --jkl-color-background-alert-success: #{jkl.$color-functional-success};
+    --jkl-color-background-alert-warning: #{jkl.$color-functional-warning};
+    --jkl-color-background-alert-error: #{jkl.$color-functional-error};
+    --jkl-color-text-default: #{jkl.$color-brand-granitt};
+    --jkl-color-text-subdued: #{jkl.$color-brand-stein};
+    --jkl-color-text-inverted: #{jkl.$color-brand-snohvit};
+    --jkl-color-text-on-action: #{jkl.$color-brand-snohvit};
+    --jkl-color-text-interactive: #{jkl.$color-brand-granitt};
+    --jkl-color-text-interactive-hover: #{jkl.$color-brand-stein};
+    --jkl-color-text-on-alert: #{jkl.$color-brand-granitt};
+    --jkl-color-border-action: #{jkl.$color-brand-granitt};
+    --jkl-color-border-input: #{jkl.$color-brand-stein};
+    --jkl-color-border-input-focus: #{jkl.$color-brand-granitt};
+    --jkl-color-border-separator: #{jkl.$color-brand-svaberg};
+    --jkl-color-border-separator-strong: #{jkl.$color-brand-stein};
+    --jkl-color-border-separator-hover: #{jkl.$color-brand-granitt};
+    --jkl-color-border-subdued: #{jkl.$color-brand-svaberg};
+}
+@include jkl.dark-mode-variables {
+    --jkl-color-background-page: #{jkl.$color-brand-granitt};
+    --jkl-color-background-page-variant: #{jkl.$color-brand-granitt};
+    --jkl-color-background-container: #{jkl.$color-brand-skifer};
+    --jkl-color-background-container-low: #{jkl.$color-brand-svart};
+    --jkl-color-background-container-high: #{jkl.$color-brand-skifer};
+    --jkl-color-background-container-inverted: #{jkl.$color-brand-snohvit};
+    --jkl-color-background-container-subdued: #{jkl.$color-brand-stein};
+    --jkl-color-background-input-base: rgba(0, 0, 0, 0);
+    --jkl-color-background-input-focus: #{jkl.$color-brand-skifer};
+    --jkl-color-background-action: #{jkl.$color-brand-snohvit};
+    --jkl-color-background-interactive: rgba(0, 0, 0, 0);
+    --jkl-color-background-interactive-hover: #{jkl.$color-brand-fjellgra};
+    --jkl-color-background-interactive-selected: #{jkl.$color-brand-stein};
+    --jkl-color-background-alert-neutral: #{jkl.$color-brand-varde};
+    --jkl-color-background-alert-info: #{jkl.$color-functional-info-dark};
+    --jkl-color-background-alert-success: #{jkl.$color-functional-success-dark};
+    --jkl-color-background-alert-warning: #{jkl.$color-functional-warning-dark};
+    --jkl-color-background-alert-error: #{jkl.$color-functional-error-dark};
+    --jkl-color-text-default: #{jkl.$color-brand-snohvit};
+    --jkl-color-text-subdued: #{jkl.$color-brand-svaberg};
+    --jkl-color-text-inverted: #{jkl.$color-brand-granitt};
+    --jkl-color-text-on-action: #{jkl.$color-brand-granitt};
+    --jkl-color-text-interactive: #{jkl.$color-brand-snohvit};
+    --jkl-color-text-interactive-hover: #{jkl.$color-brand-svaberg};
+    --jkl-color-text-on-alert: #{jkl.$color-brand-granitt};
+    --jkl-color-border-action: #{jkl.$color-brand-snohvit};
+    --jkl-color-border-input: #{jkl.$color-brand-svaberg};
+    --jkl-color-border-input-focus: #{jkl.$color-brand-snohvit};
+    --jkl-color-border-separator: #{jkl.$color-brand-stein};
+    --jkl-color-border-separator-strong: #{jkl.$color-brand-svaberg};
+    --jkl-color-border-separator-hover: #{jkl.$color-brand-snohvit};
+    --jkl-color-border-subdued: #{jkl.$color-brand-stein};
+}

package/src/core/styles/_headings.scss

@@ -0,0 +1,29 @@
+@use "../jkl";
+
+.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/src/core/styles/_index.scss

@@ -0,0 +1,10 @@
+@forward "normalize";
+@forward "reset";
+
+@forward "tokens";
+@forward "legacy-tokens";
+@forward "color-tokens";
+@forward "headings";
+@forward "paragraphs";
+@forward "spacing";
+@forward "screen-reader";

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

@@ -0,0 +1,26 @@
+/**
+ * Do not edit directly
+ * Generated on Tue, 10 Sep 2024 05:21:22 GMT
+ */
+
+:root {
+    --jkl-color-svart: #000000;
+    --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: #ffffff;
+    --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;
+}