@knime/kds-styles 11.4.0 → 11.5.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @knime/kds-styles
 
+## 11.5.0
+
+### Minor Changes
+
+- b5ddd7a: Add the `--kds-color-ai-gradient-start`, `--kds-color-ai-gradient-middle`, and `--kds-color-ai-gradient-end` color tokens, the stops of the AI gradient in that order. All three are the same in light and dark mode, and none of them is for text. `middle` uses the same core color as `--kds-color-background-static-brand`.
+
+### Patch Changes
+
+- b5ddd7a: feat(tokens): add kds.color.ai gradient stops (KDS-1071)
+
 ## 11.4.0
 
 ## 11.3.0

package/dist/tokens/css/_properties.css

@@ -1778,6 +1778,24 @@ syntax: "<color>";
   initial-value: light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5));
 }
 
+@property --kds-color-ai-gradient-start {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(185.8, 49.2%, 87.6%);
+}
+
+@property --kds-color-ai-gradient-middle {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(50.8, 100%, 50%);
+}
+
+@property --kds-color-ai-gradient-end {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(193.1, 60.2%, 43.3%);
+}
+
 @property --kds-color-blanket-default {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_variables.css

@@ -299,6 +299,9 @@
   --kds-color-border-neutral-opaque-active: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
   --kds-color-focus-outline: light-dark(hsl(209.4, 57.3%, 49.6%), hsl(213.6, 91.6%, 76.7%));
   --kds-color-focus-background: light-dark(hsl(215.7 100% 91.8% / 0.4), hsl(209.4 49.5% 20.2% / 0.5));
+  --kds-color-ai-gradient-start: hsl(185.8, 49.2%, 87.6%);
+  --kds-color-ai-gradient-middle: hsl(50.8, 100%, 50%);
+  --kds-color-ai-gradient-end: hsl(193.1, 60.2%, 43.3%);
   --kds-color-blanket-default: hsl(0 0% 11.4% / 0.8);
   --kds-color-chart-data-series-1: light-dark(hsl(173.4, 37.1%, 38.6%), hsl(169.8, 30.6%, 66.1%));
   --kds-color-chart-data-series-2: light-dark(hsl(211.3, 67.3%, 59.2%), hsl(213.6, 91.6%, 76.7%));

package/dist/tokens/ts/color.d.ts

@@ -428,6 +428,22 @@ export type KdsColorTokens = {
          */
         readonly background: KdsColor;
     };
+    readonly ai: {
+        readonly gradient: {
+            /**
+             * Color stop of the AI gradient. Decorative only, not for text or icons.
+             */
+            readonly start: KdsColor;
+            /**
+             * Color stop of the AI gradient. Decorative only, not for text or icons.
+             */
+            readonly middle: KdsColor;
+            /**
+             * Color stop of the AI gradient. OK for non-text UI, not for text.
+             */
+            readonly end: KdsColor;
+        };
+    };
     readonly blanket: {
         /**
          * Dimmed overlay background for modals and dialogs.

package/dist/tokens/ts/color.js

@@ -811,6 +811,34 @@ export const color = {
             },
         },
     },
+    ai: {
+        gradient: {
+            start: {
+                light: { h: 185.8, s: 49.2, l: 87.6, a: 1 },
+                dark: { h: 185.8, s: 49.2, l: 87.6, a: 1 },
+                css: {
+                    value: "hsl(185.8, 49.2%, 87.6%)",
+                    variable: "var(--kds-color-ai-gradient-start)",
+                },
+            },
+            middle: {
+                light: { h: 50.8, s: 100, l: 50, a: 1 },
+                dark: { h: 50.8, s: 100, l: 50, a: 1 },
+                css: {
+                    value: "hsl(50.8, 100%, 50%)",
+                    variable: "var(--kds-color-ai-gradient-middle)",
+                },
+            },
+            end: {
+                light: { h: 193.1, s: 60.2, l: 43.3, a: 1 },
+                dark: { h: 193.1, s: 60.2, l: 43.3, a: 1 },
+                css: {
+                    value: "hsl(193.1, 60.2%, 43.3%)",
+                    variable: "var(--kds-color-ai-gradient-end)",
+                },
+            },
+        },
+    },
     blanket: {
         default: {
             light: { h: 0, s: 0, l: 11.4, a: 0.8 },

package/package.json

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