@knime/kds-styles 0.28.4 → 0.28.7

package/dist/img/icons/auto-configure.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="M6.833 9.567 6.7 10.5H5.3l-.1-.933L4.067 9.1l-.767.567-.967-.967.567-.767L2.433 6.8 1.5 6.7V5.3l.933-.133.467-1.134-.567-.733.967-.967.733.567 1.134-.467L5.3 1.5h1.4l.1.933 1.133.467.734-.567 1 .967-.567.733.467 1.134.933.133M7.633 6a1.633 1.633 0 1 1-3.266 0 1.633 1.633 0 0 1 3.266 0m3.129 2.11-1.2-.96a.5.5 0 0 0-.812.39v1.92a.5.5 0 0 0 .812.39l1.2-.96a.5.5 0 0 0 0-.78" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/cell-renderer.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="M1 4.5V3.25A1.25 1.25 0 0 1 2.25 2H3.5M1 7.5v1.25A1.25 1.25 0 0 0 2.25 10H3.5m5-8h1.25A1.25 1.25 0 0 1 11 3.25V4.5M8.5 10h1.25A1.25 1.25 0 0 0 11 8.75V7.5" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/column-width.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="M3 6h4.026m-2.77 1.25L3 6l1.256-1.25M7.026 6H9M7.026 6H4.974m2.77-1.25L9 6 7.744 7.25M1 2v8m10-8v8" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/def.ts

@@ -8,10 +8,12 @@ export const iconNames = [
   'arrows-expand',
   'arrows-move',
   'arrows-order',
+  'auto-configure',
   'back',
   'bold',
   'calendar',
   'case-sensitive',
+  'cell-renderer',
   'center-aligned',
   'checkmark',
   'chevron-down',
@@ -34,6 +36,7 @@ export const iconNames = [
   'code-block',
   'collection',
   'color-picker',
+  'column-width',
   'comment',
   'component',
   'connection',
@@ -108,6 +111,7 @@ export const iconNames = [
   'open-in-new-window',
   'pan-mode',
   'parameter',
+  'path-separator',
   'pending-changes',
   'pin',
   'placeholder',
@@ -146,6 +150,7 @@ export const iconNames = [
   'stepwise-execution',
   'stop',
   'strikethrough',
+  'table-statistics',
   'tag',
   'team',
   'template-gallery',

package/dist/img/icons/path-separator.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 10 2.75-8" vector-effect="non-scaling-stroke"/></svg>

package/dist/img/icons/table-statistics.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.286 8.453V4.646M6 8.453v-.761m1.714.761V6.169M3.531 1.25h-.388A1.14 1.14 0 0 0 2 2.395v7.462C2 10.488 2.512 11 3.143 11h5.714C9.488 11 10 10.488 10 9.857V2.395A1.146 1.146 0 0 0 8.857 1.25h-.326m-5 0c0 .354.287.64.64.64h3.72a.64.64 0 0 0 .64-.64m-5 0a.61.61 0 0 1 .61-.61h3.78a.61.61 0 0 1 .61.61" vector-effect="non-scaling-stroke"/></svg>

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

@@ -35,13 +35,13 @@ syntax: "<color>";
 @property --kds-color-background-neutral-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 48% / 0.16);
+  initial-value: hsl(180 0% 48% / 0.1);
 }
 
 @property --kds-color-background-neutral-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(180 0% 48% / 0.32);
+  initial-value: hsl(180 0% 48% / 0.2);
 }
 
 @property --kds-color-background-neutral-bold-initial {
@@ -557,7 +557,7 @@ syntax: "<color>";
 @property --kds-color-focus-background {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(217 100% 97%);
+  initial-value: hsl(216 100% 92% / 0.4);
 }
 
 @property --kds-color-blanket-default {

package/dist/tokens/css/_properties.css

@@ -1229,13 +1229,13 @@ syntax: "<color>";
 @property --kds-color-background-neutral-hover {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(180 0% 48% / 0.16), hsl(300 0% 90% / 0.16));
+  initial-value: light-dark(hsl(180 0% 48% / 0.1), hsl(300 0% 90% / 0.1));
 }
 
 @property --kds-color-background-neutral-active {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(180 0% 48% / 0.32), hsl(180 0% 48% / 0.56));
+  initial-value: light-dark(hsl(180 0% 48% / 0.2), hsl(180 0% 48% / 0.36));
 }
 
 @property --kds-color-background-neutral-bold-initial {
@@ -1751,7 +1751,7 @@ syntax: "<color>";
 @property --kds-color-focus-background {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(217 100% 97%), hsl(211.86 41.035% 17.864%));
+  initial-value: light-dark(hsl(216 100% 92% / 0.4), hsl(209 50% 20% / 0.5));
 }
 
 @property --kds-color-blanket-default {
@@ -2888,6 +2888,12 @@ syntax: "<length>";
   initial-value: 28px;
 }
 
+@property --kds-dimension-component-width-2x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 32px;
+}
+
 @property --kds-dimension-component-width-2-25x {
 syntax: "<length>";
   inherits: false;

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

@@ -8,8 +8,8 @@
   --kds-color-surface-subtle: hsl(0 0% 90%);
   --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);
