@knime/kds-styles 0.0.5 → 0.0.7

package/dist/tokens/css/_properties.css

@@ -134,6 +134,12 @@ syntax: "<color>";
   initial-value: hsl(0 100% 66%);
 }
 
+@property --kds-core-color-red-435 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(360 84% 63%);
+}
+
 @property --kds-core-color-red-475 {
 syntax: "<color>";
   inherits: true;
@@ -206,6 +212,12 @@ syntax: "<color>";
   initial-value: hsl(30 80% 60%);
 }
 
+@property --kds-core-color-orange-375 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(29 88% 60%);
+}
+
 @property --kds-core-color-orange-400 {
 syntax: "<color>";
   inherits: true;
@@ -560,6 +572,318 @@ syntax: "<color>";
   initial-value: hsl(209 59% 14%);
 }
 
+@property --kds-core-color-purple-25 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(314 39% 94%);
+}
+
+@property --kds-core-color-purple-50 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(315 42% 91%);
+}
+
+@property --kds-core-color-purple-100 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(318 43% 88%);
+}
+
+@property --kds-core-color-purple-175 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(319 44% 85%);
+}
+
+@property --kds-core-color-purple-250 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(320 45% 82%);
+}
+
+@property --kds-core-color-purple-325 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(316 41% 73%);
+}
+
+@property --kds-core-color-purple-400 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(312 36% 64%);
+}
+
+@property --kds-core-color-purple-475 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(308 32% 55%);
+}
+
+@property --kds-core-color-purple-550 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(305 27% 47%);
+}
+
+@property --kds-core-color-purple-650 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(302 29% 39%);
+}
+
+@property --kds-core-color-purple-725 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(299 32% 31%);
+}
+
+@property --kds-core-color-purple-800 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(296 34% 23%);
+}
+
+@property --kds-core-color-purple-875 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(294 36% 15%);
+}
+
+@property --kds-core-color-aquamarine-25 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(186 44% 95%);
+}
+
+@property --kds-core-color-aquamarine-50 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(188 47% 93%);
+}
+
+@property --kds-core-color-aquamarine-100 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(186 46% 91%);
+}
+
+@property --kds-core-color-aquamarine-175 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(185 48% 89%);
+}
+
+@property --kds-core-color-aquamarine-250 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(186 49% 88%);
+}
+
+@property --kds-core-color-aquamarine-325 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(188 52% 77%);
+}
+
+@property --kds-core-color-aquamarine-400 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(189 55% 66%);
+}
+
+@property --kds-core-color-aquamarine-475 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(191 57% 54%);
+}
+
+@property --kds-core-color-aquamarine-550 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(193 60% 43%);
+}
+
+@property --kds-core-color-aquamarine-650 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(196 62% 38%);
+}
+
+@property --kds-core-color-aquamarine-725 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(198 62% 32%);
+}
+
+@property --kds-core-color-aquamarine-800 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(201 63% 27%);
+}
+
+@property --kds-core-color-aquamarine-875 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(204 65% 21%);
+}
+
+@property --kds-core-color-grassgreen-25 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(76 52% 96%);
+}
+
+@property --kds-core-color-grassgreen-50 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(73 57% 91%);
+}
+
+@property --kds-core-color-grassgreen-100 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(70 60% 86%);
+}
+
+@property --kds-core-color-grassgreen-175 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(67 64% 80%);
+}
+
+@property --kds-core-color-grassgreen-250 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(63 69% 75%);
+}
+
+@property --kds-core-color-grassgreen-325 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(65 69% 70%);
+}
+
+@property --kds-core-color-grassgreen-400 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(65 69% 65%);
+}
+
+@property --kds-core-color-grassgreen-475 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(66 68% 60%);
+}
+
+@property --kds-core-color-grassgreen-550 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(67 68% 55%);
+}
+
+@property --kds-core-color-grassgreen-650 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(69 61% 47%);
+}
+
+@property --kds-core-color-grassgreen-725 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(69 54% 40%);
+}
+
+@property --kds-core-color-grassgreen-800 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(71 46% 32%);
+}
+
+@property --kds-core-color-grassgreen-875 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(72 39% 25%);
+}
+
+@property --kds-core-color-brown-25 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(35 60% 95%);
+}
+
+@property --kds-core-color-brown-50 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(33 55% 89%);
+}
+
+@property --kds-core-color-brown-100 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(32 50% 82%);
+}
+
+@property --kds-core-color-brown-175 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(31 48% 74%);
+}
+
+@property --kds-core-color-brown-250 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(30 47% 68%);
+}
+
+@property --kds-core-color-brown-325 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(29 43% 58%);
+}
+
+@property --kds-core-color-brown-400 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(28 39% 50%);
+}
+
+@property --kds-core-color-brown-475 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(27 35% 44%);
+}
+
+@property --kds-core-color-brown-550 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(26 32% 39%);
+}
+
+@property --kds-core-color-brown-650 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(25 30% 35%);
+}
+
+@property --kds-core-color-brown-725 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(24 28% 30%);
+}
+
+@property --kds-core-color-brown-800 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(23 27% 24%);
+}
+
+@property --kds-core-color-brown-875 {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(22 25% 18%);
+}
+
 @property --kds-core-color-transparent {
 syntax: "<color>";
   inherits: true;
@@ -1364,6 +1688,18 @@ syntax: "<color>";
   initial-value: hsl(180 0% 48% / 0.48);
 }
 
