@knime/kds-styles 2.3.0 → 2.4.0

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

@@ -5,175 +5,175 @@
 @property --kds-color-surface-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-surface-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 94%);
+  initial-value: hsl(0, 0%, 94.1%);
 }
 
 @property --kds-color-surface-subtle {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-page-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-background-neutral-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 11% / 0);
+  initial-value: hsl(345 0% 11.4% / 0);
 }
 
 @property --kds-color-background-neutral-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 48% / 0.1);
+  initial-value: hsl(340 0% 48.2% / 0.1);
 }
 
 @property --kds-color-background-neutral-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 48% / 0.2);
+  initial-value: hsl(340 0% 48.2% / 0.2);
 }
 
 @property --kds-color-background-neutral-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 73% / 0.4);
+  initial-value: hsl(210 0% 72.5% / 0.4);
 }
 
 @property --kds-color-background-neutral-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 63.406% / 0.4);
+  initial-value: hsl(210 0% 62.977% / 0.4);
 }
 
 @property --kds-color-background-neutral-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 60.265% / 0.4);
+  initial-value: hsl(0 0% 59.859% / 0.4);
 }
 
 @property --kds-color-background-primary-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-background-primary-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(168 0% 81.947%);
+  initial-value: hsl(330 0% 82.128%);
 }
 
 @property --kds-color-background-primary-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 74.039%);
+  initial-value: hsl(324 0% 74.201%);
 }
 
 @property --kds-color-background-primary-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-background-primary-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(240 0% 13.84%);
+  initial-value: hsl(345 0% 13.593%);
 }
 
 @property --kds-color-background-primary-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(340 0% 11.207%);
+  initial-value: hsl(330 0% 11.024%);
 }
 
 @property --kds-color-background-selected-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 94%);
+  initial-value: hsl(0, 0%, 94.1%);
 }
 
 @property --kds-color-background-selected-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-background-selected-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-background-selected-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 19%);
+  initial-value: hsl(0, 0%, 18.8%);
 }
 
 @property --kds-color-background-selected-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-background-selected-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 13%);
+  initial-value: hsl(0, 0%, 12.9%);
 }
 
 @property --kds-color-background-danger-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 100% 97%);
+  initial-value: hsl(0, 100%, 97.1%);
 }
 
 @property --kds-color-background-danger-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(2 100% 92%);
+  initial-value: hsl(1.5, 100%, 92.4%);
 }
 
 @property --kds-color-background-danger-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(3 100% 86%);
+  initial-value: hsl(3.4, 100%, 86.1%);
 }
 
 @property --kds-color-background-danger-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(349 91% 35%);
+  initial-value: hsl(348.8, 90.9%, 34.5%);
 }
 
 @property --kds-color-background-danger-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(348 97% 27%);
+  initial-value: hsl(347.6, 97.1%, 27.3%);
 }
 
 @property --kds-color-background-danger-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(348 94% 21%);
+  initial-value: hsl(348, 94.3%, 20.8%);
 }
 
 @property --kds-color-background-input-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-background-input-hover {
@@ -191,817 +191,817 @@ syntax: "<color>";
 @property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 48% / 0.48);
+  initial-value: hsl(340 0% 48.2% / 0.48);
 }
 
 @property --kds-color-background-disabled-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 48%);
+  initial-value: hsl(0, 0%, 48.2%);
 }
 
 @property --kds-color-background-disabled-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(1.5788 43.542% 37.998%);
+  initial-value: hsl(1.3489 43.031% 37.79%);
 }
 
 @property --kds-color-background-success-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(111 48% 31%);
+  initial-value: hsl(111.3, 47.5%, 31.4%);
 }
 
 @property --kds-color-background-info-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(209 57% 50%);
+  initial-value: hsl(209.4, 57.3%, 49.6%);
 }
 
 @property --kds-color-background-info-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 63% 41%);
+  initial-value: hsl(208.2, 62.9%, 41.2%);
 }
 
 @property --kds-color-background-info-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(217 100% 97%);
