@knime/kds-styles 2.6.2 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-styles
 
+## 2.7.0
+
+## 2.6.3
+
+### Patch Changes
+
+- 922a979: Adding echart tokens and exchange tokens in donut chart
+
 ## 2.6.2
 
 ## 2.6.1

package/dist/tokens/css/_properties-legacy.css

@@ -290,24 +290,6 @@ syntax: "<color>";
   initial-value: hsl(0, 0%, 12.9%);
 }
 
-@property --kds-color-background-static-chart-0 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 94.1%);
-}
-
-@property --kds-color-background-static-chart-1 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(176.1, 66.7%, 22.4%);
-}
-
-@property --kds-color-background-static-chart-2 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(171.8, 27%, 47.8%);
-}
-
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -566,6 +548,204 @@ syntax: "<color>";
   initial-value: hsl(345 0% 11.4% / 0.8);
 }
 
+@property --kds-color-chart-data-series-1 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(173.4, 37.1%, 38.6%);
+}
+
+@property --kds-color-chart-data-series-2 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(211.3, 67.3%, 59.2%);
+}
+
+@property --kds-color-chart-data-series-3 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(359.6, 84.3%, 62.5%);
+}
+
+@property --kds-color-chart-data-series-4 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 22%);
+}
+
+@property --kds-color-chart-data-series-5 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(28, 39%, 50%);
+}
+
+@property --kds-color-chart-data-series-6 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(208.2, 62.9%, 41.2%);
+}
+
+@property --kds-color-chart-data-series-7 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(71.1, 46.3%, 32.2%);
+}
+
+@property --kds-color-chart-data-series-8 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(308.3, 31.6%, 55.3%);
+}
+
+@property --kds-color-chart-data-series-9 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(193.1, 60.2%, 43.3%);
+}
+
+@property --kds-color-chart-data-track {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 94.1%);
+}
+
+@property --kds-color-chart-status-positive {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(107.4, 42.2%, 44.1%);
+}
+
+@property --kds-color-chart-status-negative {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(356.3, 76.8%, 54.3%);
+}
+
+@property --kds-color-chart-status-warning {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(19, 63.1%, 38.2%);
+}
+
+@property --kds-color-chart-status-error {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(348.8, 90.9%, 34.5%);
+}
+
+@property --kds-color-chart-scaffolding-axis {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(330 0% 10.2% / 0.2);
+}
+
+@property --kds-color-chart-scaffolding-grid {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(330 0% 10.2% / 0.1);
+}
+
+@property --kds-color-chart-scaffolding-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(330 0% 10.2% / 0.1);
+}
+
+@property --kds-color-chart-scaffolding-segment {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 98%);
+}
+
+@property --kds-color-chart-scaffolding-surface {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 98%);
+}
+
+@property --kds-color-chart-scaffolding-tooltip-surface {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 12.9%);
+}
+
+@property --kds-color-chart-control-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 43%);
+}
+
+@property --kds-color-chart-control-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-control-selected {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 18.8%);
+}
+
+@property --kds-color-chart-control-disabled {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 64%);
+}
+
+@property --kds-color-chart-text-title {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-text-subtitle {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 43%);
+}
+
+@property --kds-color-chart-text-axis-name {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 43%);
+}
+
+@property --kds-color-chart-text-axis-label {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 43%);
+}
+
+@property --kds-color-chart-text-legend {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-text-tooltip {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 98%);
+}
+
+@property --kds-color-chart-text-label {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-text-on-fill-dark {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-text-on-fill-light {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 98%);
+}
+
 @property --kds-color-nodes-and-variables-flow-variable {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_properties.css

@@ -1484,24 +1484,6 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
 }
 
-@property --kds-color-background-static-chart-0 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
-}
-
-@property --kds-color-background-static-chart-1 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(176.1, 66.7%, 22.4%), hsl(173.4, 37.1%, 38.6%));
-}
-
-@property --kds-color-background-static-chart-2 {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(171.8, 27%, 47.8%), hsl(176.1, 66.7%, 22.4%));
-}
-
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -1760,6 +1742,204 @@ syntax: "<color>";
   initial-value: hsl(345 0% 11.4% / 0.8);
 }
 