+@property --kds-color-background-disabled-primary {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(173.77 18.031% 40.307%);
+}
+
+@property --kds-color-background-disabled-danger {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(1.5788 43.542% 37.998%);
+}
+
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -1454,12 +1790,24 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0 0% 64%), hsl(0 0% 48%));
 }
 
+@property --kds-color-text-and-icon-disabled-inverted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 73%);
+}
+
 @property --kds-color-text-and-icon-info {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(208 61% 34%), hsl(214 92% 77%));
 }
 
+@property --kds-color-text-and-icon-editor {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 11%), hsl(0 0% 94%));
+}
+
 @property --kds-color-border-neutral {
 syntax: "<color>";
   inherits: true;
@@ -1613,73 +1961,343 @@ syntax: "<color>";
 @property --kds-color-nodes-and-variables-flow-variable {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 100% 65%);
+  initial-value: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
 }
 
-@property --kds-color-skeleton-default {
+@property --kds-color-nodes-and-variables-loop {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
+  initial-value: hsl(188 52% 77%);
 }
 
-@property --kds-color-elevation-top {
+@property --kds-color-nodes-and-variables-manipulator {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
+  initial-value: hsl(51 100% 50%);
 }
 
-@property --kds-color-elevation-middle {
+@property --kds-color-nodes-and-variables-predictor {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94));
+  initial-value: light-dark(hsl(107 43% 55%), hsl(109 47% 61%));
 }
 
-@property --kds-color-elevation-bottom {
+@property --kds-color-nodes-and-variables-source {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+  initial-value: hsl(30 80% 60%);
 }
 
-@property --kds-color-desktop-header-background-default {
+@property --kds-color-nodes-and-variables-visualizer {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 10%);
+  initial-value: light-dark(hsl(193 60% 43%), hsl(191 57% 54%));
 }
 
-@property --kds-color-desktop-header-background-muted {
+@property --kds-color-nodes-and-variables-scope {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+  initial-value: light-dark(hsl(305 27% 47%), hsl(308 32% 55%));
 }
 
-@property --kds-color-desktop-header-background-accent {
+@property --kds-color-nodes-and-variables-learner {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+  initial-value: light-dark(hsl(67 68% 55%), hsl(65 69% 65%));
 }
 
-@property --kds-color-desktop-header-text-and-icon-neutral {
+@property --kds-color-nodes-and-variables-sink {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+  initial-value: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
 }
 
-@property --kds-color-desktop-header-text-and-icon-muted {
+@property --kds-color-nodes-and-variables-container {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
+  initial-value: hsl(69 54% 40%);
 }
 
-@property --kds-color-desktop-header-border-default {
+@property --kds-color-nodes-and-variables-unknown {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
+  initial-value: light-dark(hsl(353 75% 45%), hsl(356 77% 54%));
 }
 
-@property --kds-color-table-header-background-default {
+@property --kds-color-nodes-and-variables-other {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
+}
+
+@property --kds-color-nodes-and-variables-special-nodes-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 32%), hsl(0 0% 94%));
+}
+
+@property --kds-color-nodes-and-variables-special-nodes {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+}
+
+@property --kds-color-nodes-and-variables-special-nodes-muted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
+}
+
+@property --kds-color-nodes-and-variables-special-nodes-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 19%), hsl(0 0% 90%));
+}
+
+@property --kds-color-nodes-and-variables-special-nodes-background {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+}
+
+@property --kds-color-nodes-and-variables-warning-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
+}
+
+@property --kds-color-nodes-and-variables-warning {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(31 100% 83%), hsl(0 0% 22%));
+}
+
+@property --kds-color-nodes-and-variables-error-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(349 91% 35%), hsl(0 100% 66%));
+}
+
+@property --kds-color-nodes-and-variables-error {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(2 100% 92%), hsl(0 0% 22%));
+}
+
+@property --kds-color-nodes-and-variables-loading-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+}
+
+@property --kds-color-nodes-and-variables-loading {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(216 100% 92%), hsl(209 50% 20%));
+}
+
+@property --kds-color-nodes-and-variables-configuration {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(65 69% 70%), hsl(70 60% 86%));
+}
+
+@property --kds-color-port-data {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 11%), hsl(0 0% 94%));
+}
+
+@property --kds-color-port-flow-variable {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(360 84% 63%);
+}
+
+@property --kds-color-port-neutral-inverted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+}
+
+@property --kds-color-annotations-special-nodes {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+}
+
+@property --kds-color-annotations-special-nodes-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 32%), hsl(0 0% 90%));
+}
+
+@property --kds-color-annotations-visualizer {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(193 60% 43%), hsl(191 57% 54%));
+}
+
+@property --kds-color-annotations-loading-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+}
+
+@property --kds-color-annotations-manipulator {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(51 100% 50%);
+}
+
+@property --kds-color-annotations-source {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(30 80% 60%);
+}
+
+@property --kds-color-annotations-sink {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
+}
+
+@property --kds-color-annotations-learner {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(67 68% 55%), hsl(65 69% 65%));
+}
+
+@property --kds-color-annotations-predictor {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(107 43% 55%), hsl(109 47% 61%));
+}
+
+@property --kds-color-annotations-container {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(67 64% 80%), hsl(70 60% 86%));
+}
+
+@property --kds-color-annotations-flow-variable {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(173 37% 39%), hsl(172 27% 48%));
+}
+
+@property --kds-color-annotations-teal-dark {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(177 82% 18%), hsl(176 67% 22%));
+}
+
+@property --kds-color-annotations-other {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
+}
+
+@property --kds-color-annotations-loop {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(25 30% 35%), hsl(27 35% 44%));
+}
+
+@property --kds-color-node-state-error {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(353 75% 45%), hsl(348 94% 21%));
+}
+
+@property --kds-color-node-state-error-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
+}
+
+@property --kds-color-node-state-warning {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(51 100% 50%), hsl(43 100% 19%));
+}
+
+@property --kds-color-node-state-warning-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
+}
+
+@property --kds-color-node-state-executed {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(107 43% 55%), hsl(116 47% 26%));
+}
+
+@property --kds-color-node-state-executed-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
+}
+
+@property --kds-color-node-state-executing {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208 63% 41%), hsl(211 67% 59%));
+}
+
+@property --kds-color-node-state-inactive {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 11%));
+}
+
+@property --kds-color-node-state-inactive-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+}
+
+@property --kds-color-connector-data {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+}
+
+@property --kds-color-connector-flow-variable {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(360 84% 63%);
+}
+
+@property --kds-color-skeleton-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
+}
+
+@property --kds-color-elevation-top {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9));
+}
+
+@property --kds-color-elevation-middle {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94));
+}
+
+@property --kds-color-elevation-bottom {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+}
+
+@property --kds-color-elevation-knob {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
 }
 
 @property --kds-color-loading-spinner-progress-on-filled {
@@ -1712,6 +2330,48 @@ syntax: "<color>";
   initial-value: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
 }
 
