形

角丸は全コンポーネントで --radius-outer と --radius-inner の 2 つの意味トークンに統一している。用途ごとに半径を発明せず、面には outer、その中の項目には inner を使う。面を入れ子にするときは、内側と外側の曲線が同じ中心を共有するよう、半径と余白の関係で決める。

2つの意味トークン

角丸に使うトークンは 2 つだけ。独立した面には --radius-outer、面の中で繰り返される項目には --radius-inner。Button・Card・Tabs をはじめ 19 のコンポーネントがこの 2 つに接続していて、 用途ごとに半径を発明しない。現在は outer が rounded-md (8px)、inner が rounded-sm (6px)。

トークン現在値用途
--radius-outerrounded-md (8px)独立した面。Button・Card・Input・Popover など、それ自体で完結する要素の外枠。
--radius-innerrounded-sm (6px)面の中で繰り返される項目。メニュー項目・TabsTrigger など、外枠の内側に並ぶ要素。

コンポーネントでは rounded-(--radius-outer) または rounded-(--radius-inner) と記述する。これらの意味トークンは --radius-outer が --radius-md、--radius-inner が --radius-sm に接続していて、値の変更はこの 2 行だけで全体に伝わる。

rounded-(--radius-outer)
ホールスタッフ

那覇市 / 正社員

rounded-(--radius-outer)
TabsTrigger = rounded-(--radius-inner)

半径は余白の分だけ大きくする

外側の角から内側の角までが一定の距離なら、2本の曲線は平行になる。角だけが太ったり細ったりせず、四辺と同じ厚みに見える。

外側の rounded = 内側の rounded + padding
外側
コンテナの rounded トークン
内側
子要素の rounded トークン
padding
間を空ける p-* トークン
rounded-lg = rounded-sm + p-1

対応する外側トークン

内側の rounded と間隔の p-* が交わるセルを、外側の rounded に使う。「一致なし」の組み合わせは、内側か間隔を変更する。

内側p-0.5p-1p-2
rounded-smrounded-mdrounded-lgrounded-xl
rounded-mdrounded-lg一致なし一致なし
rounded-lg一致なしrounded-xlrounded-2xl
rounded-xl一致なしrounded-2xlrounded-3xl
rounded-2xl一致なしrounded-3xlrounded-4xl
rounded-3xl一致なしrounded-4xl一致なし

Tabs に当てはめる

TabsTrigger の --radius-inner は rounded-sm、その周りの TabsList が p-1 なので、TabsList は rounded-lgにする。選択されたタブと背景の曲線が同じ流れになる。

不一致になる組み合わせ

外側が小さすぎても、大きすぎても曲線は揃わない。対応表にない組み合わせへ近いトークンを無理に当てるのも避ける。

p-1 に対して、左の外側は丸みが足りない

不一致
rounded-md / p-1 / rounded-sm
一致
rounded-lg / p-1 / rounded-sm

p-2 に対して、左の外側は丸みが足りない

不一致
rounded-lg / p-2 / rounded-sm
一致
rounded-xl / p-2 / rounded-sm

p-2 に対して、左の外側は丸みが大きすぎる

不一致
rounded-2xl / p-2 / rounded-sm
一致
rounded-xl / p-2 / rounded-sm

rounded-md + p-1 には対応する外側がないため、内側を変更する

不一致
rounded-xl / p-1 / rounded-md
一致
rounded-xl / p-1 / rounded-lg

rounded-full — 円形・トラック形状

Avatar、Switch、Slider、Progress、RadioGroup など、円とトラック(細長い丸)にはスケールでなく rounded-full を使う。ここだけは意味トークンの外側にある。

比