+@property --kds-color-chart-data-series-1 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%));
+}
+
+@property --kds-color-chart-data-series-2 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%));
+}
+
+@property --kds-color-chart-data-series-3 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%));
+}
+
+@property --kds-color-chart-data-series-4 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-chart-data-series-5 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%));
+}
+
+@property --kds-color-chart-data-series-6 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%));
+}
+
+@property --kds-color-chart-data-series-7 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%));
+}
+
+@property --kds-color-chart-data-series-8 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%));
+}
+
+@property --kds-color-chart-data-series-9 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
+}
+
+@property --kds-color-chart-data-track {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
+}
+
+@property --kds-color-chart-status-positive {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%));
+}
+
+@property --kds-color-chart-status-negative {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%));
+}
+
+@property --kds-color-chart-status-warning {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%));
+}
+
+@property --kds-color-chart-status-error {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%));
+}
+
+@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));
+}
+
+@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));
+}
+
+@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));
+}
+
+@property --kds-color-chart-scaffolding-segment {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
+}
+
+@property --kds-color-chart-scaffolding-surface {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%));
+}
+
+@property --kds-color-chart-scaffolding-tooltip-surface {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
+}
+
+@property --kds-color-chart-control-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-chart-control-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-chart-control-selected {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%));
+}
+
+@property --kds-color-chart-control-disabled {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%));
+}
+
+@property --kds-color-chart-text-title {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-chart-text-subtitle {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-chart-text-axis-name {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-chart-text-axis-label {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-chart-text-legend {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-chart-text-tooltip {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-chart-text-label {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-chart-text-on-fill-dark {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 15.7%);
+}
+
+@property --kds-color-chart-text-on-fill-light {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 98%);
+}
+
 @property --kds-color-nodes-and-variables-flow-variable {
 syntax: "<color>";
   inherits: true;
@@ -3014,6 +3194,18 @@ syntax: "<length>";
   initial-value: 20px;
 }
 
+@property --kds-dimension-chart-line-width {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 1.5px;
+}
+
+@property --kds-dimension-chart-segment-gap {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 0.75px;
+}
+
 @property --kds-font-base-display-xsmall {
 syntax: "<string>";
   inherits: true;
@@ -3380,6 +3572,48 @@ syntax: "<string>";
   initial-value: 700 10px/1.5 Roboto, sans-serif;
 }
 
+@property --kds-font-chart-title {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 18px/normal Roboto, sans-serif;
+}
+
+@property --kds-font-chart-subtitle {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 12px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-chart-axis-name {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 12px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-chart-axis-label {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 500 11px/normal Roboto, sans-serif;
+}
+
+@property --kds-font-chart-legend {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 500 11px/normal Roboto, sans-serif;
+}
+
+@property --kds-font-chart-tooltip {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 12px/1.5 Roboto, sans-serif;
+}
+
+@property --kds-font-chart-label {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 10px/normal Roboto, sans-serif;
+}
+
 @property --kds-elevation-level-0 {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_variables-legacy.css

@@ -51,9 +51,6 @@
   --kds-color-background-static-success-muted: hsl(125.38 64.795% 97.496%);
   --kds-color-background-static-brand: hsl(50.8, 100%, 50%);
   --kds-color-background-static-overlay: hsl(0, 0%, 12.9%);
-  --kds-color-background-static-chart-0: hsl(0, 0%, 94.1%);
-  --kds-color-background-static-chart-1: hsl(176.1, 66.7%, 22.4%);
-  --kds-color-background-static-chart-2: hsl(171.8, 27%, 47.8%);
   --kds-color-text-and-icon-neutral: hsl(0, 0%, 15.7%);
   --kds-color-text-and-icon-muted: hsl(0, 0%, 32.2%);
   --kds-color-text-and-icon-subtle: hsl(0, 0%, 43%);
@@ -97,6 +94,39 @@
   --kds-color-focus-outline: hsl(209.4, 57.3%, 49.6%);
   --kds-color-focus-background: hsl(215.7 100% 91.8% / 0.4);
   --kds-color-blanket-default: hsl(345 0% 11.4% / 0.8);
+  --kds-color-chart-data-series-1: hsl(173.4, 37.1%, 38.6%);
+  --kds-color-chart-data-series-2: hsl(211.3, 67.3%, 59.2%);
+  --kds-color-chart-data-series-3: hsl(359.6, 84.3%, 62.5%);
+  --kds-color-chart-data-series-4: hsl(0, 0%, 22%);
+  --kds-color-chart-data-series-5: hsl(28, 39%, 50%);
+  --kds-color-chart-data-series-6: hsl(208.2, 62.9%, 41.2%);
+  --kds-color-chart-data-series-7: hsl(71.1, 46.3%, 32.2%);
+  --kds-color-chart-data-series-8: hsl(308.3, 31.6%, 55.3%);
+  --kds-color-chart-data-series-9: hsl(193.1, 60.2%, 43.3%);
+  --kds-color-chart-data-track: hsl(0, 0%, 94.1%);
+  --kds-color-chart-status-positive: hsl(107.4, 42.2%, 44.1%);
+  --kds-color-chart-status-negative: hsl(356.3, 76.8%, 54.3%);
+  --kds-color-chart-status-warning: hsl(19, 63.1%, 38.2%);
+  --kds-color-chart-status-error: hsl(348.8, 90.9%, 34.5%);
+  --kds-color-chart-scaffolding-axis: hsl(330 0% 10.2% / 0.2);
+  --kds-color-chart-scaffolding-grid: hsl(330 0% 10.2% / 0.1);
+  --kds-color-chart-scaffolding-border: hsl(330 0% 10.2% / 0.1);
+  --kds-color-chart-scaffolding-segment: hsl(0, 0%, 98%);
+  --kds-color-chart-scaffolding-surface: hsl(0, 0%, 98%);
+  --kds-color-chart-scaffolding-tooltip-surface: hsl(0, 0%, 12.9%);
+  --kds-color-chart-control-default: hsl(0, 0%, 43%);
+  --kds-color-chart-control-hover: hsl(0, 0%, 15.7%);
+  --kds-color-chart-control-selected: hsl(0, 0%, 18.8%);
+  --kds-color-chart-control-disabled: hsl(0, 0%, 64%);
+  --kds-color-chart-text-title: hsl(0, 0%, 15.7%);
+  --kds-color-chart-text-subtitle: hsl(0, 0%, 43%);
+  --kds-color-chart-text-axis-name: hsl(0, 0%, 43%);
+  --kds-color-chart-text-axis-label: hsl(0, 0%, 43%);
+  --kds-color-chart-text-legend: hsl(0, 0%, 15.7%);
+  --kds-color-chart-text-tooltip: hsl(0, 0%, 98%);
+  --kds-color-chart-text-label: hsl(0, 0%, 15.7%);
+  --kds-color-chart-text-on-fill-dark: hsl(0, 0%, 15.7%);
+  --kds-color-chart-text-on-fill-light: hsl(0, 0%, 98%);
   --kds-color-nodes-and-variables-flow-variable: hsl(359.6, 84.3%, 62.5%);
   --kds-color-nodes-and-variables-loop: hsl(187.7, 51.7%, 76.5%);
   --kds-color-nodes-and-variables-manipulator: hsl(50.8, 100%, 50%);

package/dist/tokens/css/_variables.css

@@ -250,9 +250,6 @@
   --kds-color-background-static-success-muted: light-dark(hsl(125.38 64.795% 97.496%), hsl(128.3 38.542% 10.352%));
   --kds-color-background-static-brand: hsl(50.8, 100%, 50%);
   --kds-color-background-static-overlay: light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%));
-  --kds-color-background-static-chart-0: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
-  --kds-color-background-static-chart-1: light-dark(hsl(176.1, 66.7%, 22.4%), hsl(173.4, 37.1%, 38.6%));
-  --kds-color-background-static-chart-2: light-dark(hsl(171.8, 27%, 47.8%), hsl(176.1, 66.7%, 22.4%));
   --kds-color-text-and-icon-neutral: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
   --kds-color-text-and-icon-muted: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
   --kds-color-text-and-icon-subtle: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
@@ -296,6 +293,39 @@
   --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-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%));
+  --kds-color-chart-data-series-4: light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%));
+  --kds-color-chart-data-series-5: light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%));
+  --kds-color-chart-data-series-6: light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%));
+  --kds-color-chart-data-series-7: light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%));
+  --kds-color-chart-data-series-8: light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%));
+  --kds-color-chart-data-series-9: light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%));
+  --kds-color-chart-data-track: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
+  --kds-color-chart-status-positive: light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%));
+  --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-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%));
+  --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%));
+  --kds-color-chart-control-selected: light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%));
+  --kds-color-chart-control-disabled: light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%));
+  --kds-color-chart-text-title: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  --kds-color-chart-text-subtitle: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+  --kds-color-chart-text-axis-name: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+  --kds-color-chart-text-axis-label: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+  --kds-color-chart-text-legend: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  --kds-color-chart-text-tooltip: light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%));
+  --kds-color-chart-text-label: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  --kds-color-chart-text-on-fill-dark: hsl(0, 0%, 15.7%);
+  --kds-color-chart-text-on-fill-light: hsl(0, 0%, 98%);
   --kds-color-nodes-and-variables-flow-variable: light-dark(hsl(359.6, 84.3%, 62.5%), hsl(0, 100%, 66.1%));
   --kds-color-nodes-and-variables-loop: hsl(187.7, 51.7%, 76.5%);
   --kds-color-nodes-and-variables-manipulator: hsl(50.8, 100%, 50%);
