@knime/kds-styles 0.23.0 → 0.23.2

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

@@ -212,6 +212,24 @@ syntax: "<color>";
   initial-value: hsl(111 48% 31%);
 }
 
+@property --kds-color-background-info-bold-initial {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(209 57% 50%);
+}
+
+@property --kds-color-background-info-bold-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(208 63% 41%);
+}
+
+@property --kds-color-background-info-bold-active {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(208 61% 34%);
+}
+
 @property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
@@ -275,7 +293,7 @@ syntax: "<color>";
 @property --kds-color-background-static-chart-0 {
 syntax: "<color>";
   inherits: true;
-  initial-value: hsl(0 0% 73%);
+  initial-value: hsl(0 0% 94%);
 }
 
 @property --kds-color-background-static-chart-1 {
@@ -1016,6 +1034,126 @@ syntax: "<color>";
   initial-value: hsl(212 78% 68% / 0.6);
 }
 
+@property --kds-color-avatar-background-red {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(4 100% 80%);
+}
+
+@property --kds-color-avatar-background-orange {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(31 83% 66%);
+}
+
+@property --kds-color-avatar-background-yellow {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(51 100% 50%);
+}
+
+@property --kds-color-avatar-background-green {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(109 47% 61%);
+}
+
+@property --kds-color-avatar-background-teal {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(170 31% 66%);
+}
+
+@property --kds-color-avatar-background-blue {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(214 92% 77%);
+}
+
+@property --kds-color-avatar-background-purple {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(320 45% 82%);
+}
+
+@property --kds-color-avatar-background-aquamarine {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(186 49% 88%);
+}
+
+@property --kds-color-avatar-background-grassgreen {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(63 69% 75%);
+}
+
+@property --kds-color-avatar-background-brown {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(30 47% 68%);
+}
+
+@property --kds-color-avatar-text-and-icon-red {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(348 94% 21%);
+}
+
+@property --kds-color-avatar-text-and-icon-orange {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(13 66% 23%);
+}
+
+@property --kds-color-avatar-text-and-icon-yellow {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(44 94% 14%);
+}
+
+@property --kds-color-avatar-text-and-icon-green {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(132 52% 15%);
+}
+
+@property --kds-color-avatar-text-and-icon-teal {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(175 93% 12%);
+}
+
+@property --kds-color-avatar-text-and-icon-blue {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(209 50% 20%);
+}
+
+@property --kds-color-avatar-text-and-icon-purple {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(296 34% 23%);
+}
+
+@property --kds-color-avatar-text-and-icon-aquamarine {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(201 63% 27%);
+}
+
+@property --kds-color-avatar-text-and-icon-grassgreen {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(72 39% 25%);
+}
+
+@property --kds-color-avatar-text-and-icon-brown {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(23 27% 24%);
+}
+
 @property --kds-border-action-transparent {
 syntax: "<string>";
   inherits: false;

package/dist/tokens/css/_properties.css

@@ -1406,6 +1406,24 @@ syntax: "<color>";
   initial-value: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
 }
 
