@knime/kds-styles 6.5.0 → 6.6.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @knime/kds-styles
 
+## 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
+
+- 19c91aa: KDS-992: Add width tokens for content optimization e.g. of multi column layouts inside containers
+
 ## 6.5.0
 
 ## 6.4.0

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;
@@ -3122,6 +3140,18 @@ syntax: "<length>";
   initial-value: 64px;
 }
 
+@property --kds-dimension-component-width-6x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 96px;
+}
+
+@property --kds-dimension-component-width-8x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 128px;
+}
+
 @property --kds-dimension-component-width-12x {
 syntax: "<length>";
   inherits: false;

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));
@@ -523,6 +526,8 @@
   --kds-dimension-component-width-2-25x: 36px;
   --kds-dimension-component-width-2-75x: 44px;
   --kds-dimension-component-width-4x: 64px;
+  --kds-dimension-component-width-6x: 96px;
+  --kds-dimension-component-width-8x: 128px;
   --kds-dimension-component-width-12x: 192px;
   --kds-dimension-component-width-12-5x: 200px;
   --kds-dimension-component-width-16x: 256px;

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/dist/tokens/ts/dimension.d.ts

@@ -128,6 +128,14 @@ export type KdsDimensionTokens = {
              * Extra large component width (64px). Use for large interactive elements.
              */
             readonly "4x": KdsDimension;
+            /**
+             * Extra large component width (96px). Use for width and max-width sizing of multi-column content or components that must align with surrounding layout.
+             */
+            readonly "6x": KdsDimension;
+            /**
+             * Extra large component width (128px). Use for width and max-width sizing of components that must align with a wider layout unit.
+             */
+            readonly "8x": KdsDimension;
             /**
              * Container width (192px). Use for listContainer and menuContainer.
              */

package/dist/tokens/ts/dimension.js

@@ -247,6 +247,22 @@ export const dimension = {
                     variable: "var(--kds-dimension-component-width-4x)",
                 },
             },
+            "6x": {
+                value: 96,
+                unit: "px",
+                css: {
+                    value: "96px",
+                    variable: "var(--kds-dimension-component-width-6x)",
+                },
+            },
+            "8x": {
+                value: 128,
+                unit: "px",
+                css: {
+                    value: "128px",
+                    variable: "var(--kds-dimension-component-width-8x)",
+                },
+            },
             "12x": {
                 value: 192,
                 unit: "px",

package/package.json

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