テーマ
このセクションはテーマ適用の実践側です: どの属性を設定するか、 どんな組み込みテーマがあるか、自分のテーマをどう生成するか。 (その背後にあるトークンのパイプライン — DTCG ソース、レイヤー、 命名 — は基礎 · トークン にあります。)
Hypermedia Components のすべての視覚的な決定は、4 つの層を流れます:
- DTCG JSON ソース — primitive・semantic・component・theme の トークンファイルが唯一の情報源です。
- ビルドステップがそれらを
--hc-*CSS カスタムプロパティとして 出力します。 - セマンティックなクラス(
hc-button、hc-card、…)はその変数だけを 消費します — ハードコードされた値は使いません。 - ランタイム軸 — 素の HTML 属性 — が変数を再解決するため、属性 1 つで 全体の見た目が一度に切り替わります。リビルドは不要です。
レイヤーモデル・DTCG の参照構文・変数の命名の詳細は 基礎 · トークンを 参照してください。
5 つのランタイム軸
Section titled “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> に限らず任意のサブツリーでも機能するため、あるセクションだけを
ダークや高密度にすることもできます。
ブランドカラーを変える
Section titled “ブランドカラーを変える”テーマビルダーを開き、 ブランドカラーを 1 つ貼り付けて、そのまま貼り付けられる CSS ブロック (または DTCG ソース)をコピーしてください。実物のトークンビルドを ブラウザ内で実行し、WCAG コントラストをライブで検査します。