+@property --kds-color-desktop-header-background-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 10%);
+}
+
+@property --kds-color-desktop-header-background-muted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+}
+
+@property --kds-color-desktop-header-background-accent {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
+}
+
+@property --kds-color-desktop-header-text-and-icon-neutral {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
+}
+
+@property --kds-color-desktop-header-text-and-icon-muted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
+}
+
+@property --kds-color-desktop-header-border-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(345 0% 10% / 0.1), hsl(330 0% 99% / 0.1));
+}
+
+@property --kds-color-table-header-background-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 99%);
+}
+
 @property --kds-border-radius-container-none {
 syntax: "<length>";
   inherits: false;
@@ -1910,6 +2570,48 @@ syntax: "<string>";
   initial-value: 1px soild light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
 }
 
+@property --kds-border-node-status-empty {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+}
+
+@property --kds-border-node-status-idle {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 1px solid light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
+}
+
+@property --kds-border-node-status-warning {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 1px solid light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
+}
+
+@property --kds-border-node-status-executed {
+syntax: "<string>";
+  inherits: false;
+  initial-value: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
+}
+
+@property --kds-border-resize-handle-initial {
+syntax: "*";
+  inherits: false;
+  initial-value: [object Object];
+}
+
+@property --kds-border-resize-handle-hover {
+syntax: "*";
+  inherits: false;
+  initial-value: [object Object];
+}
+
+@property --kds-border-resize-handle-active {
+syntax: "*";
+  inherits: false;
+  initial-value: [object Object];
+}
+
 @property --kds-sizing-viewport-breakpoints-576 {
 syntax: "<length>";
   inherits: false;
@@ -2048,6 +2750,12 @@ syntax: "<length>";
   initial-value: 4px;
 }
 
