@knime/kds-styles 10.2.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @knime/kds-styles
 
+## 11.1.0
+
+### Minor Changes
+
+- 1cbcad8: Add the opaque `--kds-color-background-neutral-opaque-*` and `--kds-color-border-neutral-opaque-*` color tokens (`initial`, `hover`, and `active`) for clickable elements that sit on top of other content, e.g. on the canvas.
+
+## 11.0.0
+
 ## 10.2.0
 
 ### Minor Changes

package/README.md

@@ -1,6 +1,6 @@
 # ![Image](https://www.knime.com/sites/default/files/knime_logo_github_40x40_4layers.png) KNIME® Design Tokens
 
-This package contains the design tokens used across the KNIME Design System. The design tokens are stored in a standard W3C JSON format and are transformed into CSS and JavaScript variables using Style Dictionary.
+This package contains the design tokens used across the KNIME Design System, together with the icons, fonts and base CSS. The design tokens are stored in a standard W3C JSON format (in `src/tokens/`) and are transformed into CSS variables and TypeScript constants using Style Dictionary.
 
 ## Design Tokens Format
 
@@ -10,7 +10,7 @@ The design tokens are stored in a standard W3C JSON format. For more information
 
 ### Style Dictionary
 
-[Style Dictionary][style-dictionary] is utilized to transform the token definitions into CSS and JavaScript variables. Style Dictionary allows for the definition and transformation of design tokens into various formats.
+[Style Dictionary][style-dictionary] is utilized to transform the token definitions into CSS variables and TypeScript constants. Style Dictionary allows for the definition and transformation of design tokens into various formats.
 
 ### Tokens Studio Plugin
 
@@ -39,10 +39,10 @@ The design system uses the Roboto, Roboto Condensed and Roboto Mono fonts for ty
 To use the design tokens and basic CSS you can simply import the following into a central CSS of your project:
 
 - `@import "@knime/kds-styles/kds-variables.css";`: Imports all built design tokens as CSS variables, including the colors in light and dark mode
-- `@import "@knime/kds-styles/fonts.css"`: Import CSS font definitions for Roboto and Roboto Mono
-- `@import "@knime/kds-styles/fonts-workflows.css"`: Import CSS font definitions for Roboto Condensed which is only used in the context of workflow editing
+- `@import "@knime/kds-styles/kds-properties.css";`: The same tokens declared as typed `@property` rules (syntax + initial value), which makes them type-checked and animatable. Optional and independent of `index.css`.
+- `@import "@knime/kds-styles/fonts.css"`: Import the CSS font definitions. The file is generated from the font tokens, so it covers every family the tokens reference — Roboto, Roboto Mono, and Roboto Condensed (the latter is only used in the context of workflow editing)
 
-- `@import "@knime/kds-styles/index.css"`: Bundles all previous imports and adds basic core style rules, e.g. uses modern-normalize for browser reset. **Important:** Use only for new projects, or if conversion is already at a point where core styles can be replaced.
+- `@import "@knime/kds-styles/index.css"`: Bundles `fonts.css`, modern-normalize (browser reset), `kds-variables.css`, and basic core style rules. **Important:** Use only for new projects, or if conversion is already at a point where core styles can be replaced.
 
 ### Enabling Dark Mode
 
