テーマ

このセクションはテーマ適用の実践側です: どの属性を設定するか、 どんな組み込みテーマがあるか、自分のテーマをどう生成するか。 (その背後にあるトークンのパイプライン — DTCG ソース、レイヤー、 命名 — は基礎 · トークン にあります。)

Hypermedia Components のすべての視覚的な決定は、4 つの層を流れます:

1. DTCG JSON ソース — primitive・semantic・component・theme の トークンファイルが唯一の情報源です。
2. ビルドステップがそれらを --hc-* CSS カスタムプロパティとして 出力します。
3. セマンティックなクラス(hc-button、hc-card、…)はその変数だけを 消費します — ハードコードされた値は使いません。
4. ランタイム軸 — 素の HTML 属性 — が変数を再解決するため、属性 1 つで 全体の見た目が一度に切り替わります。リビルドは不要です。

レイヤーモデル・DTCG の参照構文・変数の命名の詳細は 基礎 · トークンを 参照してください。

5 つのランタイム軸

軸	値	デフォルト(属性なし)	設定先	ドキュメント
data-theme	light / dark	OS 設定(prefers-color-scheme)	<html>	ライトとダーク
data-color	アクセントテーマ — default、indigo、emerald、rose、amber	default(ブルー)	<html>	カラーテーマ
data-neutral	グレーランプ — gray、slate、zinc、neutral、stone	gray	<html>	ニュートラルランプ
data-density	comfortable / compact / dense	comfortable	<html>	密度
dir	ltr / rtl	ltr	<html>	右から左(RTL)

5 つの軸はすべて直交します — 任意の組み合わせで設定できます。また <html> に限らず任意のサブツリーでも機能するため、あるセクションだけを ダークや高密度にすることもできます。

ブランドカラーを変える

テーマビルダーを開き、 ブランドカラーを 1 つ貼り付けて、そのまま貼り付けられる CSS ブロック (または DTCG ソース)をコピーしてください。実物のトークンビルドを ブラウザ内で実行し、WCAG コントラストをライブで検査します。

このセクションの内容

• カラーテーマ — 組み込みの data-color アクセント。
• テーマビルダー — ブランドカラー 1 つからカスタムアクセントを生成。
• ニュートラルランプ — data-neutral のグレーファミリー。
• カラーパレット — すべてのトークンの背後にある primitive ランプ。
• ステータスカラー — semantic な info / success / warning / error パレット。
• バリアントとサイズ — すべての data-variant / data-size をコンポーネント横断で。
• 密度 — data-density のサイズ階層。