@knime/kds-styles 0.16.1 → 0.17.1

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

@@ -776,60 +776,78 @@ syntax: "<color>";
   initial-value: hsl(25 30% 35%);
 }
 
-@property --kds-color-node-state-error {
+@property --kds-color-state-error {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(353 75% 45%);
 }
 
-@property --kds-color-node-state-error-border {
+@property --kds-color-state-error-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(348 94% 21%);
 }
 
-@property --kds-color-node-state-warning {
+@property --kds-color-state-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(51 100% 50%);
+  initial-value: hsl(48 100% 68%);
 }
 
-@property --kds-color-node-state-warning-border {
+@property --kds-color-state-warning-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(43 100% 19%);
+  initial-value: hsl(19 63% 38%);
 }
 
-@property --kds-color-node-state-executed {
+@property --kds-color-state-success {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(107 43% 55%);
 }
 
-@property --kds-color-node-state-executed-border {
+@property --kds-color-state-success-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(116 47% 26%);
 }
 
-@property --kds-color-node-state-executing {
+@property --kds-color-state-loading {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(208 63% 41%);
+  initial-value: hsl(208 61% 34%);
 }
 
-@property --kds-color-node-state-inactive {
+@property --kds-color-state-inactive {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 99%);
 }
 
-@property --kds-color-node-state-inactive-border {
+@property --kds-color-state-inactive-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 90%);
+}
+
+@property --kds-color-state-disabled {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 73%);
 }
 
+@property --kds-color-state-disabled-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 48%);
+}
+
+@property --kds-color-state-background {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 90%);
+}
+
 @property --kds-color-connector-data {
 syntax: "<color>";
   inherits: true;
@@ -1085,10 +1103,10 @@ syntax: "<string>";
 @property --kds-border-node-status-empty {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(0 0% 73%);
+  initial-value: 1px solid hsl(0 0% 90%);
 }
 
-@property --kds-border-node-status-idle {
+@property --kds-border-node-status-error {
 syntax: "<string>";
   inherits: false;
   initial-value: 1px solid hsl(348 94% 21%);
@@ -1097,10 +1115,10 @@ syntax: "<string>";
 @property --kds-border-node-status-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid hsl(43 100% 19%);
+  initial-value: 1px solid hsl(19 63% 38%);
 }
 
-@property --kds-border-node-status-executed {
+@property --kds-border-node-status-success {
 syntax: "<string>";
   inherits: false;
   initial-value: 1px solid hsl(116 47% 26%);

package/dist/tokens/css/_properties.css

@@ -1970,58 +1970,76 @@ syntax: "<color>";
   initial-value: light-dark(hsl(25 30% 35%), hsl(27 35% 44%));
 }
 
-@property --kds-color-node-state-error {
+@property --kds-color-state-error {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(353 75% 45%), hsl(348 94% 21%));
+  initial-value: light-dark(hsl(353 75% 45%), hsl(348 97% 27%));
 }
 
-@property --kds-color-node-state-error-border {
+@property --kds-color-state-error-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
+  initial-value: light-dark(hsl(348 94% 21%), hsl(3 100% 72%));
 }
 
-@property --kds-color-node-state-warning {
+@property --kds-color-state-warning {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(51 100% 50%), hsl(43 100% 19%));
+  initial-value: light-dark(hsl(48 100% 68%), hsl(44 100% 26%));
 }
 
-@property --kds-color-node-state-warning-border {
+@property --kds-color-state-warning-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
+  initial-value: light-dark(hsl(19 63% 38%), hsl(49 99% 44%));
 }
 
-@property --kds-color-node-state-executed {
+@property --kds-color-state-success {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(107 43% 55%), hsl(116 47% 26%));
+  initial-value: light-dark(hsl(107 43% 55%), hsl(108 46% 37%));
 }
 
-@property --kds-color-node-state-executed-border {
+@property --kds-color-state-success-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
 }
 
-@property --kds-color-node-state-executing {
+@property --kds-color-state-loading {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(208 63% 41%), hsl(211 67% 59%));
+  initial-value: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
 }
 
-@property --kds-color-node-state-inactive {
+@property --kds-color-state-inactive {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 11%));
 }
 
-@property --kds-color-node-state-inactive-border {
+@property --kds-color-state-inactive-border {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
+}
+
+@property --kds-color-state-disabled {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 22%));
+}
+
+@property --kds-color-state-disabled-border {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 48%);
+}
+
+@property --kds-color-state-background {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
 }
 
 @property --kds-color-connector-data {
@@ -2369,22 +2387,22 @@ syntax: "<string>";
 @property --kds-border-node-status-empty {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  initial-value: 1px solid light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
 }
 
-@property --kds-border-node-status-idle {
+@property --kds-border-node-status-error {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
+  initial-value: 1px solid light-dark(hsl(348 94% 21%), hsl(3 100% 72%));
 }
 
 @property --kds-border-node-status-warning {
 syntax: "<string>";
   inherits: false;
-  initial-value: 1px solid light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
+  initial-value: 1px solid light-dark(hsl(19 63% 38%), hsl(49 99% 44%));
 }
 
-@property --kds-border-node-status-executed {
+@property --kds-border-node-status-success {
 syntax: "<string>";
   inherits: false;
   initial-value: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));

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

@@ -132,15 +132,18 @@
   --kds-color-annotations-teal-dark: hsl(177 82% 18%);
   --kds-color-annotations-other: hsl(29 43% 58%);
   --kds-color-annotations-loop: hsl(25 30% 35%);
-  --kds-color-node-state-error: hsl(353 75% 45%);
-  --kds-color-node-state-error-border: hsl(348 94% 21%);
-  --kds-color-node-state-warning: hsl(51 100% 50%);
-  --kds-color-node-state-warning-border: hsl(43 100% 19%);
-  --kds-color-node-state-executed: hsl(107 43% 55%);
-  --kds-color-node-state-executed-border: hsl(116 47% 26%);
-  --kds-color-node-state-executing: hsl(208 63% 41%);
-  --kds-color-node-state-inactive: hsl(0 0% 99%);
-  --kds-color-node-state-inactive-border: hsl(0 0% 73%);
+  --kds-color-state-error: hsl(353 75% 45%);
+  --kds-color-state-error-border: hsl(348 94% 21%);
+  --kds-color-state-warning: hsl(48 100% 68%);
+  --kds-color-state-warning-border: hsl(19 63% 38%);
+  --kds-color-state-success: hsl(107 43% 55%);
+  --kds-color-state-success-border: hsl(116 47% 26%);
+  --kds-color-state-loading: hsl(208 61% 34%);
+  --kds-color-state-inactive: hsl(0 0% 99%);
+  --kds-color-state-inactive-border: hsl(0 0% 90%);
+  --kds-color-state-disabled: hsl(0 0% 73%);
+  --kds-color-state-disabled-border: hsl(0 0% 48%);
+  --kds-color-state-background: hsl(0 0% 90%);
   --kds-color-connector-data: hsl(0 0% 16%);
   --kds-color-connector-flow-variable: hsl(360 84% 63%);
   --kds-color-elevation-top: hsl(330 0% 73% / 0.32);
@@ -183,10 +186,10 @@
   --kds-border-base-warning: 1px solid hsl(31 79% 74%);
   --kds-border-base-success: 1px solid hsl(112 57% 71%);
   --kds-border-base-info: 1px solid hsl(215 100% 84%);
-  --kds-border-node-status-empty: 1px solid hsl(0 0% 73%);
-  --kds-border-node-status-idle: 1px solid hsl(348 94% 21%);
-  --kds-border-node-status-warning: 1px solid hsl(43 100% 19%);
-  --kds-border-node-status-executed: 1px solid hsl(116 47% 26%);
+  --kds-border-node-status-empty: 1px solid hsl(0 0% 90%);
+  --kds-border-node-status-error: 1px solid hsl(348 94% 21%);
+  --kds-border-node-status-warning: 1px solid hsl(19 63% 38%);
+  --kds-border-node-status-success: 1px solid hsl(116 47% 26%);
   --kds-border-resize-handle-initial: 2px solid hsl(345 0% 10% / 0.4);
   --kds-border-resize-handle-hover: 2px solid hsl(345 0% 10% / 0.64);
   --kds-border-resize-handle-active: 2px solid hsl(345 0% 10% / 0.74);

package/dist/tokens/css/_variables.css

@@ -331,15 +331,18 @@
   --kds-color-annotations-teal-dark: light-dark(hsl(177 82% 18%), hsl(176 67% 22%));
   --kds-color-annotations-other: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
   --kds-color-annotations-loop: light-dark(hsl(25 30% 35%), hsl(27 35% 44%));
-  --kds-color-node-state-error: light-dark(hsl(353 75% 45%), hsl(348 94% 21%));
-  --kds-color-node-state-error-border: light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
-  --kds-color-node-state-warning: light-dark(hsl(51 100% 50%), hsl(43 100% 19%));
-  --kds-color-node-state-warning-border: light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
-  --kds-color-node-state-executed: light-dark(hsl(107 43% 55%), hsl(116 47% 26%));
-  --kds-color-node-state-executed-border: light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
-  --kds-color-node-state-executing: light-dark(hsl(208 63% 41%), hsl(211 67% 59%));
-  --kds-color-node-state-inactive: light-dark(hsl(0 0% 99%), hsl(0 0% 11%));
-  --kds-color-node-state-inactive-border: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  --kds-color-state-error: light-dark(hsl(353 75% 45%), hsl(348 97% 27%));
+  --kds-color-state-error-border: light-dark(hsl(348 94% 21%), hsl(3 100% 72%));
+  --kds-color-state-warning: light-dark(hsl(48 100% 68%), hsl(44 100% 26%));
+  --kds-color-state-warning-border: light-dark(hsl(19 63% 38%), hsl(49 99% 44%));
+  --kds-color-state-success: light-dark(hsl(107 43% 55%), hsl(108 46% 37%));
+  --kds-color-state-success-border: light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
+  --kds-color-state-loading: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+  --kds-color-state-inactive: light-dark(hsl(0 0% 99%), hsl(0 0% 11%));
+  --kds-color-state-inactive-border: light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
+  --kds-color-state-disabled: light-dark(hsl(0 0% 73%), hsl(0 0% 22%));
+  --kds-color-state-disabled-border: hsl(0 0% 48%);
+  --kds-color-state-background: light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
   --kds-color-connector-data: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-connector-flow-variable: hsl(360 84% 63%);
   --kds-color-skeleton-default: light-dark(linear-gradient(90deg, hsla(0, 0%, 10%, 0.02) 0%, hsla(0, 0%, 10%, 0.15) 25%, hsla(0, 0%, 10%, 0.02) 65%, hsla(0, 0%, 10%, 0.00) 100%), linear-gradient(90deg, hsla(0, 0%, 94%, 0.02) 0%, hsla(0, 0%, 94%, 0.15) 25%, hsla(0, 0%, 94%, 0.02) 65%, hsla(0, 0%, 94%, 0.00) 100%));
@@ -397,10 +400,10 @@
   --kds-border-base-warning: 1px solid light-dark(hsl(31 79% 74%), hsl(13 66% 23%));
   --kds-border-base-success: 1px solid light-dark(hsl(112 57% 71%), hsl(124 47% 21%));
   --kds-border-base-info: 1px solid light-dark(hsl(215 100% 84%), hsl(210 50% 28%));
-  --kds-border-node-status-empty: 1px solid light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
-  --kds-border-node-status-idle: 1px solid light-dark(hsl(348 94% 21%), hsl(360 84% 63%));
-  --kds-border-node-status-warning: 1px solid light-dark(hsl(43 100% 19%), hsl(51 100% 50%));
-  --kds-border-node-status-executed: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
+  --kds-border-node-status-empty: 1px solid light-dark(hsl(0 0% 90%), hsl(0 0% 32%));
+  --kds-border-node-status-error: 1px solid light-dark(hsl(348 94% 21%), hsl(3 100% 72%));
+  --kds-border-node-status-warning: 1px solid light-dark(hsl(19 63% 38%), hsl(49 99% 44%));
+  --kds-border-node-status-success: 1px solid light-dark(hsl(116 47% 26%), hsl(107 43% 55%));
   --kds-border-resize-handle-initial: 2px solid light-dark(hsl(345 0% 10% / 0.4), hsl(330 0% 99% / 0.4));
   --kds-border-resize-handle-hover: 2px solid light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
   --kds-border-resize-handle-active: 2px solid light-dark(hsl(345 0% 10% / 0.74), hsl(330 0% 99% / 0.68));

package/package.json

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