@knime/kds-styles 8.1.0 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-styles
 
+## 8.2.1
+
+### Patch Changes
+
+- c8cdfef: Apply the alpha token modifier in `hsl` instead of `lch`, so fully desaturated color tokens keep their authored hue. 37 custom properties change their hue component, for example `--kds-color-background-neutral-hover` from `hsl(340 0% 48.2% / 0.1)` to `hsl(0 0% 48.2% / 0.1)`. Rendering is unchanged, because the hue of a 0%-saturation color carries no information. The same hue reaches the `h` field of the TypeScript color tokens.
+
+## 8.2.0
+
 ## 8.1.0
 
 ## 8.0.0

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 {
@@ -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,9 +308,9 @@
   --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-tooltip-surface: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
@@ -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.js

@@ -42,36 +42,36 @@ export const color = {
     background: {
         neutral: {
             initial: {
-                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 },
                 css: {
-                    value: "hsl(345 0% 11.4% / 0)",
+                    value: "hsl(0 0% 11.4% / 0)",
                     variable: "var(--kds-color-background-neutral-initial)",
                 },
             },
             hover: {
-                light: { h: 340, s: 0, l: 48.2, a: 0.1 },
-                dark: { h: 180, s: 0, l: 90.2, a: 0.1 },
+                light: { h: 0, s: 0, l: 48.2, a: 0.1 },
+                dark: { h: 0, s: 0, l: 90.2, a: 0.1 },
                 css: {
-                    value: "light-dark(hsl(340 0% 48.2% / 0.1), hsl(180 0% 90.2% / 0.1))",
+                    value: "light-dark(hsl(0 0% 48.2% / 0.1), hsl(0 0% 90.2% / 0.1))",
                     variable: "var(--kds-color-background-neutral-hover)",
                 },
             },
             active: {
-                light: { h: 340, s: 0, l: 48.2, a: 0.2 },
-                dark: { h: 340, s: 0, l: 48.2, a: 0.36 },
+                light: { h: 0, s: 0, l: 48.2, a: 0.2 },
+                dark: { h: 0, s: 0, l: 48.2, a: 0.36 },
                 css: {
-                    value: "light-dark(hsl(340 0% 48.2% / 0.2), hsl(340 0% 48.2% / 0.36))",
+                    value: "light-dark(hsl(0 0% 48.2% / 0.2), hsl(0 0% 48.2% / 0.36))",
                     variable: "var(--kds-color-background-neutral-active)",
                 },
             },
         },
         "neutral-bold": {
             initial: {
-                light: { h: 210, s: 0, l: 72.5, a: 0.4 },
+                light: { h: 0, s: 0, l: 72.5, a: 0.4 },
                 dark: { h: 0, s: 0, l: 32.2, a: 1 },
                 css: {
-                    value: "light-dark(hsl(210 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
+                    value: "light-dark(hsl(0 0% 72.5% / 0.4), hsl(0, 0%, 32.2%))",
                     variable: "var(--kds-color-background-neutral-bold-initial)",
                 },
             },
@@ -276,10 +276,10 @@ export const color = {
         },
         disabled: {
             default: {
-                light: { h: 340, s: 0, l: 48.2, a: 0.48 },
-                dark: { h: 340, s: 0, l: 48.2, a: 0.48 },
+                light: { h: 0, s: 0, l: 48.2, a: 0.48 },
+                dark: { h: 0, s: 0, l: 48.2, a: 0.48 },
                 css: {
-                    value: "hsl(340 0% 48.2% / 0.48)",
+                    value: "hsl(0 0% 48.2% / 0.48)",
                     variable: "var(--kds-color-background-disabled-default)",
                 },
             },
@@ -567,26 +567,26 @@ export const color = {
     },
     border: {
         neutral: {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.5))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.5))",
                 variable: "var(--kds-color-border-neutral)",
             },
         },
         muted: {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2))",
                 variable: "var(--kds-color-border-muted)",
             },
         },
         subtle: {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
                 variable: "var(--kds-color-border-subtle)",
             },
         },
@@ -695,10 +695,10 @@ export const color = {
             },
         },
         transparent: {
-            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 },
             css: {
-                value: "hsl(345 0% 11.4% / 0)",
+                value: "hsl(0 0% 11.4% / 0)",
                 variable: "var(--kds-color-border-transparent)",
             },
         },
