@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

package/styles/{core/jkl → jkl}/_index.scss

@@ -1,7 +1,5 @@
-@forward "legacy";
-@forward "colors" hide varslingsfarge;
 @forward "convert";
-@forward "helpers";
+@forward "forced-colors";
 @forward "motion";
 @forward "navigation";
 @forward "ornaments";
@@ -11,8 +9,7 @@
 @forward "screens";
 @forward "shadows";
 @forward "spacing" hide $spacing, $combinations, $positions;
-@forward "theme";
-@forward "tokens" hide $color-background-page, $color-border-subdued, $color-text-default, $color-text-subdued;
+@forward "tokens";
 @forward "typography" hide $text-styles;
 @forward "underline";
-@forward "z-index";
+@forward "z-index";

package/styles/{core/jkl → jkl}/_motion.scss

@@ -1,46 +1,28 @@
 @use "sass:map";
 @use "sass:list";
-
-// Oppdater verdier i motion.ts også
-$_easings: (
-    "standard": ease,
-    "entrance": ease-out,
-    "exit": ease-in,
-    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
-    "focus": cubic-bezier(0.6, 0.2, 0.35, 1),
-);
+@use "tokens" as *;
 
 /// Hent en easing til bruk i animasjoner. Se også `timing`-funksjonen og `motion`-mixinen.
-/// @param {"standard" | "entrance" | "exit" | "easeInBounceOut" | "focus"} $name - Navn på easingen du ønsker verdien til
+/// @param {string} $name - Navn på easingen du ønsker verdien til
 /// @return {String} - easingverdi til bruk i animasjoner
 /// @see timing
 /// @see motion
