# ![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. ## Design Tokens Format The design tokens are stored in a standard W3C JSON format. For more information, see the [W3C Design Tokens Format][w3c-format]. ## Transformation Process ### 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. ### Tokens Studio Plugin Certain tokens employ special modifiers from Tokens Studio. To manage these modifiers, the [Tokens Studio Style Dictionary Plugin][tokens-studio-plugin] is used. This plugin provides a preprocessor and custom transforms to accurately calculate the values of the tokens. ### Calculation of Values All token values are fully calculated, ensuring that no variable references remain in the result files. This guarantees that the output files contain only the final values. ### Light and Dark Mode Two sets of files are generated for light and dark mode. Subsequently, the CSS files are merged to contain all variables only once. For variables that use different color values in light and dark mode, the `light-dark()` function is employed. In the TypeScript exports, color values are always emitted as `{ light, dark }` pairs (colors are the only mode-dependent token values); all other values are identical in both modes and stay plain. ## Fonts The design system uses the Roboto, Roboto Condensed and Roboto Mono fonts for typography. When using `@knime/kds-styles` as a dependency the fonts will automatically be installed, no separate dependency is needed. ## Usage 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/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. ### Enabling Dark Mode The color tokens resolve through `light-dark()`, so the root element's `color-scheme` decides light vs. dark. Its default (`normal`) resolves every token to its light value — an app that never sets it renders light on a dark device. `index.css` declares `color-scheme: light dark` on `:root`, which makes it **the recommended import for apps that are completely dark-mode-ready**: no JavaScript, and it applies on the first (even server-rendered) paint, so nothing flickers on hydration. An app that cannot import `index.css` yet — e.g. it still needs the `@knime/styles` reset and only imports `kds-variables.css` — can declare the property itself: ```css :root { color-scheme: light dark; } ``` 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 ``, 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 For cases where CSS variables cannot be used (e.g. layout calculations, canvas rendering or JavaScript services), the design tokens are also exported as TypeScript constants. They are shipped precompiled (ESM `.js` + `.d.ts`), so they work in any environment — including plain Node.js — without additional setup: ```ts import { color, dimension, font } from "@knime/kds-styles/tokens"; dimension.component.height["1.5x"].value; // 24 (px) dimension.component.height["1.5x"].css.value; // "24px" color.surface.default.light; // { h: 0, s: 0, l: 98, a: 1 } color.surface.default.dark; // { h: 0, s: 0, l: 15.7, a: 1 } color.surface.default.css.value; // "light-dark(hsl(0, 0%, 98%), hsl(0, 0%, 15.7%))" color.surface.default.css.variable; // "var(--kds-color-surface-default)" font.base.display.small.fontSize; // { value: 20, unit: "px" } 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( % % / )`), 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. ## Important Scripts Here are some of the most important scripts defined in the [`package.json`](package.json): - **Build Design Tokens**: Builds the design tokens. The resulting files will be written in `dist/tokens/` ``` pnpm build:tokens ``` # Join the Community! - [KNIME Forum](https://forum.knime.com/) [w3c-format]: https://tr.designtokens.org/format/ [style-dictionary]: https://styledictionary.com/ [tokens-studio-plugin]: https://www.npmjs.com/package/@tokens-studio/sd-transforms