+  initial-value: hsl(216.7, 100%, 96.5%);
 }
 
 @property --kds-color-background-static-info-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(217.11 100.13% 97.725%);
+  initial-value: hsl(216.83 100.14% 97.347%);
 }
 
 @property --kds-color-background-static-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(30 95% 92%);
+  initial-value: hsl(30, 95.2%, 91.8%);
 }
 
 @property --kds-color-background-static-warning-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(29.611 97.821% 95.88%);
+  initial-value: hsl(29.601 98.108% 95.778%);
 }
 
 @property --kds-color-background-static-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(2 100% 92%);
+  initial-value: hsl(1.5, 100%, 92.4%);
 }
 
 @property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 100% 97%);
+  initial-value: hsl(0, 100%, 97.1%);
 }
 
 @property --kds-color-background-static-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(119.44 95.797% 93.942%);
+  initial-value: hsl(119.4 96.139% 93.64%);
 }
 
 @property --kds-color-background-static-success-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(124.89 65.088% 97.723%);
+  initial-value: hsl(125.38 64.795% 97.496%);
 }
 
 @property --kds-color-background-static-brand {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(50.8, 100%, 50%);
 }
 
 @property --kds-color-background-static-overlay {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 13%);
+  initial-value: hsl(0, 0%, 12.9%);
 }
 
 @property --kds-color-background-static-chart-0 {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 94%);
+  initial-value: hsl(0, 0%, 94.1%);
 }
 
 @property --kds-color-background-static-chart-1 {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(176 67% 22%);
+  initial-value: hsl(176.1, 66.7%, 22.4%);
 }
 
 @property --kds-color-background-static-chart-2 {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(172 27% 48%);
+  initial-value: hsl(171.8, 27%, 47.8%);
 }
 
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-text-and-icon-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 32%);
+  initial-value: hsl(0, 0%, 32.2%);
 }
 
 @property --kds-color-text-and-icon-subtle {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 43%);
+  initial-value: hsl(0, 0%, 43%);
 }
 
 @property --kds-color-text-and-icon-neutral-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-text-and-icon-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-text-and-icon-primary-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-text-and-icon-selected {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-text-and-icon-selected-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-text-and-icon-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(19 63% 38%);
+  initial-value: hsl(19, 63.1%, 38.2%);
 }
 
 @property --kds-color-text-and-icon-warning-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(31 100% 83%);
+  initial-value: hsl(31, 100%, 82.5%);
 }
 
 @property --kds-color-text-and-icon-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(349 91% 35%);
+  initial-value: hsl(348.8, 90.9%, 34.5%);
 }
 
 @property --kds-color-text-and-icon-danger-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 100% 97%);
+  initial-value: hsl(0, 100%, 97.1%);
 }
 
 @property --kds-color-text-and-icon-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(116 47% 26%);
+  initial-value: hsl(116.1, 46.6%, 25.7%);
 }
 
 @property --kds-color-text-and-icon-success-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(120 95% 92%);
+  initial-value: hsl(120, 95.3%, 91.6%);
 }
 
 @property --kds-color-text-and-icon-disabled {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 64%);
+  initial-value: hsl(0, 0%, 64%);
 }
 
 @property --kds-color-text-and-icon-disabled-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-text-and-icon-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-text-and-icon-editor {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 11%);
+  initial-value: hsl(0, 0%, 11.4%);
 }
 
 @property --kds-color-border-neutral {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.4);
+  initial-value: hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-color-border-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.2);
+  initial-value: hsl(330 0% 10.2% / 0.2);
 }
 
 @property --kds-color-border-subtle {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.1);
+  initial-value: hsl(330 0% 10.2% / 0.1);
 }
 
 @property --kds-color-border-primary-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 13%);
+  initial-value: hsl(0, 0%, 12.9%);
 }
 
 @property --kds-color-border-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-border-selected-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 19%);
+  initial-value: hsl(0, 0%, 18.8%);
 }
 
 @property --kds-color-border-selected {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 32%);