@@ -505,6 +535,8 @@
   --kds-dimension-icon-0-75x: 12px;
   --kds-dimension-icon-1x: 16px;
   --kds-dimension-icon-1-25x: 20px;
+  --kds-dimension-chart-line-width: 1.5px;
+  --kds-dimension-chart-segment-gap: 0.75px;
   --kds-font-base-display-xsmall: 700 18px/normal Roboto, sans-serif;
   --kds-font-base-display-small: 700 20px/normal Roboto, sans-serif;
   --kds-font-base-display-medium: 700 24px/normal Roboto, sans-serif;
@@ -566,6 +598,13 @@
   --kds-font-dataapp-h6: 700 13px/1.5 Roboto, sans-serif;
   --kds-font-dataapp-body: 700 13px/1.5 Roboto, sans-serif;
   --kds-font-dataapp-body-small: 700 10px/1.5 Roboto, sans-serif;
+  --kds-font-chart-title: 700 18px/normal Roboto, sans-serif;
+  --kds-font-chart-subtitle: 400 12px/1.5 Roboto, sans-serif;
+  --kds-font-chart-axis-name: 400 12px/1.5 Roboto, sans-serif;
+  --kds-font-chart-axis-label: 500 11px/normal Roboto, sans-serif;
+  --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));

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

