@knime/kds-styles 6.6.0 → 6.7.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @knime/kds-styles
 
+## 6.7.0
+
+## 6.6.1
+
+### Patch Changes
+
+- 02c9f3c: KDS-994: Add pause execution icon for loop nodes
+- aba9f9c: Kds 993 Add missing workflow editor tokens for connector states
+
 ## 6.6.0
 
 ### Patch Changes

package/dist/img/icons/def.ts

@@ -123,6 +123,7 @@ export const iconNames = [
   'pan-mode',
   'parameter',
   'path-separator',
+  'pause-execution',
   'pending-changes',
   'pin',
   'placeholder',

package/dist/img/icons/pause-execution.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M4.5 10V2m3 8V2" vector-effect="non-scaling-stroke"/></svg>

package/dist/tokens/css/_properties.css

@@ -2285,7 +2285,7 @@ syntax: "<color>";
 @property --kds-color-connector-data {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 48.2%));
 }
 
 @property --kds-color-connector-flow-variable {
@@ -2294,6 +2294,24 @@ syntax: "<color>";
   initial-value: hsl(359.6, 84.3%, 62.5%);
 }
 
+@property --kds-color-connector-selected {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
+}
+
+@property --kds-color-connector-highlighted {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+}
+
+@property --kds-color-connector-insertable {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
+}
+
 @property --kds-color-elevation-top {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_variables.css

@@ -383,8 +383,11 @@
   --kds-color-state-disabled: light-dark(hsl(0, 0%, 72.5%), hsl(0, 0%, 22%));
   --kds-color-state-disabled-border: hsl(0, 0%, 48.2%);
   --kds-color-state-background: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 32.2%));
-  --kds-color-connector-data: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  --kds-color-connector-data: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 48.2%));
   --kds-color-connector-flow-variable: hsl(359.6, 84.3%, 62.5%);
+  --kds-color-connector-selected: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
+  --kds-color-connector-highlighted: light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%));
+  --kds-color-connector-insertable: light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%));
   --kds-color-elevation-top: light-dark(hsl(210 0% 72.5% / 0.32), hsl(330 0% 10.2% / 0.9));
   --kds-color-elevation-middle: light-dark(hsl(180 0% 32.2% / 0.14), hsl(330 0% 10.2% / 0.94));
   --kds-color-elevation-bottom: light-dark(hsl(180 0% 32.2% / 0.12), hsl(330 0% 10.2% / 0.98));

package/dist/tokens/ts/color.d.ts

@@ -793,6 +793,18 @@ export type KdsColorTokens = {
          * Specific color for Connectors.
          */
         readonly "flow-variable": KdsColor;
+        /**
+         * Specific color for Connectors that are selected.
+         */
+        readonly selected: KdsColor;
+        /**
+         * Specific color for highlighted in and outgoing Connectors of a selected node.
+         */
+        readonly highlighted: KdsColor;
+        /**
+         * Specific color for Connector below a dragged node to indicate possible insert.
+         */
+        readonly insertable: KdsColor;
     };
     readonly elevation: {
         /**

package/dist/tokens/ts/color.js

@@ -1505,10 +1505,10 @@ export const color = {
     },
     connector: {
         data: {
-            light: { h: 0, s: 0, l: 15.7, alpha: 1 },
-            dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+            light: { h: 0, s: 0, l: 43, alpha: 1 },
+            dark: { h: 0, s: 0, l: 48.2, alpha: 1 },
             css: {
-                value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 48.2%))",
                 variable: "var(--kds-color-connector-data)",
             },
         },
@@ -1520,6 +1520,30 @@ export const color = {
                 variable: "var(--kds-color-connector-flow-variable)",
             },
         },
+        selected: {
+            light: { h: 209.4, s: 57.3, l: 49.6, alpha: 1 },
+            dark: { h: 213.6, s: 91.6, l: 76.7, alpha: 1 },
+            css: {
+                value: "light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%))",
+                variable: "var(--kds-color-connector-selected)",
+            },
+        },
+        highlighted: {
+            light: { h: 0, s: 0, l: 15.7, alpha: 1 },
+            dark: { h: 0, s: 0, l: 94.1, alpha: 1 },
+            css: {
+                value: "light-dark(hsl(0, 0%, 15.7%), hsl(0, 0%, 94.1%))",
+                variable: "var(--kds-color-connector-highlighted)",
+            },
+        },
+        insertable: {
+            light: { h: 116.1, s: 46.6, l: 25.7, alpha: 1 },
+            dark: { h: 106.5, s: 42.6, l: 54.9, alpha: 1 },
+            css: {
+                value: "light-dark(hsl(116.1, 46.6%, 25.7%), hsl(106.5, 42.6%, 54.9%))",
+                variable: "var(--kds-color-connector-insertable)",
+            },
+        },
     },
     elevation: {
         top: {

package/package.json

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