ボーダーラジアストークン — コンポーネント全体で一貫した角の丸み
ボタン、カード、入力、モーダル全体で一貫した角の丸みのためのボーダーラジアストークンスケールを作成します。ピル、丸角、シャープなデザインアプローチを学びます。
Border Tokens
詳細な説明
ボーダーラジアストークンのデザイン
ボーダーラジアストークンはUIの「丸み」を定義します。一貫したラジアススケールにより、任意のコーナー値を混在させることによる視覚的ノイズを防ぎます。
シンプルスケール
:root {
--borders-radius-none: 0;
--borders-radius-sm: 0.125rem; /* 2px */
--borders-radius-md: 0.375rem; /* 6px */
--borders-radius-lg: 0.5rem; /* 8px */
--borders-radius-xl: 0.75rem; /* 12px */
--borders-radius-2xl: 1rem; /* 16px */
--borders-radius-full: 9999px; /* ピル形状 */
}
コンポーネントレベルトークン
明確さのためにスケールを特定のコンポーネントにマッピングします。
デザインアプローチ
異なるデザイン言語は異なるラジアスの哲学を好みます：
| スタイル | 値 | 例 |
|---|---|---|
| シャープ | 0-4px | エンタープライズソフトウェア |
| 丸角 | 6-12px | モダンSaaS |
| ピル | 9999px | モバイルファースト |
ボーダー幅トークン
ボーダー幅も忘れないでください。
ユースケース
コンポーネントライブラリ全体で視覚的一貫性を確立する場合、特に各コンポーネントが独立して選択したコーナー値を持つ古いデザインからの移行時に使用します。