+  initial-value: hsl(0, 0%, 32.2%);
 }
 
 @property --kds-color-border-selected-accent {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(209 57% 50%);
+  initial-value: hsl(209.4, 57.3%, 49.6%);
 }
 
 @property --kds-color-border-warning-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(19 63% 38%);
+  initial-value: hsl(19, 63.1%, 38.2%);
 }
 
 @property --kds-color-border-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(31 79% 74%);
+  initial-value: hsl(30.8, 79.3%, 73.5%);
 }
 
 @property --kds-color-border-danger-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(349 91% 35%);
+  initial-value: hsl(348.8, 90.9%, 34.5%);
 }
 
 @property --kds-color-border-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(3 100% 86%);
+  initial-value: hsl(3.4, 100%, 86.1%);
 }
 
 @property --kds-color-border-success-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(116 47% 26%);
+  initial-value: hsl(116.1, 46.6%, 25.7%);
 }
 
 @property --kds-color-border-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(112 57% 71%);
+  initial-value: hsl(112, 56.5%, 71.2%);
 }
 
 @property --kds-color-border-info-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-border-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(215 100% 84%);
+  initial-value: hsl(214.5, 100%, 84.3%);
 }
 
 @property --kds-color-border-transparent {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 11% / 0);
+  initial-value: hsl(345 0% 11.4% / 0);
 }
 
 @property --kds-color-border-disabled {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-border-brand {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(50.8, 100%, 50%);
 }
 
 @property --kds-color-border-neutral-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.4);
+  initial-value: hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-color-border-neutral-bold-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.64);
+  initial-value: hsl(330 0% 10.2% / 0.64);
 }
 
 @property --kds-color-border-neutral-bold-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.74);
+  initial-value: hsl(330 0% 10.2% / 0.74);
 }
 
 @property --kds-color-focus-outline {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(209 57% 50%);
+  initial-value: hsl(209.4, 57.3%, 49.6%);
 }
 
 @property --kds-color-focus-background {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216 100% 92% / 0.4);
+  initial-value: hsl(215.7 100% 91.8% / 0.4);
 }
 
 @property --kds-color-blanket-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 11% / 0.8);
+  initial-value: hsl(345 0% 11.4% / 0.8);
 }
 
 @property --kds-color-nodes-and-variables-flow-variable {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(360 84% 63%);
+  initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
 @property --kds-color-nodes-and-variables-loop {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(188 52% 77%);
+  initial-value: hsl(187.7, 51.7%, 76.5%);
 }
 
 @property --kds-color-nodes-and-variables-manipulator {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(50.8, 100%, 50%);
 }
 
 @property --kds-color-nodes-and-variables-predictor {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(107 43% 55%);
+  initial-value: hsl(106.5, 42.6%, 54.9%);
 }
 
 @property --kds-color-nodes-and-variables-source {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(30 80% 60%);
+  initial-value: hsl(30, 80.4%, 60%);
 }
 
 @property --kds-color-nodes-and-variables-visualizer {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(193 60% 43%);
+  initial-value: hsl(193.1, 60.2%, 43.3%);
 }
 
 @property --kds-color-nodes-and-variables-scope {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(305 27% 47%);
+  initial-value: hsl(304.6, 27.4%, 46.5%);
 }
 
 @property --kds-color-nodes-and-variables-learner {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(67 68% 55%);
+  initial-value: hsl(67.3, 67.8%, 54.9%);
 }
 
 @property --kds-color-nodes-and-variables-sink {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(360 84% 63%);
+  initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
 @property --kds-color-nodes-and-variables-container {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(69 54% 40%);
+  initial-value: hsl(69.4, 53.5%, 39.6%);
 }
 
 @property --kds-color-nodes-and-variables-unknown {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(353 75% 45%);
+  initial-value: hsl(353, 74.7%, 44.9%);
 }
 
 @property --kds-color-nodes-and-variables-other {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(29 43% 58%);
+  initial-value: hsl(29, 43%, 58%);
 }
 
 @property --kds-color-nodes-and-variables-metanode {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-nodes-and-variables-metanode-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 32%);
+  initial-value: hsl(0, 0%, 32.2%);
 }
 
 @property --kds-color-nodes-and-variables-component {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-nodes-and-variables-special-state {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-nodes-and-variables-forbidden-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 19%);
+  initial-value: hsl(0, 0%, 18.8%);
 }
 
 @property --kds-color-nodes-and-variables-forbidden {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-nodes-and-variables-warning-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(19 63% 38%);
+  initial-value: hsl(19, 63.1%, 38.2%);
 }
 
 @property --kds-color-nodes-and-variables-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(31 100% 83%);
+  initial-value: hsl(31, 100%, 82.5%);
 }
 
 @property --kds-color-nodes-and-variables-error-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(349 91% 35%);
