Automatically generate cross-platform Design Tokens for the Lyne Design System based json properties files
and publish them as @sbb-esta/lyne-design-tokens
npm package.
Install the Lyne Design Tokens with the following command:
npm install --save-dev @sbb-esta/lyne-design-tokens
lyne-design-tokens/
โโโ composed-variables/ # Composed CSS variables like responsive tokens
โโโ designTokens/ # Token source files
โโโ dist/ # These files get built through the build task and get published via npm โ are part of the npm package
โโโ css/
โ โโโ sbb-variables--host.css # `sbb-` prefixed CSS variables with :host selector (converted to `rem`)
โ โโโ sbb-variables--root.css # `sbb-` prefixed CSS variables with :root selector (converted to `rem`)
โโโ js/
โ โโโ sbb-tokens-raw.json # `sbb-` prefixed nested .json file
โ โโโ sbb-tokens.mjs # `Sbb` prefixed flat esm file
โ โโโ sbb-tokens.cjs # `Sbb` prefixed flat commonjs file
โ โโโ sbb-tokens.d.ts # `Sbb` prefixed flat type declaration
โ โโโ sbb-tokens.json # `sbb-` prefixed flat .json file
โโโ scss/
โโโ sbb-variables_css--placeholder.scss # `sbb-` prefixed CSS variables with Sass placeholder selector (%) (converted to `rem`)
โโโ sbb-variables.scss # `sbb-` prefixed Sass variables (converted to `rem`)
Have a look at the dist folder inside node_modules: ./node_modules/@sbb-esta/lyne-design-tokens/dist/
.
There you will find the different variables files which you can import and use in your project.
Please follow the Conventional Commits specification to make sure we can automatically determine the next release version if necessary.
See Lyne Components for components using these design tokens.