Colors

Colors

Colorize text with color utilities. If you want to colorize links, you can use the .link-* utility classes which have :hover, :focus :active and :visited states.

Body Colors

Body colors use 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-highlight">.fg-highlight</p>

Colored Texts

Base context colors can be used as foreground color with .fg-* classes.

<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 Colors

Body colors are available for every context color.

<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

Using CSS variables for color utilities allows for real-time color changes without compilation and dynamic alpha transparency changes.

How it works

Consider our .fg-primary utility.

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

We use the --cx-primary CSS variable directly with CSS relative color syntax, and attach a second CSS variable, --cx-fg-opacity, for the alpha transparency (with a default value 1). The oklch(from ...) expression derives the color from the variable and applies the opacity channel. Then, the opacity class overrides the default opacity by setting --cx-fg-opacity on the element.

Example

To change that opacity, override --cx-fg-opacity via custom styles or inline styles.

<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-100">This is -opacity-100 primary text</p>
<p class="fg-primary fg-opacity-75">This is -opacity-75 primary text</p>
<p class="fg-primary fg-opacity-50">This is -opacity-50 primary text</p>
<p class="fg-primary fg-opacity-25">This is -opacity-25 primary text</p>
<p class="fg-primary fg-opacity-10">This is -opacity-10 primary text</p>
<p class="fg-primary fg-opacity-0">This is -opacity-0 primary text</p>

Context Opacity

You can directly apply a context opacity utility to match fg-* colors:

<div class="fg-primary fg-opacity-subtle p-2xsmall">This is <code>fg-subtle</code> primary success text</div>
<div class="fg-primary fg-opacity-slight p-2xsmall">This is <code>fg-slight</code> primary success text</div>

Reset color

Reset a text or link's color with .fg-reset, so that it inherits the color from its parent.

<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>

Specificity

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.

CSS

This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.

Variables

These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.

Sass variables

These Sass variables are also exposed as CSS custom properties using the --cx- prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the page. See the context components page for more details.

Most color utilities are generated by context colors, reassigned from our generic color palette variables.

$default:       $cx-color-base-context-light-black-base-color;
$alternate:     $cx-color-base-context-light-white-base-color;
$primary:       $cx-color-base-context-light-primary-base-color;
$secondary:     $cx-color-base-context-light-secondary-base-color;
$neutral:       $cx-color-base-context-light-neutral-base-color;
$danger:        $cx-color-base-context-light-danger-base-color;
$success:       $cx-color-base-context-light-success-base-color;
$warning:       $cx-color-base-context-light-warning-base-color;
$info:          $cx-color-base-context-light-info-base-color;
$black:         $cx-color-base-context-light-black-base-color;
$white:         $cx-color-base-context-light-white-base-color;

Sass Maps

Color utilities are generated from Sass maps using utilities API.

$context-colors: (
  "default":    $default,
  "alternate":  $alternate,
  "primary":    $primary,
  "secondary":  $secondary,
  "neutral":    $neutral,
  "warning":    $warning,
  "success":    $success,
  "danger":     $danger,
  "info":       $info,
  "black":      $black,
  "white":      $white
);

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

Utilities API

Icon utilities are generated using utilities API.

"fg-color": (
  css-var: true,
  css-variable-name: fg-color,
  class: fg,
  values: map-merge-multiple(
    map-loop($context-colors, opacity-var, #{"$key"}, #{"fg"}),
    map-loop($contrast-colors, opacity-var, #{"$key"}, #{"fg"}),
    ( "reset": inherit )
  )
),
"fg-opacity": (
  css-var: true,
  css-variable-name: fg-opacity,
  class: fg-opacity,
  values: $fg-opacities
),

Helpers

Context palette .*-fg-color classes created in helpers.

@each $name, $value in $context-colors {
  .fg-#{$name} {
    @extend %fg-color;
  }
}
@each $name, $value in map-merge-multiple($context-fg-colors, $body-fg-colors, ( "fg-reset": inherit )) {
  .#{$name} {
    @extend %fg-color;
    --#{$prefix}fg-color: var(--#{$prefix}#{$name});
  }
}