@knime/kds-styles 0.0.16 → 0.1.0

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

@@ -20,7 +20,7 @@ syntax: "<color>";
   initial-value: hsl(0 0% 90%);
 }
 
-@property --kds-color-background-page-default {
+@property --kds-color-page-default {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 99%);
@@ -137,7 +137,7 @@ syntax: "<color>";
 @property --kds-color-background-danger-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(2.4731 100% 96.876%);
+  initial-value: hsl(0 100% 97%);
 }
 
 @property --kds-color-background-danger-hover {
@@ -170,58 +170,40 @@ syntax: "<color>";
   initial-value: hsl(348 94% 21%);
 }
 
-@property --kds-color-background-warning-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.514 98.554% 96.838%);
-}
-
-@property --kds-color-background-warning-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.512 39.352% 92.463%);
-}
-
-@property --kds-color-background-warning-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(29.51 23.726% 88.128%);
-}
-
-@property --kds-color-background-warning-bold-initial {
+@property --kds-color-background-input-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(22 60% 45%);
+  initial-value: hsl(0 0% 99%);
 }
 
-@property --kds-color-background-warning-bold-hover {
+@property --kds-color-background-input-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(21.929 58.367% 37.68%);
+  initial-value: hsl(330 0% 94.521%);
 }
 
-@property --kds-color-background-warning-bold-active {
+@property --kds-color-background-input-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(21.825 55.638% 28.836%);
+  initial-value: hsl(330 0% 85.683%);
 }
 
-@property --kds-color-background-success-initial {
+@property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.68 97.025% 96.828%);
+  initial-value: hsl(180 0% 48% / 0.48);
 }
 
-@property --kds-color-background-success-hover {
+@property --kds-color-background-disabled-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.68 38.813% 92.454%);
+  initial-value: hsl(0 0% 48%);
 }
 
-@property --kds-color-background-success-active {
+@property --kds-color-background-disabled-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(118.67 23.411% 88.119%);
+  initial-value: hsl(1.5788 43.542% 37.998%);
 }
 
 @property --kds-color-background-success-bold-initial {
@@ -230,108 +212,60 @@ syntax: "<color>";
   initial-value: hsl(111 48% 31%);
 }
 
-@property --kds-color-background-success-bold-hover {
+@property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(110.47 45.877% 26.246%);
+  initial-value: hsl(217 100% 97%);
 }
 
-@property --kds-color-background-success-bold-active {
+@property --kds-color-background-static-info-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(109.63 42.516% 20.454%);
+  initial-value: hsl(217.11 100.13% 97.725%);
 }
 
-@property --kds-color-background-info-initial {
+@property --kds-color-background-static-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.77 100% 96.851%);
+  initial-value: hsl(30 95% 92%);
 }
 
-@property --kds-color-background-info-hover {
+@property --kds-color-background-static-warning-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.77 39.826% 92.476%);
+  initial-value: hsl(29.611 97.821% 95.88%);
 }
 
-@property --kds-color-background-info-active {
+@property --kds-color-background-static-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(216.78 23.993% 88.14%);
+  initial-value: hsl(2 100% 92%);
 }
 
-@property --kds-color-background-info-bold-initial {
+@property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 63% 41%);
+  initial-value: hsl(0 100% 97%);
 }
 
-@property --kds-color-background-info-bold-hover {
+@property --kds-color-background-static-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208.92 58.259% 34.934%);
+  initial-value: hsl(119.44 95.797% 93.942%);
 }
 
-@property --kds-color-background-info-bold-active {
+@property --kds-color-background-static-success-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(210.19 52% 27.273%);
+  initial-value: hsl(124.89 65.088% 97.723%);
 }
 
