Foreground
The foreground utilities control text and icon colors using a custom property. For a multi-purpose color components, see the Box.
Custom properties
Section titled “Custom properties”These utilities set this custom property:
--tng-color
This can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-color: blue;". For more complex scenarios, use the Box component instead, which can switch color schemes for all its child content automatically.
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