+  --kds-color-background-neutral-hover: hsl(180 0% 48% / 0.1);
+  --kds-color-background-neutral-active: hsl(180 0% 48% / 0.2);
   --kds-color-background-neutral-bold-initial: hsl(330 0% 73% / 0.4);
   --kds-color-background-neutral-bold-hover: hsl(330 0% 63.406% / 0.4);
   --kds-color-background-neutral-bold-active: hsl(180 0% 60.265% / 0.4);
@@ -95,7 +95,7 @@
   --kds-color-border-neutral-bold-hover: hsl(345 0% 10% / 0.64);
   --kds-color-border-neutral-bold-active: hsl(345 0% 10% / 0.74);
   --kds-color-focus-outline: hsl(209 57% 50%);
-  --kds-color-focus-background: hsl(217 100% 97%);
+  --kds-color-focus-background: hsl(216 100% 92% / 0.4);
   --kds-color-blanket-default: hsl(330 0% 11% / 0.8);
   --kds-color-nodes-and-variables-flow-variable: hsl(360 84% 63%);
   --kds-color-nodes-and-variables-loop: hsl(188 52% 77%);

package/dist/tokens/css/_variables.css

@@ -207,8 +207,8 @@
   --kds-color-surface-subtle: light-dark(hsl(0 0% 90%), hsl(0 0% 22%));
   --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));
+  --kds-color-background-neutral-hover: light-dark(hsl(180 0% 48% / 0.1), hsl(300 0% 90% / 0.1));
+  --kds-color-background-neutral-active: light-dark(hsl(180 0% 48% / 0.2), hsl(180 0% 48% / 0.36));
   --kds-color-background-neutral-bold-initial: light-dark(hsl(330 0% 73% / 0.4), hsl(0 0% 32%));
   --kds-color-background-neutral-bold-hover: light-dark(hsl(330 0% 63.406% / 0.4), hsl(0 0% 48%));
   --kds-color-background-neutral-bold-active: light-dark(hsl(180 0% 60.265% / 0.4), hsl(0 0% 73%));
@@ -294,7 +294,7 @@
   --kds-color-border-neutral-bold-hover: light-dark(hsl(345 0% 10% / 0.64), hsl(330 0% 99% / 0.58));
   --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-focus-background: light-dark(hsl(216 100% 92% / 0.4), hsl(209 50% 20% / 0.5));
   --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%);
@@ -484,6 +484,7 @@
   --kds-dimension-component-width-1-25x: 20px;
   --kds-dimension-component-width-1-5x: 24px;
   --kds-dimension-component-width-1-75x: 28px;
+  --kds-dimension-component-width-2x: 32px;
   --kds-dimension-component-width-2-25x: 36px;
   --kds-dimension-component-width-2-75x: 44px;
   --kds-dimension-component-width-4x: 64px;

package/dist/tokens/ts/_tokens.ts

@@ -88,6 +88,7 @@ export const kdsDimensionComponentWidth20x = 320;
 export const kdsDimensionComponentWidth25x = 400;
 export const kdsDimensionComponentWidth2p25x = 36;
 export const kdsDimensionComponentWidth2p75x = 44;
+export const kdsDimensionComponentWidth2x = 32;
 export const kdsDimensionComponentWidth32x = 512;
 export const kdsDimensionComponentWidth35x = 560;
 export const kdsDimensionComponentWidth45x = 720;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.28.4",
+  "version": "0.28.7",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@tokens-studio/sd-transforms": "^2.0.3",
-    "@types/jsdom": "^27.0.0",
+    "@types/jsdom": "^28.0.2",
     "@types/node": "^25.0.10",
     "consola": "^3.4.2",
     "jsdom": "^29.1.1",