-@property --kds-color-background-brand-initial {
+@property --kds-color-background-static-brand {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(51 100% 50%);
 }
 
-@property --kds-color-background-brand-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(50.165 84.159% 44.695%);
-}
-
-@property --kds-color-background-brand-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(49.385 73.102% 35.333%);
-}
-
-@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(180 0% 48% / 0.48);
-}
-
-@property --kds-color-background-disabled-primary {
-syntax: "<color>";
-  inherits: true;
-  initial-value: hsl(0 0% 48%);
-}
-
-@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;

package/dist/tokens/css/_properties.css

@@ -1202,7 +1202,7 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
 }
 
-@property --kds-color-background-page-default {
+@property --kds-color-page-default {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
@@ -1319,7 +1319,7 @@ syntax: "<color>";
 @property --kds-color-background-danger-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(2.4731 100% 96.876%), hsl(356.66 65.093% 15.235%));
+  initial-value: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
 }
 
 @property --kds-color-background-danger-hover {
@@ -1352,168 +1352,102 @@ syntax: "<color>";
   initial-value: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
 }
 
-@property --kds-color-background-warning-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.514 98.554% 96.838%), hsl(14.626 60.206% 14.715%));
-}
-
-@property --kds-color-background-warning-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.512 39.352% 92.463%), hsl(14.171 48.783% 17.797%));
-}
-
-@property --kds-color-background-warning-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(29.51 23.726% 88.128%), hsl(14.532 35.821% 23.829%));
-}
-
-@property --kds-color-background-warning-bold-initial {
+@property --kds-color-background-input-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(22 60% 45%), hsl(19 63% 38%));
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
 }
 
-@property --kds-color-background-warning-bold-hover {
+@property --kds-color-background-input-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(21.929 58.367% 37.68%), hsl(19.04 44.421% 47.984%));
+  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
 }
 
-@property --kds-color-background-warning-bold-active {
+@property --kds-color-background-input-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(21.825 55.638% 28.836%), hsl(19.038 42.206% 52.935%));
+  initial-value: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
 }
 
-@property --kds-color-background-success-initial {
+@property --kds-color-background-disabled-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.68 97.025% 96.828%), hsl(128.09 38.652% 10.529%));
+  initial-value: hsl(180 0% 48% / 0.48);
 }
 
-@property --kds-color-background-success-hover {
+@property --kds-color-background-disabled-primary {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.68 38.813% 92.454%), hsl(126.93 29.012% 13.533%));
+  initial-value: hsl(173.77 18.031% 40.307%);
 }
 
-@property --kds-color-background-success-active {
+@property --kds-color-background-disabled-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(118.67 23.411% 88.119%), hsl(125.21 18.669% 19.69%));
+  initial-value: hsl(1.5788 43.542% 37.998%);
 }
 
 @property --kds-color-background-success-bold-initial {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(111 48% 31%), hsl(116 47% 26%));
+  initial-value: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
 }
 
-@property --kds-color-background-success-bold-hover {
+@property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(110.47 45.877% 26.246%), hsl(112.26 28.404% 37.07%));
+  initial-value: light-dark(hsl(217 100% 97%), hsl(210 50% 28%));
 }
 
-@property --kds-color-background-success-bold-active {
+@property --kds-color-background-static-info-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(109.63 42.516% 20.454%), hsl(111.19 22.717% 42.67%));
+  initial-value: light-dark(hsl(217.11 100.13% 97.725%), hsl(211.86 41.035% 17.864%));
 }
 
-@property --kds-color-background-info-initial {
+@property --kds-color-background-static-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.77 100% 96.851%), hsl(211.86 41.035% 17.864%));
+  initial-value: light-dark(hsl(30 95% 92%), hsl(13 66% 23%));
 }
 
-@property --kds-color-background-info-hover {
+@property --kds-color-background-static-warning-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.77 39.826% 92.476%), hsl(212.68 33.733% 20.806%));
+  initial-value: light-dark(hsl(29.611 97.821% 95.88%), hsl(14.626 60.206% 14.715%));
 }
 
