Text color

Color utilities use semantic tokens that automatically adapt to light/dark themes and maintain proper contrast ratios.

Quick reference

Class	Styles
af-text	color: var(--af-color-text)
af-text-muted	color: var(--af-color-text-muted)
af-text-inverse	color: var(--af-color-text-inverse)
af-text-primary	color: var(--af-color-primary)
af-text-link	primary color + underline
af-text-success	color: var(--af-color-success)
af-text-danger	color: var(--af-color-danger)
af-text-warning	color: var(--af-color-warning)
af-text-info	color: var(--af-color-info)

Examples

Common text colors

Default

Muted

Primary

Link

<div style="display:grid; gap: var(--af-space-2);">
  <p class="af-text">
    Default
  </p>
  <p class="af-text-muted">
    Muted
  </p>
  <p class="af-text-primary">
    Primary
  </p>
  <a class="af-text-link" href="#">
    Link
  </a>
</div>

Available classes

• af-text - Default text color
• af-text-muted - Muted text color
• af-text-inverse - Inverse text color
• af-text-primary - Primary intent color
• af-text-link - Link color
• af-text-success - Success intent color
• af-text-danger - Danger intent color
• af-text-warning - Warning intent color
• af-text-info - Info intent color

Mid-tone intent text utilities (af-text-success, af-text-warning, af-text-info) can fail WCAG AA on white or soft backgrounds at small sizes. For soft surfaces and badge-like labels, use --af-color-*-hard (see Tokens and Badge).

Responsive variants

All text color utilities support responsive variants using the @{bp} suffix. See Responsive Suffix for syntax and breakpoints.

Related

• Background color