テーマレシピ
CSSカスタムプロパティを使った完全なテーマシステムレシピです。各レシピはプロダクション対応のパターンで、自分のプロジェクトに適応できます。これらのレシピは Three-Tier Color Strategy で説明されているレイヤードアーキテクチャ — パレットトークン、セマンティックテーマトークン、コンポーネントスコープのオーバーライド — をカスケードと var() フォールバックを使って実装しています。
ライト/ダークテーマとカスタムプロパティ
カラーパレット全体をカスタムプロパティとして定義し、1つのクラストグルですべてを切り替えます。個別の色に対するJavaScriptロジックは不要です — カスケードがすべてを処理します。
ライト / ダークテーマ
ブランドテーマのオーバーライド
デフォルトテーマから開始し、コンポーネントをブランドカラーのコンテナでラップしてオーバーライドします。子要素はカスケードを通じて自動的に新しい値を取得します。
ブランドテーマのオーバーライド
コンポーネントAPIパターン
カスタムプロパティのセットをコンポーネントのパブリックスタイリングAPIとして公開します。コンシューマーは必要なプロパティだけをオーバーライドし、コンポーネントが残りを内部的に処理します。
コンポーネントAPIパターン
Surface/Contentレイヤーパターン
3つの論理レイヤーを定義します — surface（背景）、content（テキスト）、accent（インタラクティブなハイライト）。コンポーネントは生の色ではなくレイヤーを参照するため、ページ全体のテーマ切り替えが簡単になります。これは Three-Tier Color Strategy の実践例です — 以下のレイヤーは Tier 2（セマンティックテーマトークン）に対応しています。
Surface / Contentレイヤーパターン