-@property --kds-color-background-info-active {
+@property --kds-color-background-static-danger {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(216.78 23.993% 88.14%), hsl(213.81 24.237% 26.721%));
+  initial-value: light-dark(hsl(2 100% 92%), hsl(348 97% 27%));
 }
 
-@property --kds-color-background-info-bold-initial {
+@property --kds-color-background-static-danger-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(208 63% 41%), hsl(208 61% 34%));
+  initial-value: hsl(0 100% 97%);
 }
 
-@property --kds-color-background-info-bold-hover {
+@property --kds-color-background-static-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(208.92 58.259% 34.934%), hsl(211.76 34.965% 45.77%));
+  initial-value: light-dark(hsl(119.44 95.797% 93.942%), hsl(124 47% 21%));
 }
 
-@property --kds-color-background-info-bold-active {
+@property --kds-color-background-static-success-muted {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(210.19 52% 27.273%), hsl(212.8 29.174% 51.036%));
+  initial-value: light-dark(hsl(124.89 65.088% 97.723%), hsl(128.09 38.652% 10.529%));
 }
 
-@property --kds-color-background-brand-initial {
+@property --kds-color-background-static-brand {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(51 100% 50%);
 }
 
-@property --kds-color-background-brand-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(50.165 84.159% 44.695%), hsl(48.411 100% 65.242%));
-}
-
-@property --kds-color-background-brand-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(49.385 73.102% 35.333%), hsl(47.704 100% 69.488%));
-}
-
-@property --kds-color-background-input-initial {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
-}
-
-@property --kds-color-background-input-hover {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
-}
-
-@property --kds-color-background-input-active {
-syntax: "<color>";
-  inherits: true;
-  initial-value: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
-}
-
-@property --kds-color-background-disabled-default {
-syntax: "<color>";
-  inherits: true;
-  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;
@@ -1769,7 +1703,7 @@ syntax: "<color>";
 @property --kds-color-blanket-default {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(330 0% 11% / 0.8), hsl(240 0% 13% / 0.6));
+  initial-value: hsl(330 0% 11% / 0.8);
 }
 
 @property --kds-color-nodes-and-variables-flow-variable {
@@ -2714,6 +2648,12 @@ syntax: "<length>";
   initial-value: 720px;
 }
 
+@property --kds-dimension-component-width-61x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 976px;
+}
+
 @property --kds-dimension-icon-0-56x {
 syntax: "<length>";
   inherits: false;
@@ -3048,4 +2988,10 @@ syntax: "*";
 syntax: "*";
   inherits: false;
   initial-value: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+}
+
+@property --kds-color-background-static-danger-bold {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(356.66 65.093% 15.235%);
 }

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

@@ -6,7 +6,7 @@
   --kds-color-surface-default: hsl(0 0% 98%);
   --kds-color-surface-muted: hsl(0 0% 94%);
   --kds-color-surface-subtle: hsl(0 0% 90%);
-  --kds-color-background-page-default: hsl(0 0% 99%);
+  --kds-color-page-default: hsl(0 0% 99%);
   --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
   --kds-color-background-neutral-hover: hsl(180 0% 48% / 0.16);
   --kds-color-background-neutral-active: hsl(180 0% 48% / 0.32);
@@ -25,39 +25,28 @@
   --kds-color-background-selected-bold-initial: hsl(0 0% 19%);
   --kds-color-background-selected-bold-hover: hsl(0 0% 16%);
   --kds-color-background-selected-bold-active: hsl(0 0% 13%);
-  --kds-color-background-danger-initial: hsl(2.4731 100% 96.876%);
+  --kds-color-background-danger-initial: hsl(0 100% 97%);
   --kds-color-background-danger-hover: hsl(3 100% 86%);
   --kds-color-background-danger-active: hsl(4 100% 80%);
   --kds-color-background-danger-bold-initial: hsl(349 91% 35%);
   --kds-color-background-danger-bold-hover: hsl(348 97% 27%);
   --kds-color-background-danger-bold-active: hsl(348 94% 21%);
