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

package/styles/components.scss

@@ -1,52 +1,53 @@
-@use "components/autosuggest" as autosuggest;
-@use "components/breadcrumb" as breadcrumb;
-@use "components/button" as button;
-@use "components/card" as card;
-@use "components/checkbox" as checkbox;
-@use "components/checkbox-panel" as checkbox-panel;
-@use "components/chip" as chip;
-@use "components/combobox" as combobox;
-@use "components/cookie-consent" as cookie-consent;
-@use "components/countdown" as countdown;
-@use "components/datepicker" as datepicker;
-@use "components/description-list" as description-list;
-@use "components/expander" as expander;
-@use "components/feedback" as feedback;
-@use "components/file" as file;
-@use "components/file-input" as file-input;
-@use "components/icon" as icon;
-@use "components/icon-button" as icon-button;
-@use "components/image" as image;
-@use "components/input-group" as input-group;
-@use "components/link" as link;
-@use "components/link-list" as link-list;
-@use "components/list" as list;
-@use "components/loader" as loader;
-@use "components/logo" as logo;
-@use "components/menu" as menu;
-@use "components/message" as message;
-@use "components/modal" as modal;
-@use "components/nav-link" as nav-link;
-@use "components/beta/nav-link" as nav-link-beta;
-@use "components/pagination" as pagination;
-@use "components/popover" as popover;
-@use "components/progress-bar" as progress-bar;
-@use "components/radio-button" as radio-button;
-@use "components/radio-panel" as radio-panel;
-@use "components/select" as select;
-@use "components/beta/select" as select-beta;
-@use "components/search" as search;
-@use "components/segmented-control" as segmented-control;
-@use "components/summary-table" as summary-table;
-@use "components/system-message" as system-message;
-@use "components/table" as table;
-@use "components/table-of-contents" as table-of-contents;
-@use "components/tabs" as tabs;
-@use "components/tag" as tag;
-@use "components/text-area" as text-area;
-@use "components/text-input" as text-input;
-@use "components/toast" as toast;
-@use "components/toggle-switch" as toggle-switch;
-@use "components/tooltip" as tooltip;
-@use "components/help" as help;
-@use "components/flex" as flex;
+@use "./components/autosuggest" as autosuggest;
+@use "./components/breadcrumb" as breadcrumb;
+@use "./components/button" as button;
+@use "./components/card" as card;
+@use "./components/checkbox" as checkbox;
+@use "./components/checkbox-panel" as checkbox-panel;
+@use "./components/chip" as chip;
+@use "./components/combobox" as combobox;
+@use "./components/cookie-consent" as cookie-consent;
+@use "./components/countdown" as countdown;
+@use "./components/datepicker" as datepicker;
+@use "./components/description-list" as description-list;
+@use "./components/expander" as expander;
+@use "./components/feedback" as feedback;
+@use "./components/file" as file;
+@use "./components/file-input" as file-input;
+@use "./components/icon" as icon;
+@use "./components/icon-button" as icon-button;
+@use "./components/image" as image;
+@use "./components/input-group" as input-group;
+@use "./components/link" as link;
+@use "./components/link-list" as link-list;
+@use "./components/list" as list;
+@use "./components/loader" as loader;
+@use "./components/logo" as logo;
+@use "./components/menu" as menu;
+@use "./components/message" as message;
+@use "./components/modal" as modal;
+@use "./components/nav-link" as nav-link;
+@use "./components/beta/nav-link" as nav-link-beta;
+@use "./components/pagination" as pagination;
+@use "./components/popover" as popover;
+@use "./components/progress-bar" as progress-bar;
+@use "./components/radio-button" as radio-button;
+@use "./components/radio-panel" as radio-panel;
+@use "./components/select" as select;
+@use "./components/beta/select" as select-beta;
+@use "./components/search" as search;
+@use "./components/segmented-control" as segmented-control;
+@use "./components/summary-table" as summary-table;
+@use "./components/system-message" as system-message;
+@use "./components/table" as table;
+@use "./components/table-of-contents" as table-of-contents;
+@use "./components/tabs" as tabs;
+@use "./components/tag" as tag;
+@use "./components/text-area" as text-area;
+@use "./components/text-input" as text-input;
+@use "./components/toast" as toast;
+@use "./components/toggle-switch" as toggle-switch;
+@use "./components/tooltip" as tooltip;
+@use "./components/typography" as typography;
+@use "./components/help" as help;
+@use "./components/flex" as flex;

