Skip to main contentSkip to docs navigation
View on GitHub

Background

Background color utilities based on the Chassis context color system, with gradient and opacity support.

On this page
@layer utilities

Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.

Background utilities cover three sub-systems: context color backgrounds, a gradient overlay, and opacity control. All three integrate with the color system.

Background color

Background utilities set background-color using the Chassis context color palette. They do not set color, so .fg-* color utilities may be needed for readable text.

Body backgrounds

Body background classes draw from the default context palette.

.bg-main

.bg-even

.bg-evident

.bg-highlight

.bg-solid

.bg-inverse

HTML
<p class="bg-main p-2xsmall">.bg-main</p>
<p class="bg-even">.bg-even</p>
<p class="bg-evident">.bg-evident</p>
<p class="bg-highlight">.bg-highlight</p>
<p class="bg-solid fg-solid">.bg-solid</p>
<p class="bg-inverse fg-inverse">.bg-inverse</p>

Context backgrounds

Context color backgrounds follow the .bg-{context} class pattern, where {context} is any registered context color.

.bg-default

.bg-alternate

.bg-primary

.bg-secondary

.bg-neutral

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-black

.bg-white

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

Palette backgrounds

Each context color exposes the full body background scale through a {context}-bg-{role} prefixed class pattern.

.primary-bg-main

.primary-bg-even

.primary-bg-evident

.primary-bg-highlight

.primary-bg-solid

.primary-bg-inverse

HTML
<p class="primary-bg-main">.primary-bg-main</p>
<p class="primary-bg-even">.primary-bg-even</p>
<p class="primary-bg-evident">.primary-bg-evident</p>
<p class="primary-bg-highlight">.primary-bg-highlight</p>
<p class="primary-bg-solid primary-fg-solid">.primary-bg-solid</p>
<p class="primary-bg-inverse primary-fg-inverse">.primary-bg-inverse</p>

Dimmed backgrounds

Dim classes apply semi-transparent background colors from the context palette. The opacity levels — main, subtle, and slight — are defined in the dim opacity scale.

.dim-main

.dim-subtle

.dim-slight

HTML
<p class="dim-main fg-inverse">.dim-main</p>
<p class="dim-subtle">.dim-subtle</p>
<p class="dim-slight">.dim-slight</p>

.primary-dim-main

.primary-dim-subtle

.primary-dim-slight

HTML
<p class="primary-dim-main primary-fg-inverse">.primary-dim-main</p>
<p class="primary-dim-subtle">.primary-dim-subtle</p>
<p class="primary-dim-slight">.primary-dim-slight</p>

Background gradient

.bg-gradient adds a linear gradient overlay — a semi-transparent white that fades to transparent at the bottom — to any background. The gradient is exposed as a CSS custom property: --cx-bg-gradient.

The gradient is also available in custom CSS via background-image: var(--cx-bg-gradient).

.bg-default.bg-gradient

.bg-alternate.bg-gradient

.bg-primary.bg-gradient

.bg-secondary.bg-gradient

.bg-neutral.bg-gradient

.bg-danger.bg-gradient

.bg-success.bg-gradient

.bg-warning.bg-gradient

.bg-info.bg-gradient

.bg-black.bg-gradient

.bg-white.bg-gradient

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

Opacity

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

How it works

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

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

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

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

Opacity override

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

This is default primary background
This is 40% opacity primary background
HTML
<div class="bg-primary p-2xsmall primary-contrast-color">
This is default primary background</div>
<div style="--cx-bg-opacity: .4;" class="bg-primary p-2xsmall">
This is 40% opacity primary background</div>

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

