レイヤーとエレベーション

フラット、浮き上がったサーフェス、オーバーレイを使い分ける

• フラット: 通常のカード、パネル、ページセクションです。サーフェス色とボーダーで区切ります。
• 浮き上がったサーフェス: 背後のページを操作できるまま、周囲から分離する浮動コンテンツです。
• オーバーレイ: ポータルに表示し、周囲から明確に分離するコンテンツです。シャドウは分離を強めますが、モーダルかどうかは動作で決まります。

ライトとダークを比較

ダークテーマでは、サーフェスのコントラストとボーダーが境界の多くを担います。シャドウは唯一の境界ではなく補助的な手がかりです。

共通のレイヤー順

backdrop は dialog より下に置きます。ドロップダウン、ポップオーバー、ダイアログ、トースト、ツールチップと競合する独自の z-index を作らないでください。

アプリヘッダーやツールバーのように、スクロールに追従して固定されるページ要素は chrome に置きます。下を流れるコンテンツより上にあれば十分なので backdrop より下に位置し、スクリムがページの他の部分と同じように覆います。代わりに dropdown を使うと、モーダルが周囲を暗くしてもヘッダーだけが明るいまま残ります。

スクリム、バックドロップ、モーダル動作

両テーマでブロックされたページを分離するバックドロップには --tinyrack-scrim を使います。モーダルには、フォーカスの制限、閉じる動作、背景操作のブロックも必要です。スクリムやシャドウだけではモーダルになりません。

シャドウを選択

適用例と実装

TypeScript では tinyrackLayers と tinyrackShadows、CSS では --tinyrack-layer-*、--tinyrack-scrim、--tinyrack-shadow-*、Tailwind では対応する接頭辞付きユーティリティを使います。