@@ -719,26 +719,26 @@ export const color = {
             },
         },
         "neutral-bold-initial": {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.4), hsl(330 0% 99% / 0.4))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4))",
                 variable: "var(--kds-color-border-neutral-bold-initial)",
             },
         },
         "neutral-bold-hover": {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.64), hsl(330 0% 99% / 0.58))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58))",
                 variable: "var(--kds-color-border-neutral-bold-hover)",
             },
         },
         "neutral-bold-active": {
-            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 },
             css: {
-                value: "light-dark(hsl(330 0% 10.2% / 0.74), hsl(330 0% 99% / 0.68))",
+                value: "light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68))",
                 variable: "var(--kds-color-border-neutral-bold-active)",
             },
         },
@@ -763,10 +763,10 @@ export const color = {
     },
     blanket: {
         default: {
-            light: { h: 345, s: 0, l: 11.4, a: 0.8 },
-            dark: { h: 345, s: 0, l: 11.4, a: 0.8 },
+            light: { h: 0, s: 0, l: 11.4, a: 0.8 },
+            dark: { h: 0, s: 0, l: 11.4, a: 0.8 },
             css: {
-                value: "hsl(345 0% 11.4% / 0.8)",
+                value: "hsl(0 0% 11.4% / 0.8)",
                 variable: "var(--kds-color-blanket-default)",
             },
         },
@@ -890,26 +890,26 @@ export const color = {
         },
         scaffolding: {
             axis: {
-                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 },
                 css: {
-                    value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+                    value: "light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2))",
                     variable: "var(--kds-color-chart-scaffolding-axis)",
                 },
             },
             grid: {
-                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 },
                 css: {
-                    value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                    value: "light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
                     variable: "var(--kds-color-chart-scaffolding-grid)",
                 },
             },
             border: {
-                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 },
                 css: {
-                    value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                    value: "light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
                     variable: "var(--kds-color-chart-scaffolding-border)",
                 },
             },
@@ -1547,34 +1547,34 @@ export const color = {
     },
     elevation: {
         top: {
-            light: { h: 210, s: 0, l: 72.5, a: 0.32 },
-            dark: { h: 330, s: 0, l: 10.2, a: 0.9 },
+            light: { h: 0, s: 0, l: 72.5, a: 0.32 },
+            dark: { h: 0, s: 0, l: 10.2, a: 0.9 },
             css: {
-                value: "light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
+                value: "light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9))",
                 variable: "var(--kds-color-elevation-top)",
             },
         },
         middle: {
-            light: { h: 180, s: 0, l: 32.2, a: 0.14 },
-            dark: { h: 330, s: 0, l: 10.2, a: 0.94 },
+            light: { h: 0, s: 0, l: 32.2, a: 0.14 },
+            dark: { h: 0, s: 0, l: 10.2, a: 0.94 },
             css: {
-                value: "light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94))",
+                value: "light-dark(hsl(0 0% 32.2% / 0.14), hsl(0 0% 10.2% / 0.94))",
                 variable: "var(--kds-color-elevation-middle)",
             },
         },
         bottom: {
-            light: { h: 180, s: 0, l: 32.2, a: 0.12 },
-            dark: { h: 330, s: 0, l: 10.2, a: 0.98 },
+            light: { h: 0, s: 0, l: 32.2, a: 0.12 },
+            dark: { h: 0, s: 0, l: 10.2, a: 0.98 },
             css: {
-                value: "light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98))",
+                value: "light-dark(hsl(0 0% 32.2% / 0.12), hsl(0 0% 10.2% / 0.98))",
                 variable: "var(--kds-color-elevation-bottom)",
             },
         },
         knob: {
-            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: "light-dark(hsl(180 0% 32.2% / 0.5), hsl(330 0% 10.2% / 0.6))",
+                value: "light-dark(hsl(0 0% 32.2% / 0.5), hsl(0 0% 10.2% / 0.6))",
                 variable: "var(--kds-color-elevation-knob)",
             },
         },
@@ -1626,10 +1626,10 @@ export const color = {
         },
         border: {
             default: {
-                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 },
                 css: {
-                    value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                    value: "light-dark(hsl(0 0% 10.2% / 0.1), hsl(0 0% 99% / 0.1))",
                     variable: "var(--kds-color-desktop-header-border-default)",
                 },
             },
