Status colors

Five status intents — neutral, info, success, warning, error — each with a bg / fg / border triple that switches with data-theme. Components like Alert, Badge, and Toast resolve their variants through these tokens; the .hc-status utility below applies the same palette to any element — a table cell, a whole row, a line of text — so server-computed status never needs raw hex values or hand-written dark-mode overrides.

Tokens

Token	CSS variable
semantic.color.status.{intent}.bg	--hc-color-status-{intent}-bg
semantic.color.status.{intent}.fg	--hc-color-status-{intent}-fg
semantic.color.status.{intent}.border	--hc-color-status-{intent}-border

with {intent} one of neutral | info | success | warning | error. Light values are tints (*-50 background, *-800 text); under [data-theme="dark"] they re-emit as dark tints (*-950 background, *-200 text), so fg works as standalone text and on its paired bg in both themes.

The .hc-status utility

.hc-status colours the element’s text with the intent’s fg; the intent is the usual data-variant (omitted = neutral). Add data-fill for the paired tinted background.

Preview Code

deployingcompleteddegradedfailedactive

<span class="hc-status" data-variant="success">completed</span>
<span class="hc-status" data-variant="error">failed</span>

<!-- data-fill adds the paired tinted background -->
<span class="hc-status" data-variant="success" data-fill>active</span>

Table cells and rows

The common server-rendered case: a status column whose class is computed server-side, and a row highlight for records needing attention. Works inside Table (the row fill also wins over the table’s hover background):

Preview Code

Job	Status
nightly-sync	completed
outbox-dispatch	failed
reindex	running

<!-- status text in a cell (class computed server-side) -->
<td class="hc-status" data-variant="success">completed</td>

<!-- whole-row highlight -->
<tr class="hc-status" data-variant="error" data-fill>
  <td>outbox-dispatch</td>
  <td class="hc-status" data-variant="error">failed</td>
</tr>

A Thymeleaf/JSP/ERB template binds the variant directly:

<td class="hc-status" th:attr="data-variant=${job.statusVariant}"
    th:text="${job.status}"></td>

…replacing per-status classes with raw hex colors and duplicated [data-theme="dark"] overrides — the tokens carry the theme switch.

Accessibility

• fg values meet WCAG AA (≥ 4.5:1) as standalone text on the default page/surface backgrounds and on their paired bg, in both themes.
• Color alone is never the message: keep the status text (axe has nothing to say about a green dot, but your users do). For a pill-shaped label with a border, use Badge instead.

Related

• Themes — how data-theme switches the palette.
• Alert / Badge / Toast — components built on the same tokens.