-  --kds-color-background-warning-initial: hsl(29.514 98.554% 96.838%);
-  --kds-color-background-warning-hover: hsl(29.512 39.352% 92.463%);
-  --kds-color-background-warning-active: hsl(29.51 23.726% 88.128%);
-  --kds-color-background-warning-bold-initial: hsl(22 60% 45%);
-  --kds-color-background-warning-bold-hover: hsl(21.929 58.367% 37.68%);
-  --kds-color-background-warning-bold-active: hsl(21.825 55.638% 28.836%);
-  --kds-color-background-success-initial: hsl(118.68 97.025% 96.828%);
-  --kds-color-background-success-hover: hsl(118.68 38.813% 92.454%);
-  --kds-color-background-success-active: hsl(118.67 23.411% 88.119%);
-  --kds-color-background-success-bold-initial: hsl(111 48% 31%);
-  --kds-color-background-success-bold-hover: hsl(110.47 45.877% 26.246%);
-  --kds-color-background-success-bold-active: hsl(109.63 42.516% 20.454%);
-  --kds-color-background-info-initial: hsl(216.77 100% 96.851%);
-  --kds-color-background-info-hover: hsl(216.77 39.826% 92.476%);
-  --kds-color-background-info-active: hsl(216.78 23.993% 88.14%);
-  --kds-color-background-info-bold-initial: hsl(208 63% 41%);
-  --kds-color-background-info-bold-hover: hsl(208.92 58.259% 34.934%);
-  --kds-color-background-info-bold-active: hsl(210.19 52% 27.273%);
-  --kds-color-background-brand-initial: hsl(51 100% 50%);
-  --kds-color-background-brand-hover: hsl(50.165 84.159% 44.695%);
-  --kds-color-background-brand-active: hsl(49.385 73.102% 35.333%);
   --kds-color-background-input-initial: hsl(0 0% 99%);
   --kds-color-background-input-hover: hsl(330 0% 94.521%);
   --kds-color-background-input-active: hsl(330 0% 85.683%);
   --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
   --kds-color-background-disabled-primary: hsl(0 0% 48%);
   --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
+  --kds-color-background-success-bold-initial: hsl(111 48% 31%);
+  --kds-color-background-static-info: hsl(217 100% 97%);
+  --kds-color-background-static-info-muted: hsl(217.11 100.13% 97.725%);
+  --kds-color-background-static-warning: hsl(30 95% 92%);
+  --kds-color-background-static-warning-muted: hsl(29.611 97.821% 95.88%);
+  --kds-color-background-static-danger: hsl(2 100% 92%);
+  --kds-color-background-static-danger-muted: hsl(0 100% 97%);
+  --kds-color-background-static-success: hsl(119.44 95.797% 93.942%);
+  --kds-color-background-static-success-muted: hsl(124.89 65.088% 97.723%);
+  --kds-color-background-static-brand: hsl(51 100% 50%);
   --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
   --kds-color-text-and-icon-muted: hsl(0 0% 32%);
   --kds-color-text-and-icon-subtle: hsl(0 0% 43%);

package/dist/tokens/css/_variables.css

@@ -203,7 +203,7 @@
   --kds-color-surface-default: light-dark(hsl(0 0% 98%), hsl(0 0% 16%));
   --kds-color-surface-muted: light-dark(hsl(0 0% 94%), hsl(0 0% 19%));
   --kds-color-surface-subtle: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
-  --kds-color-background-page-default: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-page-default: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
   --kds-color-background-neutral-initial: hsl(330 0% 11% / 0);
   --kds-color-background-neutral-hover: light-dark(hsl(180 0% 48% / 0.16), hsl(300 0% 90% / 0.16));
   --kds-color-background-neutral-active: light-dark(hsl(180 0% 48% / 0.32), hsl(180 0% 48% / 0.56));
