Foreground
Ready to use
The foreground utilities control text and icon colors.
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-defaultToyota
.fg-emphasisToyota
.fg-subtleToyota
.fg-mutedToyota
.fg-primary-defaultToyota
.fg-primary-subtleToyota
.fg-primary-mutedToyota
.fg-secondary-defaultToyota
.fg-secondary-subtleToyota
.fg-secondary-mutedToyota
.fg-success-defaultToyota
.fg-success-subtleToyota
.fg-success-mutedToyota
.fg-error-defaultToyota
.fg-error-subtleToyota
.fg-error-mutedToyota
.fg-info-defaultToyota
.fg-info-subtleToyota
.fg-info-mutedToyota
.fg-warning-defaultToyota
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