package/styles/core/utility/_paragraphs.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "../jkl";
+@use "../jkl/typography";
+
+@layer jokul.utility {
+    .jkl-body {
+        @include jkl.text-style("paragraph-medium");
+    }
+
+    .jkl-bold {
+        @include jkl.text-style("paragraph-medium") {
+            --jkl-icon-weight: #{jkl.$icon-weight-bold};
+            font-weight: jkl.$typography-weight-bold;
+        }
+    }
+
+    .jkl-small {
+        @include jkl.text-style("paragraph-small");
+    }
+
+    @each $style, $_ in typography.$text-styles {
+        // Title-komponenten bruker `.jkl-title` som klasse og styrer
+        // stilen via `data-text-size`. Utility-laget vinner over
+        // components-laget i cascade, så vi må ekskludere komponenten her
+        // for at `size`-propen fortsatt skal ha effekt.
+        $selector: if(
+            $style == "title",
+            ".jkl-title:not([data-text-size])",
+            ".jkl-#{$style}"
+        );
+
+        #{$selector} {
+            @each $property, $value in map.get(typography.$text-styles, $style)
+            {
+                #{$property}: $value;
+            }
+        }
+    }
+}

package/styles/global/_base-class.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.global {
     /* Legger til støtte for fontskalering via OS-innstillinger på Apple-enheter */
@@ -21,7 +21,7 @@
         background-color: var(--jkl-background-color);
         color: var(--jkl-color);
 
-        @include jkl.use-font-family("Fremtind Grotesk");
+        @include jkl.use-font-family("Jokul");
 
         strong {
             font-weight: jkl.$font-weight-bold;

package/styles/global/_top-layer.scss

@@ -1,4 +1,4 @@
-@use "jkl";
+@use "../jkl";
 
 @layer jokul.global {
     [popover] {

package/styles/hooks/stories/styles.scss

@@ -1,9 +1,9 @@
-@use "../jkl";
+@use "../../jkl";
 
 .lorem-text {
     margin-top: var(--jkl-spacing-16);
     padding: 1rem;
-    background-color: var(--jkl-color-background-container-low);
+    background-color: var(--jkl-color-background-page);
     color: var(--jkl-color-text-default);
     border-radius: var(--jkl-spacing-4);
 }
@@ -73,4 +73,4 @@
         align-self: center;
         z-index: jkl.$z-index--overlay;
     }
-}
+}

package/styles/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/jkl/_tokens.scss

@@ -4,38 +4,60 @@
  */
 
 $color-background-page: var(--jkl-color-background-page) !default;
-$color-background-page-variant: var(--jkl-color-background-page-variant) !default;
 $color-background-container: var(--jkl-color-background-container) !default;
-$color-background-container-low: var(--jkl-color-background-container-low) !default;
-$color-background-container-high: var(--jkl-color-background-container-high) !default;
-$color-background-container-inverted: var(--jkl-color-background-container-inverted) !default;
-$color-background-container-subdued: var(--jkl-color-background-container-subdued) !default;
-$color-background-input-base: var(--jkl-color-background-input-base) !default;
-$color-background-input-focus: var(--jkl-color-background-input-focus) !default;
-$color-background-action: var(--jkl-color-background-action) !default;
-$color-background-interactive: var(--jkl-color-background-interactive) !default;
-$color-background-interactive-hover: var(--jkl-color-background-interactive-hover) !default;
-$color-background-interactive-selected: var(--jkl-color-background-interactive-selected) !default;
-$color-background-alert-neutral: var(--jkl-color-background-alert-neutral) !default;
-$color-background-alert-info: var(--jkl-color-background-alert-info) !default;
-$color-background-alert-success: var(--jkl-color-background-alert-success) !default;
-$color-background-alert-warning: var(--jkl-color-background-alert-warning) !default;
-$color-background-alert-error: var(--jkl-color-background-alert-error) !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-inverted: var(--jkl-color-text-inverted) !default;
-$color-text-on-action: var(--jkl-color-text-on-action) !default;
-$color-text-interactive: var(--jkl-color-text-interactive) !default;
-$color-text-interactive-hover: var(--jkl-color-text-interactive-hover) !default;
-$color-text-on-alert: var(--jkl-color-text-on-alert) !default;
-$color-text-on-alert-subdued: var(--jkl-color-text-on-alert-subdued) !default;
-$color-border-action: var(--jkl-color-border-action) !default;
-$color-border-input: var(--jkl-color-border-input) !default;
-$color-border-input-focus: var(--jkl-color-border-input-focus) !default;
-$color-border-separator: var(--jkl-color-border-separator) !default;
-$color-border-separator-strong: var(--jkl-color-border-separator-strong) !default;
-$color-border-separator-hover: var(--jkl-color-border-separator-hover) !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;
@@ -134,48 +156,100 @@ $text-style-text-micro: var(--jkl-text-style-text-micro) !default;
 
 $tokens: (
   'color': (
-    'background': (
-      'page': $color-background-page,
-      'page-variant': $color-background-page-variant,
-      'container': $color-background-container,
-      'container-low': $color-background-container-low,
-      'container-high': $color-background-container-high,
-      'container-inverted': $color-background-container-inverted,
-      'container-subdued': $color-background-container-subdued,
-      'input': (
-        'base': $color-background-input-base,
-        'focus': $color-background-input-focus
+    '@': (
+      'background': (
+        'page': $color-background-page,
+        'container': $color-background-container,
+        'container-accent': $color-background-container-accent,
+        'contrast': $color-background-contrast
       ),
-      'action': $color-background-action,
-      'interactive': $color-background-interactive,
-      'interactive-hover': $color-background-interactive-hover,
-      'interactive-selected': $color-background-interactive-selected,
-      'alert': (
-        'neutral': $color-background-alert-neutral,
-        'info': $color-background-alert-info,
-        'success': $color-background-alert-success,
-        'warning': $color-background-alert-warning,
-        'error': $color-background-alert-error
+      '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
       )
     ),
-    'text': (
-      'default': $color-text-default,
-      'subdued': $color-text-subdued,
-      'inverted': $color-text-inverted,
-      'on-action': $color-text-on-action,
-      'interactive': $color-text-interactive,
-      'interactive-hover': $color-text-interactive-hover,
-      'on-alert': $color-text-on-alert,
-      'on-alert-subdued': $color-text-on-alert-subdued
+    '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
+      )
     ),
-    'border': (
-      'action': $color-border-action,
-      'input': $color-border-input,
-      'input-focus': $color-border-input-focus,
-      'separator': $color-border-separator,
-      'separator-strong': $color-border-separator-strong,
-      'separator-hover': $color-border-separator-hover,
-      'subdued': $color-border-subdued
+    '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': (

package/styles/jkl/_typography.scss

@@ -67,37 +67,29 @@
 }
 
 $_valid-font-family-values: (
-    "Fremtind Grotesk",
-    "Fremtind Grotesk Display",
-    "Fremtind Grotesk Mono",
-    "Fremtind Material Symbols"
+    "Jokul",
+    "Jokul Display",
+    "Jokul Mono",
+    "Jokul Icons"
 );
 
-/// 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" | "Fremtind Material Symbols"} $font - Regular justerer seg automatisk til italic og bold basert på font-style og font-weight. Display og Mono er adskilte fontfamilier.
+/// 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 == "Fremtind Grotesk Mono" {
+    @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:
-            "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 if $font == "Fremtind Material Symbols" {
-        font-family:
-            "Fremtind Material Symbols", "Fremtind Material Symbols Fallback",
+            "Jokul Icons", "Jokul Icons Fallback",
             monospace;
     } @else {
-        font-family:
-            "Fremtind Grotesk", "Adjusted Arial Fallback", Arial, sans-serif;
+        font-family: var(--jkl-font-family-regular);
     }
 }

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

@@ -2,8 +2,7 @@
 @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 "../../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);