@@ -60,7 +60,7 @@ An app that cannot import `index.css` yet — e.g. it still needs the `@knime/st
 
 Do so deliberately if the app is only partially migrated: legacy `--knime-*` properties are hard-coded light and ignore `light-dark()`, so those parts stay light, and `color-scheme` also switches browser chrome (scrollbars, form controls, canvas background).
 
-For an explicit user override, call `useKdsDarkMode()` from `@knime/kds-components`. It writes `color-scheme` inline on `<html>`, winning over the rule above. It needs a DOM, so in a server-rendered app call it from client-only code and leave the `system` default to CSS.
+For an explicit user override, call `useKdsDarkModeController()` from `@knime/kds-components`. It writes `color-scheme` inline on `<html>`, winning over the rule above. It needs a DOM, so in a server-rendered app call it from client-only code and leave the `system` default to CSS.
 
 ### Design Tokens in JavaScript/TypeScript
 
@@ -81,10 +81,18 @@ font.base.display.small.css.value; // "700 20px/normal Roboto, sans-serif"
 
 The exports mirror the token JSON structure (without the `kds` root): one constant per top-level token group plus the value types (`KdsColor`, `KdsDimension`, `KdsTypography`, ...). Dimensional values are `{ value, unit }` objects, color values are always `{ light, dark }` pairs of HSL component objects (equivalent to the CSS color `hsl(<h> <s>% <l>% / <a>)`), and composite tokens (border, elevation, typography) remain structured objects. Every token additionally carries its CSS representation in `css`: the exact value from the emitted CSS custom properties (`css.value`, including `light-dark()` for colors and complete shorthands for composite tokens) and the custom property reference (`css.variable`). The internal `core` primitives are intentionally not emitted — their values are already inlined into the semantic tokens, which are the only ones consumers should use.
 
+## Icons
+
+The SVG icons are shipped as `@knime/kds-styles/img/icons/<name>` and `@knime/kds-styles/img/type-icons/<name>` (data type icons). `@knime/kds-styles/img/icons/def` and `@knime/kds-styles/img/type-icons/def` export the lists of available names. In Vue apps, prefer `KdsIcon` and `KdsDataType` from `@knime/kds-components`.
+
 ## Important Scripts
 
 Here are some of the most important scripts defined in the [`package.json`](package.json):
 
+- **Build**: Builds everything (tokens, icons, CSS and fonts) into `dist/`
+  ```
+  pnpm build
+  ```
 - **Build Design Tokens**: Builds the design tokens. The resulting files will be written in `dist/tokens/`
   ```
   pnpm build:tokens

package/dist/css/basics.css

@@ -4,8 +4,8 @@
   /*
    * Follow the device preference. The color tokens resolve via `light-dark()`,
    * so this needs no JavaScript and applies on the first paint.
-   * `useKdsDarkMode()` overrides it with an inline style for an explicit
-   * light/dark preference.
+   * `useKdsDarkModeController()` overrides it with an inline style for an
+   * explicit light/dark preference.
    */
   color-scheme: light dark;
 }

package/dist/tokens/css/_properties.css

@@ -1262,6 +1262,24 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%));
 }
 
+@property --kds-color-background-neutral-opaque-initial {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%));
+}
+
+@property --kds-color-background-neutral-opaque-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
+}
+
+@property --kds-color-background-neutral-opaque-active {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 43%));
+}
+
 @property --kds-color-background-primary-initial {
 syntax: "<color>";
   inherits: true;
@@ -1730,6 +1748,24 @@ syntax: "<color>";
   initial-value: light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
 }
 
+@property --kds-color-border-neutral-opaque-initial {
+syntax: "<color>";
+  inherits: true;
+  initial-value: hsl(0, 0%, 64%);
+}
+
+@property --kds-color-border-neutral-opaque-hover {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+}
+
+@property --kds-color-border-neutral-opaque-active {
+syntax: "<color>";
+  inherits: true;
+  initial-value: light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%));
+}
+
 @property --kds-color-focus-outline {
 syntax: "<color>";
   inherits: true;

package/dist/tokens/css/_variables.css

@@ -213,6 +213,9 @@
   --kds-color-background-neutral-bold-initial: light-dark(hsl(0 0% 72.5% / 0.4), hsl(0, 0%, 32.2%));
   --kds-color-background-neutral-bold-hover: light-dark(hsl(210 0% 62.977% / 0.4), hsl(0, 0%, 48.2%));
   --kds-color-background-neutral-bold-active: light-dark(hsl(0 0% 59.859% / 0.4), hsl(0, 0%, 72.5%));
+  --kds-color-background-neutral-opaque-initial: light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%));
+  --kds-color-background-neutral-opaque-hover: light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%));
+  --kds-color-background-neutral-opaque-active: light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 43%));
   --kds-color-background-primary-initial: light-dark(hsl(168, 46.7%, 85.3%), hsl(169.8, 30.6%, 66.1%));
   --kds-color-background-primary-hover: light-dark(hsl(167.99 27.818% 77.703%), hsl(169.6 30.517% 68.835%));
   --kds-color-background-primary-active: light-dark(hsl(167.97 18.664% 70.242%), hsl(168.98 30.352% 78.334%));
@@ -291,6 +294,9 @@
   --kds-color-border-neutral-bold-initial: light-dark(hsl(0 0% 10.2% / 0.4), hsl(0 0% 99% / 0.4));
   --kds-color-border-neutral-bold-hover: light-dark(hsl(0 0% 10.2% / 0.64), hsl(0 0% 99% / 0.58));
   --kds-color-border-neutral-bold-active: light-dark(hsl(0 0% 10.2% / 0.74), hsl(0 0% 99% / 0.68));
