@knime/kds-styles 8.2.0 → 8.2.2

package/README.md

@@ -16,6 +16,10 @@ The design tokens are stored in a standard W3C JSON format. For more information
 
 Certain tokens employ special modifiers from Tokens Studio. To manage these modifiers, the [Tokens Studio Style Dictionary Plugin][tokens-studio-plugin] is used. This plugin provides a preprocessor and custom transforms to accurately calculate the values of the tokens.
 
+Each modifier declares the color space it is applied in. `alpha` uses `hsl`, because alpha does not depend on a color space and any conversion is a lossy round trip that rewrites the hue of fully desaturated grays. `darken`, `lighten` and `mix` compute in `lch`, so moving them to `hsl` changes the generated colors.
+
+Authored color values must be written as `hsl()`. `src/validateTokens.js` checks both rules before the build runs, so a wrong value or space fails `build:tokens` naming the token at fault.
+
 ### Calculation of Values
 
 All token values are fully calculated, ensuring that no variable references remain in the result files. This guarantees that the output files contain only the final values.

package/dist/tokens/css/_properties.css

@@ -887,7 +887,7 @@ syntax: "<color>";
 @property --kds-core-color-transparent {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0);
+  initial-value: hsl(0 0% 11.4% / 0);
 }
 
 @property --kds-core-font-size-0-5x {
@@ -1229,25 +1229,25 @@ syntax: "<color>";
 @property --kds-color-background-neutral-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0);
+  initial-value: hsl(0 0% 11.4% / 0);
 }
 
 @property --kds-color-background-neutral-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1));
+  initial-value: light-dark(hsl(0 0% 48.2% / 0.1), hsl(0 0% 90.2% / 0.1));
 }
 
 @property --kds-color-background-neutral-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36));
+  initial-value: light-dark(hsl(0 0% 48.2% / 0.2), hsl(0 0% 48.2% / 0.36));
 }
 
 @property --kds-color-background-neutral-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
+  initial-value: light-dark(hsl(0 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
 }
 
 @property --kds-color-background-neutral-bold-hover {
@@ -1391,7 +1391,7 @@ syntax: "<color>";
 @property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(340 0% 48.2% / 0.48);
+  initial-value: hsl(0 0% 48.2% / 0.48);
 }
 
 @property --kds-color-background-disabled-primary {
@@ -1601,19 +1601,19 @@ syntax: "<color>";
 @property --kds-color-border-neutral {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
 }
 
 @property --kds-color-border-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
 }
 
 @property --kds-color-border-subtle {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
 }
 
 @property --kds-color-border-primary-bold {
@@ -1697,7 +1697,7 @@ syntax: "<color>";
 @property --kds-color-border-transparent {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0);
+  initial-value: hsl(0 0% 11.4% / 0);
 }
 
 @property --kds-color-border-disabled {
@@ -1715,19 +1715,19 @@ syntax: "<color>";
 @property --kds-color-border-neutral-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4));
 }
 
 @property --kds-color-border-neutral-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58));
 }
 
 @property --kds-color-border-neutral-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
 }
 
 @property --kds-color-focus-outline {
@@ -1745,7 +1745,7 @@ syntax: "<color>";
 @property --kds-color-blanket-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0.8);
+  initial-value: hsl(0 0% 11.4% / 0.8);
 }
 
 @property --kds-color-chart-data-series-1 {
@@ -1835,19 +1835,19 @@ syntax: "<color>";
 @property --kds-color-chart-scaffolding-axis {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
 }
 
 @property --kds-color-chart-scaffolding-grid {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
 }
 
 @property --kds-color-chart-scaffolding-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
 }
 
 @property --kds-color-chart-scaffolding-segment {
@@ -1859,7 +1859,7 @@ syntax: "<color>";
 @property --kds-color-chart-scaffolding-surface {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
+  initial-value: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 0%));
 }
 
 @property --kds-color-chart-scaffolding-tooltip-surface {
@@ -2315,25 +2315,25 @@ syntax: "<color>";
 @property --kds-color-elevation-top {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
+  initial-value: light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9));
 }
 
 @property --kds-color-elevation-middle {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94));
+  initial-value: light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94));
 }
 
 @property --kds-color-elevation-bottom {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
+  initial-value: light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
 }
 
 @property --kds-color-elevation-knob {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
+  initial-value: light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6));
 }
 
 @property --kds-color-desktop-header-background-default {
@@ -2369,7 +2369,7 @@ syntax: "<color>";
 @property --kds-color-desktop-header-border-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
 }
 
 @property --kds-color-table-header-background-default {
@@ -2429,7 +2429,7 @@ syntax: "<color>";
 @property --kds-color-loading-spinner-track-on-surface {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24));
