設計變數 Design Tokens

什麼是 Design Tokens

Lucent UI 所有元件的視覺數值（顏色、字級、間距、圓角、陰影）都不是寫死的，而是引用 :root 上的一組 CSS 變數。這代表：

• 換色 / 換字只要覆寫變數，全站同步生效；
• 工程師不用記十六進位色碼，用語意名稱即可；
• 未來 Figma 設計調整，只需更新這一小段。

v1.1 所有 token 皆為 Figma「sketchup_設計元件」元件庫逐一萃取的校準值。

色彩

語意色（通知列三件組）

v1.1 起每個語意色都是 底色 / 邊框（含圖示）/ 文字 三件組，供 .lct-bar 等元件使用：

變數命名：--lct-success-bg、--lct-success、--lct-success-text，其餘語意同理。

字級與行高

依 Figma 定義為五階：

字重：--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

搭配的 spacing utility（.lct-p-N、.lct-gap-N…）見「響應式 Utility」。

尺寸

除了全域 token，各元件的尺寸（卡片寬、縮圖比例、圖示大小…）也都是元件層級變數（如 --lct-mcard-*、--lct-bcard-*、--lct-icon-size），可在任意層覆寫，詳見各元件章節。

圓角與陰影

響應式斷點

斷點採 mobile-first：sm ≥ 480px、md ≥ 768px、lg ≥ 1024px。media query 無法使用 CSS 變數，故斷點不是 token；要修改請在 lucent-ui.css 內全域搜尋替換。詳見「響應式 Utility」。

客製化：換主色

在你自己的樣式（載入 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>