デザイントークン
すべての導入可能コンポーネントが共有する semantic・surface・depth の契約です。
Semantic token
役割と状態を表します。コンポーネントは固定色ではなくこの token を参照します。
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ringニューモーフィズム surface token
raised、inset、hover、floating の奥行きは共有 shadow token に限定します。
--neu-surface--neu-surface-soft--neu-surface-low--neu-shadow-raised--neu-shadow-raised-sm--neu-shadow-inset--neu-shadow-inset-sm--neu-shadow-hover--neu-shadow-floating--neu-radius-control--neu-radius-surface--neu-duration有限な設定軸
Theme Studio は source が明示的に所有する値だけを組み合わせます。
- Depth
- subtle · balanced · deep
- Light
- top-left · top-right · bottom-left · bottom-right
- Control shape
- rounded · soft · pill
- Motion
- 120ms · 180ms · 260ms
Preset
Air
차가운 회청색 · 선명한 블루
style-air
balanced · top-left · soft
Lavender
보랏빛 회색 · 낮은 대비
style-lavender
subtle · top-left · pill
Sage
차분한 세이지 · 자연스러운 대비
style-sage
subtle · top-right · soft
Clay
따뜻한 베이지 · 코랄
style-clay
balanced · top-left · rounded
Graphite
중성 회색 · 높은 대비
style-graphite
deep · top-left · rounded
利用ルール
- Component source consumes semantic and surface variables instead of owning a private palette.
- Persistent selected state stays visually distinct from transient hover state.
- Reduced motion changes transition behavior without removing depth or focus semantics.
- Generated CSS, bootstrap and registry style items come from the same theme engine.