Background

The background utilities control background colors using a custom property. For a multi-purpose color components, see the Box.

Custom properties

These utilities set this custom property:

• --tng-background-color

This can be combined with other utilities, overridden in descendant elements or inline styles, or set directly to any value: style="--tng-background-color: red;". For more complex scenarios, use the Box component instead, which can switch color schemes for all its child content automatically.

Colors

Background

Surface

Fill

Background

.background-default

.background-subtle

.background-muted

Surface

.surface-default

.surface-subtle

.surface-muted

.surface-error

.surface-success

.surface-dim-default

.surface-dim-subtle

.surface-dim-muted

Fill

.fill-default

.fill-emphasis

.fill-subtle

.fill-muted

.fill-dim-default

.fill-dim-subtle

.fill-dim-muted

.fill-primary

.fill-primary-subtle

.fill-primary-muted

.fill-secondary

.fill-secondary-subtle

.fill-secondary-muted

.fill-bz4x

.fill-bz4x-subtle

.fill-bz4x-muted

.fill-success

.fill-success-subtle

.fill-success-muted

.fill-error

.fill-error-subtle

.fill-error-muted

.fill-info

.fill-info-subtle

.fill-info-muted

.fill-warning

When to use

Use background utilities when:

• You need to set only the background color without affecting text color
• Building custom layouts with precise color control
• Combining multiple utilities for specific effects

For automatic scheme switching and preset color combinations, use Box component instead.