Design SystemFoundationsRadius

Radius

Scale

Live DS 未在 style.css 自訂 radius token，全部沿用 Tailwind v4 預設。 以下顯示完整 Tailwind 階梯，並標註目前 component implementation 真實使用次數。

ALL TAILWIND RADIUS STEPS

rounded-none

0px

未使用

rounded-sm

2px

未使用

rounded

4px

17× — 預設值；checkbox、tag、小元件

rounded-md

6px

未使用

rounded-lg

8px

4×

rounded-xl

12px

1×

rounded-2xl

16px

11× — container — Card、Modal、Toast、Popover、Menu、Select

rounded-3xl

24px

未使用

rounded-full

9999px

22× — pill、avatar、icon button

Implementation Usage

依使用頻率排序，數字 = 在 packages/components/src/components/**/*.tsx（排除 *.stories.tsx）出現次數。

Token次數主要用途
rounded-full22pill、avatar、icon button
rounded17預設值；checkbox、tag、小元件
rounded-2xl11container — Card、Modal、Toast、Popover、Menu、Select
rounded-lg4—
rounded-xl1—

Implementation Notes

Observation only — no migration planned

本區僅記錄 audit 觀察，不對應任何 active rule 或重構計畫。

OBSERVATION

  • 實際只使用 3 階：rounded-full（22×）、rounded（17×）、rounded-2xl（11×）。
  • rounded-lg（4×）與 rounded-xl（1×）使用稀疏，沒有明確分工。
  • Live DS 無自訂 radius token，全部沿用 Tailwind v4 預設。

ANOMALIES

Button/index.tsx:93

rounded-25 — Tailwind 無此 class，Button 實際渲染為直角

Checkbox/index.tsx:63

rounded-[1px] — arbitrary value，繞開 radius 系統

FUTURE DIRECTION (NOT PLANNED)

若未來治理：可考慮把實際使用的 3 階改用 intent-named 別名（如 pill / control / container），同步修正 anomalies。 現階段不執行。