theme-builder

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 = require('theme-builder');

const builder = themeBuilder({
  format: 'scss',
  prefix: 'tx',
});

builder.build(pathToYamlFile)
  .then(themeScss => console.log(themeScss));

Current formats

• js - just a plain javascript object
• scss - 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:

themeBuilder({ format: 'scss' })
  .build('index.yaml')
  .then(themeScss => console.log(themeScss));

and as result you will get string with 2 variables:

$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

generic:
  color:
    accent: &accent '#1fcff6'
button:
  color:
    bg: *accent

./custom.yaml

generic:
  color:
    accent: &accent '#283A8E'

themeBuilder()
  .build(['default.yaml', 'custom.yaml'])
  .then(themeScss => console.log(themeScss));

and as result you will get string with 2 variables:

$ui-generic-color-accent: #283A8E;
$ui-button-color-bg: #283A8E;

How to watch changes

themeBuilder()
  .watch(['default.yaml', 'custom.yaml'], updatedTemeScss => console.log(updatedTemeScss));

API (Types)

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
}