+  initial-value: light-dark(hsl(0 0% 15.7% / 0.24), hsl(0 0% 94.1% / 0.24));
 }
 
 @property --kds-color-tooltip-background-default {
@@ -2657,13 +2657,13 @@ syntax: "<length>";
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 11.4% / 0);
+  initial-value: 1px solid hsl(0 0% 11.4% / 0);
 }
 
 @property --kds-border-action-default {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
+  initial-value: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
 }
 
 @property --kds-border-action-disabled {
@@ -2705,25 +2705,25 @@ syntax: "<string>";
 @property --kds-border-action-input {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
+  initial-value: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
 }
 
 @property --kds-border-base-default {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
+  initial-value: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
 }
 
 @property --kds-border-base-muted {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
+  initial-value: 1px solid light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
 }
 
 @property --kds-border-base-subtle {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: 1px solid light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
 }
 
 @property --kds-border-base-brand {
@@ -2783,19 +2783,19 @@ syntax: "<string>";
 @property --kds-border-resize-handle-initial {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
+  initial-value: 2px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4));
 }
 
 @property --kds-border-resize-handle-hover {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
+  initial-value: 2px solid light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58));
 }
 
 @property --kds-border-resize-handle-active {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
+  initial-value: 2px solid light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
 }
 
 @property --kds-border-color-picker-handle-initial {
@@ -3665,31 +3665,31 @@ syntax: "<string>";
 @property --kds-elevation-level-0 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 0 0 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
+  initial-value: 0 0 0 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9));
 }
 
 @property --kds-elevation-level-1 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 1px 1px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
+  initial-value: 0 1px 1px 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
 }
 
 @property --kds-elevation-level-3 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 2px 4px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
+  initial-value: 0 2px 4px 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
 }
 
 @property --kds-fake-border-xs-muted {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 0 0 0.5px light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
+  initial-value: 0 0 0 0.5px light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
 }
 
 @property --kds-box-shadow-knob {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 1px 2px 0 light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
+  initial-value: 0 1px 2px 0 light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6));
 }
 
 @property --kds-width-side-drawer-default {

package/dist/tokens/css/_variables.css

@@ -150,7 +150,7 @@
   --kds-core-color-brown-725: hsl(24, 28%, 30%);
   --kds-core-color-brown-800: hsl(23, 27%, 24%);
   --kds-core-color-brown-875: hsl(22, 25%, 18%);
-  --kds-core-color-transparent: hsl(345 0% 11.4% / 0);
+  --kds-core-color-transparent: hsl(0 0% 11.4% / 0);
   --kds-core-font-size-0-5x: 8px;
   --kds-core-font-size-0-56x: 9px;
   --kds-core-font-size-0-62x: 10px;
@@ -207,10 +207,10 @@
   --kds-color-surface-muted: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 18.8%));
   --kds-color-surface-subtle: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 22%));
   --kds-color-page-default: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 12.9%));
-  --kds-color-background-neutral-initial: hsl(345 0% 11.4% / 0);
-  --kds-color-background-neutral-hover: light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1));
-  --kds-color-background-neutral-active: light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36));
-  --kds-color-background-neutral-bold-initial: light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
+  --kds-color-background-neutral-initial: hsl(0 0% 11.4% / 0);
+  --kds-color-background-neutral-hover: light-dark(hsl(0 0% 48.2% / 0.1), hsl(0 0% 90.2% / 0.1));
+  --kds-color-background-neutral-active: light-dark(hsl(0 0% 48.2% / 0.2), hsl(0 0% 48.2% / 0.36));
+  --kds-color-background-neutral-bold-initial: light-dark(hsl(0 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
   --kds-color-background-neutral-bold-hover: light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%));
   --kds-color-background-neutral-bold-active: light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%));
   --kds-color-background-primary-initial: light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%));
@@ -234,7 +234,7 @@
   --kds-color-background-input-initial: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%));
   --kds-color-background-input-hover: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
   --kds-color-background-input-active: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
-  --kds-color-background-disabled-default: hsl(340 0% 48.2% / 0.48);
+  --kds-color-background-disabled-default: hsl(0 0% 48.2% / 0.48);
   --kds-color-background-disabled-primary: hsl(173.91 18.134% 40.592%);
   --kds-color-background-disabled-danger: hsl(1.3489 43.031% 37.79%);
   --kds-color-background-success-bold-initial: light-dark(hsl(111.3, 47.5%, 31.4%), hsl(123.7, 46.7%, 20.6%));
