scss-theo-importer

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 = require('scss-theo-importer')

module.exports = {
	importer: [theoImporter()],
}

# 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

@import './tokens/index.theo.yml';

body {
	background-color: $color-background;
}

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' }