scss-theo-importer
Basic importer for using Theo design token files directly in Sass
Intention
Design tokens are great - but they are better when they can be used invisibly by a variety of consumers. This Sass importer allows you to import design token files (either yml or json), formatted according to https://github.com/salesforce-ux/theo, directly in Sass, with the tokens converted into Sass variables.
Installation
npm install scss-theo-importer
Usage
// .sassrc.js const theoImporter = moduleexports = importer:
# src/tokens/_color.theo.yml props: color-background: value: '{!gray}'aliases: gray: '#eff4f6'global: type: color category: color # src/tokens/index.theo.yml imports: - ./_color.theo.scss
// src/app.scss ; body
Options
The theoImporter
function takes an optional object argument with the following
possible props:
opts.matcher
The regex used to match token filenames
- type:
RegExp
- default:
/\.theo\.(ya?ml|json)$/
opts.transform
The transform passed to the underlying Theo conversion (file
is added dynamically)
- type: see https://github.com/salesforce-ux/theo#transforms
- default:
{type: 'web'}
opts.format
The format passed to the underlying Theo conversion
- type: see https://github.com/salesforce-ux/theo#formats
- default:
{ type: 'default.scss' }