@@ -227,18 +227,6 @@ export type KdsColorTokens = {
          * Background color for content overlay, like tooltip.
          */
         readonly overlay: KdsColor;
-        /**
-         * Color used for charts (Track color, Empty Value).
-         */
-        readonly "chart-0": KdsColor;
-        /**
-         * Color used for donut charts (Current Value).
-         */
-        readonly "chart-1": KdsColor;
-        /**
-         * Color used for donut charts (Added Value).
-         */
-        readonly "chart-2": KdsColor;
     };
     readonly "text-and-icon": {
         /**
@@ -420,6 +408,150 @@ export type KdsColorTokens = {
          */
         readonly default: KdsColor;
     };
+    readonly chart: {
+        readonly data: {
+            /**
+             * Categorical series 1 — Okabe–Ito bluish green, brand anchor. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-1": KdsColor;
+            /**
+             * Categorical series 2 — Okabe–Ito sky blue. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-2": KdsColor;
+            /**
+             * Categorical series 3 — Okabe–Ito vermillion. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-3": KdsColor;
+            /**
+             * Categorical series 4 — Okabe–Ito black, separator between vivid hues. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-4": KdsColor;
+            /**
+             * Categorical series 5 — Okabe–Ito amber as tan. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-5": KdsColor;
+            /**
+             * Categorical series 6 — Okabe–Ito blue. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-6": KdsColor;
+            /**
+             * Categorical series 7 — Okabe–Ito yellow as yellow-leaning green. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-7": KdsColor;
+            /**
+             * Categorical series 8 — Okabe–Ito reddish purple. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-8": KdsColor;
+            /**
+             * Categorical series 9 — Okabe–Ito cyan, extension. Contrast ≥3:1 on chart-surface.
+             */
+            readonly "series-9": KdsColor;
+            /**
+             * Remaining / empty / context fill behind highlighted data (was background-static.chart-0, values unchanged).
+             */
+            readonly track: KdsColor;
+        };
+        readonly status: {
+            /**
+             * Directional up / gain. Same family as text-and-icon.success, fill weight class.
+             */
+            readonly positive: KdsColor;
+            /**
+             * Directional down / loss. Deliberately offset from chart.error so a falling value doesn't read as a breach.
+             */
+            readonly negative: KdsColor;
+            /**
+             * Approaching-limit line, marker, label on data. Pure alias.
+             */
+            readonly warning: KdsColor;
+            /**
+             * Breach bracket, dot, overage figure on data. Pure alias.
+             */
+            readonly error: KdsColor;
+        };
+        readonly scaffolding: {
+            /**
+             * Axis lines, ticks, axis pointer, mark lines. Pure alias.
+             */
+            readonly axis: KdsColor;
+            /**
+             * Gridlines, gauge track. Pure alias.
+             */
+            readonly grid: KdsColor;
+            /**
+             * Item borders (scatter, boxplot, graph). Pure alias.
+             */
+            readonly border: KdsColor;
+            /**
+             * Separator stroke between touching segments (pie, donut, stacked bar, nightingale, theme river). Alias to border.transparent to disable. Width: dimension.chart.segment-gap.
+             */
+            readonly segment: KdsColor;
+            /**
+             * Chart background and contrast reference for the series ramp. Pure alias.
+             */
+            readonly surface: KdsColor;
+            /**
+             * Tooltip background. Pure alias — overlay is the designated content-overlay color.
+             */
+            readonly "tooltip-surface": KdsColor;
+        };
+        readonly control: {
+            /**
+             * Chart control at rest — toolbox icon stroke, dataZoom handle, timeline control. Pure alias.
+             */
+            readonly default: KdsColor;
+            /**
+             * Chart control on hover / emphasis, legend pager. Pure alias.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Active toolbox feature (magic type, brush, data view). Pure alias.
+             */
+            readonly selected: KdsColor;
+            /**
+             * Inactive control — legend pager at range end. Pure alias.
+             */
+            readonly disabled: KdsColor;
+        };
+        readonly text: {
+            /**
+             * Chart title. Pure alias.
+             */
+            readonly title: KdsColor;
+            /**
+             * Chart subtitle. Pure alias.
+             */
+            readonly subtitle: KdsColor;
+            /**
+             * Axis name. Pure alias.
+             */
+            readonly "axis-name": KdsColor;
+            /**
+             * Axis tick labels. Pure alias.
+             */
+            readonly "axis-label": KdsColor;
+            /**
+             * Legend labels. Pure alias.
+             */
+            readonly legend: KdsColor;
+            /**
+             * Tooltip text. Direct core: the overlay surface stays dark in BOTH modes (neutral.725 light / neutral.475 dark), so tooltip text must be light in both — neutral-inverted would flip the wrong way in the dark set.
+             */
+            readonly tooltip: KdsColor;
+            /**
+             * Data labels rendered on the chart surface. Pure alias.
+             */
+            readonly label: KdsColor;
+            /**
+             * Dark ink for labels on light fills. Mode-independent; renderer picks per segment whichever on-fill ink has higher contrast on the resolved fill.
+             */
+            readonly "on-fill-dark": KdsColor;
+            /**
+             * Light ink for labels on dark fills. Mode-independent counterpart of on-fill-dark.
+             */
+            readonly "on-fill-light": KdsColor;
+        };
+    };
     readonly "nodes-and-variables": {
         /**
          * Specific color for Nodes and Variables.

package/dist/tokens/ts/color.js

@@ -418,30 +418,6 @@ export const color = {
                 variable: "var(--kds-color-background-static-overlay)",
             },
         },
-        "chart-0": {
-            light: { h: 0, s: 0, l: 94.1, alpha: 1 },
-            dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
-            css: {
-                value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
-                variable: "var(--kds-color-background-static-chart-0)",
-            },
-        },
-        "chart-1": {
-            light: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
-            dark: { h: 173.4, s: 37.1, l: 38.6, alpha: 1 },
-            css: {
-                value: "light-dark(hsl(176.1, 66.7%, 22.4%), hsl(173.4, 37.1%, 38.6%))",
-                variable: "var(--kds-color-background-static-chart-1)",
-            },
-        },
-        "chart-2": {
-            light: { h: 171.8, s: 27, l: 47.8, alpha: 1 },
-            dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
-            css: {
-                value: "light-dark(hsl(171.8, 27%, 47.8%), hsl(176.1, 66.7%, 22.4%))",
-                variable: "var(--kds-color-background-static-chart-2)",
-            },
-        },
     },
     "text-and-icon": {
         neutral: {
@@ -795,6 +771,282 @@ export const color = {
             },
         },
     },
+    chart: {
+        data: {
+            "series-1": {
+                light: { h: 173.4, s: 37.1, l: 38.6, alpha: 1 },
+                dark: { h: 169.8, s: 30.6, l: 66.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%))",
+                    variable: "var(--kds-color-chart-data-series-1)",
+                },
+            },
+            "series-2": {
+                light: { h: 211.3, s: 67.3, l: 59.2, alpha: 1 },
+                dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%))",
+                    variable: "var(--kds-color-chart-data-series-2)",
+                },
+            },
+            "series-3": {
+                light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },
+                dark: { h: 2.6, s: 100, l: 72.4, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(359.6, 84.3%, 62.5%), hsl(2.6, 100%, 72.4%))",
+                    variable: "var(--kds-color-chart-data-series-3)",
+                },
+            },
+            "series-4": {
+                light: { h: 0, s: 0, l: 22, alpha: 1 },
+                dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 22%), hsl(0, 0%, 72.5%))",
+                    variable: "var(--kds-color-chart-data-series-4)",
+                },
+            },
+            "series-5": {
+                light: { h: 28, s: 39, l: 50, alpha: 1 },
+                dark: { h: 30, s: 47, l: 68, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(28, 39%, 50%), hsl(30, 47%, 68%))",
+                    variable: "var(--kds-color-chart-data-series-5)",
+                },
+            },
+            "series-6": {
+                light: { h: 208.2, s: 62.9, l: 41.2, alpha: 1 },
+                dark: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(208.2, 62.9%, 41.2%), hsl(209.4, 57.3%, 49.6%))",
+                    variable: "var(--kds-color-chart-data-series-6)",
+                },
+            },
+            "series-7": {
+                light: { h: 71.1, s: 46.3, l: 32.2, alpha: 1 },
+                dark: { h: 68.6, s: 61, l: 47.3, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(71.1, 46.3%, 32.2%), hsl(68.6, 61.0%, 47.3%))",
+                    variable: "var(--kds-color-chart-data-series-7)",
+                },
+            },
+            "series-8": {
+                light: { h: 308.3, s: 31.6, l: 55.3, alpha: 1 },
+                dark: { h: 316.1, s: 40.6, l: 72.9, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(308.3, 31.6%, 55.3%), hsl(316.1, 40.6%, 72.9%))",
+                    variable: "var(--kds-color-chart-data-series-8)",
+                },
+            },
+            "series-9": {
+                light: { h: 193.1, s: 60.2, l: 43.3, alpha: 1 },
+                dark: { h: 191.3, s: 57.1, l: 54.3, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(193.1, 60.2%, 43.3%), hsl(191.3, 57.1%, 54.3%))",
+                    variable: "var(--kds-color-chart-data-series-9)",
+                },
+            },
+            track: {
+                light: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                dark: { h: 0, s: 0, l: 32.2, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
+                    variable: "var(--kds-color-chart-data-track)",
+                },
+            },
+        },
+        status: {
+            positive: {
+                light: { h: 107.4, s: 42.2, l: 44.1, alpha: 1 },
+                dark: { h: 109, s: 47.2, l: 61.4, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(107.4, 42.2%, 44.1%), hsl(109, 47.2%, 61.4%))",
+                    variable: "var(--kds-color-chart-status-positive)",
+                },
+            },
+            negative: {
+                light: { h: 356.3, s: 76.8, l: 54.3, alpha: 1 },
+                dark: { h: 0, s: 100, l: 66.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(356.3, 76.8%, 54.3%), hsl(0, 100%, 66.1%))",
+                    variable: "var(--kds-color-chart-status-negative)",
+                },
+            },
+            warning: {
+                light: { h: 19, s: 63.1, l: 38.2, alpha: 1 },
+                dark: { h: 31.2, s: 82.8, l: 65.9, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(19, 63.1%, 38.2%), hsl(31.2, 82.8%, 65.9%))",
+                    variable: "var(--kds-color-chart-status-warning)",
+                },
+            },
+            error: {
+                light: { h: 348.8, s: 90.9, l: 34.5, alpha: 1 },
+                dark: { h: 3.5, s: 100, l: 79.6, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(348.8, 90.9%, 34.5%), hsl(3.5, 100%, 79.6%))",
+                    variable: "var(--kds-color-chart-status-error)",
+                },
+            },
+        },
+        scaffolding: {
+            axis: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.2 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.2 },
+                css: {
+                    value: "light-dark(hsl(330 0% 10.2% / 0.2), hsl(330 0% 99% / 0.2))",
+                    variable: "var(--kds-color-chart-scaffolding-axis)",
+                },
+            },
+            grid: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
+                css: {
+                    value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                    variable: "var(--kds-color-chart-scaffolding-grid)",
+                },
+            },
+            border: {
+                light: { h: 330, s: 0, l: 10.2, alpha: 0.1 },
+                dark: { h: 330, s: 0, l: 99, alpha: 0.1 },
+                css: {
+                    value: "light-dark(hsl(330 0% 10.2% / 0.1), hsl(330 0% 99% / 0.1))",
+                    variable: "var(--kds-color-chart-scaffolding-border)",
+                },
+            },
+            segment: {
+                light: { h: 0, s: 0, l: 98, alpha: 1 },
+                dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+                    variable: "var(--kds-color-chart-scaffolding-segment)",
+                },
+            },
+            surface: {
+                light: { h: 0, s: 0, l: 98, alpha: 1 },
+                dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))",
+                    variable: "var(--kds-color-chart-scaffolding-surface)",
+                },
+            },
+            "tooltip-surface": {
+                light: { h: 0, s: 0, l: 12.9, alpha: 1 },
+                dark: { h: 0, s: 0, l: 22, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 12.9%), hsl(0, 0%, 22%))",
+                    variable: "var(--kds-color-chart-scaffolding-tooltip-surface)",
+                },
+            },
+        },
+        control: {
+            default: {
+                light: { h: 0, s: 0, l: 43, alpha: 1 },
+                dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+                    variable: "var(--kds-color-chart-control-default)",
+                },
+            },
+            hover: {
+                light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                    variable: "var(--kds-color-chart-control-hover)",
+                },
+            },
+            selected: {
+                light: { h: 174.4, s: 47.8, l: 30.8, alpha: 1 },
+                dark: { h: 176.1, s: 66.7, l: 22.4, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(174.4, 47.8%, 30.8%), hsl(176.1, 66.7%, 22.4%))",
+                    variable: "var(--kds-color-chart-control-selected)",
+                },
+            },
+            disabled: {
+                light: { h: 0, s: 0, l: 64, alpha: 1 },
+                dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 64%), hsl(0, 0%, 48.2%))",
+                    variable: "var(--kds-color-chart-control-disabled)",
+                },
+            },
+        },
+        text: {
+            title: {
+                light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                    variable: "var(--kds-color-chart-text-title)",
+                },
+            },
+            subtitle: {
+                light: { h: 0, s: 0, l: 43, alpha: 1 },
+                dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+                    variable: "var(--kds-color-chart-text-subtitle)",
+                },
+            },
+            "axis-name": {
+                light: { h: 0, s: 0, l: 43, alpha: 1 },
+                dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+                    variable: "var(--kds-color-chart-text-axis-name)",
+                },
+            },
+            "axis-label": {
+                light: { h: 0, s: 0, l: 43, alpha: 1 },
+                dark: { h: 0, s: 0, l: 72.5, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+                    variable: "var(--kds-color-chart-text-axis-label)",
+                },
+            },
+            legend: {
+                light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                    variable: "var(--kds-color-chart-text-legend)",
+                },
+            },
+            tooltip: {
+                light: { h: 0, s: 0, l: 98, alpha: 1 },
+                dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 94.1%))",
+                    variable: "var(--kds-color-chart-text-tooltip)",
+                },
+            },
+            label: {
+                light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                    variable: "var(--kds-color-chart-text-label)",
+                },
+            },
+            "on-fill-dark": {
+                light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                dark: { h: 0, s: 0, l: 15.7, alpha: 1 },
+                css: {
+                    value: "hsl(0, 0%, 15.7%)",
+                    variable: "var(--kds-color-chart-text-on-fill-dark)",
+                },
+            },
+            "on-fill-light": {
+                light: { h: 0, s: 0, l: 98, alpha: 1 },
+                dark: { h: 0, s: 0, l: 98, alpha: 1 },
+                css: {
+                    value: "hsl(0, 0%, 98%)",
+                    variable: "var(--kds-color-chart-text-on-fill-light)",
+                },
+            },
+        },
+    },
     "nodes-and-variables": {
         "flow-variable": {
             light: { h: 359.6, s: 84.3, l: 62.5, alpha: 1 },

package/dist/tokens/ts/dimension.d.ts

@@ -192,5 +192,15 @@ export type KdsDimensionTokens = {
          */
         readonly "1.25x": KdsDimension;
     };