+  initial-value: hsl(348.8, 90.9%, 34.5%);
 }
 
 @property --kds-color-nodes-and-variables-error {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(2 100% 92%);
+  initial-value: hsl(1.5, 100%, 92.4%);
 }
 
 @property --kds-color-nodes-and-variables-loading-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-nodes-and-variables-loading {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216 100% 92%);
+  initial-value: hsl(215.7, 100%, 91.8%);
 }
 
 @property --kds-color-nodes-and-variables-configuration {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(65 69% 70%);
+  initial-value: hsl(64.6, 68.6%, 70.0%);
 }
 
 @property --kds-color-nodes-and-variables-quickform {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(212 78% 68%);
+  initial-value: hsl(212.1, 78.2%, 67.6%);
 }
 
 @property --kds-color-port-data {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 11%);
+  initial-value: hsl(0, 0%, 11.4%);
 }
 
 @property --kds-color-port-flow-variable {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(360 84% 63%);
+  initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
 @property --kds-color-port-neutral-inverted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-annotations-special-nodes {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-annotations-special-nodes-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 32%);
+  initial-value: hsl(0, 0%, 32.2%);
 }
 
 @property --kds-color-annotations-visualizer {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(193 60% 43%);
+  initial-value: hsl(193.1, 60.2%, 43.3%);
 }
 
 @property --kds-color-annotations-loading-bold {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-annotations-manipulator {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(50.8, 100%, 50%);
 }
 
 @property --kds-color-annotations-source {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(30 80% 60%);
+  initial-value: hsl(30, 80.4%, 60%);
 }
 
 @property --kds-color-annotations-sink {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(360 84% 63%);
+  initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
 @property --kds-color-annotations-learner {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(67 68% 55%);
+  initial-value: hsl(67.3, 67.8%, 54.9%);
 }
 
 @property --kds-color-annotations-predictor {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(107 43% 55%);
+  initial-value: hsl(106.5, 42.6%, 54.9%);
 }
 
 @property --kds-color-annotations-container {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(67 64% 80%);
+  initial-value: hsl(66.5, 64.4%, 80.2%);
 }
 
 @property --kds-color-annotations-flow-variable {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(173 37% 39%);
+  initial-value: hsl(173.4, 37.1%, 38.6%);
 }
 
 @property --kds-color-annotations-teal-dark {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(177 82% 18%);
+  initial-value: hsl(176.7, 82%, 17.5%);
 }
 
 @property --kds-color-annotations-other {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(29 43% 58%);
+  initial-value: hsl(29, 43%, 58%);
 }
 
 @property --kds-color-annotations-loop {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(25 30% 35%);
+  initial-value: hsl(25, 30%, 35%);
 }
 
 @property --kds-color-state-error {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(353 75% 45%);
+  initial-value: hsl(353, 74.7%, 44.9%);
 }
 
 @property --kds-color-state-error-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(348 94% 21%);
+  initial-value: hsl(348, 94.3%, 20.8%);
 }
 
 @property --kds-color-state-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(48 100% 68%);
+  initial-value: hsl(47.6, 100%, 67.6%);
 }
 
 @property --kds-color-state-warning-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(19 63% 38%);
+  initial-value: hsl(19, 63.1%, 38.2%);
 }
 
 @property --kds-color-state-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(107 43% 55%);
+  initial-value: hsl(106.5, 42.6%, 54.9%);
 }
 
 @property --kds-color-state-success-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(116 47% 26%);
