@knime/kds-styles 2.9.0 → 3.0.0

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

@@ -1,1539 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-@property --kds-color-surface-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 98%);
-}
-
-@property --kds-color-surface-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 94.1%);
-}
-
-@property --kds-color-surface-subtle {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-page-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 99%);
-}
-
-@property --kds-color-background-neutral-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0);
-}
-
-@property --kds-color-background-neutral-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(340 0% 48.2% / 0.1);
-}
-
-@property --kds-color-background-neutral-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(340 0% 48.2% / 0.2);
-}
-
-@property --kds-color-background-neutral-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(210 0% 72.5% / 0.4);
-}
-
-@property --kds-color-background-neutral-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(210 0% 62.977% / 0.4);
-}
-
-@property --kds-color-background-neutral-bold-active {
-syntax: "<color>";
-  inherits: true;
-  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.2%);
-}
-
-@property --kds-color-background-primary-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 82.128%);
-}
-
-@property --kds-color-background-primary-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(324 0% 74.201%);
-}
-
-@property --kds-color-background-primary-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-background-primary-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(345 0% 13.593%);
-}
-
-@property --kds-color-background-primary-bold-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 11.024%);
-}
-
-@property --kds-color-background-selected-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 94.1%);
-}
-
-@property --kds-color-background-selected-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-background-selected-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-background-selected-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 18.8%);
-}
-
-@property --kds-color-background-selected-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-background-selected-bold-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 12.9%);
-}
-
-@property --kds-color-background-danger-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 100%, 97.1%);
-}
-
-@property --kds-color-background-danger-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(1.5, 100%, 92.4%);
-}
-
-@property --kds-color-background-danger-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(3.4, 100%, 86.1%);
-}
-
-@property --kds-color-background-danger-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(348.8, 90.9%, 34.5%);
-}
-
-@property --kds-color-background-danger-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  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.3%, 20.8%);
-}
-
-@property --kds-color-background-input-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 99%);
-}
-
-@property --kds-color-background-input-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 94.521%);
-}
-
-@property --kds-color-background-input-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 85.683%);
-}
-
-@property --kds-color-background-disabled-default {
-syntax: "<color>";
-  inherits: true;
-  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.2%);
-}
-
-@property --kds-color-background-disabled-danger {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(1.3489 43.031% 37.79%);
-}
-
-@property --kds-color-background-success-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(111.3, 47.5%, 31.4%);
-}
-
-@property --kds-color-background-info-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(209.4, 57.3%, 49.6%);
-}
-
-@property --kds-color-background-info-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.2, 62.9%, 41.2%);
-}
-
-@property --kds-color-background-info-bold-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.3, 60.5%, 33.7%);
-}
-
-@property --kds-color-background-static-info {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(216.7, 100%, 96.5%);
-}
-
-@property --kds-color-background-static-info-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(216.83 100.14% 97.347%);
-}
-
-@property --kds-color-background-static-warning {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(30, 95.2%, 91.8%);
-}
-
-@property --kds-color-background-static-warning-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.601 98.108% 95.778%);
-}
-
-@property --kds-color-background-static-danger {
-syntax: "<color>";
-  inherits: true;
-  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.1%);
-}
-
-@property --kds-color-background-static-success {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(119.4 96.139% 93.64%);
-}
-
-@property --kds-color-background-static-success-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(125.38 64.795% 97.496%);
-}
-
-@property --kds-color-background-static-brand {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.8, 100%, 50%);
-}
-
-@property --kds-color-background-static-overlay {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 12.9%);
-}
-
-@property --kds-color-text-and-icon-neutral {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-text-and-icon-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 32.2%);
-}
-
-@property --kds-color-text-and-icon-subtle {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 43%);
-}
-
-@property --kds-color-text-and-icon-neutral-inverted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 98%);
-}
-
-@property --kds-color-text-and-icon-primary {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-text-and-icon-selected {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-text-and-icon-warning {
-syntax: "<color>";
-  inherits: true;
-  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%, 82.5%);
-}
-
-@property --kds-color-text-and-icon-danger {
-syntax: "<color>";
-  inherits: true;
-  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.1%);
-}
-
-@property --kds-color-text-and-icon-success {
-syntax: "<color>";
-  inherits: true;
-  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.3%, 91.6%);
-}
-
-@property --kds-color-text-and-icon-disabled {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 64%);
-}
-
-@property --kds-color-text-and-icon-disabled-inverted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-text-and-icon-info {
-syntax: "<color>";
-  inherits: true;
-  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.4%);
-}
-
-@property --kds-color-border-neutral {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.4);
-}
-
-@property --kds-color-border-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.2);
-}
-
-@property --kds-color-border-subtle {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.1);
-}
-
-@property --kds-color-border-primary-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 12.9%);
-}
-
-@property --kds-color-border-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-border-selected-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 18.8%);
-}
-
-@property --kds-color-border-selected {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 32.2%);
-}
-
-@property --kds-color-border-selected-accent {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(209.4, 57.3%, 49.6%);
-}
-
-@property --kds-color-border-warning-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(19, 63.1%, 38.2%);
-}
-
-@property --kds-color-border-warning {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(30.8, 79.3%, 73.5%);
-}
-
-@property --kds-color-border-danger-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(348.8, 90.9%, 34.5%);
-}
-
-@property --kds-color-border-danger {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(3.4, 100%, 86.1%);
-}
-
-@property --kds-color-border-success-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(116.1, 46.6%, 25.7%);
-}
-
-@property --kds-color-border-success {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(112, 56.5%, 71.2%);
-}
-
-@property --kds-color-border-info-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.3, 60.5%, 33.7%);
-}
-
-@property --kds-color-border-info {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(214.5, 100%, 84.3%);
-}
-
-@property --kds-color-border-transparent {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(345 0% 11.4% / 0);
-}
-
-@property --kds-color-border-disabled {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-border-brand {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.8, 100%, 50%);
-}
-
-@property --kds-color-border-neutral-bold-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.4);
-}
-
-@property --kds-color-border-neutral-bold-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.64);
-}
-
-@property --kds-color-border-neutral-bold-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 10.2% / 0.74);
-}
-
-@property --kds-color-focus-outline {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(209.4, 57.3%, 49.6%);
-}
-
-@property --kds-color-focus-background {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(215.7 100% 91.8% / 0.4);
-}
-
-@property --kds-color-blanket-default {
-syntax: "<color>";
-  inherits: true;
-  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;
-  initial-value: hsl(359.6, 84.3%, 62.5%);
-}
-
-@property --kds-color-nodes-and-variables-loop {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(187.7, 51.7%, 76.5%);
-}
-
-@property --kds-color-nodes-and-variables-manipulator {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.8, 100%, 50%);
-}
-
-@property --kds-color-nodes-and-variables-predictor {
-syntax: "<color>";
-  inherits: true;
-  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.4%, 60%);
-}
-
-@property --kds-color-nodes-and-variables-visualizer {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(193.1, 60.2%, 43.3%);
-}
-
-@property --kds-color-nodes-and-variables-widget {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(193.1, 60.2%, 43.3%);
-}
-
-@property --kds-color-nodes-and-variables-scope {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(304.6, 27.4%, 46.5%);
-}
-
-@property --kds-color-nodes-and-variables-learner {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(67.3, 67.8%, 54.9%);
-}
-
-@property --kds-color-nodes-and-variables-sink {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(359.6, 84.3%, 62.5%);
-}
-
-@property --kds-color-nodes-and-variables-container {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(69.4, 53.5%, 39.6%);
-}
-
-@property --kds-color-nodes-and-variables-unknown {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-nodes-and-variables-metanode {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 99%);
-}
-
-@property --kds-color-nodes-and-variables-metanode-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 32.2%);
-}
-
-@property --kds-color-nodes-and-variables-component {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-nodes-and-variables-forbidden-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 18.8%);
-}
-
-@property --kds-color-nodes-and-variables-forbidden {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-nodes-and-variables-warning-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(19, 63.1%, 38.2%);
-}
-
-@property --kds-color-nodes-and-variables-warning {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(31, 100%, 82.5%);
-}
-
-@property --kds-color-nodes-and-variables-error-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(348.8, 90.9%, 34.5%);
-}
-
-@property --kds-color-nodes-and-variables-error {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(1.5, 100%, 92.4%);
-}
-
-@property --kds-color-nodes-and-variables-loading-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.3, 60.5%, 33.7%);
-}
-
-@property --kds-color-nodes-and-variables-loading {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(215.7, 100%, 91.8%);
-}
-
-@property --kds-color-nodes-and-variables-configuration {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(64.6, 68.6%, 70.0%);
-}
-
-@property --kds-color-nodes-and-variables-quickform {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(212.1, 78.2%, 67.6%);
-}
-
-@property --kds-color-port-data {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 11.4%);
-}
-
-@property --kds-color-port-flow-variable {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-annotations-special-nodes {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-annotations-special-nodes-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 32.2%);
-}
-
-@property --kds-color-annotations-visualizer {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(193.1, 60.2%, 43.3%);
-}
-
-@property --kds-color-annotations-loading-bold {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.3, 60.5%, 33.7%);
-}
-
-@property --kds-color-annotations-manipulator {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.8, 100%, 50%);
-}
-
-@property --kds-color-annotations-source {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(30, 80.4%, 60%);
-}
-
-@property --kds-color-annotations-sink {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(359.6, 84.3%, 62.5%);
-}
-
-@property --kds-color-annotations-learner {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(67.3, 67.8%, 54.9%);
-}
-
-@property --kds-color-annotations-predictor {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(106.5, 42.6%, 54.9%);
-}
-
-@property --kds-color-annotations-container {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(66.5, 64.4%, 80.2%);
-}
-
-@property --kds-color-annotations-flow-variable {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(173.4, 37.1%, 38.6%);
-}
-
-@property --kds-color-annotations-teal-dark {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(176.7, 82%, 17.5%);
-}
-
-@property --kds-color-annotations-other {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29, 43%, 58%);
-}
-
-@property --kds-color-annotations-loop {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(25, 30%, 35%);
-}
-
-@property --kds-color-state-error {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(353, 74.7%, 44.9%);
-}
-
-@property --kds-color-state-error-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(348, 94.3%, 20.8%);
-}
-
-@property --kds-color-state-warning {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(47.6, 100%, 67.6%);
-}
-
-@property --kds-color-state-warning-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(19, 63.1%, 38.2%);
-}
-
-@property --kds-color-state-success {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(106.5, 42.6%, 54.9%);
-}
-
-@property --kds-color-state-success-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(116.1, 46.6%, 25.7%);
-}
-
-@property --kds-color-state-loading {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(208.3, 60.5%, 33.7%);
-}
-
-@property --kds-color-state-inactive {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 99%);
-}
-
-@property --kds-color-state-inactive-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-state-disabled {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 72.5%);
-}
-
-@property --kds-color-state-disabled-border {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 48.2%);
-}
-
-@property --kds-color-state-background {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-connector-data {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-connector-flow-variable {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(359.6, 84.3%, 62.5%);
-}
-
-@property --kds-color-elevation-top {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(210 0% 72.5% / 0.32);
-}
-
-@property --kds-color-elevation-middle {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(180 0% 32.2% / 0.14);
-}
-
-@property --kds-color-elevation-bottom {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(180 0% 32.2% / 0.12);
-}
-
-@property --kds-color-elevation-knob {
-syntax: "<color>";
-  inherits: true;
-  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.2%);
-}
-
-@property --kds-color-desktop-header-background-muted {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 98%);
-}
-
-@property --kds-color-desktop-header-background-accent {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 98%);
-}
-
-@property --kds-color-desktop-header-text-and-icon-neutral {
-syntax: "<color>";
-  inherits: true;
-  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.2%);
-}
-
-@property --kds-color-desktop-header-border-default {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-toggle-switch-knob-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 99%);
-}
-
-@property --kds-color-toggle-switch-knob-disabled {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 90.2%);
-}
-
-@property --kds-color-toggle-switch-icon-on {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-toggle-switch-icon-off {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 43%);
-}
-
-@property --kds-color-toggle-switch-icon-disabled {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 64%);
-}
-
-@property --kds-color-loading-spinner-progress-on-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(none 0% 98%);
-}
-
-@property --kds-color-loading-spinner-progress-on-surface {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 15.7%);
-}
-
-@property --kds-color-loading-spinner-track-on-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(none 0% 98% / 0.24);
-}
-
-@property --kds-color-loading-spinner-track-on-surface {
-syntax: "<color>";
-  inherits: true;
-  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%, 12.9%);
-}
-
-@property --kds-color-tooltip-text-and-icon-neutral {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0, 0%, 98%);
-}
-
-@property --kds-color-text-highlight-background-default {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(212.1 78.2% 67.6% / 0.6);
-}
-
-@property --kds-color-avatar-background-red {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(3.5, 100%, 79.6%);
-}
-
-@property --kds-color-avatar-background-orange {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(31.2, 82.8%, 65.9%);
-}
-
-@property --kds-color-avatar-background-yellow {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.8, 100%, 50%);
-}
-
-@property --kds-color-avatar-background-green {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(109, 47.2%, 61.4%);
-}
-
-@property --kds-color-avatar-background-teal {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(169.8, 30.6%, 66.1%);
-}
-
-@property --kds-color-avatar-background-blue {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(213.6, 91.6%, 76.7%);
-}
-
-@property --kds-color-avatar-background-purple {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(320.0, 44.7%, 81.6%);
-}
-
-@property --kds-color-avatar-background-aquamarine {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(185.8, 49.2%, 87.6%);
-}
-
-@property --kds-color-avatar-background-grassgreen {
-syntax: "<color>";
-  inherits: true;
-  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%);
-}
-
-@property --kds-color-avatar-background-empty {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(330 0% 94.521%);
-}
-
-@property --kds-color-avatar-text-and-icon-red {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(348, 94.3%, 20.8%);
-}
-
-@property --kds-color-avatar-text-and-icon-orange {
-syntax: "<color>";
-  inherits: true;
-  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.3, 94.2%, 13.5%);
-}
-
-@property --kds-color-avatar-text-and-icon-green {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(132.3, 52%, 14.7%);
-}
-
-@property --kds-color-avatar-text-and-icon-teal {
-syntax: "<color>";
-  inherits: true;
-  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.4, 49.5%, 20.2%);
-}
-
-@property --kds-color-avatar-text-and-icon-purple {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(295.5, 33.9%, 23.1%);
-}
-
-@property --kds-color-avatar-text-and-icon-aquamarine {
-syntax: "<color>";
-  inherits: true;
-  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.2, 39.2%, 24.5%);
-}
-
-@property --kds-color-avatar-text-and-icon-brown {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(23, 27%, 24%);
-}
-
-@property --kds-border-action-transparent {
-syntax: "<string>";
-  inherits: false;
-  initial-value: 1px solid hsl(345 0% 11.4% / 0);
-}
-
-@property --kds-border-action-default {
-syntax: "<string>";
-  inherits: false;
-  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%, 72.5%);
-}
-
-@property --kds-border-action-focused {
-syntax: "<string>";
-  inherits: false;
-  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.2%);
-}
-
-@property --kds-border-action-selected-accent {
-syntax: "<string>";
-  inherits: false;
-  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(348.8, 90.9%, 34.5%);
-}
-
-@property --kds-border-action-primary {
-syntax: "<string>";
-  inherits: false;
-  initial-value: 1px solid hsl(0, 0%, 12.9%);
-}
-
-@property --kds-border-action-input {
-syntax: "<string>";
-  inherits: false;
-  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(330 0% 10.2% / 0.4);
-}
-
-@property --kds-border-base-muted {
-syntax: "<string>";
-  inherits: false;
-  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(330 0% 10.2% / 0.1);
-}
-
-@property --kds-border-base-brand {
-syntax: "<string>";
-  inherits: false;
-  initial-value: 1px solid hsl(50.8, 100%, 50%);
-}
-
-@property --kds-border-base-danger {
-syntax: "<string>";
-  inherits: false;
-  initial-value: 1px solid hsl(3.4, 100%, 86.1%);
-}
-
-@property --kds-border-base-warning {
-syntax: "<string>";
-  inherits: false;
-  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, 56.5%, 71.2%);
-}
-
-@property --kds-border-base-info {
-syntax: "<string>";
-  inherits: false;
-  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.2%);
-}
-
-@property --kds-border-node-status-error {
-syntax: "<string>";
-  inherits: false;
-  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.1%, 38.2%);
-}
-
-@property --kds-border-node-status-success {
-syntax: "<string>";
-  inherits: false;
-  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(330 0% 10.2% / 0.4);
-}
-
-@property --kds-border-resize-handle-hover {
-syntax: "<string>";
-  inherits: false;
-  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(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%);
-}
-
-@property --kds-elevation-level-0 {
-syntax: "<string>";
-  inherits: false;
-  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(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(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(330 0% 10.2% / 0.2);
-}
-
-@property --kds-box-shadow-knob {
-syntax: "<string>";
-  inherits: false;
-  initial-value: 0 1px 2px 0 hsl(180 0% 32.2% / 0.5);
-}