形状と境界
目的に応じて形状を選び、Tinyrack の角丸、ボーダー、フォーカストークンで境界と入れ子のサーフェスを整えます。
目的に応じて形状を選択
- 境界を明瞭に保つ小さなコントロールには
smまたはmdを使います。 - 独立したパネル、ポップオーバー、オーバーレイには
lgまたはxlを使います。 - ピル、ステータス、アバター、円形自体が役割を伝える場合だけ
fullを使ってください。
角丸とボーダーのスケール
| 角丸 | 値 | CSS 変数 |
|---|---|---|
xs | 0.125rem | --tinyrack-radius-xs |
sm | 0.25rem | --tinyrack-radius-sm |
md | 0.375rem | --tinyrack-radius-md |
lg | 0.5rem | --tinyrack-radius-lg |
xl | 0.75rem | --tinyrack-radius-xl |
full | 9999px | --tinyrack-radius-full |
通常の境界には default、強い構造には strong、細い強調線には accent を使います。--tinyrack-border-width-default、-strong、-accent に対応します。
| ボーダー | 値 |
|---|---|
default | 1px |
strong | 2px |
accent | 3px |
入れ子の形状ルール
内側のサーフェスには、コンテナと同じか小さい角丸を使ってください。余白とボーダー幅も考慮し、外側より丸く見える長方形を内側に置かないようにします。
入れ子のコンテンツ
形状に沿うフォーカス
フォーカスアウトラインは操作要素に適用し、その要素の角丸に沿わせます。Tinyrack は --tinyrack-focus-width (2px) と --tinyrack-focus-offset (2px) を使います。アウトラインを切り取ったり、コントロールの境界を変える形状で置き換えたりしないでください。
適用例
準備完了
操作要素にはコントロール用の角丸を使い、ステータスには意味を伝えるピル形状を使います。実装とリファレンス
ツールでは tinyrackRadii と tinyrackBorders を使います。CSS では --tinyrack-radius-*、--tinyrack-border-width-*、--tinyrack-focus-*、Tailwind では対応する rounded-tinyrack-*、ボーダー、アウトラインのユーティリティを使ってください。コンポーネント単位の調整には --tr-* 変数を使います。