固有テーマでも、本文の見出し順とキーボード操作は変えません。強い装飾はheroやカードへ限定し、長文の可読性を守ります。
共通カード
surface・text・border・focusをtheme slotから受け取ります。
共通token、状態、レイアウト、ゲーム別theme slotを、実際のcomponentと同じCSSで確認します。ページの個性はtheme slotへ置き、意味・操作順・状態表現は共通化します。
color / typography / spacing / radius / elevation / motion / z-indexを役割名で参照します。
--theme-canvas#f8f8f5--theme-surface#ffffff--theme-surface-raised#efefe9--theme-text#20201f--theme-text-muted#62625c--theme-border#b8b8ae--theme-accent#254f9a--theme-on-accent#ffffff--theme-focus#235fc7同じ構造を保ち、light/darkとゲーム固有の色だけをslotで交換します。
見出し順、focus、状態の意味、responsive breakpointsは共通です。
空、loading、error、権限不足を同じ情報順序で表示します。
操作状態はhoverだけに依存せず、keyboard focusとdisabledを含めて確認します。
| Component | Status | 役割 |
|---|---|---|
| PageHeader | stable | ページ固有のh1、説明、action |
| StatePanel | stable | loading / empty / error / permission |
| DataTable | candidate | caption・scope・横scrollを固定 |
カタログ内previewなのでh2を使い、実ページではh1を使います。
本文は読みやすい行長、補助情報はasideへ分離します。
固有テーマでも、本文の見出し順とキーボード操作は変えません。強い装飾はheroやカードへ限定し、長文の可読性を守ります。