原始值
色票、spacing、radius、type size;不得 alias,且不作為元件主要套用對象。
ref/palette/teal/40TOKEN REGISTRY
檢視 Figma Token collection、CSS variable、Light/Dark 值與來源版本。
Token 是替可重用的設計決策取名,例如顏色、間距與字級。設計與程式引用同一個名稱,便能一起維護對應數值。
閱讀順序:先認識三層架構,再看名稱與欄位,最後用下方分頁檢核元件狀態或查找數值。Figma 原名與正式長名保留 es-internal-sys,內部開發短名使用 esi。
由原始數值、共用語意到元件實作。Alias 表示引用另一個 Token,讓多個元件共用同一項設計決策。
色票、spacing、radius、type size;不得 alias,且不作為元件主要套用對象。
ref/palette/teal/40承接 Light/Dark mode,原則上 alias 到 Reference,不含特定元件名稱。
sys/color/primaryfill、border、label、padding 等元件屬性,原則上 alias 到 System。
comp/btn/primary/container/fillCollection 是 Token 的分類集合,例如 Reference、System、Component/Btn。Figma 使用斜線分層,正式 CSS variable 用連字號連接同一組名稱;內部開發短名僅將 --es-internal-sys- 縮為 --esi-,其餘層級、詞彙與狀態順序不變。esi 代表 ESUN Internal,--es-* 預留對外設計系統的 Token 短名。
es-internal-sys/ref/palette/teal/40es-internal-sys/sys/color/primaryes-internal-sys/comp/btn/primary/container/fill--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,以下層級與片段順序沿用來源,不代表所有路徑已統一。
| 欄位 | 來源範例 | 說明 |
|---|---|---|
| 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 模式可對應不同數值。
依目前快照列出元件識別字及明示狀態。筆數代表資料存在,不代表設計或實作驗收通過。
| 元件 | 站內 ID | Collection/Token 識別字 | 明示狀態與查找 | 資料/完整性 |
|---|
互動、選取與驗證語意分開理解;中文為閱讀說明,精確行為仍依元件核定。
| 類型 | 來源名稱 | 中文說明 | 補充事項 |
|---|---|---|---|
| 基準 | default | 明示預設 | 與未寫狀態的共用屬性分開呈現。 |
| 互動 | hovered / focused / pressed | 滑鼠移入/焦點/按下 | pressed 在目前快照未列;適用元件待補充。 |
| 可用性 | disabled / readonly / loading | 停用/唯讀/載入中 | readonly、loading 在目前快照未列;共用或獨立對應待補充。 |
| 選取/位置 | selected / current / selected-locked | 已選取/目前位置/選取且鎖定(依字面) | selected-locked 的精確互動語意及組合優先序待補充。 |
| 驗證/語意 | error / warning | 錯誤/警告 | 可能是回饋情境,需依元件判讀,不能全視為互動狀態。 |
| 未明示 | — | 名稱未含已辨識狀態 | 可能共用;完整適用範圍待補充。 |
支援中文元件、部位、狀態與多個關鍵字;可選「全部」跨分類查找。
開發短名採 --esi-*,供內部設計系統使用;--es-* 預留對外系統。短名引用正式長名,Figma 原名不變;局部覆寫長名時,同元素需加上 data-token-alias-scope,並載入生成的短名樣式。下載長短名對照
全部分類的欄位同時列出元件與基礎層級。Light/Dark 顯示快照內 alias 解析值;單位沿用來源,不自動補 px。實際工程套用仍待核對。
Button:尺寸與間距為共用值,不分互動狀態;色彩未帶狀態後綴者為預設或共用值,hovered/disabled 依原始路徑標示。這些是列表閱讀分類,不新增或改寫 Figma Token 名稱。
Figma Variables、Text Styles、Component Tokens 與 CSS variables 的共同設定原則。
Figma file key:Y9tlJtO9c0LNEpfHzLWT0D;保留 internal 以與 external design system 區隔。
es-internal-sysFigma 使用 slash path;CSS variable 使用 kebab-case,禁止以 underscore 或短版 namespace 新增 Token。
已有資料與完整性分開確認;下列項目尚未完成正式核對。
以 scope 降低誤用;色彩模式僅在 System collection 切換。
FRAME_FILL/SHAPE_FILL:容器色彩TEXT_FILL:文字色彩STROKE_COLOR:邊框CORNER_RADIUS/GAP/FONT_SIZE:形狀、間距與字級Reference:單一 raw paletteSystem:Light/Dark modesComponent:持續 alias 至 System,不直接區分模式以下項目需在 Figma 與 Token 匯出流程中持續追蹤。
es-internal-sys 與 --es-internal-sys-* 命名。