Context Class

How the .context class re-aims color CSS variables to a different palette, switching the look of a component — and everything inside it — with a single class.

The .context class applies a color palette to a component. Components never hardcode color values; they read CSS custom properties such as --cx-fg-color and --cx-bg-color. The .context class, combined with a color name and optional style modifier, re-aims those variables at a named palette, and every nested element picks up the new colors automatically.

How it works

Chassis CSS does not write color values directly on component classes. It uses repeating CSS custom properties, pairing them with Sass placeholder selectors that share the property declarations across components while keeping the color values flexible.

Three pieces work together:

The %context placeholder declares 31 context-scoped variables — foreground, background, border, icon, link, cue, and dim tokens — each backed by a two-layer fallback chain: a --cx-context-* intermediate (set when a color class is active) or the default palette. It also iterates over $context-colors to generate one nested selector per palette (.context.primary, .context.success, …), calling the context() mixin to remap those intermediates.
The %body-context placeholder maps the context tokens onto the body variables that components apply directly: --cx-fg-color, --cx-bg-color, --cx-border-color, and so on.
The .context class extends both %context and %body-context. Style modifiers use nested selectors — .context.solid, .context.smooth, .context.outline — each extending a matching style placeholder that overrides the semantic tokens to produce a different visual treatment.

Placeholder selector

The %context placeholder declares the 31 context-scoped variables, iterates over $context-colors to generate one nested selector per color, and leaves %body-context to the .context class itself. The shape of it:

