postcss-design-token-function
A PostCSS to add custom functions for accessing your design tokens.
Installation
npm install postcss-design-token-function
Usage
In JavaScript, simply pass an object with your design token information along with the name of the function by which you will retrieve that data in your CSS. Values can be simple strings or nested objects, which are useful for cases where you have naturally nested design details (e.g., values for your color palette).
// dependencies;;; // css to be processedconst css = fs; // your colorsconst colors = white: '#F2F5FF' blue: light: '#A2CEFF' base: '#5898FF' ; // process cssvar output = css
And, in CSS, used the color
function to reference your color palette. You can use the shade
option to reference the nested shades, if provided (omitting a shade will default to using the base
key of a nested color):
Which will generate:
Options
The following is a complete list of the possible options you can pass this plugin:
Note that you can generate functions for different design tokens by executing this plugin multiple times with each token's data provided in turn.