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

package/styles/jkl/_tokens.scss

@@ -3,39 +3,60 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-$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-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-border-subdued: var(--jkl-color-border-subdued) !default;
+$color-neutral-background-page: var(--jkl-color-neutral-background-page) !default;
+$color-neutral-background-container: var(--jkl-color-neutral-background-container) !default;
+$color-neutral-background-action: var(--jkl-color-neutral-background-action) !default;
+$color-neutral-text-default: var(--jkl-color-neutral-text-default) !default;
+$color-neutral-text-subdued: var(--jkl-color-neutral-text-subdued) !default;
+$color-neutral-text-on-action: var(--jkl-color-neutral-text-on-action) !default;
+$color-neutral-border-strong: var(--jkl-color-neutral-border-strong) !default;
+$color-neutral-border-default: var(--jkl-color-neutral-border-default) !default;
+$color-neutral-border-subdued: var(--jkl-color-neutral-border-subdued) !default;
+$color-accent-background-page: var(--jkl-color-accent-background-page) !default;
+$color-accent-background-container: var(--jkl-color-accent-background-container) !default;
+$color-accent-background-action: var(--jkl-color-accent-background-action) !default;
+$color-accent-text-default: var(--jkl-color-accent-text-default) !default;
+$color-accent-text-subdued: var(--jkl-color-accent-text-subdued) !default;
+$color-accent-text-on-action: var(--jkl-color-accent-text-on-action) !default;
+$color-accent-border-strong: var(--jkl-color-accent-border-strong) !default;
+$color-accent-border-default: var(--jkl-color-accent-border-default) !default;
+$color-accent-border-subdued: var(--jkl-color-accent-border-subdued) !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-action: var(--jkl-color-warning-background-action) !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-on-action: var(--jkl-color-warning-text-on-action) !default;
+$color-warning-border-strong: var(--jkl-color-warning-border-strong) !default;
+$color-warning-border-default: var(--jkl-color-warning-border-default) !default;
+$color-warning-border-subdued: var(--jkl-color-warning-border-subdued) !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-action: var(--jkl-color-success-background-action) !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-on-action: var(--jkl-color-success-text-on-action) !default;
+$color-success-border-strong: var(--jkl-color-success-border-strong) !default;
+$color-success-border-default: var(--jkl-color-success-border-default) !default;
+$color-success-border-subdued: var(--jkl-color-success-border-subdued) !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-action: var(--jkl-color-info-background-action) !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-on-action: var(--jkl-color-info-text-on-action) !default;
+$color-info-border-strong: var(--jkl-color-info-border-strong) !default;
+$color-info-border-default: var(--jkl-color-info-border-default) !default;
+$color-info-border-subdued: var(--jkl-color-info-border-subdued) !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-action: var(--jkl-color-error-background-action) !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-on-action: var(--jkl-color-error-text-on-action) !default;
+$color-error-border-strong: var(--jkl-color-error-border-strong) !default;
+$color-error-border-default: var(--jkl-color-error-border-default) !default;
+$color-error-border-subdued: var(--jkl-color-error-border-subdued) !default;
 $unit-0: var(--jkl-unit-0) !default;
 $unit-10: var(--jkl-unit-10) !default;
 $unit-15: var(--jkl-unit-15) !default;
@@ -134,48 +155,107 @@ $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
+    'neutral': (
+      'background': (
+        'page': $color-neutral-background-page,
+        'container': $color-neutral-background-container,
+        'action': $color-neutral-background-action
       ),
-      '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-neutral-text-default,
+        'subdued': $color-neutral-text-subdued,
+        'on-action': $color-neutral-text-on-action
+      ),
+      'border': (
+        'strong': $color-neutral-border-strong,
+        'default': $color-neutral-border-default,
+        'subdued': $color-neutral-border-subdued
+      )
+    ),
+    'accent': (
+      'background': (
+        'page': $color-accent-background-page,
+        'container': $color-accent-background-container,
+        'action': $color-accent-background-action
+      ),
+      'text': (
+        'default': $color-accent-text-default,
+        'subdued': $color-accent-text-subdued,
+        'on-action': $color-accent-text-on-action
+      ),
+      'border': (
+        'strong': $color-accent-border-strong,
+        'default': $color-accent-border-default,
+        'subdued': $color-accent-border-subdued
       )
     ),