@@ -1722,10 +1722,10 @@ export const color = {
                 },
             },
             onSurface: {
-                light: { h: 332.73, s: 0, l: 15.7, a: 0.24 },
-                dark: { h: 240, s: 0, l: 94.1, a: 0.24 },
+                light: { h: 0, s: 0, l: 15.7, a: 0.24 },
+                dark: { h: 0, s: 0, l: 94.1, a: 0.24 },
                 css: {
-                    value: "light-dark(hsl(332.73 0% 15.7% / 0.24), hsl(240 0% 94.1% / 0.24))",
+                    value: "light-dark(hsl(0 0% 15.7% / 0.24), hsl(0 0% 94.1% / 0.24))",
                     variable: "var(--kds-color-loading-spinner-track-on-surface)",
                 },
             },

package/dist/tokens/ts/elevation.js

@@ -12,13 +12,13 @@ export const elevation = {
                     blur: { value: 0, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 210, s: 0, l: 72.5, a: 0.32 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.9 },
+                        light: { h: 0, s: 0, l: 72.5, a: 0.32 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.9 },
                     },
                 },
             ],
             css: {
-                value: "0 0 0 0 light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9))",
+                value: "0 0 0 0 light-dark(hsl(0 0% 72.5% / 0.32), hsl(0 0% 10.2% / 0.9))",
                 variable: "var(--kds-elevation-level-0)",
             },
         },
@@ -30,8 +30,8 @@ export const elevation = {
                     blur: { value: 1, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 210, s: 0, l: 72.5, a: 0.32 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.9 },
+                        light: { h: 0, s: 0, l: 72.5, a: 0.32 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.9 },
                     },
                 },
                 {
@@ -40,8 +40,8 @@ export const elevation = {
                     blur: { value: 1, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 180, s: 0, l: 32.2, a: 0.14 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.94 },
+                        light: { h: 0, s: 0, l: 32.2, a: 0.14 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.94 },
                     },
                 },
                 {
@@ -50,13 +50,13 @@ export const elevation = {
                     blur: { value: 8, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 180, s: 0, l: 32.2, a: 0.12 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.98 },
+                        light: { h: 0, s: 0, l: 32.2, a: 0.12 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.98 },
                     },
                 },
             ],
             css: {
-                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))",
+                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))",
                 variable: "var(--kds-elevation-level-1)",
             },
         },
@@ -68,8 +68,8 @@ export const elevation = {
                     blur: { value: 4, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 210, s: 0, l: 72.5, a: 0.32 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.9 },
+                        light: { h: 0, s: 0, l: 72.5, a: 0.32 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.9 },
                     },
                 },
                 {
@@ -78,8 +78,8 @@ export const elevation = {
                     blur: { value: 8, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 180, s: 0, l: 32.2, a: 0.14 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.94 },
+                        light: { h: 0, s: 0, l: 32.2, a: 0.14 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.94 },
                     },
                 },
                 {
@@ -88,13 +88,13 @@ export const elevation = {
                     blur: { value: 20, unit: "px" },
                     spread: { value: 0, unit: "px" },
                     color: {
-                        light: { h: 180, s: 0, l: 32.2, a: 0.12 },
-                        dark: { h: 330, s: 0, l: 10.2, a: 0.98 },
+                        light: { h: 0, s: 0, l: 32.2, a: 0.12 },
+                        dark: { h: 0, s: 0, l: 10.2, a: 0.98 },
                     },
                 },
             ],
             css: {
-                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))",
+                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))",
                 variable: "var(--kds-elevation-level-3)",
             },
         },

package/dist/tokens/ts/fake-border.js

@@ -11,13 +11,13 @@ export const fakeBorder = {
                 blur: { value: 0, unit: "px" },
                 spread: { value: 0.5, unit: "px" },
                 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 },
                 },
             },
         ],
         css: {
-            value: "0 0 0 0.5px light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+            value: "0 0 0 0.5px light-dark(hsl(0 0% 10.2% / 0.2), hsl(0 0% 99% / 0.2))",
             variable: "var(--kds-fake-border-xs-muted)",
         },
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "8.1.0",
+  "version": "8.2.1",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",