This is bg-opacity-solid background
This is bg-opacity-95 background
This is bg-opacity-90 background
This is bg-opacity-80 background
This is bg-opacity-70 background
This is bg-opacity-60 background
This is bg-opacity-50 background
This is bg-opacity-40 background
This is bg-opacity-30 background
This is bg-opacity-20 background
This is bg-opacity-10 background
This is bg-opacity-05 background
This is bg-opacity-zero background
HTML
<div class="bg-primary bg-opacity-solid p-2xsmall">This is <code>bg-opacity-solid</code> background</div>
<div class="bg-primary bg-opacity-95 p-2xsmall">This is <code>bg-opacity-95</code> background</div>
<div class="bg-primary bg-opacity-90 p-2xsmall">This is <code>bg-opacity-90</code> background</div>
<div class="bg-primary bg-opacity-80 p-2xsmall">This is <code>bg-opacity-80</code> background</div>
<div class="bg-primary bg-opacity-70 p-2xsmall">This is <code>bg-opacity-70</code> background</div>
<div class="bg-primary bg-opacity-60 p-2xsmall">This is <code>bg-opacity-60</code> background</div>
<div class="bg-primary bg-opacity-50 p-2xsmall">This is <code>bg-opacity-50</code> background</div>
<div class="bg-primary bg-opacity-40 p-2xsmall">This is <code>bg-opacity-40</code> background</div>
<div class="bg-primary bg-opacity-30 p-2xsmall">This is <code>bg-opacity-30</code> background</div>
<div class="bg-primary bg-opacity-20 p-2xsmall">This is <code>bg-opacity-20</code> background</div>
<div class="bg-primary bg-opacity-10 p-2xsmall">This is <code>bg-opacity-10</code> background</div>
<div class="bg-primary bg-opacity-05 p-2xsmall">This is <code>bg-opacity-05</code> background</div>
<div class="bg-primary bg-opacity-zero p-2xsmall">This is <code>bg-opacity-zero</code> background</div>

Context opacities

The three dim opacity levels (main, subtle, slight) are also available as .bg-opacity-main, .bg-opacity-subtle, and .bg-opacity-slight, and can be applied to any background color.

This is dim-main opacity primary background
This is dim-subtle opacity primary background
This is dim-slight opacity primary background
HTML
<div class="bg-primary bg-opacity-main p-2xsmall">This is <code>dim-main</code> opacity primary background</div>
<div class="bg-primary bg-opacity-subtle p-2xsmall">This is <code>dim-subtle</code> opacity primary background</div>
<div class="bg-primary bg-opacity-slight p-2xsmall">This is <code>dim-slight</code> opacity primary background</div>

CSS

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

Reference

All background utilities set background-color through the shared --cx-bg-color custom property. Context color backgrounds embed --cx-bg-opacity in the color expression; body, palette, and dim backgrounds reference a pre-computed token and are not affected by opacity utilities.

The tables list all background utilities and their CSS properties.

Background colors

