ステータスカラー
5 つのステータスインテント — neutral、info、success、
warning、error — がそれぞれ bg / fg / border の 3 点セットを
持ち、data-themeで切り替わり
ます。アラート、
バッジ、
トーストなどの
コンポーネントは、バリアントをこれらのトークン経由で解決します。下の
.hc-status ユーティリティは同じパレットを任意の要素 — テーブル
セル、行全体、1 行のテキスト — に適用するため、サーバが計算した
ステータスに生の hex 値や手書きのダークモード上書きは不要です。
| トークン | CSS 変数 |
|---|---|
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 |
{intent} は neutral | info | success | warning | error のいずれか。
ライトの値はティント(背景 *-50、テキスト *-800)で、
[data-theme="dark"] の下ではダークティント(背景 *-950、テキスト
*-200)として再出力されます。そのため fg は、単独のテキストとして
も、対になる bg の上でも、両テーマで機能します。
.hc-status ユーティリティ
Section titled “.hc-status ユーティリティ”.hc-status は要素のテキストをインテントの fg で着色します。
インテントはいつもの data-variant です(省略 = neutral)。data-fill
を足すと、対になるティント背景が付きます。
<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>テーブルのセルと行
Section titled “テーブルのセルと行”サーバレンダリングでよくあるケース: クラスがサーバ側で計算される ステータス列と、注意が必要なレコードの行ハイライトです。 テーブルの中で機能します (行の塗りはテーブルのホバー背景にも勝ちます):
| 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>Thymeleaf / JSP / ERB のテンプレートはバリアントを直接バインドします:
<td class="hc-status" th:attr="data-variant=${job.statusVariant}" th:text="${job.status}"></td>…生の hex カラーと重複した [data-theme="dark"] 上書きを持つステータス
別クラスの置き換えです — テーマの切り替えはトークンが運びます。
アクセシビリティ
Section titled “アクセシビリティ”fgの値は、デフォルトのページ / 面背景の上の単独テキストとしても、 対になるbgの上でも、両テーマで WCAG AA(≥ 4.5:1)を満たします。- 色だけをメッセージにしないでください: ステータスのテキストを保って ください(緑の点について axe は何も言いませんが、ユーザーは困ります)。 枠線つきのピル型ラベルには、代わりに バッジを使ってください。