@fremtind/jokul 5.0.0-next.7 → 5.0.0-next.8

package/styles/jkl/_tokens.scss

@@ -3,60 +3,61 @@
  * Do not edit directly, this file was auto-generated.
  */
 
-$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-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-action: var(--jkl-color-warning-background-action) !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-on-action: var(--jkl-color-warning-text-on-action) !default;
-$color-warning-border-strong: var(--jkl-color-warning-border-strong) !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-action: var(--jkl-color-success-background-action) !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-on-action: var(--jkl-color-success-text-on-action) !default;
-$color-success-border-strong: var(--jkl-color-success-border-strong) !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-action: var(--jkl-color-info-background-action) !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-on-action: var(--jkl-color-info-text-on-action) !default;
-$color-info-border-strong: var(--jkl-color-info-border-strong) !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-action: var(--jkl-color-error-background-action) !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-on-action: var(--jkl-color-error-text-on-action) !default;
-$color-error-border-strong: var(--jkl-color-error-border-strong) !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;
@@ -155,106 +156,99 @@ $text-style-text-micro: var(--jkl-text-style-text-micro) !default;
 
 $tokens: (
   'color': (
-    'neutral': (
-      'background': (
-        'page': $color-neutral-background-page,
-        'container': $color-neutral-background-container,
-        'action': $color-neutral-background-action
-      ),
-      '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
+        'page': $color-background-page,
+        'container': $color-background-container,
+        'container-accent': $color-background-container-accent,
+        'contrast': $color-background-contrast
       ),
       'text': (
-        'default': $color-accent-text-default,
-        'subdued': $color-accent-text-subdued,
-        'on-action': $color-accent-text-on-action
+        'default': $color-text-default,
+        'subdued': $color-text-subdued,
+        'accent': $color-text-accent,
+        'on-contrast': $color-text-on-contrast
       ),
       'border': (
-        'strong': $color-accent-border-strong,
-        'default': $color-accent-border-default,
-        'subdued': $color-accent-border-subdued
+        'default': $color-border-default,
+        'subdued': $color-border-subdued,
+        'strong': $color-border-strong
       )
     ),
     'warning': (
       'background': (
         'page': $color-warning-background-page,
         'container': $color-warning-background-container,
-        'action': $color-warning-background-action
+        'container-accent': $color-warning-background-container-accent,
+        'contrast': $color-warning-background-contrast
       ),
       'text': (
         'default': $color-warning-text-default,
         'subdued': $color-warning-text-subdued,
-        'on-action': $color-warning-text-on-action
+        'accent': $color-warning-text-accent,
+        'on-contrast': $color-warning-text-on-contrast
       ),
       'border': (
-        'strong': $color-warning-border-strong,
         'default': $color-warning-border-default,
-        'subdued': $color-warning-border-subdued
+        'subdued': $color-warning-border-subdued,
+        'strong': $color-warning-border-strong
       )
     ),
     'success': (
       'background': (
         'page': $color-success-background-page,
         'container': $color-success-background-container,
-        'action': $color-success-background-action
+        'container-accent': $color-success-background-container-accent,
+        'contrast': $color-success-background-contrast
       ),
       'text': (
         'default': $color-success-text-default,
         'subdued': $color-success-text-subdued,
-        'on-action': $color-success-text-on-action
+        'accent': $color-success-text-accent,
+        'on-contrast': $color-success-text-on-contrast
       ),
       'border': (
-        'strong': $color-success-border-strong,
         'default': $color-success-border-default,
-        'subdued': $color-success-border-subdued
+        'subdued': $color-success-border-subdued,
+        'strong': $color-success-border-strong
       )
     ),
     'info': (
       'background': (
         'page': $color-info-background-page,
         'container': $color-info-background-container,
-        'action': $color-info-background-action
+        'container-accent': $color-info-background-container-accent,
+        'contrast': $color-info-background-contrast
       ),
       'text': (
         'default': $color-info-text-default,
         'subdued': $color-info-text-subdued,
-        'on-action': $color-info-text-on-action
+        'accent': $color-info-text-accent,
+        'on-contrast': $color-info-text-on-contrast
       ),
       'border': (
-        'strong': $color-info-border-strong,
         'default': $color-info-border-default,
-        'subdued': $color-info-border-subdued
+        'subdued': $color-info-border-subdued,
+        'strong': $color-info-border-strong
       )
     ),
     'error': (
       'background': (
         'page': $color-error-background-page,
         'container': $color-error-background-container,
-        'action': $color-error-background-action
+        'container-accent': $color-error-background-container-accent,
+        'contrast': $color-error-background-contrast
       ),
       'text': (
         'default': $color-error-text-default,
         'subdued': $color-error-text-subdued,
-        'on-action': $color-error-text-on-action
+        'accent': $color-error-text-accent,
+        'on-contrast': $color-error-text-on-contrast
       ),
       'border': (
-        'strong': $color-error-border-strong,
         'default': $color-error-border-default,
-        'subdued': $color-error-border-subdued
+        'subdued': $color-error-border-subdued,
+        'strong': $color-error-border-strong
       )
     )
   ),

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);
@@ -41,9 +40,8 @@
     &[data-invalid="true"]:not(:focus-within):not(:has([data-focused="true"])) {
         --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%);