-    '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
+    'warning': (
+      'background': (
+        'page': $color-warning-background-page,
+        'container': $color-warning-background-container,
+        'action': $color-warning-background-action
+      ),
+      'text': (
+        'default': $color-warning-text-default,
+        'subdued': $color-warning-text-subdued,
+        'on-action': $color-warning-text-on-action
+      ),
+      'border': (
+        'strong': $color-warning-border-strong,
+        'default': $color-warning-border-default,
+        'subdued': $color-warning-border-subdued
+      )
     ),
-    '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
+    'success': (
+      'background': (
+        'page': $color-success-background-page,
+        'container': $color-success-background-container,
+        'action': $color-success-background-action
+      ),
+      'text': (
+        'default': $color-success-text-default,
+        'subdued': $color-success-text-subdued,
+        'on-action': $color-success-text-on-action
+      ),
+      'border': (
+        'strong': $color-success-border-strong,
+        'default': $color-success-border-default,
+        'subdued': $color-success-border-subdued
+      )
+    ),
+    'info': (
+      'background': (
+        'page': $color-info-background-page,
+        'container': $color-info-background-container,
+        'action': $color-info-background-action
+      ),
+      'text': (
+        'default': $color-info-text-default,
+        'subdued': $color-info-text-subdued,
+        'on-action': $color-info-text-on-action
+      ),
+      'border': (
+        'strong': $color-info-border-strong,
+        'default': $color-info-border-default,
+        'subdued': $color-info-border-subdued
+      )
+    ),
+    'error': (
+      'background': (
+        'page': $color-error-background-page,
+        'container': $color-error-background-container,
+        'action': $color-error-background-action
+      ),
+      'text': (
+        'default': $color-error-text-default,
+        'subdued': $color-error-text-subdued,
+        'on-action': $color-error-text-on-action
+      ),
+      'border': (
+        'strong': $color-error-border-strong,
+        'default': $color-error-border-default,
+        'subdued': $color-error-border-subdued
+      )
     )
   ),
   'unit': (

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

@@ -11,8 +11,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,12 +35,12 @@
 
     &: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);
+        --background-color: var(--jkl-color-error-background-container);
+        --text-color: var(--jkl-color-error-text-default);
         // 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%);
@@ -49,7 +49,7 @@
     &: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),

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);

package/styles/tailwind.css

