Lucent UI 是什麼
Lucent UI 是 SketchUp「材質庫」外掛的官方前端元件庫，萃取自 Figma 設計系統 sketchup_設計元件。
它的核心理念和 Bootstrap 一樣：
工程師只要寫
class，不用寫 CSS。
所有元件的顏色、字級、間距、圓角都由一組 design tokens（CSS 變數） 統一驅動，改一處即可全站換色，不必再回頭翻 Figma 對數值。
<button class="lct-btn lct-btn--primary">加入</button>
<div class="lct-bar lct-bar--error">報價單匯出失敗，請重試</div>
<div class="lct-material-grid lct-cols-3 md:lct-cols-4 lg:lct-cols-6">…</div>
v1.1 亮點
- 全元件依 Figma 元件庫逐一校準：按鈕、Tab、搜尋列、材質卡、看板卡、材料列、Footer、選單、通知列、對話框、報價表格、Header 皆為像素級對齊（v1.0 只有 Modal 是）。
-
新增 Tailwind 風格響應式 utility 層：斷點
sm ≥ 480px、md ≥ 768px、lg ≥ 1024px，前綴寫法md:lct-cols-4，詳見「響應式 Utility」。 -
新元件：
--dark深色按鈕、返回鈕.lct-back-btn、浮起 icon 鈕.lct-icon-btn--raised、報價表格.lct-quote-card/.lct-table。 -
重要變更：Tab 改為頂部灰膠囊式、Footer 按鈕去框去底（hover 變紅）、材質卡名稱壓底黑條、選取態改墨色邊框；
.lct-material-grid--cols-N移除，改用.lct-cols-N。
三個檔案，兩行引入
整套只有兩個必要檔案（外加一份展示頁）：
| 檔案 | 說明 |
|---|---|
lucent-ui.css |
全部樣式：design tokens + 所有元件 class + 響應式 utility |
lucent-ui.js |
互動行為：Modal、Toast、Tab、下拉、確認框（無相依、原生 JS） |
index.html |
元件展示頁，可直接開來看效果、複製範例 |
引入方式：
<link rel="stylesheet" href="lucent-ui.css">
<script src="lucent-ui.js"></script>
完成後就能直接使用所有 lct- 開頭的 class。詳見「安裝與引入」。
命名慣例
Lucent UI 採用類似 BEM 的命名，前綴一律為 lct-，避免和你既有的樣式衝突：
-
元件：
.lct-btn、.lct-card、.lct-modal -
子元素：用
__，例如.lct-modal__title、.lct-row__thumb -
修飾子（變體 / 狀態）：用
--，例如.lct-btn--primary、.lct-bar--error -
互動狀態：用
is-前綴，例如.is-active、.is-selected、.is-disabled -
CSS 變數：
--lct-*，例如--lct-primary -
JS data 屬性：
data-lct-*，例如data-lct-toggle="modal" -
響應式前綴：
sm:/md:/lg:，例如md:lct-cols-4（mobile-first）
Hello，歡迎使用 Lucent UI！左側可切換各章節。
元件總覽
| 分類 | 元件 |
|---|---|
| 基礎 | 按鈕（含 --dark 深色）、Icon 按鈕（含 --raised 浮起）、返回鈕、收藏愛心、徽章 |
| 導覽 | Header、頂部 Tab Bar、搜尋列、Footer 動作列 |
| 資料呈現 | 材質卡、材質格線、收藏看板、材料列、報價資訊列、報價表格 |
| 表單 | 輸入框、Checkbox |
| 覆蓋層 | Modal 彈窗、確認對話框、通知列 / Toast、下拉選單 |
| 版面 | 響應式 utility（display / 欄數 / gap / spacing / flex / 文字對齊） |
各分類的詳細用法請見左側章節。