Theme builder
Build theme's variables form YAML to consumable format (like JS or SCSS)
Installing
npm install theme-builder
How to use
const themeBuilder = ; const builder = ; builder ;
Current formats
js
- just a plain javascript objectscss
- SCSS variables
How it works (example)
You have index.yaml
and you want to convert it to SCSS:
generic: color: accent: &accent '#1fcff6'button: color: bg: *accent
So, you can call themeBuilder
function like this:
;
and as result you will get string with 2 variables:
;;
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
generic: color: accent: &accent '#1fcff6'button: color: bg: *accent
./custom.yaml
generic: color: accent: &accent '#283A8E'
;
and as result you will get string with 2 variables:
;;
How to watch changes
;
API (Types)
: any type Config = { // Processors for additional formats processors?: name: string: Processor // Output unit prefixes, eg. SCSS variables names prefixes prefix?: string} type Processor = : any