Color utilities

Modify the color of any elements tagetting font, background and/or border.

Loop gives you few colors by default to avoid overloading the CSS of rules you might not need.

palette: (
  'primary': #0ea7d6,
  'secondary': #959595,
),

// default settings
color: (
  font: (
    prefix: 'color',
    property: 'color',
    values: this('palette'),
  ),
  background: (
    prefix: 'bg',
    property: 'background-color',
    values: (
      _this('palette'),
      (
        'secondary': #f8f8f8,
      )
    )
  ),
  border: (
    property: 'border-color',
    values: (), // no border utilities
  ),
),

Set your preferences to the config.

$ooLoop: ooPipe(
  _add('palette', (
    'danger': #da3b3b // danger globally
  )),
  _add('color.font.values', (
    'warning': #ce8a0d,
  )),
  _add('color.background.values', (
    'danger': #f7c8c8, //override the danger value for background
  )),
  _set('color.border.values', this('palette')), //add global values
);

In manual mode add the mixin Color()

Make Utilities << >> Use Typography utilities