ボーダースタイルトークン — カラー、幅、スタイルの組み合わせ
ディバイダー、アウトライン、フォーカスリング、コンポーネント境界のためのカラー、幅、スタイルをカバーする包括的なボーダートークンを定義します。
Border Tokens
詳細な説明
完全なボーダートークンシステム
ボーダーはUI領域間の視覚的境界を定義します。完全なボーダートークンシステムは、幅、スタイル、カラー、およびコンポーズドショートハンド値をカバーします。
ボーダーカラートークン
:root {
--borders-color-default: #e4e4e7;
--borders-color-subtle: #f4f4f5;
--borders-color-strong: #a1a1aa;
--borders-color-focus: #3b82f6;
--borders-color-error: #ef4444;
}
コンポーズドボーダートークン
便利さのために、コンポーズドトークンを作成します。
フォーカスリングトークン
フォーカスリングはアクセシビリティに重要なボーダートークンの特殊なケースです。
ダークモードの考慮事項
ボーダーカラーはダークモードで変更が必要な場合が多いです。セマンティックな命名を使用して、同じトークン名がテーマごとに異なる値にマッピングされるようにします。
ユースケース
一貫した視覚的境界が必要なデザインシステムを構築する場合、特に複数のコンテナレベル（ページ内のパネル内のカード）を持つ複雑なインターフェースに使用します。