@@ -222,39 +222,28 @@
   --kds-color-background-selected-bold-initial: light-dark(hsl(174 48% 31%), hsl(176 67% 22%));
   --kds-color-background-selected-bold-hover: light-dark(hsl(176 67% 22%), hsl(174 48% 31%));
   --kds-color-background-selected-bold-active: light-dark(hsl(177 82% 18%), hsl(172 27% 48%));
-  --kds-color-background-danger-initial: light-dark(hsl(2.4731 100% 96.876%), hsl(356.66 65.093% 15.235%));
+  --kds-color-background-danger-initial: light-dark(hsl(0 100% 97%), hsl(356.66 65.093% 15.235%));
   --kds-color-background-danger-hover: light-dark(hsl(3 100% 86%), hsl(349 91% 35% / 0.72));
   --kds-color-background-danger-active: light-dark(hsl(4 100% 80%), hsl(353 75% 45% / 0.72));
   --kds-color-background-danger-bold-initial: light-dark(hsl(349 91% 35%), hsl(348 97% 27%));
   --kds-color-background-danger-bold-hover: light-dark(hsl(348 97% 27%), hsl(353 75% 45% / 0.8));
   --kds-color-background-danger-bold-active: light-dark(hsl(348 94% 21%), hsl(356 77% 54% / 0.8));
-  --kds-color-background-warning-initial: light-dark(hsl(29.514 98.554% 96.838%), hsl(14.626 60.206% 14.715%));
-  --kds-color-background-warning-hover: light-dark(hsl(29.512 39.352% 92.463%), hsl(14.171 48.783% 17.797%));
-  --kds-color-background-warning-active: light-dark(hsl(29.51 23.726% 88.128%), hsl(14.532 35.821% 23.829%));
-  --kds-color-background-warning-bold-initial: light-dark(hsl(22 60% 45%), hsl(19 63% 38%));
-  --kds-color-background-warning-bold-hover: light-dark(hsl(21.929 58.367% 37.68%), hsl(19.04 44.421% 47.984%));
-  --kds-color-background-warning-bold-active: light-dark(hsl(21.825 55.638% 28.836%), hsl(19.038 42.206% 52.935%));
-  --kds-color-background-success-initial: light-dark(hsl(118.68 97.025% 96.828%), hsl(128.09 38.652% 10.529%));
-  --kds-color-background-success-hover: light-dark(hsl(118.68 38.813% 92.454%), hsl(126.93 29.012% 13.533%));
-  --kds-color-background-success-active: light-dark(hsl(118.67 23.411% 88.119%), hsl(125.21 18.669% 19.69%));
-  --kds-color-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(116 47% 26%));
-  --kds-color-background-success-bold-hover: light-dark(hsl(110.47 45.877% 26.246%), hsl(112.26 28.404% 37.07%));
-  --kds-color-background-success-bold-active: light-dark(hsl(109.63 42.516% 20.454%), hsl(111.19 22.717% 42.67%));
-  --kds-color-background-info-initial: light-dark(hsl(216.77 100% 96.851%), hsl(211.86 41.035% 17.864%));
-  --kds-color-background-info-hover: light-dark(hsl(216.77 39.826% 92.476%), hsl(212.68 33.733% 20.806%));
-  --kds-color-background-info-active: light-dark(hsl(216.78 23.993% 88.14%), hsl(213.81 24.237% 26.721%));
-  --kds-color-background-info-bold-initial: light-dark(hsl(208 63% 41%), hsl(208 61% 34%));
-  --kds-color-background-info-bold-hover: light-dark(hsl(208.92 58.259% 34.934%), hsl(211.76 34.965% 45.77%));
-  --kds-color-background-info-bold-active: light-dark(hsl(210.19 52% 27.273%), hsl(212.8 29.174% 51.036%));
-  --kds-color-background-brand-initial: hsl(51 100% 50%);
-  --kds-color-background-brand-hover: light-dark(hsl(50.165 84.159% 44.695%), hsl(48.411 100% 65.242%));
-  --kds-color-background-brand-active: light-dark(hsl(49.385 73.102% 35.333%), hsl(47.704 100% 69.488%));
   --kds-color-background-input-initial: light-dark(hsl(0 0% 99%), hsl(0 0% 22%));
   --kds-color-background-input-hover: light-dark(hsl(330 0% 94.521%), hsl(330 0% 30.187%));
   --kds-color-background-input-active: light-dark(hsl(330 0% 85.683%), hsl(336 0% 38.771%));
   --kds-color-background-disabled-default: hsl(180 0% 48% / 0.48);
   --kds-color-background-disabled-primary: hsl(173.77 18.031% 40.307%);
   --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