ClassProperties
.bg-default--cx-bg-color: oklch(from var(--cx-default) l c h / var(--cx-bg-opacity, 1));
.bg-alternate--cx-bg-color: oklch(from var(--cx-alternate) l c h / var(--cx-bg-opacity, 1));
.bg-primary--cx-bg-color: oklch(from var(--cx-primary) l c h / var(--cx-bg-opacity, 1));
.bg-secondary--cx-bg-color: oklch(from var(--cx-secondary) l c h / var(--cx-bg-opacity, 1));
.bg-neutral--cx-bg-color: oklch(from var(--cx-neutral) l c h / var(--cx-bg-opacity, 1));
.bg-warning--cx-bg-color: oklch(from var(--cx-warning) l c h / var(--cx-bg-opacity, 1));
.bg-success--cx-bg-color: oklch(from var(--cx-success) l c h / var(--cx-bg-opacity, 1));
.bg-danger--cx-bg-color: oklch(from var(--cx-danger) l c h / var(--cx-bg-opacity, 1));
.bg-info--cx-bg-color: oklch(from var(--cx-info) l c h / var(--cx-bg-opacity, 1));
.bg-black--cx-bg-color: oklch(from var(--cx-black) l c h / var(--cx-bg-opacity, 1));
.bg-white--cx-bg-color: oklch(from var(--cx-white) l c h / var(--cx-bg-opacity, 1));
.bg-default-contrast--cx-bg-color: oklch(from var(--cx-default-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-alternate-contrast--cx-bg-color: oklch(from var(--cx-alternate-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-primary-contrast--cx-bg-color: oklch(from var(--cx-primary-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-secondary-contrast--cx-bg-color: oklch(from var(--cx-secondary-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-neutral-contrast--cx-bg-color: oklch(from var(--cx-neutral-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-warning-contrast--cx-bg-color: oklch(from var(--cx-warning-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-success-contrast--cx-bg-color: oklch(from var(--cx-success-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-danger-contrast--cx-bg-color: oklch(from var(--cx-danger-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-info-contrast--cx-bg-color: oklch(from var(--cx-info-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-black-contrast--cx-bg-color: oklch(from var(--cx-black-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-white-contrast--cx-bg-color: oklch(from var(--cx-white-contrast) l c h / var(--cx-bg-opacity, 1));
.bg-main--cx-bg-color: var(--cx-bg-main);
.bg-even--cx-bg-color: var(--cx-bg-even);
.bg-evident--cx-bg-color: var(--cx-bg-evident);
.bg-active--cx-bg-color: var(--cx-bg-active);
.bg-inverse--cx-bg-color: var(--cx-bg-inverse);
.bg-solid--cx-bg-color: var(--cx-bg-solid);
.bg-highlight--cx-bg-color: var(--cx-bg-highlight);
.bg-idle--cx-bg-color: var(--cx-bg-idle);
.bg-disabled--cx-bg-color: var(--cx-bg-disabled);
.bg-hover--cx-bg-color: var(--cx-bg-hover);
.bg-press--cx-bg-color: var(--cx-bg-press);
.bg-transparent--cx-bg-color: transparent;
.bg-reset--cx-bg-color: inherit;
.bg-gradientbackground-image: var(--cx-bg-gradient);

Background opacities:

ClassProperties
.bg-opacity-solid--cx-bg-opacity: var(--cx-opacity-solid);
.bg-opacity-95--cx-bg-opacity: var(--cx-opacity-95);
.bg-opacity-90--cx-bg-opacity: var(--cx-opacity-90);
.bg-opacity-80--cx-bg-opacity: var(--cx-opacity-80);
.bg-opacity-70--cx-bg-opacity: var(--cx-opacity-70);
.bg-opacity-60--cx-bg-opacity: var(--cx-opacity-60);
.bg-opacity-50--cx-bg-opacity: var(--cx-opacity-50);
.bg-opacity-40--cx-bg-opacity: var(--cx-opacity-40);
.bg-opacity-30--cx-bg-opacity: var(--cx-opacity-30);
.bg-opacity-20--cx-bg-opacity: var(--cx-opacity-20);
.bg-opacity-10--cx-bg-opacity: var(--cx-opacity-10);
.bg-opacity-05--cx-bg-opacity: var(--cx-opacity-05);
.bg-opacity-zero--cx-bg-opacity: var(--cx-opacity-zero);
.bg-opacity-main--cx-bg-opacity: var(--cx-opacity-dim-main);
.bg-opacity-subtle--cx-bg-opacity: var(--cx-opacity-dim-subtle);
.bg-opacity-slight--cx-bg-opacity: var(--cx-opacity-dim-slight);

Contextual backgrounds:

ClassProperties
.default-bg-main--cx-bg-color: var(--cx-default-bg-main);
.alternate-bg-main--cx-bg-color: var(--cx-alternate-bg-main);
.primary-bg-main--cx-bg-color: var(--cx-primary-bg-main);
.secondary-bg-main--cx-bg-color: var(--cx-secondary-bg-main);
.neutral-bg-main--cx-bg-color: var(--cx-neutral-bg-main);
.danger-bg-main--cx-bg-color: var(--cx-danger-bg-main);
.success-bg-main--cx-bg-color: var(--cx-success-bg-main);
.warning-bg-main--cx-bg-color: var(--cx-warning-bg-main);
.info-bg-main--cx-bg-color: var(--cx-info-bg-main);
.black-bg-main--cx-bg-color: var(--cx-black-bg-main);
.white-bg-main--cx-bg-color: var(--cx-white-bg-main);
.default-bg-even--cx-bg-color: var(--cx-default-bg-even);
.alternate-bg-even--cx-bg-color: var(--cx-alternate-bg-even);
.primary-bg-even--cx-bg-color: var(--cx-primary-bg-even);
.secondary-bg-even--cx-bg-color: var(--cx-secondary-bg-even);
.neutral-bg-even--cx-bg-color: var(--cx-neutral-bg-even);
.danger-bg-even--cx-bg-color: var(--cx-danger-bg-even);
.success-bg-even--cx-bg-color: var(--cx-success-bg-even);
.warning-bg-even--cx-bg-color: var(--cx-warning-bg-even);
.info-bg-even--cx-bg-color: var(--cx-info-bg-even);
.black-bg-even--cx-bg-color: var(--cx-black-bg-even);
.white-bg-even--cx-bg-color: var(--cx-white-bg-even);
.default-bg-evident--cx-bg-color: var(--cx-default-bg-evident);
.alternate-bg-evident--cx-bg-color: var(--cx-alternate-bg-evident);
.primary-bg-evident--cx-bg-color: var(--cx-primary-bg-evident);
.secondary-bg-evident--cx-bg-color: var(--cx-secondary-bg-evident);
.neutral-bg-evident--cx-bg-color: var(--cx-neutral-bg-evident);
.danger-bg-evident--cx-bg-color: var(--cx-danger-bg-evident);
.success-bg-evident--cx-bg-color: var(--cx-success-bg-evident);
.warning-bg-evident--cx-bg-color: var(--cx-warning-bg-evident);
.info-bg-evident--cx-bg-color: var(--cx-info-bg-evident);
.black-bg-evident--cx-bg-color: var(--cx-black-bg-evident);
.white-bg-evident--cx-bg-color: var(--cx-white-bg-evident);
.default-bg-active--cx-bg-color: var(--cx-default-bg-active);
.alternate-bg-active--cx-bg-color: var(--cx-alternate-bg-active);
.primary-bg-active--cx-bg-color: var(--cx-primary-bg-active);
.secondary-bg-active--cx-bg-color: var(--cx-secondary-bg-active);
.neutral-bg-active--cx-bg-color: var(--cx-neutral-bg-active);
.danger-bg-active--cx-bg-color: var(--cx-danger-bg-active);
.success-bg-active--cx-bg-color: var(--cx-success-bg-active);
.warning-bg-active--cx-bg-color: var(--cx-warning-bg-active);
.info-bg-active--cx-bg-color: var(--cx-info-bg-active);
.black-bg-active--cx-bg-color: var(--cx-black-bg-active);
.white-bg-active--cx-bg-color: var(--cx-white-bg-active);
.default-bg-inverse--cx-bg-color: var(--cx-default-bg-inverse);
.alternate-bg-inverse--cx-bg-color: var(--cx-alternate-bg-inverse);
.primary-bg-inverse--cx-bg-color: var(--cx-primary-bg-inverse);
.secondary-bg-inverse--cx-bg-color: var(--cx-secondary-bg-inverse);
.neutral-bg-inverse--cx-bg-color: var(--cx-neutral-bg-inverse);
.danger-bg-inverse--cx-bg-color: var(--cx-danger-bg-inverse);
.success-bg-inverse--cx-bg-color: var(--cx-success-bg-inverse);
.warning-bg-inverse--cx-bg-color: var(--cx-warning-bg-inverse);
.info-bg-inverse--cx-bg-color: var(--cx-info-bg-inverse);
.black-bg-inverse--cx-bg-color: var(--cx-black-bg-inverse);
.white-bg-inverse--cx-bg-color: var(--cx-white-bg-inverse);
.default-bg-solid--cx-bg-color: var(--cx-default-bg-solid);
.alternate-bg-solid--cx-bg-color: var(--cx-alternate-bg-solid);
.primary-bg-solid--cx-bg-color: var(--cx-primary-bg-solid);
.secondary-bg-solid--cx-bg-color: var(--cx-secondary-bg-solid);
.neutral-bg-solid--cx-bg-color: var(--cx-neutral-bg-solid);
.danger-bg-solid--cx-bg-color: var(--cx-danger-bg-solid);
.success-bg-solid--cx-bg-color: var(--cx-success-bg-solid);
.warning-bg-solid--cx-bg-color: var(--cx-warning-bg-solid);
.info-bg-solid--cx-bg-color: var(--cx-info-bg-solid);
.black-bg-solid--cx-bg-color: var(--cx-black-bg-solid);
.white-bg-solid--cx-bg-color: var(--cx-white-bg-solid);
.default-bg-highlight--cx-bg-color: var(--cx-default-bg-highlight);
.alternate-bg-highlight--cx-bg-color: var(--cx-alternate-bg-highlight);
.primary-bg-highlight--cx-bg-color: var(--cx-primary-bg-highlight);
.secondary-bg-highlight--cx-bg-color: var(--cx-secondary-bg-highlight);
.neutral-bg-highlight--cx-bg-color: var(--cx-neutral-bg-highlight);
.danger-bg-highlight--cx-bg-color: var(--cx-danger-bg-highlight);
.success-bg-highlight--cx-bg-color: var(--cx-success-bg-highlight);
.warning-bg-highlight--cx-bg-color: var(--cx-warning-bg-highlight);
.info-bg-highlight--cx-bg-color: var(--cx-info-bg-highlight);
.black-bg-highlight--cx-bg-color: var(--cx-black-bg-highlight);
.white-bg-highlight--cx-bg-color: var(--cx-white-bg-highlight);
.default-bg-idle--cx-bg-color: var(--cx-default-bg-idle);
.alternate-bg-idle--cx-bg-color: var(--cx-alternate-bg-idle);
.primary-bg-idle--cx-bg-color: var(--cx-primary-bg-idle);
.secondary-bg-idle--cx-bg-color: var(--cx-secondary-bg-idle);
.neutral-bg-idle--cx-bg-color: var(--cx-neutral-bg-idle);
.danger-bg-idle--cx-bg-color: var(--cx-danger-bg-idle);
.success-bg-idle--cx-bg-color: var(--cx-success-bg-idle);
.warning-bg-idle--cx-bg-color: var(--cx-warning-bg-idle);
.info-bg-idle--cx-bg-color: var(--cx-info-bg-idle);
.black-bg-idle--cx-bg-color: var(--cx-black-bg-idle);
.white-bg-idle--cx-bg-color: var(--cx-white-bg-idle);
.default-bg-disabled--cx-bg-color: var(--cx-default-bg-disabled);
.alternate-bg-disabled--cx-bg-color: var(--cx-alternate-bg-disabled);
.primary-bg-disabled--cx-bg-color: var(--cx-primary-bg-disabled);
.secondary-bg-disabled--cx-bg-color: var(--cx-secondary-bg-disabled);
.neutral-bg-disabled--cx-bg-color: var(--cx-neutral-bg-disabled);
.danger-bg-disabled--cx-bg-color: var(--cx-danger-bg-disabled);
.success-bg-disabled--cx-bg-color: var(--cx-success-bg-disabled);
.warning-bg-disabled--cx-bg-color: var(--cx-warning-bg-disabled);
.info-bg-disabled--cx-bg-color: var(--cx-info-bg-disabled);
.black-bg-disabled--cx-bg-color: var(--cx-black-bg-disabled);
.white-bg-disabled--cx-bg-color: var(--cx-white-bg-disabled);
.default-bg-hover--cx-bg-color: var(--cx-default-bg-hover);
.alternate-bg-hover--cx-bg-color: var(--cx-alternate-bg-hover);
.primary-bg-hover--cx-bg-color: var(--cx-primary-bg-hover);
.secondary-bg-hover--cx-bg-color: var(--cx-secondary-bg-hover);
.neutral-bg-hover--cx-bg-color: var(--cx-neutral-bg-hover);
.danger-bg-hover--cx-bg-color: var(--cx-danger-bg-hover);
.success-bg-hover--cx-bg-color: var(--cx-success-bg-hover);
.warning-bg-hover--cx-bg-color: var(--cx-warning-bg-hover);
.info-bg-hover--cx-bg-color: var(--cx-info-bg-hover);
.black-bg-hover--cx-bg-color: var(--cx-black-bg-hover);
.white-bg-hover--cx-bg-color: var(--cx-white-bg-hover);
.default-bg-press--cx-bg-color: var(--cx-default-bg-press);
.alternate-bg-press--cx-bg-color: var(--cx-alternate-bg-press);
.primary-bg-press--cx-bg-color: var(--cx-primary-bg-press);
.secondary-bg-press--cx-bg-color: var(--cx-secondary-bg-press);
.neutral-bg-press--cx-bg-color: var(--cx-neutral-bg-press);
.danger-bg-press--cx-bg-color: var(--cx-danger-bg-press);
.success-bg-press--cx-bg-color: var(--cx-success-bg-press);
.warning-bg-press--cx-bg-color: var(--cx-warning-bg-press);
.info-bg-press--cx-bg-color: var(--cx-info-bg-press);
.black-bg-press--cx-bg-color: var(--cx-black-bg-press);
.white-bg-press--cx-bg-color: var(--cx-white-bg-press);

Dimmed backgrounds:

ClassProperties
.default-dim-slight--cx-bg-color: var(--cx-default-dim-slight);
.alternate-dim-slight--cx-bg-color: var(--cx-alternate-dim-slight);
.primary-dim-slight--cx-bg-color: var(--cx-primary-dim-slight);
.secondary-dim-slight--cx-bg-color: var(--cx-secondary-dim-slight);
.neutral-dim-slight--cx-bg-color: var(--cx-neutral-dim-slight);
.danger-dim-slight--cx-bg-color: var(--cx-danger-dim-slight);
.success-dim-slight--cx-bg-color: var(--cx-success-dim-slight);
.warning-dim-slight--cx-bg-color: var(--cx-warning-dim-slight);
.info-dim-slight--cx-bg-color: var(--cx-info-dim-slight);
.black-dim-slight--cx-bg-color: var(--cx-black-dim-slight);
.white-dim-slight--cx-bg-color: var(--cx-white-dim-slight);
.default-dim-main--cx-bg-color: var(--cx-default-dim-main);
.alternate-dim-main--cx-bg-color: var(--cx-alternate-dim-main);
.primary-dim-main--cx-bg-color: var(--cx-primary-dim-main);
.secondary-dim-main--cx-bg-color: var(--cx-secondary-dim-main);
.neutral-dim-main--cx-bg-color: var(--cx-neutral-dim-main);
.danger-dim-main--cx-bg-color: var(--cx-danger-dim-main);
.success-dim-main--cx-bg-color: var(--cx-success-dim-main);
.warning-dim-main--cx-bg-color: var(--cx-warning-dim-main);
.info-dim-main--cx-bg-color: var(--cx-info-dim-main);
.black-dim-main--cx-bg-color: var(--cx-black-dim-main);
.white-dim-main--cx-bg-color: var(--cx-white-dim-main);
.default-dim-subtle--cx-bg-color: var(--cx-default-dim-subtle);
.alternate-dim-subtle--cx-bg-color: var(--cx-alternate-dim-subtle);
.primary-dim-subtle--cx-bg-color: var(--cx-primary-dim-subtle);
.secondary-dim-subtle--cx-bg-color: var(--cx-secondary-dim-subtle);
.neutral-dim-subtle--cx-bg-color: var(--cx-neutral-dim-subtle);
.danger-dim-subtle--cx-bg-color: var(--cx-danger-dim-subtle);
.success-dim-subtle--cx-bg-color: var(--cx-success-dim-subtle);
.warning-dim-subtle--cx-bg-color: var(--cx-warning-dim-subtle);
.info-dim-subtle--cx-bg-color: var(--cx-info-dim-subtle);
.black-dim-subtle--cx-bg-color: var(--cx-black-dim-subtle);
.white-dim-subtle--cx-bg-color: var(--cx-white-dim-subtle);
.dim-main--cx-bg-color: var(--cx-dim-main);
.dim-subtle--cx-bg-color: var(--cx-dim-subtle);
.dim-slight--cx-bg-color: var(--cx-dim-slight);

Primitive colors (e.g. --cx-primary-50) have no generated utility classes by default. Use utilities API to generate classes for primitive colors if needed.

Sass variables

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

$bg-gradient defines the background-image value applied by .bg-gradient and by the gradient() mixin when $enable-background-gradients is true.

scss/config/_defaults.scss
$bg-gradient: linear-gradient(180deg, #{to-opacity($white, .15)}, #{to-opacity($white, 0)});

Sass maps

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

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

scss/maps/_opacities.scss
$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,
);

$dim-opacities defines three semantic dim levels.

scss/maps/_opacities.scss
$dim-opacities: (
  "main":       $opacity-dim-main,
  "subtle":     $opacity-dim-subtle,
  "slight":     $opacity-dim-slight,
);

Utilities API

Background utilities are declared in scss/utilities/_index.scss using the utilities API.

scss/utilities/_index.scss
"bg-color": (
  property: (
    "background-color": var(--bg-color),
    "--bg-color": null
  ),
  class: null,
  group: true,
  values: map-merge-multiple(
    map-rename-keys(map-loop($context-colors, opacity-var, #{"$key"}, #{"bg"}), "bg-", "start"),
    map-rename-keys(map-loop($contrast-colors, opacity-var, #{"$key"}, #{"bg"}), "bg-", "start"),
    map-loop($context-bg-colors, varify, #{"$key"}),
    map-loop($context-dim-colors, varify, #{"$key"}),
    map-loop($body-bg-colors, varify, #{"$key"}),
    map-loop($body-dim-colors, varify, #{"$key"}),
    (
      "bg-transparent": transparent,
      "bg-reset": inherit
    )
  )
),
"bg-opacity": (
  property: --bg-opacity,
  class: bg-opacity,
  enabled: $enable-property-opacities,
  values: map-merge-multiple(
    map-loop($opacities, varify, "$key", "opacity"),
    map-loop($dim-opacities, varify, "$key", "opacity-dim")
  )
),
"bg-gradient": (
  property: background-image,
  class: bg,
  values: (gradient: var(--bg-gradient))
),