@avaco/utility-theme-composer

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 Composer = require('@avaco/utility-theme-composer')

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

// Create theme composer
const theme = new Composer(themeSetup)

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

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

Setup conf

Setup of the composer is optional but in most cases desired. The composer 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 composer. 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 composer will fallback to these defaults.

const theme = new Composer({
  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 Composer({
  ci: {
    DEFAULT: '#f8ff6e'
    light: '#faff94
  }
}

API of instance created with new Composer()

.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;
}