@fremtind/jokul 1.4.1 → 1.5.1

package/styles/core/jkl/_tokens.scss

@@ -1,118 +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.
  */
 
-$breakpoint-medium: 680px;
-$breakpoint-large: 1200px;
-$breakpoint-xl: 1600px;
-$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;
-$motion-timing-energetic: 75ms;
-$motion-timing-snappy: 100ms;
-$motion-timing-productive: 150ms;
-$motion-timing-expressive: 250ms;
-$motion-timing-lazy: 400ms;
-$motion-easing-standard: ease;
-$motion-easing-entrance: ease-out;
-$motion-easing-exit: ease-in;
-$motion-easing-ease-in-bounce-out: cubic-bezier(0, 0, 0.375, 1.17);
-$motion-easing-focus: cubic-bezier(0.6, 0.2, 0.35, 1);
-$icon-weight-normal: 300;
-$icon-weight-bold: 400;
-$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;
+
 $unit-10: 0.5rem;
 $unit-15: calc(var(--jkl-unit-10) * 1.5);
 $unit-20: calc(var(--jkl-unit-10) * 2);
@@ -126,48 +16,42 @@ $unit-80: calc(var(--jkl-unit-10) * 8);
 $unit-90: calc(var(--jkl-unit-10) * 9);
 $unit-130: calc(var(--jkl-unit-10) * 13);
 $unit-210: calc(var(--jkl-unit-10) * 21);
-$unit-02: calc(var(--jkl-unit-10) * 0.25);
-$unit-05: calc(var(--jkl-unit-10) * 0.5);
+$unit-02: calc(var(--jkl-unit-10) * .25);
+$unit-05: calc(var(--jkl-unit-10) * .5);
+$spacing-xs: 0.5rem;
+$spacing-s: calc(var(--jkl-unit-10) * 2);
+$spacing-m: calc(var(--jkl-unit-10) * 3);
+$spacing-l: calc(var(--jkl-unit-10) * 5);
+$spacing-xl: calc(var(--jkl-unit-10) * 8);
+$spacing-2xl: calc(var(--jkl-unit-10) * 13);
 
 // 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-background-surface-default: var(--jkl-color-background-surface-default);
+$color-background-surface-highlight: var(--jkl-color-background-surface-highlight);
+$color-background-surface-on-surface: var(--jkl-color-background-surface-on-surface);
+$color-background-surface-moderate: var(--jkl-color-background-surface-moderate);
+$color-background-surface-knockout: var(--jkl-color-background-surface-knockout);
+$color-background-surface-error: var(--jkl-color-background-surface-error);
+$color-background-surface-warning: var(--jkl-color-background-surface-warning);
+$color-background-surface-info: var(--jkl-color-background-surface-info);
+$color-background-surface-succes: var(--jkl-color-background-surface-succes);
+$color-border-subdued: var(--jkl-color-border-subdued);
+$color-border-strong: var(--jkl-color-border-strong);
+$color-border-strongest: var(--jkl-color-border-strongest);
+$color-border-knockout: var(--jkl-color-border-knockout);
+$color-border-info: var(--jkl-color-border-info);
+$color-border-success: var(--jkl-color-border-success);
+$color-border-error: var(--jkl-color-border-error);
+$color-border-warning: var(--jkl-color-border-warning);
 $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-text-on-alert-subdued: var(--jkl-color-text-on-alert-subdued);
-$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);
+$color-text-knockout: var(--jkl-color-text-knockout);
+$color-text-info: var(--jkl-color-text-info);
+$color-text-info-strong: var(--jkl-color-text-info-strong);
+$color-text-success: var(--jkl-color-text-success);
+$color-text-success-strong: var(--jkl-color-text-success-strong);
+$color-text-error: var(--jkl-color-text-error);
+$color-text-error-strong: var(--jkl-color-text-error-strong);
+$color-text-warning: var(--jkl-color-text-warning);
+$color-text-warning-strong: var(--jkl-color-text-warning-strong);

package/styles/core/jkl/_typography.scss

@@ -3,6 +3,7 @@
 @use "sass:list";
 @use "screens";
 @use "tokens" as *;
+@use "legacy-tokens" as *;
 @use "responsive-units";
 
 /// @access private - forwardes ikke ut av modulen, men er tilgjengelig ved direkteimport. KUN FOR INTERN BRUK I JØKUL.

