@avaco/utility-theme-creator

This package is used by @avaco/utility-service within the distribution-theme command to create the theme files in packages like:

• @avaco/setup-theme
• @a-paxx24/setup-theme
• namespace/setup-theme

Usage

const Creator = require('@avaco/utility-theme-creator')

// Theme options (optional) see beneath in *configuration*
const themeSetup = {
}

// Create theme creator
const theme = new Creator(themeSetup)

// Create and get custom properties from themeSetup/defaultTheme
console.log(theme.customProperties())

// Create and get valid css string with custom property declarations
console.log(theme.css())

Setup conf

Setup of the creator is optional but in most cases desired. The creator relies on a default configuration that can be found in defaultTheme.js. The defaultTheme.js will always serve as base custom theme configurations.

Passing a customized setup

To customize the setup pass the disred theme setup as parameter to the creator. Defined keys of the customization will overwrite those in the defaultTheme.js. If the customization does not offer all keys that have been defined inside defaultTheme.js the creator will fallback to these defaults.

const theme = new Creator({
  colors: {
    ci: {
      DEFAULT: '#de9bb6'
    }
  }
})

Color mixins

The default setup makes use of mixin-methods like light(hexcolor: string) or dark(hexcolor: string) which always use the actual defined DEFAULT key in the actual palette to generate color variants:

// in defaultTheme.js
// no need to extra define light & dark in the customized theme setup
const { light, dark } = require('./lib/colors')

colors: {
  ci: {
    DEFAULT: '#2563eb',
    light,
    dark
  }
}

// => {
//  'colors-ci-default' => '#2563eb'
//  'colors-ci-light' => '#d6d5fb',
//  'colors-ci-dark' => '#284aab'
// }

This means if a customization just overwrites the ci.DEFAULT key (to e.g. #de9bb6), then the mixins will automatically use the new assigned value during theme composing.

If in some case for example a ci color is to bright in its light variant (colors-ci-light) it is also possible to overwrite the light key and its method with an specific hex color code:

// dark will still get generated by the dark() mixin
// light will no longer be generated from light mixin
const theme = new Creator({
  ci: {
    DEFAULT: '#f8ff6e'
    light: '#faff94
  }
}

API of instance created with new Creator()

.customProperties()

Returns a JavaScript map object that looks like:

// theme.customProperties() =>
Map(18) {
  'colors-ci-default' => '#2563eb',
  'colors-ci-flow-elevated' => '#111827',
  'colors-ci-flow' => '#6b7280',
  'colors-ci-upon' => '#ffffff',
  'colors-ci-light' => '#d6d5fb',
  'colors-ci-dark' => '#284aab',
  'colors-danger-default' => '#ef4444',
  'colors-danger-light' => '#ffd4cd',
  'colors-danger-dark' => '#af3734',
  'colors-info-default' => '#8b5cf6',
  'colors-info-light' => '#e6d5fe',
  'colors-info-dark' => '#6846b2',
  'colors-warning-default' => '#f59e0b',
  'colors-warning-light' => '#ffe6c7',
  'colors-warning-dark' => '#b37415',
  'colors-success-default' => '#10b981',
  'colors-success-light' => '#d0eede',
  'colors-success-dark' => '#1d875f'
}

.css()

Returns the final minified css as string, containing the custom property declarations:

// theme.css() (actually minified, but here displayed beautified) =>
:root {
  --colors-ci-default: #2563eb;
  --colors-ci-flow-elevated: #111827;
  --colors-ci-flow: #6b7280;
  --colors-ci-upon: #ffffff;
  --colors-ci-light: #d6d5fb;
  --colors-ci-dark: #284aab;
  --colors-danger-default: #ef4444;
  --colors-danger-light: #ffd4cd;
  --colors-danger-dark: #af3734;
  --colors-info-default: #8b5cf6;
  --colors-info-light: #e6d5fe;
  --colors-info-dark: #6846b2;
  --colors-warning-default: #f59e0b;
  --colors-warning-light: #ffe6c7;
  --colors-warning-dark: #b37415;
  --colors-success-default: #10b981;
  --colors-success-light: #d0eede;
  --colors-success-dark: #1d875f;
}