gulp-theo
Theo is a gulp plugin for transforming and formatting Design Tokens with Theo.
Install
npm install theo gulp-theo --save-dev
Usage
Here is a simple example with one file (props.yml
)
that gets transformed into its Sass (SCSS) equivalent:
# design/props.ymlglobal: category: 'web' type: 'color'props: foo: value: '#ff0000' baz: value: '#0000ff'
// gulpfile.jsconst gulp = const theo = // Transform design/props.yml to dist/props.scss:gulp
Running gulp run tokens:scss
outputs:
// dist/props.scss ;;
Advanced Usage
In this example (available in the /example folder), gulp-theo generates multiple files, transformed using a custom format (array.js
).
# tokens/_aliases.ymlaliases: red: 'rgb(255, 0, 0)' blue: 'rgb(0, 0, 255)'
# tokens/_colors.ymlglobal: category: 'web' type: 'color'imports: - _aliases.ymlprops: brand: value: '{!blue}' comment: 'ACME Inc. brand color.' primary: value: '{!red}' comment: 'Use the primary color on call-to-action buttons. e.g. "Save", "Log In"…'
# tokens/_mobile-overrides.ymlglobal: category: 'web' type: 'mobile'props: large: value: '3rem'
# tokens/_sizes.ymlglobal: category: 'web' type: 'size'imports: - _aliases.ymlprops: medium: value: '1rem' large: value: '2rem'
# tokens/default.ymlimports: - _colors.yml - _sizes.yml
# tokens/mobile.ymlimports: - _colors.yml - _sizes.yml - _mobile-overrides.yml
// gulpfile.jsconst gulp = const gulpTheo = const theo = theo gulp
Running gulp tokens:array
will output:
// dist/default.array.js // Source: defaultmoduleexports = // ACME Inc. brand color. 'brand' 'rgb(0, 0, 255)' // Use the primary color on call-to-action buttons. e.g. "Save", "Log In"… 'primary' 'rgb(255, 0, 0)' 'medium' '1rem' 'large' '2rem'
// dist/mobile.array.js // Source: mobilemoduleexports = // ACME Inc. brand color. 'brand' 'rgb(0, 0, 255)' // Use the primary color on call-to-action buttons. e.g. "Save", "Log In"… 'primary' 'rgb(255, 0, 0)' 'medium' '1rem' 'large' '3rem'
Another example is available at https://github.com/salesforce-ux/theo-example.
For any other options, refer to Theo’s documentation.