package/styles/core/resets/_index.scss

@@ -0,0 +1,2 @@
+@forward "normalize";
+@forward "reset";

package/styles/core/resets/_normalize.scss

@@ -0,0 +1,251 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+@layer jokul.resets {
+    /* Document
+       ========================================================================== */
+
+    /**
+     * 1. Correct the line height in all browsers.
+     * 2. Prevent adjustments of font size after orientation changes in iOS.
+     */
+
+    html {
+        line-height: 1.15; /* 1 */
+        -webkit-text-size-adjust: 100%; /* 2 */
+    }
+
+    /* Sections
+       ========================================================================== */
+
+    /**
+     * Remove the margin in all browsers.
+     */
+
+    body {
+        margin: 0;
+    }
+
+    /**
+     * Correct the font size and margin on `h1` elements within `section` and
+     * `article` contexts in Chrome, Firefox, and Safari.
+     */
+
+    h1 {
+        font-size: 2em;
+        margin: 0.67em 0;
+    }
+
+    /* Grouping content
+       ========================================================================== */
+
+    /**
+     * 1. Add the correct box sizing in Firefox.
+     * 2. Show the overflow in Edge and IE.
+     */
+
+    hr {
+        box-sizing: content-box; /* 1 */
+        height: 0; /* 1 */
+        overflow: visible; /* 2 */
+    }
+
+    /**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+    pre {
+        font-family: monospace, monospace; /* 1 */
+        font-size: 1em; /* 2 */
+    }
+
+    /* Text-level semantics
+       ========================================================================== */
+
+    /**
+     * 1. Remove the bottom border in Chrome 57-
+     * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+     */
+
+    abbr[title] {
+        border-bottom: none; /* 1 */
+        text-decoration: underline; /* 2 */
+        text-decoration: underline dotted; /* 2 */
+    }
+
+    /**
+     * Add the correct font weight in Chrome, Edge, and Safari.
+     */
+
+    b,
+    strong {
+        font-weight: bolder;
+    }
+
+    /**
+     * 1. Correct the inheritance and scaling of font size in all browsers.
+     * 2. Correct the odd `em` font sizing in all browsers.
+     */
+
+    code,
+    kbd,
+    samp {
+        font-family: monospace, monospace; /* 1 */
+        font-size: 1em; /* 2 */
+    }
+
+    /**
+     * Add the correct font size in all browsers.
+     */
+
+    small {
+        font-size: 80%;
+    }
+
+    /**
+     * Prevent `sub` and `sup` elements from affecting the line height in
+     * all browsers.
+     */
+
+    sub,
+    sup {
+        font-size: 75%;
+        line-height: 0;
+        position: relative;
+        vertical-align: baseline;
+    }
+
+    sub {
+        bottom: -0.25em;
+    }
+
+    sup {
+        top: -0.5em;
+    }
+
+    /* Forms
+       ========================================================================== */
+
+    /**
+     * 1. Change the font styles in all browsers.
+     * 2. Remove the margin in Firefox and Safari.
+     */
+
+    button,
+    input,
+    optgroup,
+    select,
+    textarea {
+        font-family: inherit; /* 1 */
+        font-size: 100%; /* 1 */
+        line-height: 1.15; /* 1 */
+        margin: 0; /* 2 */
+    }
+
+    /**
+     * Remove the inheritance of text transform in Edge, Firefox, and IE.
+     * 1. Remove the inheritance of text transform in Firefox.
+     */
+
+    button,
+    select {
+        /* 1 */
+        text-transform: none;
+    }
+
+    /**
+     * Correct the inability to style clickable types in iOS and Safari.
+     */
+
+    button,
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+        -webkit-appearance: button;
+    }
+
+    /**
+     * Correct the padding in Firefox.
+     */
+
+    fieldset {
+        padding: 0.35em 0.75em 0.625em;
+    }
+
+    /**
+     * 1. Correct the text wrapping in Edge and IE.
+     * 2. Remove the padding so developers are not caught out when they zero out
+     *    `fieldset` elements in all browsers.
+     */
+
+    legend {
+        box-sizing: border-box; /* 1 */
+        display: table; /* 1 */
+        max-width: 100%; /* 1 */
+        padding: 0; /* 2 */
+        white-space: normal; /* 1 */
+    }
+
+    /**
+     * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+     */
+
+    progress {
+        vertical-align: baseline;
+    }
+
+    /**
+     * Correct the cursor style of increment and decrement buttons in Chrome.
+     */
+
+    [type="number"]::-webkit-inner-spin-button,
+    [type="number"]::-webkit-outer-spin-button {
+        height: auto;
+    }
+
+    /**
+     * 1. Correct the odd appearance in Chrome and Safari.
+     * 2. Correct the outline style in Safari.
+     */
+
+    [type="search"] {
+        -webkit-appearance: textfield; /* 1 */
+        outline-offset: -2px; /* 2 */
+    }
+
+    /**
+     * Remove the inner padding in Chrome and Safari on macOS.
+     */
+
+    [type="search"]::-webkit-search-decoration {
+        -webkit-appearance: none;
+    }
+
+    /**
+     * 1. Correct the inability to style clickable types in iOS and Safari.
+     * 2. Change font properties to `inherit` in Safari.
+     */
+
+    ::-webkit-file-upload-button {
+        -webkit-appearance: button; /* 1 */
+        font: inherit; /* 2 */
+    }
+
+    /* Interactive
+       ========================================================================== */
+
+    /*
+     * Add the correct display in Edge, IE 10+, and Firefox.
+     */
+
+    details {
+        display: block;
+    }
+
+    /*
+     * Add the correct display in all browsers.
+     */
+
+    summary {
+        display: list-item;
+    }
+}

