TOKEN REGISTRY

Token 對照

檢視 Figma Token collection、CSS variable、Light／Dark 值與來源版本。

所有 Token

可依 collection、Token 名稱或 CSS variable 篩選。

Figma Variables、Text Styles、Component Tokens 與 CSS variables 的共同設定原則。

適用範圍

Figma file key：Y9tlJtO9c0LNEpfHzLWT0D；保留 internal 以與 external design system 區隔。

統一 namespace

Figma 使用 slash path；CSS variable 使用 kebab-case，禁止以 underscore 或短版 namespace 新增 Token。

由原始數值、共用語意到元件實作，逐層 alias。

01 · Reference

色票、spacing、radius、type size；不得 alias，且不作為元件主要套用對象。

ref/palette/teal/40

02 · System

承接 Light／Dark mode，原則上 alias 到 Reference，不含特定元件名稱。

sys/color/primary

03 · Component

fill、border、label、padding 等元件屬性，原則上 alias 到 System。

comp/btn/primary/container/fill

Figma 與工程端使用同一層級語意，但保留各自合適的語法。

Figma variable namees-internal-sys/ref/palette/teal/40es-internal-sys/sys/color/primaryes-internal-sys/comp/btn/primary/container/fill

CSS variable code syntax--es-internal-sys-ref-palette-teal-40--es-internal-sys-sys-color-primary--es-internal-sys-comp-btn-primary-container-fill

以 scope 降低誤用；色彩模式僅在 System collection 切換。

Scope 對應

FRAME_FILL／SHAPE_FILL：容器色彩TEXT_FILL：文字色彩STROKE_COLOR：邊框CORNER_RADIUS／GAP／FONT_SIZE：形狀、間距與字級

模式策略

Reference：單一 raw paletteSystem：Light／Dark modesComponent：持續 alias 至 System，不直接區分模式

以下項目需在 Figma 與 Token 匯出流程中持續追蹤。