@@ -6,72 +6,114 @@
 @theme {
     --*: initial;
 
-    --color-background-page: #F4F2EF;
-    --color-background-page: light-dark(#F4F2EF, #1B1917);
-    --color-background-page-variant: #F9F9F9;
-    --color-background-page-variant: light-dark(#F9F9F9, #1B1917);
-    --color-background-container: #F9F9F9;
-    --color-background-container: light-dark(#F9F9F9, #313030);
-    --color-background-container-low: #ECE9E5;
-    --color-background-container-low: light-dark(#ECE9E5, #000000);
-    --color-background-container-high: #FFFFFF;
-    --color-background-container-high: light-dark(#FFFFFF, #313030);
-    --color-background-container-inverted: #1B1917;
-    --color-background-container-inverted: light-dark(#1B1917, #F9F9F9);
-    --color-background-container-subdued: #C8C5C3;
-    --color-background-container-subdued: light-dark(#C8C5C3, #636060);
-    --color-background-input-base: transparent;
-    --color-background-input-base: light-dark(transparent, transparent);
-    --color-background-input-focus: #FFFFFF;
-    --color-background-input-focus: light-dark(#FFFFFF, #313030);
-    --color-background-action: #1B1917;
-    --color-background-action: light-dark(#1B1917, #F9F9F9);
-    --color-background-interactive: transparent;
-    --color-background-interactive: light-dark(transparent, transparent);
-    --color-background-interactive-hover: #ECE9E5;
-    --color-background-interactive-hover: light-dark(#ECE9E5, #444141);
-    --color-background-interactive-selected: #E0DBD4;
-    --color-background-interactive-selected: light-dark(#E0DBD4, #636060);
-    --color-background-alert-neutral: #E0DBD4;
-    --color-background-alert-neutral: light-dark(#E0DBD4, #E0DBD4);
-    --color-background-alert-info: #D3D3F6;
-    --color-background-alert-info: light-dark(#D3D3F6, #A9A9CA);
-    --color-background-alert-success: #ACD3B5;
-    --color-background-alert-success: light-dark(#ACD3B5, #94B79B);
-    --color-background-alert-warning: #EFDD9E;
-    --color-background-alert-warning: light-dark(#EFDD9E, #DECC8D);
-    --color-background-alert-error: #F6B3B3;
-    --color-background-alert-error: light-dark(#F6B3B3, #DE9E9E);
-    --color-text-default: #1B1917;
-    --color-text-default: light-dark(#1B1917, #F9F9F9);
-    --color-text-subdued: #636060;
-    --color-text-subdued: light-dark(#636060, #C8C5C3);
-    --color-text-inverted: #F9F9F9;
-    --color-text-inverted: light-dark(#F9F9F9, #1B1917);
-    --color-text-on-action: #F9F9F9;
-    --color-text-on-action: light-dark(#F9F9F9, #1B1917);
-    --color-text-interactive: #1B1917;
-    --color-text-interactive: light-dark(#1B1917, #F9F9F9);
-    --color-text-interactive-hover: #636060;
-    --color-text-interactive-hover: light-dark(#636060, #C8C5C3);
-    --color-text-on-alert: #1B1917;
-    --color-text-on-alert: light-dark(#1B1917, #1B1917);
-    --color-text-on-alert-subdued: #444141;
-    --color-text-on-alert-subdued: light-dark(#444141, #444141);
-    --color-border-action: #1B1917;
-    --color-border-action: light-dark(#1B1917, #F9F9F9);
-    --color-border-input: #636060;
-    --color-border-input: light-dark(#636060, #C8C5C3);
-    --color-border-input-focus: #1B1917;
-    --color-border-input-focus: light-dark(#1B1917, #F9F9F9);
-    --color-border-separator: #C8C5C3;
-    --color-border-separator: light-dark(#C8C5C3, #636060);
-    --color-border-separator-strong: #636060;
-    --color-border-separator-strong: light-dark(#636060, #C8C5C3);
-    --color-border-separator-hover: #1B1917;
-    --color-border-separator-hover: light-dark(#1B1917, #F9F9F9);
-    --color-border-subdued: #C8C5C3;
-    --color-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-neutral-background-page: #F4F2EF;
+    --color-neutral-background-page: light-dark(#F4F2EF, #1B1917);
+    --color-neutral-background-container: #F9F9F9;
+    --color-neutral-background-container: light-dark(#F9F9F9, #313030);
+    --color-neutral-background-action: #1B1917;
+    --color-neutral-background-action: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-text-default: #1B1917;
+    --color-neutral-text-default: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-text-subdued: #636060;
+    --color-neutral-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-neutral-text-on-action: #F9F9F9;
+    --color-neutral-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-neutral-border-strong: #1B1917;
+    --color-neutral-border-strong: light-dark(#1B1917, #F9F9F9);
+    --color-neutral-border-default: #636060;
+    --color-neutral-border-default: light-dark(#636060, #C8C5C3);
+    --color-neutral-border-subdued: #C8C5C3;
+    --color-neutral-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-accent-background-page: #F4F2EF;
+    --color-accent-background-page: light-dark(#F4F2EF, #1B1917);
+    --color-accent-background-container: #F9F9F9;
+    --color-accent-background-container: light-dark(#F9F9F9, #313030);
+    --color-accent-background-action: #1B1917;
+    --color-accent-background-action: light-dark(#1B1917, #F9F9F9);
+    --color-accent-text-default: #1B1917;
+    --color-accent-text-default: light-dark(#1B1917, #F9F9F9);
+    --color-accent-text-subdued: #636060;
+    --color-accent-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-accent-text-on-action: #F9F9F9;
+    --color-accent-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-accent-border-strong: #1B1917;
+    --color-accent-border-strong: light-dark(#1B1917, #F9F9F9);
+    --color-accent-border-default: #636060;
+    --color-accent-border-default: light-dark(#636060, #C8C5C3);
+    --color-accent-border-subdued: #C8C5C3;
+    --color-accent-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-warning-background-page: #FCF7E8;
+    --color-warning-background-page: light-dark(#FCF7E8, #392B10);
+    --color-warning-background-container: #F7EBC2;
+    --color-warning-background-container: light-dark(#F7EBC2, #5A4519);
+    --color-warning-background-action: #B98900;
+    --color-warning-background-action: light-dark(#B98900, #E4B63A);
+    --color-warning-text-default: #5B4200;
+    --color-warning-text-default: light-dark(#5B4200, #FFF5D9);
+    --color-warning-text-subdued: #8B6B22;
+    --color-warning-text-subdued: light-dark(#8B6B22, #EEDFAE);
+    --color-warning-text-on-action: #1B1917;
+    --color-warning-text-on-action: light-dark(#1B1917, #1B1917);
+    --color-warning-border-strong: #B98900;
+    --color-warning-border-strong: light-dark(#B98900, #E4B63A);
+    --color-warning-border-default: #B98900;
+    --color-warning-border-default: light-dark(#B98900, #E4B63A);
+    --color-warning-border-subdued: #DECC8D;
+    --color-warning-border-subdued: light-dark(#DECC8D, #8B6B22);
+    --color-success-background-page: #EEF7F0;
+    --color-success-background-page: light-dark(#EEF7F0, #173122);
+    --color-success-background-container: #D7EADB;
+    --color-success-background-container: light-dark(#D7EADB, #234530);
+    --color-success-background-action: #2E8C4A;
+    --color-success-background-action: light-dark(#2E8C4A, #67B479);
+    --color-success-text-default: #1E5D31;
+    --color-success-text-default: light-dark(#1E5D31, #F1FBF3);
+    --color-success-text-subdued: #507A5B;
+    --color-success-text-subdued: light-dark(#507A5B, #C9DDCE);
+    --color-success-text-on-action: #F9F9F9;
+    --color-success-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-success-border-strong: #2E8C4A;
+    --color-success-border-strong: light-dark(#2E8C4A, #67B479);
+    --color-success-border-default: #2E8C4A;
+    --color-success-border-default: light-dark(#2E8C4A, #67B479);
+    --color-success-border-subdued: #94B79B;
+    --color-success-border-subdued: light-dark(#94B79B, #507A5B);
+    --color-info-background-page: #EEF5FE;
+    --color-info-background-page: light-dark(#EEF5FE, #162A40);
+    --color-info-background-container: #DDEBFB;
+    --color-info-background-container: light-dark(#DDEBFB, #264261);
+    --color-info-background-action: #4AA3F0;
+    --color-info-background-action: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-text-default: #1B3B60;
+    --color-info-text-default: light-dark(#1B3B60, #F5FAFF);
+    --color-info-text-subdued: #4E6C8E;
+    --color-info-text-subdued: light-dark(#4E6C8E, #D7E9F8);
+    --color-info-text-on-action: #F9F9F9;
+    --color-info-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-info-border-strong: #4AA3F0;
+    --color-info-border-strong: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-border-default: #4AA3F0;
+    --color-info-border-default: light-dark(#4AA3F0, #7EBEF4);
+    --color-info-border-subdued: #A9A9CA;
+    --color-info-border-subdued: light-dark(#A9A9CA, #4E6C8E);
+    --color-error-background-page: #FDEEEE;
+    --color-error-background-page: light-dark(#FDEEEE, #3A1C1C);
+    --color-error-background-container: #F8D1D1;
+    --color-error-background-container: light-dark(#F8D1D1, #5B2828);
+    --color-error-background-action: #E84B3C;
+    --color-error-background-action: light-dark(#E84B3C, #F27B70);
+    --color-error-text-default: #7B1F18;
+    --color-error-text-default: light-dark(#7B1F18, #FFF1EF);
+    --color-error-text-subdued: #A14E46;
+    --color-error-text-subdued: light-dark(#A14E46, #F1C8C4);
+    --color-error-text-on-action: #F9F9F9;
+    --color-error-text-on-action: light-dark(#F9F9F9, #1B1917);
+    --color-error-border-strong: #E84B3C;
+    --color-error-border-strong: light-dark(#E84B3C, #F27B70);
+    --color-error-border-default: #E84B3C;
+    --color-error-border-default: light-dark(#E84B3C, #F27B70);
+    --color-error-border-subdued: #DE9E9E;
+    --color-error-border-subdued: light-dark(#DE9E9E, #A14E46);
 
     --spacing-0: 0rem;
     --spacing-2: 0.125rem;