在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):salesforce-ux/gulp-theo开源软件地址(OpenSource Url):https://github.com/salesforce-ux/gulp-theo开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):gulp-theoTheo is a gulp plugin for transforming and formatting Design Tokens with Theo. Installnpm install theo gulp-theo --save-dev UsageHere is a simple example with one file ( # design/props.yml
global:
category: 'web'
type: 'color'
props:
foo:
value: '#ff0000'
baz:
value: '#0000ff' // gulpfile.js
const gulp = require('gulp')
const theo = require('gulp-theo')
// Transform design/props.yml to dist/props.scss:
gulp.task('tokens:scss', () =>
gulp.src('design/props.yml')
.pipe(theo({
transform: { type: 'web' },
format: { type: 'scss' }
}))
.pipe(gulp.dest('dist'))
) Running // dist/props.scss
$foo: rgb(255, 0, 0);
$baz: rgb(0, 0, 255); Advanced UsageIn this example (available in the /example folder), gulp-theo generates multiple files, transformed using a custom format ( # tokens/_aliases.yml
aliases:
red: 'rgb(255, 0, 0)'
blue: 'rgb(0, 0, 255)' # tokens/_colors.yml
global:
category: 'web'
type: 'color'
imports:
- _aliases.yml
props:
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.yml
global:
category: 'web'
type: 'mobile'
props:
large:
value: '3rem' # tokens/_sizes.yml
global:
category: 'web'
type: 'size'
imports:
- _aliases.yml
props:
medium:
value: '1rem'
large:
value: '2rem' # tokens/default.yml
imports:
- _colors.yml
- _sizes.yml # tokens/mobile.yml
imports:
- _colors.yml
- _sizes.yml
- _mobile-overrides.yml // gulpfile.js
const gulp = require('gulp')
const gulpTheo = require('gulp-theo')
const theo = require('theo')
theo.registerFormat('array.js', `
// Source: {{stem meta.file}}
module.exports = [
{{#each props as |prop|}}
{{#if prop.comment}}// {{{prop.comment}}}{{/if}}
['{{camelcase prop.name}}', '{{prop.value}}'],
{{/each}}
]
`)
gulp.task('tokens:array', () =>
gulp.src([
// Look for yml files
'tokens/*.yml',
// Exclude partials (files prefixed with _)
'!tokens/_*'
])
.pipe(gulpTheo(
{
transform: {
type: 'web'
},
format: {
type: 'array.js'
}
}
))
.pipe(gulp.dest('dist'))
) Running // dist/default.array.js
// Source: default
module.exports = [
// 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: mobile
module.exports = [
// 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. |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论