+  initial-value: hsl(116.1, 46.6%, 25.7%);
 }
 
 @property --kds-color-state-loading {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 61% 34%);
+  initial-value: hsl(208.3, 60.5%, 33.7%);
 }
 
 @property --kds-color-state-inactive {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-state-inactive-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-state-disabled {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0, 0%, 72.5%);
 }
 
 @property --kds-color-state-disabled-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 48%);
+  initial-value: hsl(0, 0%, 48.2%);
 }
 
 @property --kds-color-state-background {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-connector-data {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-connector-flow-variable {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(360 84% 63%);
+  initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
 @property --kds-color-elevation-top {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 73% / 0.32);
+  initial-value: hsl(210 0% 72.5% / 0.32);
 }
 
 @property --kds-color-elevation-middle {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 32% / 0.14);
+  initial-value: hsl(180 0% 32.2% / 0.14);
 }
 
 @property --kds-color-elevation-bottom {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 32% / 0.12);
+  initial-value: hsl(180 0% 32.2% / 0.12);
 }
 
 @property --kds-color-elevation-knob {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(330 0% 32% / 0.5);
+  initial-value: hsl(180 0% 32.2% / 0.5);
 }
 
 @property --kds-color-desktop-header-background-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 10%);
+  initial-value: hsl(0, 0%, 10.2%);
 }
 
 @property --kds-color-desktop-header-background-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-desktop-header-background-accent {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-desktop-header-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-desktop-header-text-and-icon-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 32%);
+  initial-value: hsl(0, 0%, 32.2%);
 }
 
 @property --kds-color-desktop-header-border-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(345 0% 10% / 0.1);
+  initial-value: hsl(330 0% 10.2% / 0.1);
 }
 
 @property --kds-color-table-header-background-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-toggle-switch-knob-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0, 0%, 99%);
 }
 
 @property --kds-color-toggle-switch-knob-disabled {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0, 0%, 90.2%);
 }
 
 @property --kds-color-toggle-switch-icon-on {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-toggle-switch-icon-off {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 43%);
+  initial-value: hsl(0, 0%, 43%);
 }
 
 @property --kds-color-toggle-switch-icon-disabled {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 64%);
+  initial-value: hsl(0, 0%, 64%);
 }
 
 @property --kds-color-loading-spinner-progress-on-primary {
@@ -1013,7 +1013,7 @@ syntax: "<color>";
 @property --kds-color-loading-spinner-progress-on-surface {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 16%);
+  initial-value: hsl(0, 0%, 15.7%);
 }
 
 @property --kds-color-loading-spinner-track-on-primary {
@@ -1025,85 +1025,85 @@ syntax: "<color>";
 @property --kds-color-loading-spinner-track-on-surface {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(120 0% 16% / 0.24);
+  initial-value: hsl(332.73 0% 15.7% / 0.24);
 }
 
 @property --kds-color-tooltip-background-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 13%);
+  initial-value: hsl(0, 0%, 12.9%);
 }
 
 @property --kds-color-tooltip-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 98%);
+  initial-value: hsl(0, 0%, 98%);
 }
 
 @property --kds-color-text-highlight-background-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(212 78% 68% / 0.6);
