2 #functions Functions module

The main module for Chroma.

2.1 #functions.add-colors add-colors([$scheme,] $colors)

Add the colors to an existing color scheme.

Usage:

$chroma: add-colors('admiral', (
 link:        #0000cc,
 nav:         link, // Sets this color to the same value as the "link" color.
 nav-visited: (nav darken 20%), // Takes the "nav" color and passes it
                                // through darken([color], 20%)
 nav-focus:   (nav lighten 10%),
));

If you wish to add colors to the active scheme, you can just use:

$chroma: add-colors((
 link:        #0000cc,
 nav:         link,
 nav-visited: (link darken 20%),
 nav-focus:   (link lighten 10%),
));
Parameters:
  • $scheme
    Optional: color scheme to add colors to; defaults to $chroma-active-scheme.
  • $colors
    A Sass map containing the new colors.
Source: chroma/_functions.scss, line 321

2.2 #functions.chroma-to-string chroma-to-string($name)

Cast the color name to a string to ensure color keywords do not cause problems as map keys.

Parameters:
  • $name
    The name of the color to convert.
Source: chroma/_functions.scss, line 119

2.3 #functions.color color([$scheme,] $name)

Returns a color value given a key word and optional color scheme. If the named color is not in the color scheme, the color scheme's parent scheme will be searched.

Usage:

.ex {
  background-color: color(body-bg);
  border: 1px solid color(grace, border);
}
Parameters:
  • $scheme
    Optional color scheme to choose from; defaults to $chroma-active-scheme.
  • $name
    The name of the requested color.
Source: chroma/_functions.scss, line 133

2.4 #functions.define-color-scheme define-color-scheme($scheme [, $description] [, $parent])

Define a new color scheme and, optionally, set its description and parent color scheme.

When searching for a color and the color scheme does not define that particular color, the parent color scheme will be checked to see if it defines that color.

By default, all color schemes inherit their colors from the default color scheme. Optionally, a color scheme can choose to inherit from a different color scheme by specifying the $parent parameter.

Usage:

$chroma: define-color-scheme(taiwan, "Taiwan's colors");
$chroma: define-color-scheme(taipei, "Taipei's colors", $parent: taiwan);
Parameters:
  • $scheme
    The name of the new color scheme.
  • $description
    Optional description of the color scheme.
  • $parent
    The parent color scheme to inherit colors from; defaults to default (i.e. $CHROMA_DEFAULT_SCHEME).
Source: chroma/_functions.scss, line 212

2.5 #functions.define-default-color-scheme define-default-color-scheme([$name,] $description)

Sets the description of the default color scheme.

Usage:

$chroma: define-default-color-scheme('Default colors');
// or:
$chroma: define-default-color-scheme('branding', 'Basic branding colors');
Parameters:
  • $name
    Optional: default color scheme name; defaults to default.
  • $description
    Description of the default color scheme.
Source: chroma/_functions.scss, line 264

2.6 #functions.is-color-keyword is-color-keyword($name)

Checks if the given name is a color keyword. Returns false or a string containing the name of the color keyword.

Parameters:
  • $name
    The name of the color to check.
Source: chroma/_functions.scss, line 77

2.7 #functions.is-dangerous-color-keyword is-dangerous-color-keyword($name)

This function is used by color(), add-colors() and others to check if the given color name is a "dangerous" color keyword. Returns false or causes the Sass compilation to die with an error message containing the name of the dangerous color keyword.

If a real Sass color is given as a color name to Chroma, it is in danger of being converted to a hexadecimal value before Chroma can read the name. (This happens when Sass' "compressed" output style is used.) And some hex values map to more than one keyword (e.g. gray/grey and fuchsia/magenta), so the original name would be irretrievable.

Since Chroma will confuse fuchsia and magenta (among others) under Sass' "compressed" output style, it would generate confusing results. To prevent this, Chroma halts Sass compilation when it detects an ambiguous color keyword. While the error only occurs under Sass' "compressed" output style, Chroma halts under all output styles. Otherwise, Chroma could behave differently on production vs. development environments. If you are really sure Chroma will never be run with Sass' "compressed" output style, you can disable this feature by setting $chroma-die-on-dangerous-keyword: false;.

Parameters:
  • $name
    The name of the color to check.
Source: chroma/_functions.scss, line 17