Foreground
The foreground utilities control text and icon colors. For a multi-purpose color component, see the Box.
How it works
Section titled “How it works”Scheme-aware classes (e.g. .fg-default, .fg-emphasis, .fg-primary-default) automatically adapt to the active color scheme. Wrap content in a .tng-scheme.is-contrast element to switch to contrast colors. Non-scheme classes (e.g. .fg-secondary-default, .fg-error-default) set color directly.
Colors
Section titled “Colors”.fg-default
Toyota
.fg-emphasis
Toyota
.fg-subtle
Toyota
.fg-muted
Toyota
.fg-primary-default
Toyota
.fg-primary-subtle
Toyota
.fg-primary-muted
Toyota
.fg-secondary-default
Toyota
.fg-secondary-subtle
Toyota
.fg-secondary-muted
Toyota
.fg-success-default
Toyota
.fg-success-subtle
Toyota
.fg-success-muted
Toyota
.fg-error-default
Toyota
.fg-error-subtle
Toyota
.fg-error-muted
Toyota
.fg-info-default
Toyota
.fg-info-subtle
Toyota
.fg-info-muted
Toyota
.fg-warning-default
Toyota
When to use
Section titled “When to use”Use foreground utilities when:
- You need to set only the text or icon color without affecting other properties
- Building custom layouts with precise color control
- Combining multiple utilities for specific effects