Background
Use the color palette defined in Colors. Apply these shades with bg--{token} for backgrounds. On 1-bit displays, grayscale uses dither patterns; on 2-bit and 4-bit+, solid colors render.
Grayscale
Grayscale background shades only, including the center spacer between 40 and 45.
Grayscale backgrounds
Base Colors
Full base palettes for background tokens: grayscale and all chromatic hues with every shade step.
Base background colors
Usage
Use the bg--{shade} utility classes to apply
these background patterns to any element. The shade comes from one of three schemes
(see Colors):
-
Grayscale:
bg--black,bg--gray-10throughbg--gray-75, andbg--white. -
Chromatic:
bg--{hue}for the pure color (e.g. bg--red, bg--green), orbg--{hue}-{step}for a step on that hue's ladder (e.g. bg--red-50, bg--blue-40). -
Semantic:
bg--primary,bg--success,bg--error, andbg--warning. -
Surface roles:
bg--canvas,bg--surface, andbg--backdroppaint the screen's own background roles.
The surface roles resolve through the theme slot chain, so a theme repaints them. Reach for them when a block should follow the screen instead of pinning a shade a theme cannot move. See Theme Slots Theme Slots Every themable surface: semantic channels, component slots, utility remaps, border lines, and the chart ramp Every surface a theme can re-point, with the mixin that sets it: semantic channels, component slots, utility remaps, border lines, and the chart ramp. Slots take token references, so each one still resolves through the device mode at render time. .
<div class="bg--black">Black</div>
<div class="bg--gray-10">Gray 10</div>
<div class="bg--gray-15">Gray 15</div>
<div class="bg--gray-20">Gray 20</div>
<div class="bg--gray-25">Gray 25</div>
<div class="bg--gray-30">Gray 30</div>
<div class="bg--gray-35">Gray 35</div>
<div class="bg--gray-40">Gray 40</div>
<div class="bg--gray-45">Gray 45</div>
<div class="bg--gray-50">Gray 50</div>
<div class="bg--gray-55">Gray 55</div>
<div class="bg--gray-60">Gray 60</div>
<div class="bg--gray-65">Gray 65</div>
<div class="bg--gray-70">Gray 70</div>
<div class="bg--gray-75">Gray 75</div>
<div class="bg--white">White</div>Chromatic tokens
Use bg--{hue}-{step} and text--{hue}-{step} for color backgrounds and text.
<div class="bg--red">Pure red</div>
<div class="bg--red-50">Red 50</div>
<div class="bg--blue-40">Blue 40</div>
<div class="bg--green-60">Green 60</div>
<div class="text--red-50">Red text</div>Semantic tokens
Use bg--{role} and text--{role} for intent-based colors. Roles: primary, success, error, warning. See Colors for the full mapping.
<div class="bg--primary text--white">Primary</div>
<div class="bg--success text--white">Success</div>
<div class="bg--error text--white">Error</div>
<div class="text--warning">Warning text</div>Related APIs
Reading background paint from JavaScript
The bg(token, { el }) resolver returns
the exact paint a bg--{token} utility would apply,
as a canonical Fill read from the live cascade with bit depth, dark mode, and theme resolved. Apply it to
canvases, SVGs, or chart options. See
Painting Colors
Painting Colors
Resolve background, text, stroke, and semantic tokens from JavaScript as canonical Fill objects
The color resolvers read background, text, stroke, and semantic tokens from the live cascade and return canonical Fill objects. Use them when JavaScript needs the exact paint a CSS utility would produce.
for every resolver and the
Fill shape.
var fill = TRMNLPaint.bg("gray-30", { el: "my-node" });