+    readonly chart: {
+        /**
+         * Chart data stroke (1.5px). Line series, candlestick borders, radar lines. Below the 2px core border max — a data stroke is not a border.
+         */
+        readonly "line-width": KdsDimension;
+        /**
+         * Separator stroke width (0.75px) between touching segments — pie, donut, stacked bar, nightingale, theme river. Color: kds.color.chart.segment. Guarantees adjacent-segment distinction where hue contrast alone fails (WCAG 1.4.11 non-text contrast).
+         */
+        readonly "segment-gap": KdsDimension;
+    };
 };
 export declare const dimension: KdsDimensionTokens;

package/dist/tokens/ts/dimension.js

@@ -359,4 +359,22 @@ export const dimension = {
             css: { value: "20px", variable: "var(--kds-dimension-icon-1-25x)" },
         },
     },
+    chart: {
+        "line-width": {
+            value: 1.5,
+            unit: "px",
+            css: {
+                value: "1.5px",
+                variable: "var(--kds-dimension-chart-line-width)",
+            },
+        },
+        "segment-gap": {
+            value: 0.75,
+            unit: "px",
+            css: {
+                value: "0.75px",
+                variable: "var(--kds-dimension-chart-segment-gap)",
+            },
+        },
+    },
 };

package/dist/tokens/ts/font.d.ts