@@ -269,9 +269,9 @@
   --kds-color-text-and-icon-disabled-inverted: hsl(0, 0%, 72.5%);
   --kds-color-text-and-icon-info: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(213.6, 91.6%, 76.7%));
   --kds-color-text-and-icon-editor: light-dark(hsl(0, 0%, 11.4%), hsl(0, 0%, 94.1%));
-  --kds-color-border-neutral: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
-  --kds-color-border-muted: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
-  --kds-color-border-subtle: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-color-border-neutral: light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
+  --kds-color-border-muted: light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
+  --kds-color-border-subtle: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
   --kds-color-border-primary-bold: hsl(176.7, 82%, 17.5%);
   --kds-color-border-primary: light-dark(hsl(169.8, 30.6%, 66.1%), hsl(168.8, 34.4%, 75.5%));
   --kds-color-border-selected-bold: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(168.8, 34.4%, 75.5%));
@@ -285,15 +285,15 @@
   --kds-color-border-success: light-dark(hsl(112, 56.5%, 71.2%), hsl(123.7, 46.7%, 20.6%));
   --kds-color-border-info-bold: light-dark(hsl(208.3, 60.5%, 33.7%), hsl(214.5, 100%, 84.3%));
   --kds-color-border-info: light-dark(hsl(214.5, 100%, 84.3%), hsl(210, 50%, 27.5%));
-  --kds-color-border-transparent: hsl(345 0% 11.4% / 0);
+  --kds-color-border-transparent: hsl(0 0% 11.4% / 0);
   --kds-color-border-disabled: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%));
   --kds-color-border-brand: hsl(50.8, 100%, 50%);
-  --kds-color-border-neutral-bold-initial: light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
-  --kds-color-border-neutral-bold-hover: light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
-  --kds-color-border-neutral-bold-active: light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
+  --kds-color-border-neutral-bold-initial: light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4));
+  --kds-color-border-neutral-bold-hover: light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58));
+  --kds-color-border-neutral-bold-active: light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
   --kds-color-focus-outline: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
   --kds-color-focus-background: light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5));
-  --kds-color-blanket-default: hsl(345 0% 11.4% / 0.8);
+  --kds-color-blanket-default: hsl(0 0% 11.4% / 0.8);
   --kds-color-chart-data-series-1: light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%));
   --kds-color-chart-data-series-2: light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%));
   --kds-color-chart-data-series-3: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%));
@@ -308,11 +308,11 @@
   --kds-color-chart-status-negative: light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%));
   --kds-color-chart-status-warning: light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%));
   --kds-color-chart-status-error: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
-  --kds-color-chart-scaffolding-axis: light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
-  --kds-color-chart-scaffolding-grid: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
-  --kds-color-chart-scaffolding-border: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-color-chart-scaffolding-axis: light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
+  --kds-color-chart-scaffolding-grid: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
+  --kds-color-chart-scaffolding-border: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
   --kds-color-chart-scaffolding-segment: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
-  --kds-color-chart-scaffolding-surface: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
+  --kds-color-chart-scaffolding-surface: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 0%));
   --kds-color-chart-scaffolding-tooltip-surface: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
   --kds-color-chart-control-default: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
   --kds-color-chart-control-hover: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
@@ -388,16 +388,16 @@
   --kds-color-connector-selected: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
   --kds-color-connector-highlighted: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
   --kds-color-connector-insertable: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
-  --kds-color-elevation-top: light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
-  --kds-color-elevation-middle: light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94));
-  --kds-color-elevation-bottom: light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
-  --kds-color-elevation-knob: light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
+  --kds-color-elevation-top: light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9));
+  --kds-color-elevation-middle: light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94));
+  --kds-color-elevation-bottom: light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
+  --kds-color-elevation-knob: light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6));
   --kds-color-desktop-header-background-default: hsl(0, 0%, 10.2%);
   --kds-color-desktop-header-background-muted: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
   --kds-color-desktop-header-background-accent: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
   --kds-color-desktop-header-text-and-icon-neutral: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
   --kds-color-desktop-header-text-and-icon-muted: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
-  --kds-color-desktop-header-border-default: light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-color-desktop-header-border-default: light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
   --kds-color-table-header-background-default: hsl(0, 0%, 99%);
   --kds-color-toggle-switch-knob-initial: hsl(0, 0%, 99%);
   --kds-color-toggle-switch-knob-disabled: hsl(0, 0%, 90.2%);
@@ -407,7 +407,7 @@
   --kds-color-loading-spinner-progress-on-primary: hsl(165.6 67.6% 92.7%);
   --kds-color-loading-spinner-progress-on-surface: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
   --kds-color-loading-spinner-track-on-primary: hsl(165.6 67.6% 92.7% / 0.24);
