OddSite 4.0.0

Color Config

Accoutrement maps for storing global color tokens, and settings for generating color variables.

Related

Accoutrement Scale [external]

$brand-colors (map)

scss
$brand-colors: (
  'brand-blue': hsl(195, 52%, 31%),
  'brand-orange': hsl(24, 100%, 62%),
  'brand-pink': hsl(330, 100%, 45%),
);

The brand is defined by our primary brand blue, along with secondary pink and orange base colors. These colors are rarely used directly, but form the basis of our CSS color variables.

Color Previews

brand-blue #266478 rgb(38, 100, 120) hsl(195, 52%, 31%)
brand-orange #ff8b3d rgb(255, 139, 61) hsl(24, 100%, 62%)
brand-pink #e60073 rgb(230, 0, 115) hsl(330, 100%, 45%)

$background-colors (map)

scss
$background-colors: (
  'bg': var(--ccs-neutral--bg-full),
  'bg-full': var(--ccs--bg-full),
  'callout': hsl(var(--ccs-h--prime), var(--ccs-s--bg3), var(--ccs-l--bg5)),
  'callout-neutral': var(--ccs-neutral--bg5),
  'callout-fade':
    hsla(
      var(--ccs-h--prime),
      var(--ccs-s--bg2),
      var(--ccs-l--bg5),
      var(--ccs-fade)
    ),
  'overlay': var(--ccs-neutral--bg6-fade),
  'overlay-banner':
    hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 0.4),
);

Rather than using the brand colors directly, we use them to set default values for generated variables. This provides a mapping between semantic background use-cases, and automatically-generated color variables.

$content-colors (map)

scss
$content-colors: (
  'text': var(--ccs-neutral--fg-full),
  'text-light': var(--ccs-neutral--fg3),
  'accent': var(--ccs-accent--fg1),
  'highlight': var(--ccs-accent--fg3),
  'feature': var(--ccs-prime--fg4),
  'feature-accent': var(--ccs-accent--fg1),
  'border': var(--ccs-neutral),
  'border-fade': var(--ccs-neutral--fade),
  'shadow':
    hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 0.25),
  'action': var(--ccs-prime--fg3),
  'active': '#highlight',
  'icon': var(--ccs-special--fg1),
);

Rather than using the brand colors directly, we use them to set default values for generated variables. This provides a mapping between semantic foreground use-cases, and automatically-generated color variables.

$ccs-colors (map)

scss
$ccs-colors: (
  'ccs-neutral--theme': var(--ccs-h--prime),
  'ccs-background': var(--bg),
  'ccs-color': var(--text),
);

The Cascading Color System has a few settings that we can most easily override with CSS variables

$_hues (map) [private]

scss
$_hues: (
  'prime': color.hue(tools.color('brand-blue')) / 1deg,
  'accent': color.hue(tools.color('brand-pink')) / 1deg,
  'special': color.hue(tools.color('brand-orange')) / 1deg,
  'neutral': null,
);

Hue values taken from the brand colors, for easy access in the CCS settings.

$_ccs (map) [private]

scss
$_ccs: (
  'hues': $_hues,
  'saturation': 75%,
  'contrast': 45%,
  'steps': 6,
  'fades': 0.75,
  'fade-background': 25%,
  'neutral-saturation': 10%,
);

Settings for generating color variables. This map is marked private to encourage access through the ccs() function. See Cascading Color Systems documentation for valid settings.

Related

Used By

@function ccs()

@function ccs()

Get settings from the $ccs configuration map.

@use 'config/color';

$prime-hue: color.ccs('prime');

Parameters & Return

$token: (string)

Name of a token key in the $ccs map. See map for valid tokens.

@return (*)

Value from $ccs map, based on given key

Requires

$_ccs (map) [private]