+  --kds-color-border-neutral-opaque-initial: hsl(0, 0%, 64%);
+  --kds-color-border-neutral-opaque-hover: light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%));
+  --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-blanket-default: hsl(0 0% 11.4% / 0.8);

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

@@ -53,6 +53,20 @@ export type KdsColorTokens = {
              */
             readonly active: KdsColor;
         };
+        readonly "neutral-opaque": {
+            /**
+             * Opaque neutral background for clickable elements that sit on top of other content, e.g. on the canvas. Counterpart to the semi-transparent background.neutral.
+             */
+            readonly initial: KdsColor;
+            /**
+             * Opaque neutral background on hover for clickable elements that sit on top of other content. Counterpart to the semi-transparent background.neutral.hover.
+             */
+            readonly hover: KdsColor;
+            /**
+             * Opaque neutral background when pressed for clickable elements that sit on top of other content. Counterpart to the semi-transparent background.neutral.active.
+             */
+            readonly active: KdsColor;
+        };
         readonly primary: {
             /**
              * Light-teal background for primary actions or highlights.
@@ -391,6 +405,18 @@ export type KdsColorTokens = {
          * Neutral border for ResizeHandler on active. [Used as reference token only for the ResizeHandler composite tokens]
          */
         readonly "neutral-bold-active": KdsColor;
+        /**
+         * Opaque neutral border for components that sit on top of other content, e.g. on the canvas. Counterpart to the semi-transparent border.neutral.
+         */
+        readonly "neutral-opaque-initial": KdsColor;
+        /**
+         * Opaque neutral border on hover for components that sit on top of other content. Counterpart to the semi-transparent border.neutral-bold-hover.
+         */
+        readonly "neutral-opaque-hover": KdsColor;
+        /**
+         * Opaque neutral border when pressed for components that sit on top of other content. Counterpart to the semi-transparent border.neutral-bold-active.
+         */
+        readonly "neutral-opaque-active": KdsColor;
     };
     readonly focus: {
         /**

package/dist/tokens/ts/color.js

@@ -92,6 +92,32 @@ export const color = {
                 },
             },
         },
+        "neutral-opaque": {
+            initial: {
+                light: { h: 0, s: 0, l: 99, a: 1 },
+                dark: { h: 0, s: 0, l: 22, a: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 99%), hsl(0, 0%, 22%))",
+                    variable: "var(--kds-color-background-neutral-opaque-initial)",
+                },
+            },
+            hover: {
+                light: { h: 0, s: 0, l: 94.1, a: 1 },
+                dark: { h: 0, s: 0, l: 32.2, a: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 94.1%), hsl(0, 0%, 32.2%))",
+                    variable: "var(--kds-color-background-neutral-opaque-hover)",
+                },
+            },
+            active: {
+                light: { h: 0, s: 0, l: 90.2, a: 1 },
+                dark: { h: 0, s: 0, l: 43, a: 1 },
+                css: {
+                    value: "light-dark(hsl(0, 0%, 90.2%), hsl(0, 0%, 43%))",
+                    variable: "var(--kds-color-background-neutral-opaque-active)",
+                },
+            },
+        },
         primary: {
             initial: {
                 light: { h: 168, s: 46.7, l: 85.3, a: 1 },
@@ -742,6 +768,30 @@ export const color = {
                 variable: "var(--kds-color-border-neutral-bold-active)",
             },
         },
+        "neutral-opaque-initial": {
+            light: { h: 0, s: 0, l: 64, a: 1 },
+            dark: { h: 0, s: 0, l: 64, a: 1 },
+            css: {
+                value: "hsl(0, 0%, 64%)",
+                variable: "var(--kds-color-border-neutral-opaque-initial)",
+            },
+        },
+        "neutral-opaque-hover": {
+            light: { h: 0, s: 0, l: 43, a: 1 },
+            dark: { h: 0, s: 0, l: 72.5, a: 1 },
+            css: {
+                value: "light-dark(hsl(0, 0%, 43%), hsl(0, 0%, 72.5%))",
+                variable: "var(--kds-color-border-neutral-opaque-hover)",
+            },
+        },
+        "neutral-opaque-active": {
+            light: { h: 0, s: 0, l: 32.2, a: 1 },
+            dark: { h: 0, s: 0, l: 90.2, a: 1 },
+            css: {
+                value: "light-dark(hsl(0, 0%, 32.2%), hsl(0, 0%, 90.2%))",
+                variable: "var(--kds-color-border-neutral-opaque-active)",
+            },
+        },
     },
     focus: {
         outline: {

package/package.json

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