+@property --kds-color-background-info-bold-initial {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(209 57% 50%), hsl(212 78% 68%));
+}
+
+@property --kds-color-background-info-bold-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208 63% 41%), hsl(214 92% 77%));
+}
+
+@property --kds-color-background-info-bold-active {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
+}
+
 @property --kds-color-background-static-info {
 syntax: "<color>";
   inherits: true;
@@ -1469,7 +1487,7 @@ syntax: "<color>";
 @property --kds-color-background-static-chart-0 {
 syntax: "<color>";
   inherits: true;
-  initial-value: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  initial-value: light-dark(hsl(0 0% 94%), hsl(0 0% 32%));
 }
 
 @property --kds-color-background-static-chart-1 {
@@ -2210,6 +2228,126 @@ syntax: "<color>";
   initial-value: hsl(212 78% 68% / 0.6);
 }
 
+@property --kds-color-avatar-background-red {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(4 100% 80%);
+}
+
+@property --kds-color-avatar-background-orange {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(31 83% 66%);
+}
+
+@property --kds-color-avatar-background-yellow {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(51 100% 50%);
+}
+
+@property --kds-color-avatar-background-green {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(109 47% 61%);
+}
+
+@property --kds-color-avatar-background-teal {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(170 31% 66%);
+}
+
+@property --kds-color-avatar-background-blue {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(214 92% 77%);
+}
+
+@property --kds-color-avatar-background-purple {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(320 45% 82%);
+}
+
+@property --kds-color-avatar-background-aquamarine {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(186 49% 88%);
+}
+
+@property --kds-color-avatar-background-grassgreen {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(63 69% 75%);
+}
+
+@property --kds-color-avatar-background-brown {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(30 47% 68%);
+}
+
+@property --kds-color-avatar-text-and-icon-red {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(348 94% 21%);
+}
+
+@property --kds-color-avatar-text-and-icon-orange {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(13 66% 23%);
+}
+
+@property --kds-color-avatar-text-and-icon-yellow {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(44 94% 14%);
+}
+
+@property --kds-color-avatar-text-and-icon-green {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(132 52% 15%);
+}
+
+@property --kds-color-avatar-text-and-icon-teal {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(175 93% 12%);
+}
+
+@property --kds-color-avatar-text-and-icon-blue {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(209 50% 20%);
+}
+
+@property --kds-color-avatar-text-and-icon-purple {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(296 34% 23%);
+}
+
+@property --kds-color-avatar-text-and-icon-aquamarine {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(201 63% 27%);
+}
+
+@property --kds-color-avatar-text-and-icon-grassgreen {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(72 39% 25%);
+}
+
+@property --kds-color-avatar-text-and-icon-brown {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(23 27% 24%);
+}
+
 @property --kds-border-radius-container-none {
 syntax: "<length>";
   inherits: false;

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

@@ -38,6 +38,9 @@
   --kds-color-background-disabled-primary: hsl(0 0% 48%);
   --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
   --kds-color-background-success-bold-initial: hsl(111 48% 31%);
+  --kds-color-background-info-bold-initial: hsl(209 57% 50%);
+  --kds-color-background-info-bold-hover: hsl(208 63% 41%);
+  --kds-color-background-info-bold-active: hsl(208 61% 34%);
   --kds-color-background-static-info: hsl(217 100% 97%);
   --kds-color-background-static-info-muted: hsl(217.11 100.13% 97.725%);
   --kds-color-background-static-warning: hsl(30 95% 92%);
@@ -48,7 +51,7 @@
   --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-background-static-chart-0: hsl(0 0% 73%);
+  --kds-color-background-static-chart-0: hsl(0 0% 94%);
   --kds-color-background-static-chart-1: hsl(176 67% 22%);
   --kds-color-background-static-chart-2: hsl(172 27% 48%);
   --kds-color-text-and-icon-neutral: hsl(0 0% 16%);
@@ -172,6 +175,26 @@
   --kds-color-tooltip-background-default: hsl(0 0% 13%);
   --kds-color-tooltip-text-and-icon-neutral: hsl(0 0% 98%);
   --kds-color-text-highlight-background-default: hsl(212 78% 68% / 0.6);
+  --kds-color-avatar-background-red: hsl(4 100% 80%);
+  --kds-color-avatar-background-orange: hsl(31 83% 66%);
+  --kds-color-avatar-background-yellow: hsl(51 100% 50%);
+  --kds-color-avatar-background-green: hsl(109 47% 61%);
+  --kds-color-avatar-background-teal: hsl(170 31% 66%);
+  --kds-color-avatar-background-blue: hsl(214 92% 77%);
+  --kds-color-avatar-background-purple: hsl(320 45% 82%);
+  --kds-color-avatar-background-aquamarine: hsl(186 49% 88%);
+  --kds-color-avatar-background-grassgreen: hsl(63 69% 75%);
+  --kds-color-avatar-background-brown: hsl(30 47% 68%);
+  --kds-color-avatar-text-and-icon-red: hsl(348 94% 21%);
+  --kds-color-avatar-text-and-icon-orange: hsl(13 66% 23%);
+  --kds-color-avatar-text-and-icon-yellow: hsl(44 94% 14%);
+  --kds-color-avatar-text-and-icon-green: hsl(132 52% 15%);
+  --kds-color-avatar-text-and-icon-teal: hsl(175 93% 12%);
+  --kds-color-avatar-text-and-icon-blue: hsl(209 50% 20%);
+  --kds-color-avatar-text-and-icon-purple: hsl(296 34% 23%);
+  --kds-color-avatar-text-and-icon-aquamarine: hsl(201 63% 27%);
+  --kds-color-avatar-text-and-icon-grassgreen: hsl(72 39% 25%);
+  --kds-color-avatar-text-and-icon-brown: hsl(23 27% 24%);
   --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

@@ -237,6 +237,9 @@
   --kds-color-background-disabled-primary: hsl(173.77 18.031% 40.307%);
   --kds-color-background-disabled-danger: hsl(1.5788 43.542% 37.998%);
   --kds-color-background-success-bold-initial: light-dark(hsl(111 48% 31%), hsl(124 47% 21%));
+  --kds-color-background-info-bold-initial: light-dark(hsl(209 57% 50%), hsl(212 78% 68%));
+  --kds-color-background-info-bold-hover: light-dark(hsl(208 63% 41%), hsl(214 92% 77%));
+  --kds-color-background-info-bold-active: light-dark(hsl(208 61% 34%), hsl(215 100% 84%));
   --kds-color-background-static-info: light-dark(hsl(217 100% 97%), hsl(210 50% 28%));
   --kds-color-background-static-info-muted: light-dark(hsl(217.11 100.13% 97.725%), hsl(211.86 41.035% 17.864%));
   --kds-color-background-static-warning: light-dark(hsl(30 95% 92%), hsl(13 66% 23%));
@@ -247,7 +250,7 @@
   --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-background-static-chart-0: light-dark(hsl(0 0% 73%), hsl(0 0% 32%));
+  --kds-color-background-static-chart-0: light-dark(hsl(0 0% 94%), hsl(0 0% 32%));
   --kds-color-background-static-chart-1: light-dark(hsl(176 67% 22%), hsl(173 37% 39%));
   --kds-color-background-static-chart-2: light-dark(hsl(172 27% 48%), hsl(176 67% 22%));
   --kds-color-text-and-icon-neutral: light-dark(hsl(0 0% 16%), hsl(0 0% 94%));
@@ -371,6 +374,26 @@
   --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-color-text-highlight-background-default: hsl(212 78% 68% / 0.6);
+  --kds-color-avatar-background-red: hsl(4 100% 80%);
+  --kds-color-avatar-background-orange: hsl(31 83% 66%);
+  --kds-color-avatar-background-yellow: hsl(51 100% 50%);
+  --kds-color-avatar-background-green: hsl(109 47% 61%);
+  --kds-color-avatar-background-teal: hsl(170 31% 66%);
+  --kds-color-avatar-background-blue: hsl(214 92% 77%);
+  --kds-color-avatar-background-purple: hsl(320 45% 82%);
+  --kds-color-avatar-background-aquamarine: hsl(186 49% 88%);
+  --kds-color-avatar-background-grassgreen: hsl(63 69% 75%);
+  --kds-color-avatar-background-brown: hsl(30 47% 68%);
+  --kds-color-avatar-text-and-icon-red: hsl(348 94% 21%);
+  --kds-color-avatar-text-and-icon-orange: hsl(13 66% 23%);
+  --kds-color-avatar-text-and-icon-yellow: hsl(44 94% 14%);
+  --kds-color-avatar-text-and-icon-green: hsl(132 52% 15%);
+  --kds-color-avatar-text-and-icon-teal: hsl(175 93% 12%);
+  --kds-color-avatar-text-and-icon-blue: hsl(209 50% 20%);
+  --kds-color-avatar-text-and-icon-purple: hsl(296 34% 23%);
+  --kds-color-avatar-text-and-icon-aquamarine: hsl(201 63% 27%);
+  --kds-color-avatar-text-and-icon-grassgreen: hsl(72 39% 25%);
+  --kds-color-avatar-text-and-icon-brown: hsl(23 27% 24%);
   --kds-border-radius-container-none: 0;
   --kds-border-radius-container-0-12x: 2px;
   --kds-border-radius-container-0-25x: 4px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-styles",
-  "version": "0.23.0",
+  "version": "0.23.2",
   "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": "^28.0.0",
-    "style-dictionary": "^5.3.3",
+    "style-dictionary": "^5.4.0",
     "svgo": "^4.0.1",
     "typescript": "^5.9.3"
   },