Accoutrement 2.1.1

Accessing Colors

@function color()

The primary function for accessing colors in your palette, or making adjustments on the fly.

This is more than a wrapper for map-get($colors, $x). It also handles internal color-references, recursion, and functional color-adjustments. It has access to the global $colors map by default, but you can also pass in arbitrary color-palette maps as well.

Since 2.0.0:

  • BREAKING: Provides access to color-contrast defaults, if they haven’t been re-set by the user

Since 1.0.0:

  • BREAKING: Renamed $palette arg to $source
  • BREAKING: Accepts $do argument between $color and $source

Parameters & Return

$color: (string | list)

The name of a color in your palette, or a color description in the map configuration format.

$do: null (map | null)

A map of function/ratio adjustments to run on the returned value

$source: $colors (map)

Optional map containing the source color-palette. Defaults to the global $colors map.

@return (color)

A calculated css-ready color, based on your global color palette and adjustments.

Example

scss
$colors: (
  'background': #eee,
  'text': #222,
);

html {
  background: color('background');
  color: color('text');
}
css compiled
html {
  background: #eee;
  color: #222;
}

Requires

@function get-token()

$_a_COLORS (map) [private]

Used By

@mixin contrasted()

@function luminance()

@function shades-of()

@function stripe-colors()

@function tint()

@function shade()

@function _a_best-contrast() [private]

Color Configuration

$colors (map)

scss
$colors: () !default;

A variable storing the map of all colors globally-available on your project. Any colors added to the $colors map will be accessible to the color() function by default.

Define each color with a name, base-value, and optional adjustments

$colors: (
  'color-name': <base-value>,
  'color-two': <base-value> ('<color-function>': '<arguments>'),
  // will return: function-name($base-value, $arguments...)
);
  • Name your colors anything – from abstractions like brand-pink, to concrete patterns like button or widget-background.
  • Base-values can be CSS-ready colors (hex, rgb, hsla), or references other colors in the map.
  • Adjustments are a nested map of color functions and arguments, for adjusting colors directly in your palette.

The color-names contrast-light and contrast-dark are special (with or without a private _ prefix). Use those names to define the default light-and-dark options for our color-contrast tools. They default to white and black respectively.

Since 0.1.0:

  • BREAKING: Uses the new shared map syntax, for internal references and adjustments

Examples

scss simple color definitions
$colors: (
  'brand-pink': hsl(330, 85%, 62%),
  'brand-light': #fff,
  'brand-dark': #222,
);
scss reference other colors
$colors: (
  'background': '#brand-light',
  'text': '#brand-dark',
  'link': '#brand-pink',
);
scss adjust referenced colors with any color function
$colors: (
  'focus': '#link' ('darken': 15%, 'desaturate': 15%),
);

Used By

@mixin add-colors()

@function stripe-colors()

@function _a_default-contrast() [private]

@function _a_best-contrast() [private]

@mixin add-colors()

Merge individual color maps into the global $colors variable, in case you want to define colors in smaller groups such as brand-colors, link-colors, etc before merging them into a single global color-palette. This can be useful for internal organization, documentation with SassDoc, or integration with our pattern-library generator: Herman.

Parameters & Output

$maps: (map...)

Pass any number of maps to be merged.

{CSS output} (code block)

  • An updated global $colors variable, with new maps merged in.

Example

scss
$brand-colors: (
  'brand-dark': #222,
  'brand-pink': hsl(330, 85%, 62%),
);

$text-colors: (
  'text': '#brand-dark',
  'link': '#brand-pink',
);

@include add-colors($brand-colors, $text-colors);

Requires

@function _a_map-multimerge() [private]

$colors (map)