@@ -274,5 +274,35 @@ export type KdsFontTokens = {
          */
         readonly "body-small": KdsTypography;
     };
+    readonly chart: {
+        /**
+         * Chart title. Pure alias to base.display.xsmall. ECharts: title.textStyle.
+         */
+        readonly title: KdsTypography;
+        /**
+         * Chart subtitle. Pure alias to base.body.small. ECharts: title.subtextStyle.
+         */
+        readonly subtitle: KdsTypography;
+        /**
+         * Axis name. Pure alias to base.body.small. ECharts: axis.nameTextStyle.
+         */
+        readonly "axis-name": KdsTypography;
+        /**
+         * Axis tick labels. Pure alias to base.interactive.xsmall-strong. ECharts: axis.axisLabel.
+         */
+        readonly "axis-label": KdsTypography;
+        /**
+         * Legend labels and pager. Pure alias to base.interactive.xsmall-strong. ECharts: legend.textStyle / pageTextStyle.
+         */
+        readonly legend: KdsTypography;
+        /**
+         * Tooltip text. Pure alias to base.body.small. ECharts: tooltip.textStyle.
+         */
+        readonly tooltip: KdsTypography;
+        /**
+         * Data labels rendered on the chart. Pure alias to base.subtext.small. ECharts: series.label.
+         */
+        readonly label: KdsTypography;
+    };
 };
 export declare const font: KdsFontTokens;

