HHG Design System

v1.26.0

HHG 內部系統的共用 UI 基礎：design token、元件樣式層與行為層。所有值 build 時從 tokens.json 與 registry/hhg/ 讀出，repo 是唯一事實來源（SSOT）。

tokens.json v1.26.0select.jsx DS_VERSION v1.26.0本站同步時間 2026-10-14

現在的狀態

取用前先確認自己拿的是哪一層。

  • ●React 換底進行中——元件層改寫成 React ＋ Tailwind v4，走 shadcn registry 分發；樣式與行為雙層等值驗收通過才進。
  • ●components.css／components.js 已凍結、逐族退役中——現有採用者不受影響，新專案不要從這裡起手。
  • ●registry 現有 12 個元件（ds-select、ds-button、ds-input、ds-badge、ds-tabs、ds-segmented、ds-combobox、ds-table、ds-dialog、ds-appshell、ds-menu、ds-checkbox）——其餘元件族還在遷。
FoundationToken 視覺化色票、間距、控件高度、圓角、字級、疊層、斷點與觸控覆寫，全部從 tokens.json 渲染。130 顆 token · 4 階斷點打開 →Components元件展示React ＋ Tailwind v4 registry 元件的可互動 demo，與已凍結的 vanilla CSS 型錄。registry 12 個元件 · HTML 型錄 32 節打開 →

怎麼取用

用程式從 tokens.json 生成你的 theme，不要手抄。

Token 層

吃 tokens.json（含 pointerCoarse 與 breakpoints 兩個獨立區塊，都不要漏）；純 vanilla 專案可直接 <link> 引用 tokens.css。

tokens.json ↗tokens.css ↗

元件層（registry）

在 components.json 加一個 registry 來源，然後 npx shadcn add @hhg/ds-select。token 要跟 Yu Anting 拿。

GitHub repo（SSOT）↗Releases（版本紀錄）↗GUIDELINE.md（規範全文）↗CONVERSION.md（怎麼轉成你的 theme）↗

版本資訊

版本號在 repo 有 8 處，publish.sh 每次同步檢查一致；本站顯示其中兩處。

來源值本站怎麼讀
tokens.json 的 versionv1.26.0build 時 import，不寫死
registry/hhg/select.jsx 的 DS_VERSIONv1.26.0build 時從原始碼 regex 抓出
Tailwind 命名空間覆蓋率111/130其餘 19 顆寫 arbitrary value