-@function easing($name, $easings: $_easings) {
-    @if map.has-key($easings, $name) {
-        @return map.get($easings, $name);
+@function easing($name) {
+    @if map.has-key($tokens, "motion", "easing", $name) {
+        @return map.get($tokens, "motion", "easing", $name);
     } @else {
         @error 'Unable to find an easing named #{$name} in our supported easings.';
     }
 }
 
-// Oppdater verdier i motion.ts også
-$_timings: (
-    "energetic": 75ms,
-    "snappy": 100ms,
-    "productive": 150ms,
-    "polite": 200ms,
-    "expressive": 250ms,
-    "lazy": 400ms,
-);
-
 /// Hent en timing til bruk i animasjoner. Se også `easing`-funksjonen og `motion`-mixinen.
 /// @param {"energetic" | "snappy" | "productive" | "expressive" | "lazy"} $mode - Navn på timingen du ønsker verdien til
 /// @return {String} - timingverdi til bruk i animasjoner
 /// @see easing
 /// @see motion
-@function timing($mode, $timings: $_timings) {
-    @if map.has-key($timings, $mode) {
-        @return map.get($timings, $mode);
+@function timing($mode) {
+    @if map.has-key($tokens, "motion", "timing", $mode) {
+        @return map.get($tokens, "motion", "timing", $mode);
     } @else {
         @error 'Unable to find a timing named #{$mode} in our supported timings';
     }

package/styles/{core/jkl → jkl}/_ornaments.scss

@@ -23,6 +23,6 @@
 }
 
 @mixin focus-outline($offset: 3px, $thickness: 3px) {
-    outline: $thickness solid var(--jkl-color-border-action);
+    outline: $thickness solid var(--jkl-color-border-strong);
     outline-offset: $offset;
 }

package/styles/{core/jkl → jkl}/_reset.scss

@@ -1,4 +1,4 @@
-@use "theme";
+@use "forced-colors";
 
 /// En omfattende reset for alt av outlines og borders på interaktive elementer
 @mixin reset-outline {
@@ -17,7 +17,7 @@
 
     // Reset alt som er gjort over hvis brukeren har på forced-colors.
     // Da mister vi box-shadow og er avhengig av at borders og outlines synes.
-    @include theme.forced-colors-mode {
+    @include forced-colors.forced-colors-mode {
         outline: revert;
         border-style: revert;
         outline-style: revert;

package/styles/{core/jkl → jkl}/_spacing.scss

@@ -2,11 +2,6 @@
 @use "sass:map";
 @use "sass:list";
 @use "screens";
-@use "legacy";
-
-/// Lar deg gjøre oppslag på navnet uten `spacing`-prefix for å få ut rem-verdien
-/// @type Map
-$spacing: map.get(legacy.$tokens, "spacing");
 
 /// Her defineres kombinasjoner av spacinger til bruk i nytteklasser for spacing.
 /// Nytteklasser for alle enkeltspacinger, samt kombinasjoner, i denne listen
@@ -146,4 +141,4 @@ $positions: (
             @include _single-spacing(list.nth($steps, 3), $position);
         }
     }
-}
+}

package/styles/jkl/_tokens.scss

@@ -0,0 +1,380 @@
+
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+$color-background-page: var(--jkl-color-background-page) !default;
+$color-background-container: var(--jkl-color-background-container) !default;
+$color-background-container-accent: var(--jkl-color-background-container-accent) !default;
+$color-background-contrast: var(--jkl-color-background-contrast) !default;
+$color-text-default: var(--jkl-color-text-default) !default;
+$color-text-subdued: var(--jkl-color-text-subdued) !default;
+$color-text-accent: var(--jkl-color-text-accent) !default;
+$color-text-on-contrast: var(--jkl-color-text-on-contrast) !default;
+$color-border-default: var(--jkl-color-border-default) !default;
+$color-border-subdued: var(--jkl-color-border-subdued) !default;
+$color-border-strong: var(--jkl-color-border-strong) !default;
+$color-warning-background-page: var(--jkl-color-warning-background-page) !default;
+$color-warning-background-container: var(--jkl-color-warning-background-container) !default;
+$color-warning-background-container-accent: var(--jkl-color-warning-background-container-accent) !default;
+$color-warning-background-contrast: var(--jkl-color-warning-background-contrast) !default;
+$color-warning-text-default: var(--jkl-color-warning-text-default) !default;
+$color-warning-text-subdued: var(--jkl-color-warning-text-subdued) !default;
+$color-warning-text-accent: var(--jkl-color-warning-text-accent) !default;
+$color-warning-text-on-contrast: var(--jkl-color-warning-text-on-contrast) !default;
+$color-warning-border-default: var(--jkl-color-warning-border-default) !default;
+$color-warning-border-subdued: var(--jkl-color-warning-border-subdued) !default;
+$color-warning-border-strong: var(--jkl-color-warning-border-strong) !default;
+$color-success-background-page: var(--jkl-color-success-background-page) !default;
+$color-success-background-container: var(--jkl-color-success-background-container) !default;
+$color-success-background-container-accent: var(--jkl-color-success-background-container-accent) !default;
+$color-success-background-contrast: var(--jkl-color-success-background-contrast) !default;
+$color-success-text-default: var(--jkl-color-success-text-default) !default;
+$color-success-text-subdued: var(--jkl-color-success-text-subdued) !default;
+$color-success-text-accent: var(--jkl-color-success-text-accent) !default;
+$color-success-text-on-contrast: var(--jkl-color-success-text-on-contrast) !default;
+$color-success-border-default: var(--jkl-color-success-border-default) !default;
+$color-success-border-subdued: var(--jkl-color-success-border-subdued) !default;
+$color-success-border-strong: var(--jkl-color-success-border-strong) !default;
+$color-info-background-page: var(--jkl-color-info-background-page) !default;
+$color-info-background-container: var(--jkl-color-info-background-container) !default;
+$color-info-background-container-accent: var(--jkl-color-info-background-container-accent) !default;
+$color-info-background-contrast: var(--jkl-color-info-background-contrast) !default;
+$color-info-text-default: var(--jkl-color-info-text-default) !default;
+$color-info-text-subdued: var(--jkl-color-info-text-subdued) !default;
+$color-info-text-accent: var(--jkl-color-info-text-accent) !default;
+$color-info-text-on-contrast: var(--jkl-color-info-text-on-contrast) !default;
+$color-info-border-default: var(--jkl-color-info-border-default) !default;
+$color-info-border-subdued: var(--jkl-color-info-border-subdued) !default;
+$color-info-border-strong: var(--jkl-color-info-border-strong) !default;
+$color-error-background-page: var(--jkl-color-error-background-page) !default;
+$color-error-background-container: var(--jkl-color-error-background-container) !default;
+$color-error-background-container-accent: var(--jkl-color-error-background-container-accent) !default;
+$color-error-background-contrast: var(--jkl-color-error-background-contrast) !default;
+$color-error-text-default: var(--jkl-color-error-text-default) !default;
+$color-error-text-subdued: var(--jkl-color-error-text-subdued) !default;
+$color-error-text-accent: var(--jkl-color-error-text-accent) !default;
+$color-error-text-on-contrast: var(--jkl-color-error-text-on-contrast) !default;
+$color-error-border-default: var(--jkl-color-error-border-default) !default;
+$color-error-border-subdued: var(--jkl-color-error-border-subdued) !default;
+$color-error-border-strong: var(--jkl-color-error-border-strong) !default;
+$unit-0: var(--jkl-unit-0) !default;
+$unit-10: var(--jkl-unit-10) !default;
+$unit-15: var(--jkl-unit-15) !default;
+$unit-20: var(--jkl-unit-20) !default;
+$unit-25: var(--jkl-unit-25) !default;
+$unit-30: var(--jkl-unit-30) !default;
+$unit-35: var(--jkl-unit-35) !default;
+$unit-40: var(--jkl-unit-40) !default;
+$unit-50: var(--jkl-unit-50) !default;
+$unit-60: var(--jkl-unit-60) !default;
+$unit-70: var(--jkl-unit-70) !default;
+$unit-80: var(--jkl-unit-80) !default;
+$unit-90: var(--jkl-unit-90) !default;
+$unit-100: var(--jkl-unit-100) !default;
+$unit-130: var(--jkl-unit-130) !default;
+$unit-210: var(--jkl-unit-210) !default;
+$unit-base: var(--jkl-unit-base) !default;
+$unit-02: var(--jkl-unit-02) !default;
+$unit-05: var(--jkl-unit-05) !default;
+$spacing-0: var(--jkl-spacing-0) !default;
+$spacing-2: var(--jkl-spacing-2) !default;
+$spacing-4: var(--jkl-spacing-4) !default;
+$spacing-8: var(--jkl-spacing-8) !default;
+$spacing-12: var(--jkl-spacing-12) !default;
+$spacing-16: var(--jkl-spacing-16) !default;
+$spacing-24: var(--jkl-spacing-24) !default;
+$spacing-32: var(--jkl-spacing-32) !default;
+$spacing-40: var(--jkl-spacing-40) !default;
+$spacing-64: var(--jkl-spacing-64) !default;
+$spacing-104: var(--jkl-spacing-104) !default;
+$spacing-168: var(--jkl-spacing-168) !default;
+$spacing-none: var(--jkl-spacing-none) !default;
+$spacing-2xs: var(--jkl-spacing-2xs) !default;
+$spacing-xs: var(--jkl-spacing-xs) !default;
+$spacing-s: var(--jkl-spacing-s) !default;
+$spacing-m: var(--jkl-spacing-m) !default;
+$spacing-l: var(--jkl-spacing-l) !default;
+$spacing-xl: var(--jkl-spacing-xl) !default;
+$spacing-2xl: var(--jkl-spacing-2xl) !default;
+$border-width-1: var(--jkl-border-width-1) !default;
+$border-width-2: var(--jkl-border-width-2) !default;
+$border-width-3: var(--jkl-border-width-3) !default;
+$border-radius-none: var(--jkl-border-radius-none) !default;
+$border-radius-xs: var(--jkl-border-radius-xs) !default;
+$border-radius-s: var(--jkl-border-radius-s) !default;
+$border-radius-m: var(--jkl-border-radius-m) !default;
+$border-radius-l: var(--jkl-border-radius-l) !default;
+$border-radius-full: var(--jkl-border-radius-full) !default;
+$breakpoint-small: var(--jkl-breakpoint-small) !default;
+$breakpoint-medium: var(--jkl-breakpoint-medium) !default;
+$breakpoint-large: var(--jkl-breakpoint-large) !default;
+$breakpoint-xl: var(--jkl-breakpoint-xl) !default;
+$motion-timing-energetic: var(--jkl-motion-timing-energetic) !default;
+$motion-timing-snappy: var(--jkl-motion-timing-snappy) !default;
+$motion-timing-productive: var(--jkl-motion-timing-productive) !default;
+$motion-timing-polite: var(--jkl-motion-timing-polite) !default;
+$motion-timing-expressive: var(--jkl-motion-timing-expressive) !default;
+$motion-timing-lazy: var(--jkl-motion-timing-lazy) !default;
+$motion-easing-standard: var(--jkl-motion-easing-standard) !default;
+$motion-easing-entrance: var(--jkl-motion-easing-entrance) !default;
+$motion-easing-exit: var(--jkl-motion-easing-exit) !default;
+$motion-easing-ease-in-bounce-out: var(--jkl-motion-easing-ease-in-bounce-out) !default;
+$motion-easing-focus: var(--jkl-motion-easing-focus) !default;
+$font-size-1: var(--jkl-font-size-1) !default;
+$font-size-2: var(--jkl-font-size-2) !default;
+$font-size-3: var(--jkl-font-size-3) !default;
+$font-size-4: var(--jkl-font-size-4) !default;
+$font-size-5: var(--jkl-font-size-5) !default;
+$font-size-6: var(--jkl-font-size-6) !default;
+$font-size-7: var(--jkl-font-size-7) !default;
+$font-size-8: var(--jkl-font-size-8) !default;
+$font-size-9: var(--jkl-font-size-9) !default;
+$font-size-10: var(--jkl-font-size-10) !default;
+$font-weight-normal: var(--jkl-font-weight-normal) !default;
+$font-weight-bold: var(--jkl-font-weight-bold) !default;
+$font-family-regular: var(--jkl-font-family-regular) !default;
+$font-family-display: var(--jkl-font-family-display) !default;
+$font-family-mono: var(--jkl-font-family-mono) !default;
+$line-height-flush: var(--jkl-line-height-flush) !default;
+$line-height-tight: var(--jkl-line-height-tight) !default;
+$line-height-relaxed: var(--jkl-line-height-relaxed) !default;
+$text-style-title: var(--jkl-text-style-title) !default;
+$text-style-title-small: var(--jkl-text-style-title-small) !default;
+$text-style-heading-1: var(--jkl-text-style-heading-1) !default;
+$text-style-heading-2: var(--jkl-text-style-heading-2) !default;
+$text-style-heading-3: var(--jkl-text-style-heading-3) !default;
+$text-style-heading-4: var(--jkl-text-style-heading-4) !default;
+$text-style-heading-5: var(--jkl-text-style-heading-5) !default;
+$text-style-paragraph-large: var(--jkl-text-style-paragraph-large) !default;
+$text-style-paragraph-medium: var(--jkl-text-style-paragraph-medium) !default;
+$text-style-paragraph-small: var(--jkl-text-style-paragraph-small) !default;
+$text-style-text-large: var(--jkl-text-style-text-large) !default;
+$text-style-text-medium: var(--jkl-text-style-text-medium) !default;
+$text-style-text-small: var(--jkl-text-style-text-small) !default;
+$text-style-text-micro: var(--jkl-text-style-text-micro) !default;
+
+$tokens: (
+  'color': (
+    '@': (
+      'background': (
+        'page': $color-background-page,
+        'container': $color-background-container,
+        'container-accent': $color-background-container-accent,
+        'contrast': $color-background-contrast
+      ),
+      'text': (
+        'default': $color-text-default,
+        'subdued': $color-text-subdued,
+        'accent': $color-text-accent,
+        'on-contrast': $color-text-on-contrast
+      ),
+      'border': (
+        'default': $color-border-default,
+        'subdued': $color-border-subdued,
+        'strong': $color-border-strong
+      )
+    ),
+    'warning': (
+      'background': (
+        'page': $color-warning-background-page,
+        'container': $color-warning-background-container,
+        'container-accent': $color-warning-background-container-accent,
+        'contrast': $color-warning-background-contrast
+      ),
+      'text': (
+        'default': $color-warning-text-default,
+        'subdued': $color-warning-text-subdued,
+        'accent': $color-warning-text-accent,
+        'on-contrast': $color-warning-text-on-contrast
+      ),
+      'border': (
+        'default': $color-warning-border-default,
+        'subdued': $color-warning-border-subdued,
+        'strong': $color-warning-border-strong
+      )
+    ),
+    'success': (
+      'background': (
+        'page': $color-success-background-page,
+        'container': $color-success-background-container,
+        'container-accent': $color-success-background-container-accent,
+        'contrast': $color-success-background-contrast
+      ),
+      'text': (
+        'default': $color-success-text-default,
+        'subdued': $color-success-text-subdued,
+        'accent': $color-success-text-accent,
+        'on-contrast': $color-success-text-on-contrast
+      ),
+      'border': (
+        'default': $color-success-border-default,
+        'subdued': $color-success-border-subdued,
+        'strong': $color-success-border-strong
+      )
+    ),
+    'info': (
+      'background': (
+        'page': $color-info-background-page,
+        'container': $color-info-background-container,
+        'container-accent': $color-info-background-container-accent,
+        'contrast': $color-info-background-contrast
+      ),
+      'text': (
+        'default': $color-info-text-default,
+        'subdued': $color-info-text-subdued,
+        'accent': $color-info-text-accent,
+        'on-contrast': $color-info-text-on-contrast
+      ),
+      'border': (
+        'default': $color-info-border-default,
+        'subdued': $color-info-border-subdued,
+        'strong': $color-info-border-strong
+      )
+    ),
+    'error': (
+      'background': (
+        'page': $color-error-background-page,
+        'container': $color-error-background-container,
+        'container-accent': $color-error-background-container-accent,
+        'contrast': $color-error-background-contrast
+      ),
+      'text': (
+        'default': $color-error-text-default,
+        'subdued': $color-error-text-subdued,
+        'accent': $color-error-text-accent,
+        'on-contrast': $color-error-text-on-contrast
+      ),
+      'border': (
+        'default': $color-error-border-default,
+        'subdued': $color-error-border-subdued,
+        'strong': $color-error-border-strong
+      )
+    )
+  ),
+  'unit': (
+    '0': $unit-0,
+    '10': $unit-10,
+    '15': $unit-15,
+    '20': $unit-20,
+    '25': $unit-25,
+    '30': $unit-30,
+    '35': $unit-35,
+    '40': $unit-40,
+    '50': $unit-50,
+    '60': $unit-60,
+    '70': $unit-70,
+    '80': $unit-80,
+    '90': $unit-90,
+    '100': $unit-100,
+    '130': $unit-130,
+    '210': $unit-210,
+    'base': $unit-base,
+    '02': $unit-02,
+    '05': $unit-05
+  ),
+  'spacing': (
+    '0': $spacing-0,
+    '2': $spacing-2,
+    '4': $spacing-4,
+    '8': $spacing-8,
+    '12': $spacing-12,
+    '16': $spacing-16,
+    '24': $spacing-24,
+    '32': $spacing-32,
+    '40': $spacing-40,
+    '64': $spacing-64,
+    '104': $spacing-104,
+    '168': $spacing-168,
+    'none': $spacing-none,
+    '2xs': $spacing-2xs,
+    'xs': $spacing-xs,
+    's': $spacing-s,
+    'm': $spacing-m,
+    'l': $spacing-l,
+    'xl': $spacing-xl,
+    '2xl': $spacing-2xl
+  ),
+  'border': (
+    'width': (
+      '1': $border-width-1,
+      '2': $border-width-2,
+      '3': $border-width-3
+    ),
+    'radius': (
+      'none': $border-radius-none,
+      'xs': $border-radius-xs,
+      's': $border-radius-s,
+      'm': $border-radius-m,
+      'l': $border-radius-l,
+      'full': $border-radius-full
+    )
+  ),
+  'breakpoint': (
+    'small': $breakpoint-small,
+    'medium': $breakpoint-medium,
+    'large': $breakpoint-large,
+    'xl': $breakpoint-xl
+  ),
+  'motion': (
+    'timing': (
+      'energetic': $motion-timing-energetic,
+      'snappy': $motion-timing-snappy,
+      'productive': $motion-timing-productive,
+      'polite': $motion-timing-polite,
+      'expressive': $motion-timing-expressive,
+      'lazy': $motion-timing-lazy
+    ),
+    'easing': (
+      'standard': $motion-easing-standard,
+      'entrance': $motion-easing-entrance,
+      'exit': $motion-easing-exit,
+      'easeInBounceOut': $motion-easing-ease-in-bounce-out,
+      'focus': $motion-easing-focus
+    )
+  ),
+  'font': (
+    'size': (
+      '1': $font-size-1,
+      '2': $font-size-2,
+      '3': $font-size-3,
+      '4': $font-size-4,
+      '5': $font-size-5,
+      '6': $font-size-6,
+      '7': $font-size-7,
+      '8': $font-size-8,
+      '9': $font-size-9,
+      '10': $font-size-10
+    ),
+    'weight': (
+      'normal': $font-weight-normal,
+      'bold': $font-weight-bold
+    ),
+    'family': (
+      'regular': $font-family-regular,
+      'display': $font-family-display,
+      'mono': $font-family-mono
+    )
+  ),
+  'lineHeight': (
+    'flush': $line-height-flush,
+    'tight': $line-height-tight,
+    'relaxed': $line-height-relaxed
+  ),
+  'textStyle': (
+    'title': $text-style-title,
+    'title-small': $text-style-title-small,
+    'heading-1': $text-style-heading-1,
+    'heading-2': $text-style-heading-2,
+    'heading-3': $text-style-heading-3,
+    'heading-4': $text-style-heading-4,
+    'heading-5': $text-style-heading-5,
+    'paragraph-large': $text-style-paragraph-large,
+    'paragraph-medium': $text-style-paragraph-medium,
+    'paragraph-small': $text-style-paragraph-small,
+    'text-large': $text-style-text-large,
+    'text-medium': $text-style-text-medium,
+    'text-small': $text-style-text-small,
+    'text-micro': $text-style-text-micro
+  )
+);

package/styles/jkl/_typography.scss

@@ -0,0 +1,95 @@
+@use "sass:string";
+@use "sass:map";
+@use "sass:list";
+@use "screens";
+@use "tokens" as *;
+@use "responsive-units";
+
+/// 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" | "paragraph-large" | "paragraph-medium" | "paragraph-small" | "text-large" | "text-medium" | "text-small"} $style - Ønsket stilnavn.
+/// @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.$font-weight-bold;
+///         }
+///     }
+@mixin text-style($style) {
+    @if map.has-key($tokens, "textStyle", $style) {
+        font: map.get($tokens, "textStyle", $style);
+        @content;
+    } @else {
+        @error "No text style with the name #{$style} was found. Try one of these: #{map.keys($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: 400;
+    font-weight: $font-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: (
+    "Jokul",
+    "Jokul Display",
+    "Jokul Mono",
+    "Jokul Icons"
+);
+
+/// Hjelper sette riktig remse med fallback-fonts for Jokul, Jokul Display, og Jokul Mono.
+/// @param {"Jokul" | "Jokul Mono" | "Jokul Display" | "Jokul Icons"} $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 == "Jokul Mono" {
+        font-family: var(--jkl-font-family-mono);
+    } @else if $font == "Jokul Display" {
+        font-family: var(--jkl-font-family-display);
+    } @else if $font == "Jokul Icons" {
+        font-family:
+            "Jokul Icons", "Jokul Icons Fallback",
+            monospace;
+    } @else {
+        font-family: var(--jkl-font-family-regular);
+    }
+}

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

@@ -1,9 +1,8 @@
 @use "sass:color";
-@use "../../core/jkl";
+@use "../../jkl";
 
 @mixin wrapper-styles {
-    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding)
-        var(--jkl-text-input-horizontal-padding);
+    --jkl-text-input-padding: var(--jkl-text-input-vertical-padding) var(--jkl-text-input-horizontal-padding);
     --jkl-text-input-vertical-padding: var(--jkl-unit-15);
     --jkl-text-input-horizontal-padding: var(--jkl-unit-15);
     --jkl-text-input-action-button-size: var(--jkl-unit-60);
@@ -11,8 +10,8 @@
     --jkl-text-input-action-button-padding: var(--jkl-unit-10) 0;
     --jkl-text-input-action-button-focus-position: var(--jkl-unit-05);
     --text-color: var(--jkl-color-text-default);
-    --background-color: var(--jkl-color-background-input-base);
-    --border-color: var(--jkl-color-border-input);
+    --background-color: transparent;
+    --border-color: var(--jkl-color-border-default);
     --placeholder-color: var(--jkl-color-text-subdued);
 
     border-radius: var(--jkl-border-radius-s);
@@ -35,21 +34,20 @@
 
     &:focus-within,
     &:has([data-focused="true"]) {
-        --background-color: var(--jkl-color-background-input-focus);
+        --background-color: var(--jkl-color-background-container);
     }
 
     &[data-invalid="true"]:not(:focus-within):not(:has([data-focused="true"])) {
-        --background-color: var(--jkl-color-background-alert-error);
-        --text-color: var(--jkl-color-text-on-alert);
-        // Vi har ingen god måte å få tak i kun light mode-versjon av subdued
-        // så vi bruker tekstfargen med litt gjennomsiktighet
-        --placeholder-color: color(from currentColor sRGB r g b / 75%);
+        --background-color: var(--jkl-color-error-background-container);
+        --text-color: var(--jkl-color-error-text-default);
+        --border-color: var(--jkl-color-error-border-default);
+        --placeholder-color: var(--jkl-color-error-text-subdued);
     }
 
     &:hover,
     &:focus-within,
     &:has([data-focused="true"]) {
-        --border-color: var(--jkl-color-border-input-focus);
+        --border-color: var(--jkl-color-border-strong);
 
         box-shadow:
             inset 0 0 0 jkl.rem(1px) var(--border-color),
@@ -86,9 +84,7 @@
         width: var(--jkl-text-input-action-button-size);
 
         // Unngå for langt mellomrom mellom ikon og teksten i feltet
-        margin-inline-start: calc(
-            var(--jkl-text-input-horizontal-padding) * -1
-        );
+        margin-inline-start: calc(var(--jkl-text-input-horizontal-padding) * -1);
 
         .jkl-icon-button__icon {
             height: var(--jkl-text-input-action-button-icon-size);
@@ -96,7 +92,7 @@
         }
 
         &:hover {
-            color: var(--jkl-color-text-interactive-hover);
+            color: var(--jkl-color-text-subdued);
 
             @include jkl.forced-colors-mode {
                 border: jkl.rem(2px) inset ButtonText;

package/styles/shared/track/track.scss

@@ -1,8 +1,8 @@
-@use "../../core/jkl";
+@use "../../jkl";
 
 @mixin track {
-    --track-color: var(--jkl-color-border-separator);
-    --bar-color: var(--jkl-color-border-input-focus);
+    --track-color: var(--jkl-color-border-subdued);
+    --bar-color: var(--jkl-color-border-strong);
     --bar-height: #{jkl.rem(4px)};
 
     background-color: var(--track-color);