-  --kds-color-loading-spinner-track-on-surface: light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24));
+  --kds-color-loading-spinner-track-on-surface: light-dark(hsl(0 0% 15.7% / 0.24), hsl(0 0% 94.1% / 0.24));
   --kds-color-tooltip-background-default: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
   --kds-color-tooltip-text-and-icon-neutral: hsl(0, 0%, 98%);
   --kds-color-text-highlight-background-default: hsl(212.1 78.2% 67.6% / 0.6);
@@ -445,18 +445,18 @@
   --kds-border-width-icon-stroke-s: 1px;
   --kds-border-width-icon-stroke-m: 1.2496px;
   --kds-border-width-icon-stroke-l: 1.5px;
-  --kds-border-action-transparent: 1px solid hsl(345 0% 11.4% / 0);
-  --kds-border-action-default: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
+  --kds-border-action-transparent: 1px solid hsl(0 0% 11.4% / 0);
+  --kds-border-action-default: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
   --kds-border-action-disabled: 1px solid light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 48.2%));
   --kds-border-action-focused: 2px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
   --kds-border-action-selected: 1px solid light-dark(hsl(171.8, 27%, 47.8%), hsl(168, 46.7%, 85.3%));
   --kds-border-action-selected-accent: 1px solid light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
   --kds-border-action-error: 1px solid light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
   --kds-border-action-primary: 1px solid hsl(176.7, 82%, 17.5%);
-  --kds-border-action-input: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
-  --kds-border-base-default: 1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5));
-  --kds-border-base-muted: 1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
-  --kds-border-base-subtle: 1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1));
+  --kds-border-action-input: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
+  --kds-border-base-default: 1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5));
+  --kds-border-base-muted: 1px solid light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
+  --kds-border-base-subtle: 1px solid light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1));
   --kds-border-base-brand: 1px solid hsl(50.8, 100%, 50%);
   --kds-border-base-danger: 1px solid light-dark(hsl(3.4, 100%, 86.1%), hsl(348, 94.3%, 20.8%));
   --kds-border-base-warning: 1px solid light-dark(hsl(30.8, 79.3%, 73.5%), hsl(13.1, 66.1%, 23.1%));
@@ -466,9 +466,9 @@
   --kds-border-node-status-error: 1px solid light-dark(hsl(348, 94.3%, 20.8%), hsl(2.6, 100%, 72.4%));
   --kds-border-node-status-warning: 1px solid light-dark(hsl(19, 63.1%, 38.2%), hsl(49.1, 99.1%, 43.7%));
   --kds-border-node-status-success: 1px solid light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
-  --kds-border-resize-handle-initial: 2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4));
-  --kds-border-resize-handle-hover: 2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58));
-  --kds-border-resize-handle-active: 2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68));
+  --kds-border-resize-handle-initial: 2px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4));
+  --kds-border-resize-handle-hover: 2px solid light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58));
+  --kds-border-resize-handle-active: 2px solid light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
   --kds-border-color-picker-handle-initial: 2px solid hsl(0, 0%, 99%);
   --kds-sizing-viewport-breakpoints-576: 576px;
   --kds-sizing-viewport-breakpoints-768: 768px;
@@ -613,10 +613,10 @@
   --kds-font-chart-legend: 500 11px/normal Roboto, sans-serif;
   --kds-font-chart-tooltip: 400 12px/1.5 Roboto, sans-serif;
   --kds-font-chart-label: 400 10px/normal Roboto, sans-serif;
-  --kds-elevation-level-0: 0 0 0 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
-  --kds-elevation-level-1: 0 1px 1px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
-  --kds-elevation-level-3: 0 2px 4px 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));
-  --kds-fake-border-xs-muted: 0 0 0 0.5px light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2));
-  --kds-box-shadow-knob: 0 1px 2px 0 light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6));
+  --kds-elevation-level-0: 0 0 0 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9));
+  --kds-elevation-level-1: 0 1px 1px 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9)), 0 0 1px 0 light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94)), 0 0 8px 0 light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
+  --kds-elevation-level-3: 0 2px 4px 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9)), 0 4px 8px 0 light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94)), 0 0 20px 0 light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98));
+  --kds-fake-border-xs-muted: 0 0 0 0.5px light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2));
+  --kds-box-shadow-knob: 0 1px 2px 0 light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6));
   --kds-width-side-drawer-default: 420px;
 }

package/dist/tokens/ts/border.js

