@knime/kds-styles 0.6.4 → 0.6.5

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

@@ -266,6 +266,12 @@ syntax: "<color>";
   initial-value: hsl(51 100% 50%);
 }
 
+@property --kds-color-background-static-overlay {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 13%);
+}
+
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -956,6 +962,18 @@ syntax: "<color>";
   initial-value: hsl(120 0% 16% / 0.24);
 }
 
+@property --kds-color-tooltip-background-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 13%);
+}
+
+@property --kds-color-tooltip-text-and-icon-neutral {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 98%);
+}
+
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_properties.css

@@ -1466,6 +1466,12 @@ syntax: "<color>";
   initial-value: hsl(51 100% 50%);
 }
 
+@property --kds-color-background-static-overlay {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 13%), hsl(0 0% 22%));
+}
+
 @property --kds-color-text-and-icon-neutral {
 syntax: "<color>";
   inherits: true;
@@ -2168,6 +2174,18 @@ syntax: "<color>";
   initial-value: 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%));
 }
 
+@property --kds-color-tooltip-background-default {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0 0% 13%), hsl(0 0% 22%));
+}
+
+@property --kds-color-tooltip-text-and-icon-neutral {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0 0% 98%);
+}
+
 @property --kds-border-radius-container-none {
 syntax: "<length>";
   inherits: false;
@@ -2660,6 +2678,12 @@ syntax: "<length>";
   initial-value: 400px;
 }
 
+@property --kds-dimension-component-width-16x {
+syntax: "<length>";
+  inherits: false;
+  initial-value: 256px;
+}
+
 @property --kds-dimension-component-width-32x {
 syntax: "<length>";
   inherits: false;

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

@@ -47,6 +47,7 @@
   --kds-color-background-static-success: hsl(119.44 95.797% 93.942%);
   --kds-color-background-static-success-muted: hsl(124.89 65.088% 97.723%);
   --kds-color-background-static-brand: hsl(51 100% 50%);
+  --kds-color-background-static-overlay: hsl(0 0% 13%);
   --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
   --kds-color-text-and-icon-muted: hsl(0 0% 32%);
   --kds-color-text-and-icon-subtle: hsl(0 0% 43%);
@@ -162,6 +163,8 @@
   --kds-color-loading-spinner-progress-on-surface: hsl(0 0% 16%);
   --kds-color-loading-spinner-track-on-primary: hsl(none 0% 98% / 0.24);
   --kds-color-loading-spinner-track-on-surface: hsl(120 0% 16% / 0.24);
+  --kds-color-tooltip-background-default: hsl(0 0% 13%);
+  --kds-color-tooltip-text-and-icon-neutral: hsl(0 0% 98%);
   --kds-border-action-transparent: 1px solid hsl(330 0% 11% / 0);
   --kds-border-action-default: 1px solid hsl(345 0% 10% / 0.4);
   --kds-border-action-disabled: 1px solid hsl(0 0% 73%);

package/dist/tokens/css/_variables.css

@@ -247,6 +247,7 @@
   --kds-color-background-static-success: light-dark(hsl(119.44 95.797% 93.942%), hsl(124 47% 21%));
   --kds-color-background-static-success-muted: light-dark(hsl(124.89 65.088% 97.723%), hsl(128.09 38.652% 10.529%));
   --kds-color-background-static-brand: hsl(51 100% 50%);
+  --kds-color-background-static-overlay: light-dark(hsl(0 0% 13%), hsl(0 0% 22%));
   --kds-color-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
   --kds-color-text-and-icon-muted: light-dark(hsl(0 0% 32%), hsl(0 0% 73%));
   --kds-color-text-and-icon-subtle: light-dark(hsl(0 0% 43%), hsl(0 0% 73%));
@@ -364,6 +365,8 @@
   --kds-color-loading-spinner-track-on-primary: hsl(166 68% 93% / 0.24);
   --kds-color-loading-spinner-track-on-surface: light-dark(hsl(120 0% 16% / 0.24), hsl(0 0% 94% / 0.24));
   --kds-color-skeleton-bar-background-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%));
+  --kds-color-tooltip-background-default: light-dark(hsl(0 0% 13%), hsl(0 0% 22%));
+  --kds-color-tooltip-text-and-icon-neutral: hsl(0 0% 98%);
   --kds-border-radius-container-none: 0;
   --kds-border-radius-container-0-12x: 2px;
   --kds-border-radius-container-0-25x: 4px;
@@ -446,6 +449,7 @@
   --kds-dimension-component-width-2-25x: 36px;
   --kds-dimension-component-width-4x: 64px;
   --kds-dimension-component-width-25x: 400px;
+  --kds-dimension-component-width-16x: 256px;
   --kds-dimension-component-width-32x: 512px;
   --kds-dimension-component-width-45x: 720px;
   --kds-dimension-component-width-61x: 976px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "description": "Package containing the design tokens and icons for the KNIME Design System",
   "repository": {
     "type": "git",
@@ -22,7 +22,7 @@
     "@types/node": "^25.0.10",
     "consola": "^3.4.2",
     "jsdom": "^27.0.0",
-    "style-dictionary": "^5.1.1",
+    "style-dictionary": "^5.2.0",
     "svgo": "^4.0.0",
     "typescript": "^5.9.3"
   },