Colors

Color utilities cover two sub-systems: context colors and opacity control. Both integrate with the color system.

Color

Color utilities set the CSS color property using the Chassis context color palette. They do not set background-color, so .bg-* background utilities may be needed for colored regions. For link colorization with interactive states (:hover, :focus, :active, :visited), see the .link-* utilities.

Body colors

Body color classes draw from the default context palette.

<p class="fg-main">.fg-main</p>
<p class="fg-subtle">.fg-subtle</p>
<p class="fg-slight">.fg-slight</p>
<p class="fg-inverse bg-inverse">.fg-inverse</p>
<p class="fg-solid">.fg-solid</p>
<p class="fg-highlight">.fg-highlight</p>

Context foreground colors

Context colors are available as foreground utilities via the .fg-{context} class pattern.

<p class="fg-default bg-contrast">.fg-default</p>
<p class="fg-alternate bg-contrast">.fg-alternate</p>
<p class="fg-primary bg-contrast">.fg-primary</p>
<p class="fg-secondary bg-contrast">.fg-secondary</p>
<p class="fg-neutral bg-contrast">.fg-neutral</p>
<p class="fg-danger bg-contrast">.fg-danger</p>
<p class="fg-success bg-contrast">.fg-success</p>
<p class="fg-warning bg-contrast">.fg-warning</p>
<p class="fg-info bg-contrast">.fg-info</p>
<p class="fg-black bg-contrast">.fg-black</p>
<p class="fg-white bg-contrast">.fg-white</p>

Context palette colors

Each context color exposes a set of foreground roles through a {context}-fg-{role} prefixed class pattern.

<p class="primary-fg-main">.primary-fg-main</p>
<p class="primary-fg-subtle">.primary-fg-subtle</p>
<p class="primary-fg-slight">.primary-fg-slight</p>
<p class="primary-fg-inverse primary-bg-inverse">.primary-fg-inverse</p>
<p class="primary-fg-highlight">.primary-fg-highlight</p>

Opacity

Opacity utilities control the alpha channel of any context color foreground through the --cx-fg-opacity custom property.

How it works

Each .fg-{context} class writes an OKLCH relative color expression into --cx-fg-color, using --cx-fg-opacity as the alpha channel. A shared selector applies color: var(--cx-fg-color). --cx-fg-opacity defaults to 1.

.fg-primary {
  --cx-fg-color: oklch(from var(--cx-primary) l c h / var(--cx-fg-opacity, 1));
}

/* shared selector */
.fg-primary, .fg-secondary, /* … */ {
  color: var(--cx-fg-color);
}

.fg-opacity-50 {
  --cx-fg-opacity: 0.5;
}

Opacity override

Override --cx-fg-opacity with an inline style or a .fg-opacity-* utility class.

<div class="fg-primary">This is default primary text</div>
<div style="--cx-fg-opacity: .6;" class="fg-primary">This is 60% opacity primary text</div>

Or, choose from any of the .fg-opacity-* utilities:

<p class="fg-primary fg-opacity-solid">fg-opacity-solid</p>
<p class="fg-primary fg-opacity-95">fg-opacity-95</p>
<p class="fg-primary fg-opacity-90">fg-opacity-90</p>
<p class="fg-primary fg-opacity-80">fg-opacity-80</p>
<p class="fg-primary fg-opacity-70">fg-opacity-70</p>
<p class="fg-primary fg-opacity-60">fg-opacity-60</p>
<p class="fg-primary fg-opacity-50">fg-opacity-50</p>
<p class="fg-primary fg-opacity-40">fg-opacity-40</p>
<p class="fg-primary fg-opacity-30">fg-opacity-30</p>
<p class="fg-primary fg-opacity-20">fg-opacity-20</p>
<p class="fg-primary fg-opacity-10">fg-opacity-10</p>
<p class="fg-primary fg-opacity-05">fg-opacity-05</p>
<p class="fg-primary fg-opacity-zero">fg-opacity-zero</p>

Context opacities

.fg-opacity-subtle and .fg-opacity-slight match the alpha values of the pre-computed fg-subtle and fg-slight body color tokens, and can be applied to any context color.

<div class="fg-primary fg-opacity-subtle p-2xsmall">fg-opacity-subtle</div>
<div class="fg-primary fg-opacity-slight p-2xsmall">fg-opacity-slight</div>

Reset color

.fg-reset removes any foreground color override, causing the element to inherit its color from the nearest ancestor.

<p class="fg-subtle">
  Secondary body text with a <a href="#" class="fg-reset">reset link</a>.
</p>
<p class="fg-subtle">
  Secondary body text with a <a href="#">normal link</a>.
</p>

CSS

Foreground color utilities are generated from Sass maps built on design token values via the utilities API.

Reference

All foreground color utilities set color through the shared --cx-fg-color custom property. Context color foregrounds embed --cx-fg-opacity in the color expression; body and palette foregrounds reference a pre-computed token and are not affected by opacity utilities.

The tables list all foreground color utilities and their CSS properties.

Foreground colors:

Foreground opacities:

Contextual foregrounds:

Sass variables

Foreground color tokens are part of the color system color system in scss/tokens/ and not listed here.

Sass maps

Foreground color maps are part of the color system in scss/maps/ and not listed here. Foreground opacity utilities are generated from two Sass maps in scss/maps/_opacities.scss.

$opacities defines the full token-named opacity scale for .fg-opacity-{level} utilities.

$opacities: (
  "solid":                $opacity-solid,
  "95":                   $opacity-95,
  "90":                   $opacity-90,
  "80":                   $opacity-80,
  "70":                   $opacity-70,
  "60":                   $opacity-60,
  "50":                   $opacity-50,
  "40":                   $opacity-40,
  "30":                   $opacity-30,
  "20":                   $opacity-20,
  "10":                   $opacity-10,
  "05":                   $opacity-05,
  "zero":                 $opacity-zero,
);

$fg-opacities defines two semantic foreground opacity levels.

$fg-opacities: (
  "subtle": $opacity-fg-subtle,
  "slight": $opacity-fg-slight,
);

Utilities API

Foreground color utilities are declared in scss/utilities/_index.scss using the utilities API.

"fg-color": (
  property: (
    "color": var(--fg-color),
    "--fg-color": null
  ),
  class: null,
  group: true,
  values: map-merge-multiple(
    map-rename-keys(map-loop($context-colors, opacity-var, #{"$key"}, #{"fg"}), "fg-", "start"),
    map-rename-keys(map-loop($contrast-colors, opacity-var, #{"$key"}, #{"fg"}), "fg-", "start"),
    map-loop($context-fg-colors, varify, #{"$key"}),
    map-loop($body-fg-colors, varify, #{"$key"}),
    ( "fg-reset": inherit )
  )
),
"fg-opacity": (
  property: --fg-opacity,
  class: fg-opacity,
  enabled: $enable-property-opacities,
  values: map-merge-multiple(
    map-loop($opacities, varify, "$key", "opacity"),
    map-loop($fg-opacities, varify, "$key", "opacity-fg")
  )
),