3 #skin Skin module

A "Skin" module for Chroma.

Sometimes design and engineering requirements mean that we need to:

  • output the colors for default color scheme and one or more additional color schemes into the same CSS file
  • and to control which color scheme is used via a "global" CSS class name set on the web pages's html or body element.

For example, the .my-complexion component may output a blue text color on most pages, but on pages with a <html class="skin-wicked-witch">, the .my-complexion component will output a green text color.

The Skin module will help with this requirement.

After defining your color schemes and their colors, you can define one or more of those schemes as skins while providing the proper CSS parent selector to use for that skin.

3.1 #skin.define-skins define-skins($skins)

Defines one or more color schemes as being a skin. For each of the specified color schemes, define-skins() will tell Chroma to use the scheme with the corresponding CSS selector when the skin() mixin is used.

Usage:

$chroma: define-skins((
  'scheme1': '.is-scheme1-skin',
  'scheme2': '.is-scheme2-skin',
  'scheme3': 'html > body.this-works-but-is.way.too.specific.IMHO',
));
Parameters:
  • $skins
    A map of color schemes and their CSS parent selectors. Each key in the map must be the name of an existing color scheme. The value of each key is the CSS parent selector that triggers the use of the defined scheme instead of the default color scheme. We recommend using a simple CSS selector like .is-CUSTOMNAME-skin.
Source: chroma/_functions.scss, line 444

3.2 #skin.skin skin([$skins])

Output the default color and all the colors needed for defined skins.

Usage:

h1 {
  @include skin() {
    color: color(heading);
  }
}
Parameters:
  • $skins
    An optional list of color scheme names and selectors to use instead of the skins defined with define-skins(). The format of this list should match that of the $skins parameter in define-skins().
Source: chroma/_skin.scss, line 27

3.3 #skin.define-skin define-skin($scheme, $selector)

Deprecated: Will be removed in Chroma 2.0.0. Use define-skins() instead.