npm install theme-builderBuild theme's variables form YAML to consumable format (like JS or SCSS)
npm install theme-builder``js
const themeBuilder = require('theme-builder');
const builder = themeBuilder({
format: 'scss',
prefix: 'tx',
});
builder.build(pathToYamlFile)
.then(themeScss => console.log(themeScss));
`
- just a plain javascript object
- scss - SCSS variablesHow it works (example)
You have index.yaml and you want to convert it to SCSS:`yaml
generic:
color:
accent: &accent '#1fcff6'
button:
color:
bg: *accent
`So, you can call
themeBuilder function like this:`js
themeBuilder({ format: 'scss' })
.build('index.yaml')
.then(themeScss => console.log(themeScss));
`and as result you will get string with 2 variables:
`scss
$ui-generic-color-accent: #1fcff6;
$ui-button-color-bg: #1fcff6;
`You can save the output to
.scss file and use while writing your styles.How to override default theme
You can provide array of yaml files, and themeBuilder will merge it one by one:#### How it works (example)
You have
default.yaml and custom.yaml, you want to merge it and convert it to SCSS:./default.yaml
`yaml
generic:
color:
accent: &accent '#1fcff6'
button:
color:
bg: *accent
`./custom.yaml
`yaml
generic:
color:
accent: &accent '#283A8E'
``js
themeBuilder()
.build(['default.yaml', 'custom.yaml'])
.then(themeScss => console.log(themeScss));
`
and as result you will get string with 2 variables:
`scss
$ui-generic-color-accent: #283A8E;
$ui-button-color-bg: #283A8E;
`#### How to watch changes
`js
themeBuilder()
.watch(['default.yaml', 'custom.yaml'], updatedTemeScss => console.log(updatedTemeScss));
`API (Types)
`jsx
function themeBuilder(
// Path to main theme YAML file
themeYaml: string, // Output format
format: string,
// Optional config
config?: Config
): any
type Config = {
// Processors for additional formats
processors?: {[name: string]: Processor},
// Output unit prefixes, eg. SCSS variables names prefixes
prefix?: string,
}
type Processor = {
compile(obj: object): any
}
``