%context {
  // 31 context-scoped variables; each checks the context intermediate first,
  // then falls back to the default palette
  --fg-main: var(--context-fg-main, var(--#{$body-context}-fg-main));
  --bg-main: var(--context-bg-main, var(--#{$body-context}-bg-main));
  // … one declaration per semantic token

  // One nested selector per context color, each activating that palette
  @each $color in map.keys($context-colors) {
    &.#{$color} { @include context($color); }
  }
}

Full source — including every variable declaration — is in Sass API → Context placeholder.

Body context

%body-context bridges the context token layer and the properties components consume as CSS values. It reads from the semantic tokens declared by %context — --cx-fg-main, --cx-bg-main, --cx-border-subtle, and so on — and assigns each to the body variable a component applies directly: --cx-fg-color, --cx-bg-color, --cx-border-color. Any component that extends %body-context automatically reflects the active context palette without referencing palette-specific tokens. Full source is in Sass API → Body context placeholder.

Style modifiers

The three style placeholders — %solid-context, %smooth-context, and %outline-context — override a subset of the semantic tokens declared by %context. Because %body-context resolves --cx-fg-color from --cx-fg-main, any placeholder that reassigns --cx-fg-main automatically changes the rendered foreground color. %solid-context drives %body-context's output toward a vivid filled surface, %smooth-context produces a muted tinted surface, and %outline-context drives foreground and border from the palette's base hue with a transparent background. Full source is in Sass API → Style placeholders.

Component class

The .context class extends %context and %body-context, making the full color system active by default. The three style modifiers are handled as nested selectors, each extending the corresponding style placeholder:

.context {
  @extend %context, %body-context;
  color: var(--fg-color);
  background-color: var(--bg-color);
  border-color: var(--border-color);

  &.solid {
    @extend %solid-context;
  }

  &.outline  {
    @extend %outline-context;
  }

  &.smooth {
    @extend %smooth-context;
  }

}

The compiled output ships ready to use:

This is the primary basic context.

This is the primary solid context.

This is the primary smooth context.

This is the primary outline context.

<p class="context primary">This is the primary basic context.</p>
<p class="context primary solid">This is the primary solid context.</p>
<p class="context primary smooth">This is the primary smooth context.</p>
<p class="context primary outline">This is the primary outline context.</p>

Usage

The two class groups that control context behavior are color names and style modifiers — both are optional and composable.

Context colors

Adding a color name to .context switches the active palette. Each context color provides coordinated foreground, background, border, icon, link, and cue values, so a single class change propagates throughout the component and its descendants.

This is the body context with link, same as default.

This is the default context with link.

This is the alternate context with link.

This is the primary context with link.

This is the secondary context with link.

This is the neutral context with link.

This is the danger context with link.

This is the success context with link.

This is the warning context with link.

This is the info context with link.

This is the black context with link.

This is the white context with link.

<p class="p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the body context <a href="#">with link</a>, same as default.
</p>
<p class="context default p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the default context <a href="#">with link</a>.
</p>
<p class="context alternate p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the alternate context <a href="#">with link</a>.
</p>
<p class="context primary p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the primary context <a href="#">with link</a>.
</p>
<p class="context secondary p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the secondary context <a href="#">with link</a>.
</p>
<p class="context neutral p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the neutral context <a href="#">with link</a>.
</p>
<p class="context danger p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the danger context <a href="#">with link</a>.
</p>
<p class="context success p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the success context <a href="#">with link</a>.
</p>
<p class="context warning p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the warning context <a href="#">with link</a>.
</p>
<p class="context info p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the info context <a href="#">with link</a>.
</p>
<p class="context black p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the black context <a href="#">with link</a>.
</p>
<p class="context white p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is the white context <a href="#">with link</a>.
</p>

A few of the contexts can look similar at first glance but play distinct semantic roles and behave differently across light and dark modes:

default — the standard body context (light background with dark text in light mode, inverted in dark mode).
alternate — emphasized regions such as sidebars or banners; may not invert in dark mode, depending on token configuration.
neutral — a muted, low-emphasis surface drawn from the brand neutral hue.
black and white — absolute, fixed colors that do not adapt to light or dark mode.

This is the default basic context.

This is the alternate basic context.

This is the neutral basic context.

This is the black basic context.

This is the white basic context.

<p class="context default border">This is the default basic context.</p>
<p class="context alternate border">This is the alternate basic context.</p>
<p class="context neutral border">This is the neutral basic context.</p>
<p class="context black border">This is the black basic context.</p>
<p class="context white border">This is the white basic context.</p>

Context styles

Adding a style modifier controls how context tokens map onto the visual surface. Four styles are available:

basic (default) — uses the palette's main background and foreground tokens directly; without a color class applied, the surface matches the page background.
solid — produces a vivid filled surface with a transparent border.
smooth — applies a muted tinted surface while keeping the standard context foreground, with a transparent border.
outline — sets a transparent background, colors foreground and border from the palette's base hue, and applies a larger border width.

This is a basic context component with link.

This is a solid context component with link.

This is a smooth context component with link.

This is an outline context component with link.

<p class="context primary p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is a basic context component <a href="#">with link</a>.
</p>
<p class="context primary solid p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is a solid context component <a href="#">with link</a>.
</p>
<p class="context primary smooth p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is a smooth context component <a href="#">with link</a>.
</p>
<p class="context primary outline p-xsmall">
  <span class="icon cx-info-circle-solid" aria-hidden="true"></span>
  This is an outline context component <a href="#">with link</a>.
</p>

Sass API

The context system is built from four Sass constructs: the %context placeholder that declares the variable layer, the %body-context placeholder that bridges tokens to component properties, the context() mixin that activates a named palette, and three style placeholders that define visual surface treatments.

Context placeholder

The full source of %context — every variable declaration and the loop over $context-colors:

%context {
  --base-color: var(--context-base-color, var(--#{$body-context}-base-color));
  --contrast-color: var(--context-contrast-color, var(--#{$body-context}-contrast-color));
  --transparent-color: var(--context-transparent-color, var(--#{$body-context}-transparent-color));
  --fg-main: var(--context-fg-main, var(--#{$body-context}-fg-main));
  --fg-subtle: var(--context-fg-subtle, var(--#{$body-context}-fg-subtle));
  --fg-slight: var(--context-fg-slight, var(--#{$body-context}-fg-slight));
  --fg-active: var(--context-fg-active, var(--#{$body-context}-fg-active));
  --fg-inverse: var(--context-fg-inverse, var(--#{$body-context}-fg-inverse));
  --fg-solid: var(--context-fg-solid, var(--#{$body-context}-fg-solid));
  --fg-highlight: var(--context-fg-highlight, var(--#{$body-context}-fg-highlight));
  --bg-main: var(--context-bg-main, var(--#{$body-context}-bg-main));
  --bg-even: var(--context-bg-even, var(--#{$body-context}-bg-even));
  --bg-evident: var(--context-bg-evident, var(--#{$body-context}-bg-evident));
  --bg-active: var(--context-bg-active, var(--#{$body-context}-bg-active));
  --bg-inverse: var(--context-bg-inverse, var(--#{$body-context}-bg-inverse));
  --bg-solid: var(--context-bg-solid, var(--#{$body-context}-bg-solid));
  --bg-highlight: var(--context-bg-highlight, var(--#{$body-context}-bg-highlight));
  --border-main: var(--context-border-main, var(--#{$body-context}-border-main));
  --border-subtle: var(--context-border-subtle, var(--#{$body-context}-border-subtle));
  --icon-main: var(--context-icon-main, var(--#{$body-context}-icon-main));
  --icon-subtle: var(--context-icon-subtle, var(--#{$body-context}-icon-subtle));
  --icon-slight: var(--context-icon-slight, var(--#{$body-context}-icon-slight));
  --cue-main: var(--context-cue-main, var(--#{$body-context}-cue-main));
  --cue-slight: var(--context-cue-slight, var(--#{$body-context}-cue-slight));
  --link-main: var(--context-link-main, var(--#{$body-context}-link-main));
  --link-hover: var(--context-link-hover, var(--#{$body-context}-link-hover));
  --link-active: var(--context-link-active, var(--#{$body-context}-link-active));
  --link-visited: var(--context-link-visited, var(--#{$body-context}-link-visited));
  --dim-main: var(--context-dim-main, var(--#{$body-context}-dim-main));
  --dim-subtle: var(--context-dim-subtle, var(--#{$body-context}-dim-subtle));
  --dim-slight: var(--context-dim-slight, var(--#{$body-context}-dim-slight));
  // --fg-idle: var(--context-fg-idle, var(--#{$body-context}-fg-idle));
  // --fg-hover: var(--context-fg-hover, var(--#{$body-context}-fg-hover));
  // --fg-press: var(--context-fg-press, var(--#{$body-context}-fg-press));
  // --fg-disabled: var(--context-fg-disabled, var(--#{$body-context}-fg-disabled));
  // --bg-idle: var(--context-bg-idle, var(--#{$body-context}-bg-idle));
  // --bg-hover: var(--context-bg-hover, var(--#{$body-context}-bg-hover));
  // --bg-press: var(--context-bg-press, var(--#{$body-context}-bg-press));
  // --bg-disabled: var(--context-bg-disabled, var(--#{$body-context}-bg-disabled));

  @each $color in map.keys($context-colors) {
    &.#{$color} {
      @include context($color);
    }
  }

  // @extend %body-context;
}

Body context placeholder

%body-context maps the semantic tokens onto the body variables components consume. Extend it directly in any component that needs to respond to the active context palette without participating in style modifiers.

%body-context {
  // Change body colors
  --fg-color: var(--fg-main);
  --bg-color: var(--bg-main);
  --border-color: var(--border-subtle);
  --separator-color: var(--border-subtle);
  --icon-color: var(--icon-main);
  --bullet-color: var(--icon-subtle);
  --cue-color: var(--cue-main);
  --link-main-color: var(--link-main);
  --link-hover-color: var(--link-hover);
  --link-active-color: var(--link-active);
  --link-visited-color: var(--link-visited);
  --focus-ring-color: #{$focus-ring-color};
}

Context mixin

The context() mixin activates a named palette by writing all --cx-context-* intermediate variables to point at that palette's tokens. Pass it a color name and it emits the CSS rules that route every context-scoped variable through the named palette.

/// Activate a named context by mapping all context-scoped CSS custom properties to
/// a specific color palette. This overwrites every `--cx-context-*` variable on the
/// element so child components can consume `--cx-context-fg-main`, `--cx-context-bg-main`,
/// etc. without knowing which palette is active.
///
/// @param {String} $context - Context name corresponding to a registered color palette
///   (e.g., "primary", "success", "neutral")
/// @example
///   .my-component { @include context(primary); }
///   // => --cx-context-fg-main: var(--cx-primary-fg-main); etc.
@mixin context($context) {
  --context-base-color: var(--#{$context}-base-color);
  --context-contrast-color: var(--#{$context}-contrast-color);
  --context-transparent-color: var(--#{$context}-transparent-color);
  --context-fg-main: var(--#{$context}-fg-main);
  --context-fg-subtle: var(--#{$context}-fg-subtle);
  --context-fg-slight: var(--#{$context}-fg-slight);
  --context-fg-active: var(--#{$context}-fg-active);
  --context-fg-inverse: var(--#{$context}-fg-inverse);
  --context-fg-solid: var(--#{$context}-fg-solid);
  --context-fg-highlight: var(--#{$context}-fg-highlight);
  --context-bg-main: var(--#{$context}-bg-main);
  --context-bg-even: var(--#{$context}-bg-even);
  --context-bg-evident: var(--#{$context}-bg-evident);
  --context-bg-active: var(--#{$context}-bg-active);
  --context-bg-inverse: var(--#{$context}-bg-inverse);
  --context-bg-solid: var(--#{$context}-bg-solid);
  --context-bg-highlight: var(--#{$context}-bg-highlight);
  --context-border-main: var(--#{$context}-border-main);
  --context-border-subtle: var(--#{$context}-border-subtle);
  --context-icon-main: var(--#{$context}-icon-main);
  --context-icon-subtle: var(--#{$context}-icon-subtle);
  --context-icon-slight: var(--#{$context}-icon-slight);
  --context-cue-main: var(--#{$context}-cue-main);
  --context-cue-slight: var(--#{$context}-cue-slight);
  --context-link-main: var(--#{$context}-link-main);
  --context-link-hover: var(--#{$context}-link-hover);
  --context-link-active: var(--#{$context}-link-active);
  --context-link-visited: var(--#{$context}-link-visited);
  --context-dim-main: var(--#{$context}-dim-main);
  --context-dim-subtle: var(--#{$context}-dim-subtle);
  --context-dim-slight: var(--#{$context}-dim-slight);
  // --context-fg-idle: var(--#{$context}-fg-idle);
  // --context-fg-hover: var(--#{$context}-fg-hover);
  // --context-fg-press: var(--#{$context}-fg-press);
  // --context-fg-disabled: var(--#{$context}-fg-disabled);
  // --context-bg-idle: var(--#{$context}-bg-idle);
  // --context-bg-hover: var(--#{$context}-bg-hover);
  // --context-bg-press: var(--#{$context}-bg-press);
  // --context-bg-disabled: var(--#{$context}-bg-disabled);
}

Style placeholders

The three style placeholders override specific semantic tokens to change the visual surface. Extend them inside any component that needs to react to a style modifier — for example, to give a button a .solid variant.

%solid-context {
  --fg-main: #{$solid-fg-color};
  --fg-subtle: #{to-opacity($solid-fg-color, var(--opacity-fg-subtle))};
  --fg-slight: #{to-opacity($solid-fg-color, var(--opacity-fg-slight))};
  --fg-active: #{$solid-fg-active};
  --fg-inverse: var(--context-fg-inverse);
  --fg-solid: var(--context-fg-solid);
  --fg-highlight: var(--context-fg-inverse);
  --bg-main: #{$solid-bg-color};
  --bg-even: #{$solid-bg-even};
  --bg-evident: #{$solid-bg-evident};
  --bg-active: #{$solid-bg-active};
  --bg-inverse: var(--context-bg-inverse);
  --bg-solid: var(--context-bg-solid);
  --bg-highlight: var(--context-bg-inverse);
  --border-main: #{to-opacity($solid-border-color, var(--opacity-border-main))};
  --border-subtle: #{to-opacity($solid-border-color, var(--opacity-border-subtle))};
  --icon-main: #{$solid-icon-color};
  --icon-subtle: #{to-opacity($solid-icon-color, var(--opacity-icon-subtle))};
  --icon-slight: #{to-opacity($solid-icon-color, var(--opacity-icon-slight))};
  --cue-main: #{$solid-cue-color};
  --cue-slight: #{to-opacity($solid-cue-color, var(--opacity-cue-slight))};
  --link-main: var(--context-fg-solid);
  --link-hover: var(--context-contrast-color);
  --link-active: var(--context-fg-solid);
  --link-visited: var(--context-fg-solid);
  --dim-main: #{to-opacity(var(--context-bg-inverse), var(--opacity-dim-main))};
  --dim-subtle: #{to-opacity(var(--context-bg-inverse), var(--opacity-dim-subtle))};
  --dim-slight: #{to-opacity(var(--context-bg-inverse), var(--opacity-dim-slight))};
  // Class properties
  // No borders for solid components
  border-color: transparent;
}

%smooth-context {
  --fg-main: #{$smooth-fg-color};
  --fg-subtle: #{to-opacity($smooth-fg-color, var(--opacity-fg-subtle))};
  --fg-slight: #{to-opacity($smooth-fg-color, var(--opacity-fg-slight))};
  --fg-active: #{$smooth-fg-active};
  --fg-inverse: var(--context-fg-inverse);
  --fg-solid: var(--context-fg-solid);
  --fg-highlight: var(--context-fg-highlight);
  --bg-main: #{$smooth-bg-color};
  --bg-even: #{$smooth-bg-even};
  --bg-evident: #{$smooth-bg-evident};
  --bg-active: #{$smooth-bg-active};
  --bg-inverse: var(--context-bg-inverse);
  --bg-solid: var(--context-bg-solid);
  --bg-highlight: var(--context-bg-highlight);
  --border-main: #{to-opacity($smooth-border-color, var(--opacity-border-main))};
  --border-subtle: #{to-opacity($smooth-border-color, var(--opacity-border-subtle))};
  --icon-main: #{$smooth-icon-color};
  --icon-subtle: #{to-opacity($smooth-icon-color, var(--opacity-icon-subtle))};
  --icon-slight: #{to-opacity($smooth-icon-color, var(--opacity-icon-slight))};
  --cue-main: #{$smooth-cue-color};
  --cue-slight: #{to-opacity($smooth-cue-color, var(--opacity-cue-slight))};
  --link-main: var(--context-link-main);
  --link-hover: var(--context-link-hover);
  --link-active: var(--context-link-active);
  --link-visited: var(--context-link-visited);
  --dim-main: var(--context-dim-main);
  --dim-subtle: var(--context-dim-subtle);
  --dim-slight: var(--context-dim-slight);
  // Class properties
  // No borders for smooth components
  border-color: transparent;
}

%outline-context {
  // @extend %body-context;
  --fg-main: #{$outline-fg-color};
  --fg-subtle: #{to-opacity($outline-fg-color, var(--opacity-fg-subtle))};
  --fg-slight: #{to-opacity($outline-fg-color, var(--opacity-fg-slight))};
  --fg-active: #{$outline-fg-active};
  --fg-inverse: var(--context-fg-inverse);
  --fg-solid: var(--context-fg-solid);
  --fg-highlight: var(--context-fg-highlight);
  --bg-main: #{$outline-bg-color};
  --bg-even: #{$outline-bg-even};
  --bg-evident: #{$outline-bg-evident};
  --bg-active: #{$outline-bg-active};
  --bg-inverse: var(--context-bg-inverse);
  --bg-solid: var(--context-bg-solid);
  --bg-highlight: var(--context-bg-inverse);
  --border-main: #{to-opacity($outline-border-color, var(--opacity-border-main))};
  --border-subtle: #{to-opacity($outline-border-color, var(--opacity-border-subtle))};
  --icon-main: #{$outline-icon-color};
  --icon-subtle: #{to-opacity($outline-icon-color, var(--opacity-icon-subtle))};
  --icon-slight: #{to-opacity($outline-icon-color, var(--opacity-icon-slight))};
  --cue-main: #{$outline-cue-color};
  --cue-slight: #{to-opacity($outline-cue-color, var(--opacity-cue-slight))};
  --link-main: var(--context-link-main);
  --link-hover: var(--context-link-hover);
  --link-active: var(--context-link-active);
  --link-visited: var(--context-link-visited);
  --dim-main: var(--context-dim-main);
  --dim-subtle: var(--context-dim-subtle);
  --dim-slight: var(--context-dim-slight);
  // Class properties
  // Increase border width for outline components
  --border-width: #{$outline-border-width};
  --border-color: #{$outline-border-color};
  --separator-color: #{$outline-border-color};
  @include border();
}

Component placeholder

Components such as badges and notifications also extend the %component placeholder, which applies typography, color, border, and border-radius via the corresponding mixins:

// Comprehensive base styling for components.
//
// Applies a complete set of foundational styles that most components need:
// - Typography via font mixin
// - Color scheme via colors mixin (text, background colors)
// - Border shorthand via border mixin (width, style, color)
// - Border radius via border-radius mixin for optional rounded corners
//
// Use this placeholder when creating new components that need the full
// set of Chassis styling fundamentals.
%component {
  @include font();
  @include colors();
  @include border();
  @include border-radius();
}

Custom components

The same building blocks let you write your own context-aware components. The three examples below progress from a simple fallback chain to a fully context-aware component with a .solid modifier.

Property fallback chain

.example declares a CSS custom property (--example-fg) with a context-aware fallback. Override the property where a specific value is needed; when the override resolves to an invalid value, the fallback chain reaches --cx-fg-subtle, which adapts to the active context.

:root {
  --example-fg: #282;
}
.example {
  color: var(--example-fg, var(--cx-fg-subtle));
}

The :root declaration gives --example-fg a default value. Setting it to var(--no-color) on a container produces an invalid value, activating the --cx-fg-subtle fallback.

--example-fg

--example-fg is --cx-fg-highlight

--example-fg falls back to --cx-fg-subtle

--example-fg

--example-fg falls back to --cx-fg-subtle

--cx-fg-main

<div>
  <p class="example">--example-fg</p>
</div>

<div style="--example-fg: var(--cx-fg-highlight);">
  <p class="example">--example-fg is --cx-fg-highlight</p>
</div>

<div style="--example-fg: var(--no-color);">
  <p class="example">--example-fg falls back to --cx-fg-subtle</p>
</div>

<div class="context primary">
  <p class="example">--example-fg</p>
</div>

<div class="context primary" style="--example-fg: var(--no-color);">
  <p class="example">--example-fg falls back to --cx-fg-subtle</p>
</div>

<div class="context primary">
  <p>--cx-fg-main</p>
</div>

Intercepting solid styles

.example-2 extends %context and pins --cx-fg-color to a component-scoped property that reads from --cx-fg-subtle. Because the component sets --cx-fg-color directly rather than inheriting it from %body-context, the value stays tied to --cx-fg-subtle when .solid is applied — even as %solid-context overrides the other semantic tokens.

.example-2 {
  @extend %context;
  // %solid-context will override --cx-fg-color with --cx-fg-solid.
  --cx-fg-color: var(--example-fg-color, var(--cx-fg-subtle));
  // --cx-bg-color: var(--example-bg-color, var(--cx-bg-even));
  // Override the override of %solid-context.
  --cx-solid-fg-color: var(--cx-fg-subtle);
  color: var(--cx-fg-color);
  background-color: var(--cx-bg-color);
  &.solid {
    @extend %solid-context;
  }
}

--cx-fg-subtle

<p class="example-2">--cx-fg-subtle</p>
<p class="example-2 primary">--cx-fg-subtle</p>
<p class="example-2 primary solid">--cx-fg-subtle</p>

Full context component

.example-3 is a fully context-aware component — it extends both %context and %body-context and maps component-scoped custom properties as overrideable hooks over the body variables. The .solid modifier restores the solid background explicitly, because the component uses --component-bg-color (reading from --cx-bg-even) for its background rather than --cx-bg-color, so %solid-context's override of --cx-bg-main alone is not enough.

.example-3 {
  @extend %context, %body-context;
  --component-fg-color: var(--example-fg-color, var(--cx-fg-main));
  --component-bg-color: var(--example-bg-color, var(--cx-bg-even));
  color: var(--component-fg-color);
  // This will break solid style background.
  background-color: var(--component-bg-color);
  &.solid {
    @extend %solid-context;
    // Restoring solid style background.
    background-color: var(--example-solid-bg-color, var(--cx-bg-solid));
  }
}

--cx-fg-main

<p class="example-3 p-xsmall">--cx-fg-main</p>
<p class="example-3 primary p-xsmall">--cx-fg-main</p>
<p class="example-3 primary solid p-xsmall">--cx-fg-main</p>

Context Class

How it works

Placeholder selector

Body context

Style modifiers

Component class

Usage

Context colors

Context styles

Sass API

Context placeholder

Body context placeholder

Context mixin

Style placeholders

Component placeholder

Custom components

Property fallback chain

Intercepting solid styles

Full context component

See also