This is how to implement the design tokens in your project.
You can import the tokens as a JSON file, CSS variables or sass.
This file contains all tokens with a lot of additional information and can be used in any build system.
Make sure to not import the full file in your production build, as it is quite large.
TODO: Instead, you can import the variables.json file, which only contains the token values.
import tokens from "@wfp/themes-core/dist/json/variables-full.json";
The CSS file contains all tokens as CSS variables as a sass mixin.
@use "@wfp/themes-core/dist/scss/default-css-theme" as defaulttheme;// Use the WFP theme:root {@include defaulttheme.theme-default();}
sass is a CSS preprocessor that allows you to use variables, nested rules, mixins, functions, and more with a fully CSS-compatible syntax. It helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
tokens.scss contains all tokens as sass variables. This file is used to generate the CSS file.
@use "@wfp/themes-core/dist/scss/tokens" as tokens;/* Contains$content-content4-earthy-brown-content4-80: var(--content-content4-earthy-brown-content4-80, "#fda987") !default;*/
tokensMapDeep.scss contains all tokens as a nested scss object.
@use "@wfp/themes-core/dist/scss/tokensMapDeep" as tokensMapDeep;
tokensMapFlat.scss contains all tokens as a flat scss object.
@use "@wfp/themes-core/dist/scss/tokensMapFlat" as tokensMapFlat;