什麼是 Design Tokens
Lucent UI 所有元件的視覺數值（顏色、字級、間距、圓角、陰影）都不是寫死的，而是引用 :root 上的一組 CSS 變數。這代表：
- 換色 / 換字只要覆寫變數，全站同步生效；
- 工程師不用記十六進位色碼，用語意名稱即可；
- 未來 Figma 設計調整，只需更新這一小段。
色彩
| 變數 | 預設值 | 用途 |
|---|---|---|
--lct-primary |
#d32f2f |
品牌主色（按鈕、重點） |
--lct-primary-hover |
#b71c1c |
主色 hover |
--lct-primary-active |
#a31515 |
主色按下 |
--lct-primary-soft |
rgba(211,47,47,.3) |
停用 / 次要 |
--lct-primary-tint |
rgba(211,47,47,.08) |
淡背景 |
--lct-ink |
#2b2b2b |
主要文字 |
--lct-text-secondary |
#5b5b5b |
次要文字（項數等） |
--lct-muted |
#8a8278 |
placeholder / 停用文字 |
--lct-surface |
#ffffff |
卡片 / 面板底 |
--lct-surface-hover |
#fafafa |
次要按鈕 hover 底 |
--lct-bg |
#f5f5f7 |
頁面底 |
--lct-border |
#d2d2d7 |
邊框 |
--lct-hover-tint |
rgba(0,0,0,.05) |
透明 hover 底 |
--lct-scrim-bg |
rgba(0,0,0,.4) |
Modal 遮罩底 |
--lct-success / --lct-error / --lct-warning / --lct-info
|
— | 語意色（通知 / Toast） |
字級與行高
依 Figma 定義為四階：
| 變數 | 大小 / 行高 | 用途 |
|---|---|---|
--lct-fs-caption / --lct-lh-caption
|
11 / 16 | 註記、項數 |
--lct-fs-sm / --lct-lh-sm
|
12 / 18 | 小字、按鈕文字 |
--lct-fs-base / --lct-lh-base
|
14 / 20 | 內文 |
--lct-fs-title / --lct-lh-title
|
16 / 22 | 標題 |
字重：--lct-fw-regular (400)、--lct-fw-medium (500)、--lct-fw-bold (700)。
間距
以 4 的倍數為基礎的階梯，元件內部一律引用這些變數：
--lct-space-1: 4px · -2: 6px · -3: 8px · -4: 10px · -5: 12px · -6: 16px · -7: 20px · -8: 24px
尺寸
| 變數 | 值 | 用途 |
|---|---|---|
--lct-shell-width |
420px | 外掛面板寬 |
--lct-header-h |
68px | Header 高度 |
--lct-control-h |
32px | 搜尋框 / 搜尋鈕等控制項高度 |
除了全域 token，各元件的尺寸（卡片寬、縮圖比例、圖示大小…）也都是元件層級變數（如 --lct-mcard-*、--lct-bcard-*、--lct-icon-size），可在任意層覆寫，詳見各元件章節。
圓角與陰影
| 變數 | 值 | 用途 |
|---|---|---|
--lct-radius-sm |
6px | 按鈕、輸入框、小 chip |
--lct-radius-md |
8px | 卡片、清單列 |
--lct-radius-panel |
12px | Modal / Dialog 面板 |
--lct-radius-pill |
999px | 膠囊徽章 |
--lct-shadow-sm |
0 1px 2px rgba(12,12,13,.05) |
面板細陰影 |
--lct-shadow-md |
0 4px 12px rgba(12,12,13,.1) |
下拉、Toast |
--lct-shadow-lg |
0 8px 24px rgba(12,12,13,.14) |
Modal |
客製化：換主色
在你自己的樣式（載入 lucent-ui.css 之後）覆寫變數即可：
:root {
--lct-primary: #1565c0; /* 換成藍色主色 */
--lct-primary-hover: #0d47a1;
--lct-font-family: 'Inter', 'Noto Sans TC', sans-serif;
}
不要直接改元件的 class（例如去覆寫 .lct-btn--primary 的 background）。永遠改變數，才能保持整套系統一致、升級時不衝突。
客製化：局部主題
變數也可以只作用在某個容器內，做出區塊級的主題：
<div class="lct-root" style="--lct-primary:#2e7d32">
<!-- 這個區塊裡的主色都變綠色 -->
<button class="lct-btn lct-btn--primary">套用</button>
</div>