package/styles/core/resets/_reset.scss

@@ -0,0 +1,68 @@
+@layer jokul.resets {
+    /* Text blocks
+       ========================================================================== */
+
+    /**
+     * Remove default margins from all block-level text elements
+     * such as `p` and headings
+     */
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        margin: 0;
+    }
+
+    /* Forms
+       ========================================================================== */
+
+    /**
+     * Remove margins from fieldset element.
+     */
+
+    fieldset {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        display: block;
+        line-height: 1;
+    }
+
+    /* Forms
+       ========================================================================== */
+
+    /**
+     * Remove borders from table elements.
+     */
+
+    table {
+        border-collapse: collapse;
+    }
+
+    /**
+     * Remove margins from table elements.
+     */
+
+    table,
+    thead,
+    tbody,
+    tr,
+    td,
+    th {
+        margin: 0;
+        padding: 0;
+    }
+
+    /*
+     * https://css-tricks.com/the-hidden-attribute-is-visibly-weak/
+     * tl;dr – hidden er en User Agent style, så hvis et element har noen som helst display som ikke er
+     * hidden vil ikke hidden-attributtet gjøre noe som helst visuelt. Her gjør vi det til vår egen author style.
+     */
+    .jkl [hidden] {
+        display: none;
+    }
+}

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