+  initial-value: hsl(212.1 78.2% 67.6% / 0.6);
 }
 
 @property --kds-color-avatar-background-red {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(4 100% 80%);
+  initial-value: hsl(3.5, 100%, 79.6%);
 }
 
 @property --kds-color-avatar-background-orange {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(31 83% 66%);
+  initial-value: hsl(31.2, 82.8%, 65.9%);
 }
 
 @property --kds-color-avatar-background-yellow {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(50.8, 100%, 50%);
 }
 
 @property --kds-color-avatar-background-green {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(109 47% 61%);
+  initial-value: hsl(109, 47.2%, 61.4%);
 }
 
 @property --kds-color-avatar-background-teal {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(170 31% 66%);
+  initial-value: hsl(169.8, 30.6%, 66.1%);
 }
 
 @property --kds-color-avatar-background-blue {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(214 92% 77%);
+  initial-value: hsl(213.6, 91.6%, 76.7%);
 }
 
 @property --kds-color-avatar-background-purple {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(320 45% 82%);
+  initial-value: hsl(320.0, 44.7%, 81.6%);
 }
 
 @property --kds-color-avatar-background-aquamarine {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(186 49% 88%);
+  initial-value: hsl(185.8, 49.2%, 87.6%);
 }
 
 @property --kds-color-avatar-background-grassgreen {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(63 69% 75%);
+  initial-value: hsl(63.4, 68.5%, 75.1%);
 }
 
 @property --kds-color-avatar-background-brown {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(30 47% 68%);
+  initial-value: hsl(30, 47%, 68%);
 }
 
 @property --kds-color-avatar-background-empty {
@@ -1115,239 +1115,239 @@ syntax: "<color>";
 @property --kds-color-avatar-text-and-icon-red {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(348 94% 21%);
+  initial-value: hsl(348, 94.3%, 20.8%);
 }
 
 @property --kds-color-avatar-text-and-icon-orange {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(13 66% 23%);
+  initial-value: hsl(13.1, 66.1%, 23.1%);
 }
 
 @property --kds-color-avatar-text-and-icon-yellow {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(44 94% 14%);
+  initial-value: hsl(44.3, 94.2%, 13.5%);
 }
 
 @property --kds-color-avatar-text-and-icon-green {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(132 52% 15%);
+  initial-value: hsl(132.3, 52%, 14.7%);
 }
 
 @property --kds-color-avatar-text-and-icon-teal {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(175 93% 12%);
+  initial-value: hsl(174.5, 93.2%, 11.6%);
 }
 
 @property --kds-color-avatar-text-and-icon-blue {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(209 50% 20%);
+  initial-value: hsl(209.4, 49.5%, 20.2%);
 }
 
 @property --kds-color-avatar-text-and-icon-purple {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(296 34% 23%);
+  initial-value: hsl(295.5, 33.9%, 23.1%);
 }
 
 @property --kds-color-avatar-text-and-icon-aquamarine {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(201 63% 27%);
+  initial-value: hsl(200.9, 63.2%, 26.7%);
 }
 
 @property --kds-color-avatar-text-and-icon-grassgreen {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(72 39% 25%);
+  initial-value: hsl(72.2, 39.2%, 24.5%);
 }
 
 @property --kds-color-avatar-text-and-icon-brown {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(23 27% 24%);
+  initial-value: hsl(23, 27%, 24%);
 }
 
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(330 0% 11% / 0);
+  initial-value: 1px solid hsl(345 0% 11.4% / 0);
 }
 
 @property --kds-border-action-default {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 10% / 0.4);
+  initial-value: 1px solid hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-border-action-disabled {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(0 0% 73%);
+  initial-value: 1px solid hsl(0, 0%, 72.5%);
 }
 
 @property --kds-border-action-focused {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid hsl(209 57% 50%);
+  initial-value: 2px solid hsl(209.4, 57.3%, 49.6%);
 }
 
 @property --kds-border-action-selected {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(0 0% 32%);
+  initial-value: 1px solid hsl(0, 0%, 32.2%);
 }
 
 @property --kds-border-action-selected-accent {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(209 57% 50%);
+  initial-value: 1px solid hsl(209.4, 57.3%, 49.6%);
 }
 
 @property --kds-border-action-error {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(349 91% 35%);
+  initial-value: 1px solid hsl(348.8, 90.9%, 34.5%);
 }
 
 @property --kds-border-action-primary {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(0 0% 13%);
+  initial-value: 1px solid hsl(0, 0%, 12.9%);
 }
 
 @property --kds-border-action-input {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 10% / 0.4);
