セマンティックトーン

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

正準スケール

SemanticTone = 次の 7 つ。ScheduleGrid / Leaderboard / KanbanBoard / Gantt はこの語彙そのものなので、値をそのまま tone に渡せる。

  • default

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

  • muted

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

  • primary

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

  • info

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

  • success

    成功・正常・完了。

  • warning

    注意・境界値に接近。

  • destructive

    エラー・障害・超過。

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

トーンを選ぶと、下の各コンポーネントが同じ SemanticTone から描画される（変換器経由）。

Badge · toBadgeVariant

warning→ "warning"

Meter · toMeterTone

使用率68 / 100（68%）
→ "warning"

DistributionBar · toChartTone

→ "warning"

StatusBoard / Stringline · toDangerTone

tone → "warning"

変換器

語彙が canonical と異なるコンポーネントには、キャスト無しで渡せる変換器を用意している。

表は横にスクロールできます
プロパティ型初期値説明
toChartTone(tone: SemanticTone) => …-チャート (ChartTone) — チャートに default は無いため muted に対応。チャート専用の accent は canonical から到達不可。
toMeterTone(tone: SemanticTone) => …-Meter (MeterTone) — Meter に default は無いため muted に対応。
toBadgeVariant(tone: SemanticTone) => …-Badge (variant) — Badge に primary / muted は無い。primary→default、muted→secondary。
toDangerTone(tone: SemanticTone) => …-StatusBoard / Stringline — エラー tone を danger と綴る語彙。destructive→danger、他は同一。

使い方

import {
  type SemanticTone,
  toChartTone, toMeterTone, toBadgeVariant,
  Badge, Meter, 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>
<Meter tone={toMeterTone(status)} value={68} max={100} />
<DistributionBar segments={[{ label: "使用中", value: 68, color: toChartTone(status) }]} />