@fremtind/jokul 4.3.0 → 5.0.0-next.1

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

@@ -1,73 +0,0 @@
-/**
- * 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/_index.scss

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

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

@@ -1,81 +0,0 @@
-/**
- * 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

@@ -1,279 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-
-@layer jokul.theme {
-    :root {
-        --jkl-border-width-1: 0.0625rem;
-        --jkl-border-width-2: 0.125rem;
-        --jkl-border-width-3: 0.1875rem;
-        --jkl-border-radius-none: 0;
-        --jkl-border-radius-xs: 0.25rem;
-        --jkl-border-radius-s: 0.5rem;
-        --jkl-border-radius-m: 0.75rem;
-        --jkl-border-radius-l: 1rem;
-        --jkl-border-radius-full: 9999px;
-        --jkl-breakpoint-small: 0;
-        --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-semantic-spacing-none: 0;
-        --jkl-semantic-spacing-2xs: 0.25rem;
-        --jkl-semantic-spacing-xs: 0.5rem;
-        --jkl-semantic-spacing-s: 1rem;
-        --jkl-semantic-spacing-m: 1.5rem;
-        --jkl-semantic-spacing-l: 2.5rem;
-        --jkl-semantic-spacing-xl: 4rem;
-        --jkl-semantic-spacing-2xl: 6.5rem;
-        --jkl-icon-weight-normal: 300;
-        --jkl-icon-weight-bold: 400;
-        --jkl-typography-weight-normal: 400;
-        --jkl-typography-weight-bold: 700;
-        --jkl-typography-font-weight-normal: 400;
-        --jkl-typography-font-weight-bold: 700;
-        --jkl-typography-font-size-1: var(--jkl-font-size-1);
-        --jkl-typography-font-size-2: var(--jkl-font-size-2);
-        --jkl-typography-font-size-3: var(--jkl-font-size-3);
-        --jkl-typography-font-size-4: var(--jkl-font-size-4);
-        --jkl-typography-font-size-5: var(--jkl-font-size-5);
-        --jkl-typography-font-size-6: var(--jkl-font-size-6);
-        --jkl-typography-font-size-7: var(--jkl-font-size-7);
-        --jkl-typography-font-size-8: var(--jkl-font-size-8);
-        --jkl-typography-font-size-9: var(--jkl-font-size-9);
-        --jkl-typography-font-size-10: var(--jkl-font-size-10);
-        --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-line-height-flush: var(--jkl-line-height-flush);
-        --jkl-typography-line-height-tight: var(--jkl-line-height-tight);
-        --jkl-typography-line-height-relaxed: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-title-small-font-size: var(--jkl-font-size-8);
-        --jkl-typography-style-title-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-title-small-font-weight: 400;
-        --jkl-typography-style-title-base-font-size: var(--jkl-font-size-8);
-        --jkl-typography-style-title-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-title-base-font-weight: 400;
-        --jkl-typography-style-title-small-small-font-size: var(--jkl-font-size-7);
-        --jkl-typography-style-title-small-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-title-small-small-font-weight: 400;
-        --jkl-typography-style-title-small-base-font-size: var(--jkl-font-size-7);
-        --jkl-typography-style-title-small-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-title-small-base-font-weight: 400;
-        --jkl-typography-style-heading-1-small-font-size: var(--jkl-font-size-8);
-        --jkl-typography-style-heading-1-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-1-small-font-weight: 400;
-        --jkl-typography-style-heading-1-base-font-size: var(--jkl-font-size-8);
-        --jkl-typography-style-heading-1-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-1-base-font-weight: 400;
-        --jkl-typography-style-heading-2-small-font-size: var(--jkl-font-size-7);
-        --jkl-typography-style-heading-2-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-2-small-font-weight: 400;
-        --jkl-typography-style-heading-2-base-font-size: var(--jkl-font-size-7);
-        --jkl-typography-style-heading-2-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-2-base-font-weight: 400;
-        --jkl-typography-style-heading-3-small-font-size: var(--jkl-font-size-6);
-        --jkl-typography-style-heading-3-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-3-small-font-weight: 700;
-        --jkl-typography-style-heading-3-base-font-size: var(--jkl-font-size-6);
-        --jkl-typography-style-heading-3-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-3-base-font-weight: 700;
-        --jkl-typography-style-heading-4-small-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-heading-4-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-4-small-font-weight: 700;
-        --jkl-typography-style-heading-4-base-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-heading-4-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-4-base-font-weight: 700;
-        --jkl-typography-style-heading-5-small-font-size: var(--jkl-font-size-4);
-        --jkl-typography-style-heading-5-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-5-small-font-weight: 700;
-        --jkl-typography-style-heading-5-base-font-size: var(--jkl-font-size-4);
-        --jkl-typography-style-heading-5-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-heading-5-base-font-weight: 700;
-        --jkl-typography-style-paragraph-large-small-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-paragraph-large-small-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-large-small-font-weight: 400;
-        --jkl-typography-style-paragraph-large-base-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-paragraph-large-base-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-large-base-font-weight: 400;
-        --jkl-typography-style-paragraph-medium-small-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-paragraph-medium-small-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-medium-small-font-weight: 400;
-        --jkl-typography-style-paragraph-medium-base-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-paragraph-medium-base-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-medium-base-font-weight: 400;
-        --jkl-typography-style-paragraph-small-small-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-paragraph-small-small-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-small-small-font-weight: 400;
-        --jkl-typography-style-paragraph-small-base-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-paragraph-small-base-line-height: var(--jkl-line-height-relaxed);
-        --jkl-typography-style-paragraph-small-base-font-weight: 400;
-        --jkl-typography-style-text-large-small-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-text-large-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-large-small-font-weight: 400;
-        --jkl-typography-style-text-large-base-font-size: var(--jkl-font-size-5);
-        --jkl-typography-style-text-large-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-large-base-font-weight: 400;
-        --jkl-typography-style-text-medium-small-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-text-medium-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-medium-small-font-weight: 400;
-        --jkl-typography-style-text-medium-base-font-size: var(--jkl-font-size-3);
-        --jkl-typography-style-text-medium-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-medium-base-font-weight: 400;
-        --jkl-typography-style-text-small-small-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-text-small-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-small-small-font-weight: 400;
-        --jkl-typography-style-text-small-base-font-size: var(--jkl-font-size-2);
-        --jkl-typography-style-text-small-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-small-base-font-weight: 400;
-        --jkl-typography-style-text-micro-small-font-size: var(--jkl-font-size-1);
-        --jkl-typography-style-text-micro-small-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-micro-small-font-weight: 400;
-        --jkl-typography-style-text-micro-base-font-size: var(--jkl-font-size-1);
-        --jkl-typography-style-text-micro-base-line-height: var(--jkl-line-height-tight);
-        --jkl-typography-style-text-micro-base-font-weight: 400;
-        --jkl-typography-style-body-small-font-size: 1.125rem;
-        --jkl-typography-style-body-small-line-height: 1.75rem;
-        --jkl-typography-style-body-small-font-weight: 400;
-        --jkl-typography-style-body-base-font-size: 1.25rem;
-        --jkl-typography-style-body-base-line-height: 2rem;
-        --jkl-typography-style-body-base-font-weight: 400;
-        --jkl-typography-style-small-small-font-size: 1rem;
-        --jkl-typography-style-small-small-line-height: 1.5rem;
-        --jkl-typography-style-small-small-font-weight: 400;
-        --jkl-typography-style-small-base-font-size: 1rem;
-        --jkl-typography-style-small-base-line-height: 1.5rem;
-        --jkl-typography-style-small-base-font-weight: 400;
-        --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

@@ -1,21 +0,0 @@
-@use "../jkl";
-
-@layer jokul.theme {
-    @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/_shape.scss

@@ -1,12 +0,0 @@
-@use "../jkl";
-
-@layer jokul.theme {
-    :root {
-        --jkl-border-radius-none: 0;
-        --jkl-border-radius-xs: #{jkl.rem(4px)};
-        --jkl-border-radius-s: #{jkl.rem(8px)};
-        --jkl-border-radius-m: #{jkl.rem(12px)};
-        --jkl-border-radius-l: #{jkl.rem(16px)};
-        --jkl-border-radius-full: 9999px;
-    }
-}

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

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

package/styles/core/theme/_spacing.scss

@@ -1,64 +0,0 @@
-@use "../jkl";
-
-@layer jokul.theme {
-    :root,
-    [data-size] {
-        --jkl-unit-0: 0;
-        --jkl-unit-10: var(--jkl-unit-base);
-        --jkl-unit-15: calc(var(--jkl-unit-base) * 1.5);
-        --jkl-unit-20: calc(var(--jkl-unit-base) * 2);
-        --jkl-unit-25: calc(var(--jkl-unit-base) * 2.5);
-        --jkl-unit-30: calc(var(--jkl-unit-base) * 3);
-        --jkl-unit-35: calc(var(--jkl-unit-base) * 3.5);
-        --jkl-unit-40: calc(var(--jkl-unit-base) * 4);
-        --jkl-unit-50: calc(var(--jkl-unit-base) * 5);
-        --jkl-unit-60: calc(var(--jkl-unit-base) * 6);
-        --jkl-unit-70: calc(var(--jkl-unit-base) * 7);
-        --jkl-unit-80: calc(var(--jkl-unit-base) * 8);
-        --jkl-unit-90: calc(var(--jkl-unit-base) * 9);
-        --jkl-unit-100: calc(var(--jkl-unit-base) * 10);
-        --jkl-unit-130: calc(var(--jkl-unit-base) * 13);
-        --jkl-unit-210: calc(var(--jkl-unit-base) * 21);
-        --jkl-unit-02: calc(var(--jkl-unit-base) * .25);
-        --jkl-unit-05: calc(var(--jkl-unit-base) * .5);
-        --jkl-spacing-0: 0;
-        --jkl-spacing-2: #{jkl.rem(2px)};
-        --jkl-spacing-4: #{jkl.rem(4px)};
-        --jkl-spacing-8: #{jkl.rem(8px)};
-        --jkl-spacing-12: #{jkl.rem(12px)};
-        --jkl-spacing-16: #{jkl.rem(16px)};
-        --jkl-spacing-20: #{jkl.rem(20px)};
-        --jkl-spacing-24: #{jkl.rem(24px)};
-        --jkl-spacing-28: #{jkl.rem(28px)};
-        --jkl-spacing-32: #{jkl.rem(32px)};
-        --jkl-spacing-40: #{jkl.rem(40px)};
-        --jkl-spacing-48: #{jkl.rem(48px)};
-        --jkl-spacing-56: #{jkl.rem(56px)};
-        --jkl-spacing-64: #{jkl.rem(64px)};
-        --jkl-spacing-72: #{jkl.rem(72px)};
-        --jkl-spacing-80: #{jkl.rem(80px)};
-        --jkl-spacing-104: #{jkl.rem(104px)};
-        --jkl-spacing-168: #{jkl.rem(168px)};
-        --jkl-spacing-none: 0;
-        --jkl-spacing-xxs: calc(var(--jkl-unit-base) * .5);
-        --jkl-spacing-xs: var(--jkl-unit-base);
-        --jkl-spacing-s: calc(var(--jkl-unit-base) * 2);
-        --jkl-spacing-m: calc(var(--jkl-unit-base) * 3);
-        --jkl-spacing-l: calc(var(--jkl-unit-base) * 5);
-        --jkl-spacing-xl: calc(var(--jkl-unit-base) * 8);
-        --jkl-spacing-2xl: calc(var(--jkl-unit-base) * 13);
-    }
-
-    [data-size="small"] {
-        --jkl-unit-base: #{jkl.rem(5px)};
-    }
-
-    :root,
-    [data-size="medium"] {
-        --jkl-unit-base: #{jkl.rem(8px)};
-    }
-
-    [data-size="large"] {
-        --jkl-unit-base: #{jkl.rem(11px)};
-    }
-}

package/styles/core/theme/_tokens.scss

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

package/styles/core/theme/_typography.scss

@@ -1,38 +0,0 @@
-@use "sass:map";
-@use "../jkl";
-@use "../jkl/typography";
-
-@layer jokul.theme {
-  :root {
-    --jkl-line-height-flush: 1;
-    --jkl-line-height-tight: 1.3;
-    --jkl-line-height-relaxed: 1.6;
-  }
-
-  :root,
-  [data-size] {
-    --jkl-font-size-1: #{jkl.rem(14px)};
-    --jkl-font-size-2: #{jkl.rem(16px)};
-    --jkl-font-size-3: #{jkl.rem(18px)};
-    --jkl-font-size-4: #{jkl.rem(20px)};
-    --jkl-font-size-5: #{jkl.rem(24px)};
-    --jkl-font-size-6: #{jkl.rem(28px)};
-    --jkl-font-size-7: #{jkl.rem(32px)};
-    --jkl-font-size-8: #{jkl.rem(40px)};
-    --jkl-font-size-9: #{jkl.rem(48px)};
-    --jkl-font-size-10: #{jkl.rem(56px)};
-  }
-
-  [data-size="small"] {
-    --jkl-font-size-1: #{jkl.rem(12px)};
-    --jkl-font-size-2: #{jkl.rem(14px)};
-    --jkl-font-size-3: #{jkl.rem(16px)};
-    --jkl-font-size-4: #{jkl.rem(18px)};
-    --jkl-font-size-5: #{jkl.rem(20px)};
-    --jkl-font-size-6: #{jkl.rem(24px)};
-    --jkl-font-size-7: #{jkl.rem(28px)};
-    --jkl-font-size-8: #{jkl.rem(32px)};
-    --jkl-font-size-9: #{jkl.rem(40px)};
-    --jkl-font-size-10: #{jkl.rem(48px)};
-  }
-}