+@property --kds-dimension-component-height-0-25x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 4px;
+}
+
 @property --kds-dimension-component-height-0-75x {
 syntax: "<length>";
   inherits: false;
@@ -2096,6 +2804,18 @@ syntax: "<length>";
   initial-value: 40px;
 }
 
+@property --kds-dimension-component-height-4x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 64px;
+}
+
+@property --kds-dimension-component-width-0-25x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 4px;
+}
+
 @property --kds-dimension-component-width-0-75x {
 syntax: "<length>";
   inherits: false;
@@ -2138,6 +2858,12 @@ syntax: "<length>";
   initial-value: 36px;
 }
 
+@property --kds-dimension-component-width-4x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 64px;
+}
+
 @property --kds-dimension-icon-0-56x {
 syntax: "<length>";
   inherits: false;
@@ -2318,48 +3044,66 @@ syntax: "<string>";
   initial-value: 500 16px/1 Roboto;
 }
 
-@property --kds-font-annotations-h1 {
+@property --kds-font-workflows-annotations-h1 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 36px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-h2 {
+@property --kds-font-workflows-annotations-h2 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 30px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-h3 {
+@property --kds-font-workflows-annotations-h3 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 26px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-h4 {
+@property --kds-font-workflows-annotations-h4 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 22px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-h5 {
+@property --kds-font-workflows-annotations-h5 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 16px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-h6 {
+@property --kds-font-workflows-annotations-h6 {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 13px/1.5 'Roboto Condensed';
 }
 
-@property --kds-font-annotations-body {
+@property --kds-font-workflows-annotations-body {
 syntax: "<string>";
   inherits: true;
   initial-value: 700 13px/1.5 'Roboto Condensed';
 }
 
+@property --kds-font-workflows-node-name {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 700 13px 'Roboto Condensed';
+}
+
+@property --kds-font-workflows-node-label {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 12px 'Roboto Condensed';
+}
+
+@property --kds-font-workflows-node-status {
+syntax: "<string>";
+  inherits: true;
+  initial-value: 400 8px 'Roboto Condensed';
+}
+
 @property --kds-font-dataapps-h1 {
 syntax: "<string>";
   inherits: true;
@@ -2424,4 +3168,40 @@ syntax: "*";
 syntax: "*";
   inherits: false;
   initial-value: 0 2px 4px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 4px 8px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 20px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
+}
+
+@property --knob-initial {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 99%);
+}
+
+@property --knob-disabled {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 90%);
+}
+
+@property --knob {
+syntax: "*";
+  inherits: false;
+  initial-value: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+}
+
+@property --icon-on {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(176 67% 22%);
+}
+
+@property --icon-off {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 43%);
+}
+
+@property --icon-disabled {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 64%);
 }