數值 Token 表
共用的數值 token 表與實用範例。
含間距示範的呈現
| Token | 值 | px | 呈現方式 |
|---|---|---|---|
--spacing-4xs | .125rem | 2px | |
--spacing-3xs | .25rem | 4px | |
--spacing-2xs | .375rem | 6px | |
--spacing-xs | .5rem | 8px | |
--spacing-sm | .75rem | 12px | |
--spacing-md | 1rem | 16px | |
--spacing-lg | 1.5rem | 24px | |
--spacing-xl | 2rem | 32px | |
--spacing-2xl | 3rem | 48px | |
--spacing-3xl | 4rem | 64px | |
--spacing-4xl | 6rem | 96px | |
--spacing-5xl | 8rem | 128px |
使用於 版面系統指南.
用法與介面
ThemeNumberVariableTable 從 preset 讀取數值 tokens 與單位。spacing 呈現方式透過斜線背景與浮起物件,顯示每個實際間距。表格具有穩定的 token 與數值欄、細緻的列分隔線,以及窄螢幕下可透過鍵盤聚焦的捲動區域。
<ThemeNumberVariableTable namespace="spacing" representation="spacing" />representation prop 可省略。斷點與容器使用同一份資料驅動表格,附上說明但不顯示間距示範。請以文字保留原生 token 值與參考單位,並將這份清單放在測量用版面示範之外。數值表檢視頁呈現目前的共用表格。