@@ -0,0 +1,73 @@
+/**
+ * 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: oklch(96% 0.004 67);
+        --jkl-color-background-surface-default: oklch(92% 0.008 67);
+        --jkl-color-background-surface-highlight: oklch(100% 0.001 67);
+        --jkl-color-background-surface-on-surface: oklch(96% 0.004 67);
+        --jkl-color-background-surface-moderate: oklch(80% 0.008 67);
+        --jkl-color-background-surface-knockout: oklch(35% 0.007 67);
+        --jkl-color-background-surface-error: oklch(80% 0.09 16);
+        --jkl-color-background-surface-warning: oklch(90% 0.08 94);
+        --jkl-color-background-surface-info: oklch(80% 0.09 285);
+        --jkl-color-background-surface-succes: oklch(80% 0.066 156);
+        --jkl-color-border-subdued: oklch(80% 0.008 67);
+        --jkl-color-border-strong: oklch(50% 0.007 67);
+        --jkl-color-border-strongest: oklch(0% 0.007 64);
+        --jkl-color-border-knockout: oklch(100% 0.001 67);
+        --jkl-color-border-info: oklch(70% 0.145 285);
+        --jkl-color-border-success: oklch(70% 0.089 156);
+        --jkl-color-border-error: oklch(70% 0.13 16);
+        --jkl-color-border-warning: oklch(70% 0.1 94);
+        --jkl-color-text-default: oklch(0% 0.007 64);
+        --jkl-color-text-subdued: oklch(50% 0.007 67);
+        --jkl-color-text-knockout: oklch(100% 0.001 67);
+        --jkl-color-text-info: oklch(25% 0.056 285);
+        --jkl-color-text-info-strong: oklch(50% 0.186 285);
+        --jkl-color-text-success: oklch(25% 0.024 156);
+        --jkl-color-text-success-strong: oklch(50% 0.106 156);
+        --jkl-color-text-error: oklch(25% 0.056 16);
+        --jkl-color-text-error-strong: oklch(50% 0.16 16);
+        --jkl-color-text-warning: oklch(25% 0.03 94);
+        --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+    }
+
+    @include jkl.dark-mode-variables {
+        --jkl-color-background-page: oklch(10% 0.007 67);
+        --jkl-color-background-surface-default: oklch(25% 0.007 67);
+        --jkl-color-background-surface-highlight: oklch(35% 0.007 67);
+        --jkl-color-background-surface-on-surface: oklch(10% 0.007 67);
+        --jkl-color-background-surface-moderate: oklch(50% 0.007 67);
+        --jkl-color-background-surface-knockout: oklch(85% 0.008 67);
+        --jkl-color-background-surface-error: oklch(45% 0.146 16);
+        --jkl-color-background-surface-warning: oklch(45% 0.065 94);
+        --jkl-color-background-surface-info: oklch(45% 0.169 285);
+        --jkl-color-background-surface-succes: oklch(45% 0.095 156);
+        --jkl-color-border-subdued: oklch(50% 0.007 67);
+        --jkl-color-border-strong: oklch(80% 0.008 67);
+        --jkl-color-border-strongest: oklch(100% 0.001 67);
+        --jkl-color-border-knockout: oklch(0% 0.007 64);
+        --jkl-color-border-info: oklch(60% 0.17 285);
+        --jkl-color-border-success: oklch(60% 0.1 156);
+        --jkl-color-border-error: oklch(60% 0.149 16);
+        --jkl-color-border-warning: oklch(60% 0.09 94);
+        --jkl-color-text-default: oklch(100% 0.001 67);
+        --jkl-color-text-subdued: oklch(80% 0.008 67);
+        --jkl-color-text-knockout: oklch(0% 0.007 64);
+        --jkl-color-text-info: oklch(90% 0.034 285);
+        --jkl-color-text-info-strong: oklch(70% 0.145 285);
+        --jkl-color-text-success: oklch(90% 0.035 156);
+        --jkl-color-text-success-strong: oklch(70% 0.089 156);
+        --jkl-color-text-error: oklch(90% 0.045 16);
+        --jkl-color-text-error-strong: oklch(70% 0.13 16);
+        --jkl-color-text-warning: oklch(90% 0.08 94);
+        --jkl-color-text-warning-strong: oklch(70% 0.1 94);
+    }
+}

package/styles/core/theme/_dynamic-spacing.scss

@@ -0,0 +1,55 @@
+@use "sass:list";
+@use "sass:map";
+@use "sass:string";
+@use "../jkl/screens";
+@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.theme {
+    // Sett CSS-variabler for alle spacing-kombinasjoner
+    :root {
+        @each $spacing-combination in spacing.$combinations {
+            $_step: list.nth($spacing-combination, 1);
+
+            --#{get-class-name($spacing-combination)}: #{map.get(
+                spacing.$spacing,
+                $_step
+            )};
+        }
+
+        @include screens.from-medium-device {
+            @each $spacing-combination in spacing.$combinations {
+                @if list.length($spacing-combination) > 1 {
+                    $_step: list.nth($spacing-combination, 2);
+
+                    --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
+                }
+            }
+        }
+
+        @include screens.from-large-device {
+            @each $spacing-combination in spacing.$combinations {
+                @if list.length($spacing-combination) > 2 {
+                    $_step: list.nth($spacing-combination, 3);
+
+                    --#{get-class-name($spacing-combination)}: #{map.get(
+                        spacing.$spacing,
+                        $_step
+                    )};
+                }
+            }
+        }
+    }
+}

package/styles/core/theme/_index.scss

@@ -0,0 +1,8 @@
+@forward "color-tokens";
+@forward "dynamic-spacing";
+@forward "legacy-color-tokens";
+@forward "legacy-tokens";
+@forward "old-vars";
+@forward "spacing-tokens";
+@forward "tokens";
+@forward "typography";