OddSite 4.0.0

Brand Colors

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

Color Config

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

Related

Accoutrement Color [external]

Cascading Color Systems [external]

$_hues (map) [private]

scss 
$_hues: (
  'prime': _hsl-hue-number(brand.$brand-blue),
  'accent': _hsl-hue-number(brand.$brand-pink),
  'special': _hsl-hue-number(brand.$brand-orange),
  'neutral': null,
);

Brand Hues

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%,
);

CCS Settings

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

Cascading Color Systems [external]

Used By

@function ccs()

@function ccs()

CCS “Get” Function

Get settings from the $ccs configuration map.

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

Example

scss 
@use 'config/color';

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

Requires

$_ccs (map) [private]

Background Colors

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.

Example

scss 
@use 'config/color/background';
@use 'config/tools';
@use 'sass:meta';

@each $name, $color in tools.compile-colors(meta.module-variables('background')) {
/* #{$name}: #{$color}; */
}
css compiled 
/* 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)); */
/* callout-special: var(--ccs-special--bg5-fade); */
/* overlay: var(--ccs-neutral--bg6-fade); */
/* overlay-banner: hsla(var(--ccs-h--neutral), var(--ccs-s--bg6), var(--ccs-l--bg6), 40%); */

CCS Defaults

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

Example

scss 
@use 'config/color/ccs-defaults';
@use 'config/tools';
@use 'sass:meta';

@each $name, $color in tools.compile-colors(meta.module-variables('ccs-defaults')) {
/* #{$name}: #{$color}; */
}
css compiled 
/* ccs-neutral--theme: var(--ccs-h--prime); */
/* ccs-background: var(--bg); */
/* ccs-color: var(--text); */

Content Colors

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.

Example

scss 
@use 'config/color/content';
@use 'config/tools';
@use 'sass:meta';

@each $name, $color in tools.compile-colors(meta.module-variables('content')) {
/* #{$name}: #{$color}; */
}
css compiled 
/* 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); */
/* heading-start: var(--ccs-prime--fg2); */
/* heading-end: var(--ccs-accent--fg2); */
/* border: var(--ccs-neutral); */
/* border-fade: var(--ccs-neutral--fade); */
/* shadow: hsla(var(--ccs-h--neutral), var(--ccs-s--fg6), var(--ccs-l--fg6), 40%); */
/* action: var(--ccs-prime--fg3); */
/* active: var(--ccs-accent--fg3); */
/* icon: var(--ccs-special--fg1); */
/* scroll-panel-bg: hsl(var(--ccs-h--prime), var(--ccs-s--bg4), var(--ccs-l--bg5)); */
/* scrollbar-track: var(--ccs-prime--bg4-fade); */
/* scrollbar-thumb: var(--ccs-prime--bg6-fade); */