+        --border-color: var(--jkl-color-error-border-default);
+        --placeholder-color: var(--jkl-color-error-text-subdued);
     }
 
     &:hover,
@@ -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/tailwind.css

@@ -6,114 +6,116 @@
 @theme {
     --*: initial;
 
-    --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);
+    --color-background-page: #F3F0ED;
+    --color-background-page: light-dark(#F3F0ED, #0E0D0C);
+    --color-background-container: #FFFFFF;
+    --color-background-container: light-dark(#FFFFFF, #3E3A36);
+    --color-background-container-accent: #E6E2DB;
+    --color-background-container-accent: light-dark(#E6E2DB, #2A2724);
+    --color-background-contrast: #1B1917;
+    --color-background-contrast: light-dark(#1B1917, #F3F0ED);
+    --color-text-default: #1B1917;
+    --color-text-default: light-dark(#1B1917, #F9F9F9);
+    --color-text-subdued: #636060;
+    --color-text-subdued: light-dark(#636060, #C8C5C3);
+    --color-text-accent: #000000;
+    --color-text-accent: light-dark(#000000, #FFFFFF);
+    --color-text-on-contrast: #F9F9F9;
+    --color-text-on-contrast: light-dark(#F9F9F9, #1B1917);
+    --color-border-default: #636060;
+    --color-border-default: light-dark(#636060, #C8C5C3);
+    --color-border-subdued: #C8C5C3;
+    --color-border-subdued: light-dark(#C8C5C3, #636060);
+    --color-border-strong: #1B1917;
+    --color-border-strong: light-dark(#1B1917, #F9F9F9);
+    --color-warning-background-page: #FFFFFF;
+    --color-warning-background-page: light-dark(#FFFFFF, #000000);
+    --color-warning-background-container: #F1DFD1;
+    --color-warning-background-container: light-dark(#F1DFD1, #61441F);
+    --color-warning-background-container-accent: #EAC7A8;
+    --color-warning-background-container-accent: light-dark(#EAC7A8, #75542B);
+    --color-warning-background-contrast: #8B6539;
+    --color-warning-background-contrast: light-dark(#8B6539, #8B6539);
+    --color-warning-text-default: #000000;
+    --color-warning-text-default: light-dark(#000000, #FFFFFF);
+    --color-warning-text-subdued: #3E3A36;
+    --color-warning-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --color-warning-text-accent: #000000;
+    --color-warning-text-accent: light-dark(#000000, #FFFFFF);
+    --color-warning-text-on-contrast: #FFFFFF;
+    --color-warning-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --color-warning-border-default: #A17747;
+    --color-warning-border-default: light-dark(#A17747, #B68957);
+    --color-warning-border-subdued: #E3B07A;
+    --color-warning-border-subdued: light-dark(#E3B07A, #75542B);
+    --color-warning-border-strong: #61441F;
+    --color-warning-border-strong: light-dark(#61441F, #A17747);
+    --color-success-background-page: #FFFFFF;
+    --color-success-background-page: light-dark(#FFFFFF, #000000);
+    --color-success-background-container: #C6E6CD;
+    --color-success-background-container: light-dark(#C6E6CD, #15341E);
+    --color-success-background-container-accent: #ACD3B5;
+    --color-success-background-container-accent: light-dark(#ACD3B5, #24492E);
+    --color-success-background-contrast: #345F40;
+    --color-success-background-contrast: light-dark(#345F40, #467653);
+    --color-success-text-default: #000000;
+    --color-success-text-default: light-dark(#000000, #FFFFFF);
+    --color-success-text-subdued: #3E3A36;
+    --color-success-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --color-success-text-accent: #000000;
+    --color-success-text-accent: light-dark(#000000, #FFFFFF);
+    --color-success-text-on-contrast: #FFFFFF;
+    --color-success-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --color-success-border-default: #467653;
+    --color-success-border-default: light-dark(#467653, #598D67);
+    --color-success-border-subdued: #8CBC98;
+    --color-success-border-subdued: light-dark(#8CBC98, #24492E);
+    --color-success-border-strong: #15341E;
+    --color-success-border-strong: light-dark(#15341E, #467653);
+    --color-info-background-page: #FFFFFF;
+    --color-info-background-page: light-dark(#FFFFFF, #000000);
+    --color-info-background-container: #E3E3F4;
+    --color-info-background-container: light-dark(#E3E3F4, #1E1E81);
+    --color-info-background-container-accent: #D3D3F6;
+    --color-info-background-container-accent: light-dark(#D3D3F6, #2D2DB3);
+    --color-info-background-contrast: #4646D1;
+    --color-info-background-contrast: light-dark(#4646D1, #6262DC);
+    --color-info-text-default: #000000;
+    --color-info-text-default: light-dark(#000000, #FFFFFF);
+    --color-info-text-subdued: #3E3A36;
+    --color-info-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --color-info-text-accent: #000000;
+    --color-info-text-accent: light-dark(#000000, #FFFFFF);
+    --color-info-text-on-contrast: #FFFFFF;
+    --color-info-text-on-contrast: light-dark(#FFFFFF, #000000);
+    --color-info-border-default: #6262DC;
+    --color-info-border-default: light-dark(#6262DC, #7E7EE4);
+    --color-info-border-subdued: #B7B7F0;
+    --color-info-border-subdued: light-dark(#B7B7F0, #2D2DB3);
+    --color-info-border-strong: #1E1E81;
+    --color-info-border-strong: light-dark(#1E1E81, #6262DC);
+    --color-error-background-page: #FFFFFF;
+    --color-error-background-page: light-dark(#FFFFFF, #000000);
+    --color-error-background-container: #F3DEDE;
+    --color-error-background-container: light-dark(#F3DEDE, #610F0F);
+    --color-error-background-container-accent: #F2C9C9;
+    --color-error-background-container-accent: light-dark(#F2C9C9, #891919);
+    --color-error-background-contrast: #B32424;
+    --color-error-background-contrast: light-dark(#B32424, #DF3030);
+    --color-error-text-default: #000000;
+    --color-error-text-default: light-dark(#000000, #FFFFFF);
+    --color-error-text-subdued: #3E3A36;
+    --color-error-text-subdued: light-dark(#3E3A36, #DFD8CE);
+    --color-error-text-accent: #610F0F;
+    --color-error-text-accent: light-dark(#610F0F, #F6B3B3);
+    --color-error-text-on-contrast: #FFFFFF;
+    --color-error-text-on-contrast: light-dark(#FFFFFF, #FFFFFF);
+    --color-error-border-default: #DF3030;
+    --color-error-border-default: light-dark(#DF3030, #F15D5D);
+    --color-error-border-subdued: #F6B3B3;
+    --color-error-border-subdued: light-dark(#F6B3B3, #891919);
+    --color-error-border-strong: #610F0F;
+    --color-error-border-strong: light-dark(#610F0F, #DF3030);
 
     --spacing-0: 0rem;
     --spacing-2: 0.125rem;