デザイントークン
導入可能なコンポーネントが共有する意味・表面・奥行きのトークンを確認します。
意味トークン
役割と状態を表す値です。コンポーネントは固定色の代わりにこのトークンを参照します。
--background--foreground--primary--primary-foreground--secondary--muted--muted-foreground--destructive--border--input--ringニューモーフィズムの表面トークン
浮き出し、くぼみ、ホバー、浮遊する表面の奥行きを共通の影トークンで表現します。
--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はテーマのソースに定義された有限の値を組み合わせます。以下の名前はコード内で使う値です。
- 奥行き
- subtle · balanced · deep
- 光の方向
- top-left · top-right · bottom-left · bottom-right
- コントロールの形
- rounded · soft · pill
- 動きの時間
- 120ms · 180ms · 260ms
プリセット
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
利用ルール
- コンポーネントは独自の配色を持たず、意味と表面の変数を使用します。
- 持続する選択状態は一時的なホバー状態と視覚的に区別します。
- 動きを減らす設定は奥行きやフォーカスの意味を保ち、遷移の動作を調整します。
- 生成CSS、初期化スクリプトとレジストリのスタイル項目は同じテーマエンジンから作ります。