+  initial-value: 1px solid hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-border-base-default {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 10% / 0.4);
+  initial-value: 1px solid hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-border-base-muted {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 10% / 0.2);
+  initial-value: 1px solid hsl(330 0% 10.2% / 0.2);
 }
 
 @property --kds-border-base-subtle {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(345 0% 10% / 0.1);
+  initial-value: 1px solid hsl(330 0% 10.2% / 0.1);
 }
 
 @property --kds-border-base-brand {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(51 100% 50%);
+  initial-value: 1px solid hsl(50.8, 100%, 50%);
 }
 
 @property --kds-border-base-danger {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(3 100% 86%);
+  initial-value: 1px solid hsl(3.4, 100%, 86.1%);
 }
 
 @property --kds-border-base-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(31 79% 74%);
+  initial-value: 1px solid hsl(30.8, 79.3%, 73.5%);
 }
 
 @property --kds-border-base-success {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(112 57% 71%);
+  initial-value: 1px solid hsl(112, 56.5%, 71.2%);
 }
 
 @property --kds-border-base-info {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(215 100% 84%);
+  initial-value: 1px solid hsl(214.5, 100%, 84.3%);
 }
 
 @property --kds-border-node-status-empty {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(0 0% 90%);
+  initial-value: 1px solid hsl(0, 0%, 90.2%);
 }
 
 @property --kds-border-node-status-error {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(348 94% 21%);
+  initial-value: 1px solid hsl(348, 94.3%, 20.8%);
 }
 
 @property --kds-border-node-status-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(19 63% 38%);
+  initial-value: 1px solid hsl(19, 63.1%, 38.2%);
 }
 
 @property --kds-border-node-status-success {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(116 47% 26%);
+  initial-value: 1px solid hsl(116.1, 46.6%, 25.7%);
 }
 
 @property --kds-border-resize-handle-initial {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid hsl(345 0% 10% / 0.4);
+  initial-value: 2px solid hsl(330 0% 10.2% / 0.4);
 }
 
 @property --kds-border-resize-handle-hover {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid hsl(345 0% 10% / 0.64);
+  initial-value: 2px solid hsl(330 0% 10.2% / 0.64);
 }
 
 @property --kds-border-resize-handle-active {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid hsl(345 0% 10% / 0.74);
+  initial-value: 2px solid hsl(330 0% 10.2% / 0.74);
 }
 
 @property --kds-border-color-picker-handle-initial {
 syntax: "<string>";
   inherits: false;
-  initial-value: 2px solid hsl(0 0% 99%);
+  initial-value: 2px solid hsl(0, 0%, 99%);
 }
 
 @property --kds-elevation-level-0 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 0 0 0 hsl(330 0% 73% / 0.32);
+  initial-value: 0 0 0 0 hsl(210 0% 72.5% / 0.32);
 }
 
 @property --kds-elevation-level-1 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 1px 1px 0 hsl(330 0% 73% / 0.32), 0 0 1px 0 hsl(330 0% 32% / 0.14), 0 0 8px 0 hsl(330 0% 32% / 0.12);
+  initial-value: 0 1px 1px 0 hsl(210 0% 72.5% / 0.32), 0 0 1px 0 hsl(180 0% 32.2% / 0.14), 0 0 8px 0 hsl(180 0% 32.2% / 0.12);
 }
 
 @property --kds-elevation-level-3 {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 2px 4px 0 hsl(330 0% 73% / 0.32), 0 4px 8px 0 hsl(330 0% 32% / 0.14), 0 0 20px 0 hsl(330 0% 32% / 0.12);
+  initial-value: 0 2px 4px 0 hsl(210 0% 72.5% / 0.32), 0 4px 8px 0 hsl(180 0% 32.2% / 0.14), 0 0 20px 0 hsl(180 0% 32.2% / 0.12);
 }
 
 @property --kds-fake-border-xs-muted {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 0 0 0.5px hsl(345 0% 10% / 0.2);
+  initial-value: 0 0 0 0.5px hsl(330 0% 10.2% / 0.2);
 }
 
 @property --kds-box-shadow-knob {
 syntax: "<string>";
   inherits: false;
-  initial-value: 0 1px 2px 0 hsl(330 0% 32% / 0.5);
+  initial-value: 0 1px 2px 0 hsl(180 0% 32.2% / 0.5);
 }