The token object (colors, spacing, etc.)
The prefix to use for variable names (e.g., 'spacing-')
Additional options
CSS variables object
import * as Styles from '@universityofmaryland/web-styles-library';
const colors = {
primary: '#ff0000',
secondary: '#00ff00',
neutral: {
100: '#ffffff',
900: '#000000'
}
};
const variables = Styles.utilities.transform.variables.fromTokens(colors, 'color-');
// Result: {
// '--color-primary': '#ff0000',
// '--color-secondary': '#00ff00',
// '--color-neutral-100': '#ffffff',
// '--color-neutral-900': '#000000'
// }
Converts a design token object to CSS variables with a configurable prefix.