package/dist/tokens/ts/font.js

@@ -641,4 +641,76 @@ export const font = {
             },
         },
     },
+    chart: {
+        title: {
+            fontFamily: "Roboto",
+            fontWeight: 700,
+            fontSize: { value: 18, unit: "px" },
+            lineHeight: "normal",
+            css: {
+                value: "700 18px/normal Roboto, sans-serif",
+                variable: "var(--kds-font-chart-title)",
+            },
+        },
+        subtitle: {
+            fontFamily: "Roboto",
+            fontWeight: 400,
+            fontSize: { value: 12, unit: "px" },
+            lineHeight: 1.5,
+            css: {
+                value: "400 12px/1.5 Roboto, sans-serif",
+                variable: "var(--kds-font-chart-subtitle)",
+            },
+        },
+        "axis-name": {
+            fontFamily: "Roboto",
+            fontWeight: 400,
+            fontSize: { value: 12, unit: "px" },
+            lineHeight: 1.5,
+            css: {
+                value: "400 12px/1.5 Roboto, sans-serif",
+                variable: "var(--kds-font-chart-axis-name)",
+            },
+        },
+        "axis-label": {
+            fontFamily: "Roboto",
+            fontWeight: 500,
+            fontSize: { value: 11, unit: "px" },
+            lineHeight: "normal",
+            css: {
+                value: "500 11px/normal Roboto, sans-serif",
+                variable: "var(--kds-font-chart-axis-label)",
+            },
+        },
+        legend: {
+            fontFamily: "Roboto",
+            fontWeight: 500,
+            fontSize: { value: 11, unit: "px" },
+            lineHeight: "normal",
+            css: {
+                value: "500 11px/normal Roboto, sans-serif",
+                variable: "var(--kds-font-chart-legend)",
+            },
+        },
+        tooltip: {
+            fontFamily: "Roboto",
+            fontWeight: 400,
+            fontSize: { value: 12, unit: "px" },
+            lineHeight: 1.5,
+            css: {
+                value: "400 12px/1.5 Roboto, sans-serif",
+                variable: "var(--kds-font-chart-tooltip)",
+            },
+        },
+        label: {
+            fontFamily: "Roboto",
+            fontWeight: 400,
+            fontSize: { value: 10, unit: "px" },
+            lineHeight: "normal",
+            css: {
+                value: "400 10px/normal Roboto, sans-serif",
+                variable: "var(--kds-font-chart-label)",
+            },
+        },
+    },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -44,8 +44,7 @@
     }
   },
   "engines": {
-    "node": "24.10.0",
-    "npm": "please-use-pnpm"
+    "node": ">=24"
   },
   "scripts": {
     "build": "pnpm run build:parallel && pnpm run build:fonts",