セマンティックトーン

ステータスを表す 1 つの正準スケール。tone を扱うコンポーネント間で共有し、必要な所は変換器で橋渡しする。

正準スケール

SemanticTone = 次の 7 つ。Statistic / StatGroup / StatusBoard / Meter を含む tone 対応部品へ値をそのまま渡せる。

  • default

    中立・通常の状態。強調しない既定。

  • muted

    控えめ・非アクティブ・補助的。

  • primary

    主要・選択中・ブランド強調。

  • info

    情報・進行中のお知らせ。

  • success

    成功・正常・完了。

  • warning

    注意・境界値に接近。

  • destructive

    エラー・障害・超過。

1 つのステータスを複数サーフェスへ

トーンを選ぶと、下の各コンポーネントが同じ SemanticTone から描画される。変換が必要な境界だけ結果も表示する。

Badge · toBadgeVariant

warning→ "warning"

Meter · direct

使用率68 / 100（68%）
tone="warning"

DistributionBar · toChartTone

→ "warning"

Statistic · direct

処理成功率

99.8%

+0.2%

StatusBoard · direct

受付 API
warning
同じ SemanticTone を直接利用

0.1.x 互換と移行

旧値は 0.1.x の間も同じ見た目で動作する。新規コードは canonical 値を使い、削除は利用調査と codemod を用意した次 major 以降に再判断する。

表は横にスクロールできます
プロパティ型初期値説明
Statistic / StatGrouppositive → success · negative → destructive · neutral → muted-trend と goodWhen は方向・評価ロジックとして維持し、tone には統合しない。
StatusBoarddanger → destructive-表示、重大度ソート、problemTones 判定の前に正規化する。
Meterdefault → muted visual-SemanticTone 全体を直接受理。toMeterTone も既存境界向けに維持。
ExpiryBadgevalid → success · expiring → warning · expired → destructive · missing → muted-公開 API はドメイン状態のまま。tone prop は追加しない。

ExpiryBadge · domain state

期限間近2026/08/01残14日

変換器

Badge・チャート・Stringline のように表示方式や旧語彙との境界が残る箇所には、キャスト無しで渡せる変換器を用意している。

表は横にスクロールできます
プロパティ型初期値説明
toChartTone(tone: SemanticTone) => …-チャート (ChartTone) — チャートに default は無いため muted に対応。チャート専用の accent は canonical から到達不可。
toMeterTone(tone: SemanticTone) => …-Meter (MeterTone) — Meter は SemanticTone を直接受理し、default を muted に正規化する。既存の境界コード向けに変換器も維持。
toBadgeVariant(tone: SemanticTone) => …-Badge (variant) — Badge に primary / muted は無い。primary→default、muted→secondary。
toDangerTone(tone: SemanticTone) => …-Stringline / 旧 StatusBoard 境界 — Stringline はエラー tone を danger と綴る。StatusBoard は SemanticTone を直接受理し、danger も互換 alias として維持。

使い方

import {
  type SemanticTone,
  toChartTone, toBadgeVariant,
  Badge, Meter, Statistic, StatusBoard,
  DistributionBar, ScheduleGrid,
} from "@gunjo/ui"

// One status drives every surface — no per-screen mapping table.
const status: SemanticTone = over ? "destructive" : near ? "warning" : "success"

<ScheduleGrid cells={[{ tone: status /* shared union — direct */ }]} />
<Badge variant={toBadgeVariant(status)}>在庫</Badge>
<Statistic label="SLA" value="99.8%" change="+0.2%" trend="up" tone={status} />
<StatusBoard items={[{ id: 1, label: "API", status: "Healthy", tone: status }]} />
<Meter tone={status} value={68} max={100} />
<DistributionBar segments={[{ label: "使用中", value: 68, color: toChartTone(status) }]} />