ESUNDESIGN SYSTEM
G

TOKEN REGISTRY

Token 對照表

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

Token 與通用命名規則

Token 是替可重用的設計決策取名,例如顏色、間距與字級。設計與程式引用同一個名稱,便能一起維護對應數值。

閱讀順序:先認識三層架構,再看名稱與欄位,最後用下方分頁檢核元件狀態或查找數值。Figma 原名與正式長名保留 es-internal-sys,內部開發短名使用 esi。

三層 Token 架構

由原始數值、共用語意到元件實作。Alias 表示引用另一個 Token,讓多個元件共用同一項設計決策。

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

命名與 collection

Collection 是 Token 的分類集合,例如 Reference、System、Component/Btn。Figma 使用斜線分層,正式 CSS variable 用連字號連接同一組名稱;內部開發短名僅將 --es-internal-sys- 縮為 --esi-,其餘層級、詞彙與狀態順序不變。esi 代表 ESUN Internal,--es-* 預留對外設計系統的 Token 短名。

Figma variable namees-internal-sys/ref/palette/teal/40es-internal-sys/sys/color/primaryes-internal-sys/comp/btn/primary/container/fill
CSS variable:正式長名 → 開發短名--es-internal-sys-ref-palette-teal-40
→ --esi-ref-palette-teal-40
--es-internal-sys-sys-color-primary
→ --esi-sys-color-primary
--es-internal-sys-comp-btn-primary-container-fill
→ --esi-comp-btn-primary-container-fill

命名欄位對照

由廣到細閱讀;以下同時對照正式命名與開發短名。短名只縮略 Namespace,以下層級與片段順序沿用來源,不代表所有路徑已統一。

Figma 原名:es-internal-sys/comp/btn/alert/container/fill/hovered
開發短名:--esi-comp-btn-alert-container-fill-hovered
欄位來源範例說明
Namespace正式名稱:es-internal-sys
開發短名:esi
玉山內部設計系統識別;esi 代表 ESUN Internal,對外系統的 Token 短名預留 es。
短名相容--es-internal-sys-*
→ --esi-*
由生成流程提供 CSS 別名,短名引用正式長名、不複製色值;Figma 原名及正式長名維持不變。局部覆寫長名時,同元素需加上 data-token-alias-scope,並載入生成的短名樣式。
層級ref / sys / comp原始值/共用語意/元件實作。
元件btn / input / pager對應下方元件表;collection 與路徑名稱可能不同。
變體/情境/尺寸primary / alert / lg依元件而異,可省略或包含多段;完整允許詞彙待補充。
部位container / label / box / control / dot / value實際套用的視覺部位;巢狀部位保留原有路徑。
視覺屬性fill / color / border-color / gap填色、文字色、邊框色或間距;工程型別與單位契約待補充。
狀態hovered / focused / selected-locked來源可能放在元件後或屬性後;統一位置與組合規則待補充。未明示不推定為 default。

例如 es-internal-sys/comp/btn/alert/container/fill/hovered,表示內部系統的按鈕,在提醒情境、滑鼠移入時使用的容器填色。名稱描述用途;Light/Dark 模式可對應不同數值。

Token元件命名與狀態檢核

依目前快照列出元件識別字及明示狀態。筆數代表資料存在,不代表設計或實作驗收通過。

元件站內 IDCollection/Token 識別字明示狀態與查找資料/完整性

狀態名稱對照

互動、選取與驗證語意分開理解;中文為閱讀說明,精確行為仍依元件核定。

類型來源名稱中文說明補充事項
基準default明示預設與未寫狀態的共用屬性分開呈現。
互動hovered / focused / pressed滑鼠移入/焦點/按下pressed 在目前快照未列;適用元件待補充。
可用性disabled / readonly / loading停用/唯讀/載入中readonly、loading 在目前快照未列;共用或獨立對應待補充。
選取/位置selected / current / selected-locked已選取/目前位置/選取且鎖定(依字面)selected-locked 的精確互動語意及組合優先序待補充。
驗證/語意error / warning錯誤/警告可能是回饋情境,需依元件判讀,不能全視為互動狀態。
未明示—名稱未含已辨識狀態可能共用;完整適用範圍待補充。