+  --kds-color-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
+  --kds-color-background-static-info: light-dark(hsl(217 100% 97%), hsl(210 50% 28%));
+  --kds-color-background-static-info-muted: light-dark(hsl(217.11 100.13% 97.725%), hsl(211.86 41.035% 17.864%));
+  --kds-color-background-static-warning: light-dark(hsl(30 95% 92%), hsl(13 66% 23%));
+  --kds-color-background-static-warning-muted: light-dark(hsl(29.611 97.821% 95.88%), hsl(14.626 60.206% 14.715%));
+  --kds-color-background-static-danger: light-dark(hsl(2 100% 92%), hsl(348 97% 27%));
+  --kds-color-background-static-danger-muted: hsl(0 100% 97%);
+  --kds-color-background-static-success: light-dark(hsl(119.44 95.797% 93.942%), hsl(124 47% 21%));
+  --kds-color-background-static-success-muted: light-dark(hsl(124.89 65.088% 97.723%), hsl(128.09 38.652% 10.529%));
+  --kds-color-background-static-brand: hsl(51 100% 50%);
   --kds-color-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
   --kds-color-text-and-icon-subtle: light-dark(hsl(0 0% 43%), hsl(0 0% 73%));
@@ -297,7 +286,7 @@
   --kds-color-border-neutral-bold-active: light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));
   --kds-color-focus-outline: light-dark(hsl(209 57% 50%), hsl(214 92% 77%));
   --kds-color-focus-background: light-dark(hsl(217 100% 97%), hsl(211.86 41.035% 17.864%));
-  --kds-color-blanket-default: light-dark(hsl(330 0% 11% / 0.8), hsl(240 0% 13% / 0.6));
+  --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
   --kds-color-nodes-and-variables-flow-variable: light-dark(hsl(360 84% 63%), hsl(0 100% 66%));
   --kds-color-nodes-and-variables-loop: hsl(188 52% 77%);
   --kds-color-nodes-and-variables-manipulator: hsl(51 100% 50%);
@@ -455,6 +444,7 @@
   --kds-dimension-component-width-25x: 400px;
   --kds-dimension-component-width-32x: 512px;
   --kds-dimension-component-width-45x: 720px;
+  --kds-dimension-component-width-61x: 976px;
   --kds-dimension-icon-0-56x: 9px;
   --kds-dimension-icon-0-75x: 12px;
   --kds-dimension-icon-1x: 16px;
@@ -511,4 +501,5 @@
   --kds-elevation-level-1: 0 1px 1px 0 light-dark(hsl(330 0% 73% / 0.32), hsl(345 0% 10% / 0.9)), 0 0 1px 0 light-dark(hsl(330 0% 32% / 0.14), hsl(345 0% 10% / 0.94)), 0 0 8px 0 light-dark(hsl(330 0% 32% / 0.12), hsl(345 0% 10% / 0.98));
   --kds-elevation-level-3: 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));
   --kds-box-shadow-knob: 0 1px 2px 0 light-dark(hsl(330 0% 32% / 0.5), hsl(345 0% 10% / 0.6));
+  --kds-color-background-static-danger-bold: hsl(356.66 65.093% 15.235%);
 }

package/package.json

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