@knime/kds-styles 1.3.1 → 2.0.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @knime/kds-styles
 
+## 2.0.1
+
+### Patch Changes
+
+- d8bb77a: Kds 948 Rename tokens for components and metanodes to its real purpose
+
+  - Adjust token names
+  - Adjust node template
+
+## 2.0.0
+
+### Patch Changes
+
+- b698be1: KDS-941: Add missing icons and update icons for node repository
+
+  Updated community extension icon
+  Update view-cards icon to fit placeholder template
+  Add more ports icon
+  Add view-tree and view-list for node repo display settings
+
 ## 1.3.1
 
 ## 1.3.0

package/dist/img/icons/def.ts

@@ -111,6 +111,7 @@ export const iconNames = [
   'minimize-side-panel',
   'minus',
   'more-actions',
+  'more-connections',
   'node-stack',
   'nodes-align-horiz',
   'nodes-align-vert',
@@ -180,6 +181,8 @@ export const iconNames = [
   'validate',
   'version',
   'view-cards',
+  'view-list',
+  'view-tree',
   'warning',
   'workflow',
   'x-close'

package/dist/img/icons/extension-community.svg

@@ -1 +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="M5 6h2M6 5v2M5.15.565a5.5 5.5 0 0 1 1.7 0m2.348.96a5.5 5.5 0 0 1 1.226 1.206m-8.848 0a5.5 5.5 0 0 1 1.226-1.206M.57 6.87a5.5 5.5 0 0 1 0-1.742m10.862 0a5.5 5.5 0 0 1 0 1.742m-8.629 3.604A5.5 5.5 0 0 1 1.576 9.27m8.848 0a5.5 5.5 0 0 1-1.226 1.206m-2.349.96a5.6 5.6 0 0 1-1.698 0M8 3.5H4c-.23 0-.5.27-.5.5v4c0 .23.27.5.5.5h4c.23 0 .5-.27.5-.5V4c0-.23-.27-.5-.5-.5" vector-effect="non-scaling-stroke"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 12 12"><path d="M2.447 10.49a.88.88 0 0 1-.675-.288c-.192-.192-.272-.43-.272-.713V8.214c.758 0 2.421 0 2.421-1.35S2.241 5.545 1.5 5.514V4.24c0-.275.082-.51.278-.706.197-.196.393-.294.67-.294L4 3.25c.5 0-.25-1.75 1.25-1.75 1.732 0 .75 1.75 1.46 1.75h1.532c.796 0 .754.452.754 1V5.3c.504 0 1.504.325 1.504 1.575s-1.504.75-1.504 1.575V9.5q0 .424-.295.713a.98.98 0 0 1-.71.287z" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/more-connections.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" viewBox="0 0 12 12"><path fill="#000" stroke="none" d="m3.44 6.806.442-.235zM6.728 1.25l.43-.255L6.92.592 6.5.804zM.923 10.506a.5.5 0 0 0 .154.988L1 11zm6.79-7.59-.43.255zm2.471-.892a.5.5 0 0 0-.513-.859l.257.43zm1.321 2.227a.5.5 0 1 0-.51-.86l.255.43zm-8.018 3.53a.5.5 0 0 0 .775-.631l-.388.316zm5.936-.99a.5.5 0 0 0 .861-.51l-.43.255zM5.5 8.124a.5.5 0 0 0 0 1v-1m4.25 1a.5.5 0 0 0 0-1v1M7.125 10.75a.5.5 0 0 0 1 0h-1m1-4.25a.5.5 0 0 0-1 0h1m-4.684.306v-.5c-.436 0-.84.038-1.188.135-.347.098-.675.265-.904.552-.487.607-.321 1.434.122 2.291l.444-.23.444-.229c-.417-.809-.31-1.106-.23-1.207.054-.068.167-.15.394-.214q.34-.097.918-.098zM1.915 9.055l-.444.23c.181.35.193.569.172.691a.47.47 0 0 1-.181.291 1.2 1.2 0 0 1-.36.19c-.057.02-.107.033-.14.04q-.026.007-.036.008l-.006.002h.002L1 11l.078.494h.005l.007-.002a1 1 0 0 0 .098-.02c.06-.014.142-.036.237-.068.186-.063.442-.175.674-.366.237-.196.458-.486.529-.89q.105-.599-.269-1.323zM6.727 1.25 6.501.804c-1.11.563-2.363 1.338-3.155 2.35-.401.514-.697 1.104-.783 1.771-.087.672.046 1.38.436 2.115l.442-.234.441-.235c-.305-.575-.384-1.076-.327-1.518.057-.447.259-.873.579-1.282.651-.833 1.739-1.527 2.82-2.075zm.986 1.667.43-.255L7.157.995l-.43.255-.43.255.986 1.666zm0 0 .256.429 2.215-1.322-.256-.43-.257-.429-2.214 1.322zm1.314 2.222.43-.255-1.314-2.222-.43.255-.43.254 1.314 2.222zm0 0 .256.43 2.222-1.318-.255-.43-.255-.43-2.223 1.318zM3.441 6.806l-.442.234q.221.415.488.742l.387-.316.388-.316a3.6 3.6 0 0 1-.38-.58zm6.413-.27.43-.255-.826-1.397-.43.255-.43.254.825 1.397zM5.5 8.625v.5h2.125v-1H5.5zm2.125 0v.5H9.75v-1H7.625zm0 2.125h.5V8.625h-1v2.125zm0-2.125h.5V6.5h-1v2.125z" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/view-cards.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M5.25 1.25h-4v4h4zM5.25 6.75h-4v4h4zM10.75 1.25h-4v4h4zM10.75 6.75h-4v4h4z" vector-effect="non-scaling-stroke"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linejoin="round" viewBox="0 0 12 12"><path d="M5 2.25H2.25V5H5zM5 7H2.25v2.75H5zM9.75 2.25H7V5h2.75zM9.75 7H7v2.75h2.75z" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/view-list.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 3h5.5M4 6h3.5M4 9h4.5M1.629 3h.655m-.655 3.006h.655M1.629 9h.655" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/view-tree.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="M2.5 5v4h1m2-3h4m-4 3h4m-8-6h2m-1 3h1" vector-effect="non-scaling-stroke"/></svg>

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

@@ -638,37 +638,43 @@ syntax: "<color>";
   initial-value: hsl(29 43% 58%);
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-bold {
+@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%);
 }
 
-@property --kds-color-nodes-and-variables-special-nodes {
+@property --kds-color-nodes-and-variables-component {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 73%);
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-muted {
+@property --kds-color-nodes-and-variables-special-state {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 90%);
+  initial-value: hsl(0 0% 99%);
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-border {
+@property --kds-color-nodes-and-variables-forbidden-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(0 0% 19%);
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-background {
+@property --kds-color-nodes-and-variables-forbidden {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 99%);
+  initial-value: hsl(0 0% 90%);
 }
 
-@property --kds-color-nodes-and-variables-warning-bold {
+@property --kds-color-nodes-and-variables-warning-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(19 63% 38%);
@@ -680,7 +686,7 @@ syntax: "<color>";
   initial-value: hsl(31 100% 83%);
 }
 
-@property --kds-color-nodes-and-variables-error-bold {
+@property --kds-color-nodes-and-variables-error-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(349 91% 35%);
@@ -692,7 +698,7 @@ syntax: "<color>";
   initial-value: hsl(2 100% 92%);
 }
 
-@property --kds-color-nodes-and-variables-loading-bold {
+@property --kds-color-nodes-and-variables-loading-border {
 syntax: "<color>";
   inherits: true;
   initial-value: hsl(208 61% 34%);
@@ -710,6 +716,12 @@ syntax: "<color>";
   initial-value: hsl(65 69% 70%);
 }
 
+@property --kds-color-nodes-and-variables-quickform {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(212 78% 68%);
+}
+
 @property --kds-color-port-data {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_properties.css

@@ -1061,7 +1061,7 @@ syntax: "<length>";
 @property --kds-core-paragraph-spacing-none {
 syntax: "<length>";
   inherits: false;
-  initial-value: 0;
+  initial-value: 0.0;
 }
 
 @property --kds-core-paragraph-spacing-small {
@@ -1832,37 +1832,43 @@ syntax: "<color>";
   initial-value: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-bold {
+@property --kds-color-nodes-and-variables-metanode {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+}
+
+@property --kds-color-nodes-and-variables-metanode-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 32%), hsl(0 0% 94%));
 }
 
-@property --kds-color-nodes-and-variables-special-nodes {
+@property --kds-color-nodes-and-variables-component {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 43%));
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-muted {
+@property --kds-color-nodes-and-variables-special-state {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
+  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-border {
+@property --kds-color-nodes-and-variables-forbidden-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(0 0% 19%), hsl(0 0% 90%));
 }
 
-@property --kds-color-nodes-and-variables-special-nodes-background {
+@property --kds-color-nodes-and-variables-forbidden {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  initial-value: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
 }
 
-@property --kds-color-nodes-and-variables-warning-bold {
+@property --kds-color-nodes-and-variables-warning-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
@@ -1874,7 +1880,7 @@ syntax: "<color>";
   initial-value: light-dark(hsl(31 100% 83%), hsl(0 0% 22%));
 }
 
-@property --kds-color-nodes-and-variables-error-bold {
+@property --kds-color-nodes-and-variables-error-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(349 91% 35%), hsl(0 100% 66%));
@@ -1886,7 +1892,7 @@ syntax: "<color>";
   initial-value: light-dark(hsl(2 100% 92%), hsl(0 0% 22%));
 }
 
-@property --kds-color-nodes-and-variables-loading-bold {
+@property --kds-color-nodes-and-variables-loading-border {
 syntax: "<color>";
   inherits: true;
   initial-value: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
@@ -1904,6 +1910,12 @@ syntax: "<color>";
   initial-value: light-dark(hsl(65 69% 70%), hsl(70 60% 86%));
 }
 
+@property --kds-color-nodes-and-variables-quickform {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(212 78% 68%), hsl(215 100% 84%));
+}
+
 @property --kds-color-port-data {
 syntax: "<color>";
   inherits: true;

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

@@ -109,18 +109,20 @@
   --kds-color-nodes-and-variables-container: hsl(69 54% 40%);
   --kds-color-nodes-and-variables-unknown: hsl(353 75% 45%);
   --kds-color-nodes-and-variables-other: hsl(29 43% 58%);
-  --kds-color-nodes-and-variables-special-nodes-bold: hsl(0 0% 32%);
-  --kds-color-nodes-and-variables-special-nodes: hsl(0 0% 73%);
-  --kds-color-nodes-and-variables-special-nodes-muted: hsl(0 0% 90%);
-  --kds-color-nodes-and-variables-special-nodes-border: hsl(0 0% 19%);
-  --kds-color-nodes-and-variables-special-nodes-background: hsl(0 0% 99%);
-  --kds-color-nodes-and-variables-warning-bold: hsl(19 63% 38%);
+  --kds-color-nodes-and-variables-metanode: hsl(0 0% 99%);
+  --kds-color-nodes-and-variables-metanode-border: hsl(0 0% 32%);
+  --kds-color-nodes-and-variables-component: hsl(0 0% 73%);
+  --kds-color-nodes-and-variables-special-state: hsl(0 0% 99%);
+  --kds-color-nodes-and-variables-forbidden-border: hsl(0 0% 19%);
+  --kds-color-nodes-and-variables-forbidden: hsl(0 0% 90%);
+  --kds-color-nodes-and-variables-warning-border: hsl(19 63% 38%);
   --kds-color-nodes-and-variables-warning: hsl(31 100% 83%);
-  --kds-color-nodes-and-variables-error-bold: hsl(349 91% 35%);
+  --kds-color-nodes-and-variables-error-border: hsl(349 91% 35%);
   --kds-color-nodes-and-variables-error: hsl(2 100% 92%);
-  --kds-color-nodes-and-variables-loading-bold: hsl(208 61% 34%);
+  --kds-color-nodes-and-variables-loading-border: hsl(208 61% 34%);
   --kds-color-nodes-and-variables-loading: hsl(216 100% 92%);
   --kds-color-nodes-and-variables-configuration: hsl(65 69% 70%);
+  --kds-color-nodes-and-variables-quickform: hsl(212 78% 68%);
   --kds-color-port-data: hsl(0 0% 11%);
   --kds-color-port-flow-variable: hsl(360 84% 63%);
   --kds-color-port-neutral-inverted: hsl(0 0% 99%);

package/dist/tokens/css/_variables.css

@@ -179,7 +179,7 @@
   --kds-core-font-size-5x: 80px;
   --kds-core-font-size-5-5x: 88px;
   --kds-core-font-size-6x: 96px;
-  --kds-core-paragraph-spacing-none: 0;
+  --kds-core-paragraph-spacing-none: 0.0;
   --kds-core-paragraph-spacing-small: 0.25px;
   --kds-core-paragraph-spacing-medium: 0.5px;
   --kds-core-paragraph-spacing-large: 0.75px;
@@ -308,18 +308,20 @@
   --kds-color-nodes-and-variables-container: hsl(69 54% 40%);
   --kds-color-nodes-and-variables-unknown: light-dark(hsl(353 75% 45%), hsl(356 77% 54%));
   --kds-color-nodes-and-variables-other: light-dark(hsl(29 43% 58%), hsl(30 47% 68%));
-  --kds-color-nodes-and-variables-special-nodes-bold: light-dark(hsl(0 0% 32%), hsl(0 0% 94%));
-  --kds-color-nodes-and-variables-special-nodes: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
-  --kds-color-nodes-and-variables-special-nodes-muted: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
-  --kds-color-nodes-and-variables-special-nodes-border: light-dark(hsl(0 0% 19%), hsl(0 0% 90%));
-  --kds-color-nodes-and-variables-special-nodes-background: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
-  --kds-color-nodes-and-variables-warning-bold: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
+  --kds-color-nodes-and-variables-metanode: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-nodes-and-variables-metanode-border: light-dark(hsl(0 0% 32%), hsl(0 0% 94%));
+  --kds-color-nodes-and-variables-component: light-dark(hsl(0 0% 73%), hsl(0 0% 43%));
+  --kds-color-nodes-and-variables-special-state: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));
+  --kds-color-nodes-and-variables-forbidden-border: light-dark(hsl(0 0% 19%), hsl(0 0% 90%));
+  --kds-color-nodes-and-variables-forbidden: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
+  --kds-color-nodes-and-variables-warning-border: light-dark(hsl(19 63% 38%), hsl(31 83% 66%));
   --kds-color-nodes-and-variables-warning: light-dark(hsl(31 100% 83%), hsl(0 0% 22%));
-  --kds-color-nodes-and-variables-error-bold: light-dark(hsl(349 91% 35%), hsl(0 100% 66%));
+  --kds-color-nodes-and-variables-error-border: light-dark(hsl(349 91% 35%), hsl(0 100% 66%));
   --kds-color-nodes-and-variables-error: light-dark(hsl(2 100% 92%), hsl(0 0% 22%));
-  --kds-color-nodes-and-variables-loading-bold: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+  --kds-color-nodes-and-variables-loading-border: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
   --kds-color-nodes-and-variables-loading: light-dark(hsl(216 100% 92%), hsl(209 50% 20%));
   --kds-color-nodes-and-variables-configuration: light-dark(hsl(65 69% 70%), hsl(70 60% 86%));
+  --kds-color-nodes-and-variables-quickform: light-dark(hsl(212 78% 68%), hsl(215 100% 84%));
   --kds-color-port-data: light-dark(hsl(0 0% 11%), hsl(0 0% 94%));
   --kds-color-port-flow-variable: hsl(360 84% 63%);
   --kds-color-port-neutral-inverted: light-dark(hsl(0 0% 99%), hsl(0 0% 13%));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "1.3.1",
+  "version": "2.0.1",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -19,10 +19,10 @@
   "devDependencies": {
     "@tokens-studio/sd-transforms": "^2.0.3",
     "@types/jsdom": "^28.0.2",
-    "@types/node": "^25.9.1",
+    "@types/node": "^26.0.1",
     "consola": "^3.4.2",
     "jsdom": "^29.1.1",
-    "style-dictionary": "^5.4.0",
+    "style-dictionary": "^5.5.0",
     "svgo": "^4.0.1",
     "typescript": "^5.9.3"
   },