@knime/kds-styles
Advanced tools
Package containing the design tokens and icons for the KNIME Design System
KNIME® Design TokensThis 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.
The design tokens are stored in a standard W3C JSON format. For more information, see the W3C Design Tokens Format.
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.
Certain tokens employ special modifiers from Tokens Studio. To manage these modifiers, the Tokens Studio Style Dictionary Plugin is used. This plugin provides a preprocessor and custom transforms to accurately calculate the values of the tokens.
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.
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.
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.
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/kds-legacy-theme.css";: Imports a legacy theme, which should be used to roll out design system components and tokens into an existing project, styles are adopted so old webapps-common components and new components can be used side by side
@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.
Here are some of the most important scripts defined in the package.json:
dist/tokens/
pnpm build:tokens
FAQs
Package containing the design tokens and icons for the KNIME Design System
The npm package @knime/kds-styles receives a total of 2,702 weekly downloads. As such, @knime/kds-styles popularity was classified as popular.
We found that @knime/kds-styles demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.