@@ -6,25 +6,25 @@ export const border = {
     action: {
         transparent: {
             color: {
-                light: { h: 345, s: 0, l: 11.4, a: 0 },
-                dark: { h: 345, s: 0, l: 11.4, a: 0 },
+                light: { h: 0, s: 0, l: 11.4, a: 0 },
+                dark: { h: 0, s: 0, l: 11.4, a: 0 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid hsl(345 0% 11.4% / 0)",
+                value: "1px solid hsl(0 0% 11.4% / 0)",
                 variable: "var(--kds-border-action-transparent)",
             },
         },
         default: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.4 },
-                dark: { h: 330, s: 0, l: 99, a: 0.5 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.4 },
+                dark: { h: 0, s: 0, l: 99, a: 0.5 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
                 variable: "var(--kds-border-action-default)",
             },
         },
@@ -102,13 +102,13 @@ export const border = {
         },
         input: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.4 },
-                dark: { h: 330, s: 0, l: 99, a: 0.5 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.4 },
+                dark: { h: 0, s: 0, l: 99, a: 0.5 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
                 variable: "var(--kds-border-action-input)",
             },
         },
@@ -116,37 +116,37 @@ export const border = {
     base: {
         default: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.4 },
-                dark: { h: 330, s: 0, l: 99, a: 0.5 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.4 },
+                dark: { h: 0, s: 0, l: 99, a: 0.5 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                value: "1px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
                 variable: "var(--kds-border-base-default)",
             },
         },
         muted: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.2 },
-                dark: { h: 330, s: 0, l: 99, a: 0.2 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.2 },
+                dark: { h: 0, s: 0, l: 99, a: 0.2 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+                value: "1px solid light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2))",
                 variable: "var(--kds-border-base-muted)",
             },
         },
         subtle: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.1 },
-                dark: { h: 330, s: 0, l: 99, a: 0.1 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.1 },
+                dark: { h: 0, s: 0, l: 99, a: 0.1 },
             },
             width: { value: 1, unit: "px" },
             style: "solid",
             css: {
-                value: "1px solid light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                value: "1px solid light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
                 variable: "var(--kds-border-base-subtle)",
             },
         },
@@ -264,37 +264,37 @@ export const border = {
     ResizeHandle: {
         initial: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.4 },
-                dark: { h: 330, s: 0, l: 99, a: 0.4 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.4 },
+                dark: { h: 0, s: 0, l: 99, a: 0.4 },
             },
             width: { value: 2, unit: "px" },
             style: "solid",
             css: {
-                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+                value: "2px solid light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4))",
                 variable: "var(--kds-border-resize-handle-initial)",
             },
         },
         hover: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.64 },
-                dark: { h: 330, s: 0, l: 99, a: 0.58 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.64 },
+                dark: { h: 0, s: 0, l: 99, a: 0.58 },
             },
             width: { value: 2, unit: "px" },
             style: "solid",
             css: {
-                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+                value: "2px solid light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58))",
                 variable: "var(--kds-border-resize-handle-hover)",
             },
         },
         active: {
             color: {
-                light: { h: 330, s: 0, l: 10.2, a: 0.74 },
-                dark: { h: 330, s: 0, l: 99, a: 0.68 },
+                light: { h: 0, s: 0, l: 10.2, a: 0.74 },
+                dark: { h: 0, s: 0, l: 99, a: 0.68 },
             },
             width: { value: 2, unit: "px" },
             style: "solid",
             css: {
-                value: "2px solid light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+                value: "2px solid light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68))",
                 variable: "var(--kds-border-resize-handle-active)",
             },
         },

package/dist/tokens/ts/box-shadow.js

@@ -11,13 +11,13 @@ export const boxShadow = {
                 blur: { value: 2, unit: "px" },
                 spread: { value: 0, unit: "px" },
                 color: {
-                    light: { h: 180, s: 0, l: 32.2, a: 0.5 },
-                    dark: { h: 330, s: 0, l: 10.2, a: 0.6 },
+                    light: { h: 0, s: 0, l: 32.2, a: 0.5 },
+                    dark: { h: 0, s: 0, l: 10.2, a: 0.6 },
                 },
             },
         ],
         css: {
-            value: "0 1px 2px 0 light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
+            value: "0 1px 2px 0 light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6))",
             variable: "var(--kds-box-shadow-knob)",
         },
     },

package/dist/tokens/ts/color.d.ts

@@ -487,7 +487,7 @@ export type KdsColorTokens = {
              */
             readonly segment: KdsColor;
             /**
-             * Chart background and contrast reference for the series ramp. Pure alias.
+             * Chart background and contrast reference for the series ramp.
              */
             readonly surface: KdsColor;
             /**