Global Sass Settings

These settings can be defined directly in CSS, or generated from Sass configuration – and they provide the baseline defaults for all dynamic calculations. Each Sass variable has a corresponding custom property that can be used instead.

By default, all Sass configurations are set to null so that they have no output – and “factory-default” fallback values are provided in CSS calls to var(--name, <fallback>). That ensures that you can set defaults anywhere, without running into specificity conflicts.

$build (boolean)

scss

$build: true !default;

Optionally generate CSS for the colors on-load, rarther than using the provided mixins directly.

$hues (map | list | string | number | null)

scss

$hues: (
  'prime',
  'accent',
  'neutral',
) !default;

The colors to generate, and optional default hues for each color. To set both color-names and hues, provide an explicit map.

If you provide a songle hue value, we’ll assign it to the required prime key.
If you provide a list of color names, we we’ll assign them all default null hue values.

Two color names are given special treatment:

prime is required, a defaults to 330 if undefined
neutral colors (including neutral anywhere in a color-name) will use the $neutral-saturation or most-desaturated value

$lightness (percentage | null)

scss

$lightness: null !default;

The global default lightness percentage for core colors. Tints and shades will be generated in even increments lighter and darker than this starting value.

Sass: $lightness: 50%;
CSS: --ccs-lightness--config: 50%;

$saturation (percentage | null)

scss

$saturation: null !default;

The global default saturation percentage for core colors. Tints and shades will be generated in even increments less saturated than this starting value.

Sass: $saturation: 50%;
CSS: --ccs-saturation--config: 50%;

$contrast (percentage | null)

scss

$contrast: null !default;

The global default contrast range for color palettes. Tints and shades will be generated in even increments up to the total range of contrast.

Sass: $contrast: 45%;
CSS: --ccs-contrast--config: 45%;

$fade-background (percentage | null)

scss

$fade-background: null !default;

It can be useful to desaturate background colors more quickly than their foreground counterparts. Optionally set an additinal saturation-offset for background tints/shades in relation to the foreground.

Sass: $fade-background: 0%;
CSS: --ccs-fade-background--config: 0%;

$neutral-saturation (percentage | null)

scss

$neutral-saturation: null !default;

By default, neutral saturation is set to the full-contrast background saturation. At low-contrast that can still be quite saturated, so we provide an override when needed.

Sass: $neutral-saturation: 15%;
CSS: --ccs-s-neutral--config: 15%;

$fallback-dark (color)

scss

$fallback-dark: hsl(
  map-get($hues, 'prime') or 330,
  ($saturation or 50%) - ($contrast or 45%),
  ($lightness or 50%) - ($contrast or 45%)
) !default;

A dark fallback color for browsers that don’t support CSS custom properties. The default value is based on map-get($hues, 'prime'), $saturation, $lightness, and maximum $contrast.

$fallback-light (color)

scss

$fallback-light: hsl(
  map-get($hues, 'prime') or 330,
  ($saturation or 50%) - ($contrast or 45%),
  ($lightness or 50%) + ($contrast or 45%)
) !default;

A light fallback color for browsers that don’t support CSS custom properties. The default value is based on map-get($hues, 'prime'), $saturation, $lightness, and maximum $contrast.