/* ============================================================================= * tl-tokens.css — TrueLink 設計 Token 單一來源（Single Source of Truth） * Issue #841 · 建立 2026-05-31 by Claude · 用 design-system skill（三層 token） * * 三層架構：Primitive（原始值）→ Semantic（語意別名）→ Component（元件層） * - Primitive：色階 / 間距 / 字級 / 圓角 / 陰影的「原始值」，幾乎不變。 * - Semantic：用途別名（--tl-bg / --tl-primary / --tl-danger…），主題切換只改這層。 * - Component：元件專屬（--tl-btn-* / --tl-card-* / --tl-input-*）。 * * 為何這樣設計（收斂「手刻 CSS vs CDN Tailwind」）： * 全站盤點後，手刻頁與 Tailwind 頁「實際用的色值」本來就同一套 = Tailwind 預設色階 * （#38bdf8=sky-400、#0f172a=slate-900、#94a3b8=slate-400…）+ 一條品牌金 (#d4af37)。 * 所以 token 不強迫任何頁換框架，只把這套「共同值」收斂成 CSS 變數： * · 手刻頁 → 用 var(--tl-*)。 * · Tailwind 頁 → 既有 slate/sky utility 已對齊；要對映可在 inline tailwind.config 指到 var(--tl-*)。 * * 全部變數加 `--tl-` 前綴，避免與既有各頁 local :root（--bg/--text/--primary…）衝突， * 方便「逐步收斂、分頁採用」。採用方式見 docs/DESIGN_TOKENS.md。 * * 預設主題 = 深色（app / admin / tools 為深色主導）。淺色頁加 [data-tl-theme="light"] * 或 class .tl-theme-light 於 //容器即可覆寫語意層。 * ============================================================================= */ :root { /* =========================================================================== * LAYER 1 — PRIMITIVES（原始值，勿在元件直接用，除非真的需要原始色階） * 色階只收錄全站實際用到的 Tailwind ramp（grounded in audit）+ 品牌金。 * =========================================================================== */ /* --- Neutral：Slate（全站中性主軸；gray-* 請逐步收斂到對應 slate-*） --- */ --tl-slate-50: #f8fafc; --tl-slate-100: #f1f5f9; --tl-slate-200: #e2e8f0; --tl-slate-300: #cbd5e1; --tl-slate-400: #94a3b8; --tl-slate-500: #64748b; --tl-slate-600: #475569; --tl-slate-700: #334155; --tl-slate-800: #1e293b; --tl-slate-900: #0f172a; --tl-slate-950: #020617; --tl-ink: #050b14; /* 比 slate-950 再深一階（admin 機房導覽底色） */ --tl-white: #ffffff; /* --- Primary：Sky（TrueLink 招牌青） --- */ --tl-sky-200: #bae6fd; --tl-sky-300: #7dd3fc; --tl-sky-400: #38bdf8; --tl-sky-500: #0ea5e9; --tl-sky-600: #0284c7; --tl-sky-700: #0369a1; /* --- Accent：Purple/Violet --- */ --tl-purple-300: #d8b4fe; --tl-purple-400: #c084fc; --tl-purple-500: #a855f7; --tl-violet-400: #a78bfa; /* --- Success：Emerald --- */ --tl-emerald-400: #34d399; --tl-emerald-500: #10b981; --tl-emerald-600: #059669; /* --- Warning：Amber --- */ --tl-amber-300: #fcd34d; --tl-amber-400: #fbbf24; --tl-amber-500: #f59e0b; --tl-amber-600: #d97706; --tl-amber-700: #b45309; /* --- Danger：Red --- */ --tl-red-300: #fca5a5; --tl-red-400: #f87171; --tl-red-500: #ef4444; --tl-red-600: #dc2626; /* --- Brand Gold（品牌金；認證 / 高階 / 榮譽訊號，非 Tailwind） --- */ --tl-gold-300: #f8c44f; /* 亮金 */ --tl-gold-500: #d4af37; /* UI CTA 金（base；偏亮，按鈕/徽章用） */ --tl-gold-700: #92722a; /* 暗金 */ /* [2026-06-19 / Claude #1839] gold RGB 通道：給 rgba(var(--tl-gold-rgb), .x) 用， * 取代各頁硬編 rgba(212,175,55,…)（212,175,55 = #d4af37 = --tl-gold-500）。 */ --tl-gold-rgb: 212, 175, 55; /* --- Brand CI 官方三色（取樣自盾牌 logo·brand/README.md + 00-master/shield.svg 權威） * [2026-06-18 / Claude] 新增。這是「商標/CI」色，與上面 UI CTA 金 #d4af37 刻意分開： * logo 金 (#E0B84C·亮版) 與 UI CTA 金 (#d4af37) 分開管理。改 logo 配色只動這三個。 --- */ --tl-brand-navy: #1B4C92; /* 主色 · logo 左鏈 · 深底 · wordmark「True」 */ --tl-brand-green: #2EA572; /* 輔色 · logo 右鏈 · 信任綠 */ --tl-brand-gold: #E0B84C; /* 點綴 · logo 金鏈 · 亮版（≠ UI CTA 金 --tl-gold-500 #d4af37） */ /* [2026-06-20 / Claude] 品牌三色 RGB 通道：給 rgba(var(--tl-brand-*-rgb), .x) 用， * 取代各頁硬編 rgba(27,76,146,…)/rgba(46,165,114,…)/rgba(224,184,76,…)（同 --tl-gold-rgb 慣例）。 */ --tl-brand-navy-rgb: 27, 76, 146; /* #1B4C92 */ --tl-brand-green-rgb: 46, 165, 114; /* #2EA572 */ --tl-brand-gold-rgb: 224, 184, 76; /* #E0B84C */ /* --- Brand Purple（品牌紫·第 9 個官方品牌色） * [2026-07-05 / Claude] 創辦人 2026-07-05 拍板：紫 #A855F7 正式收編為第 9 個品牌色 * （原本只是 Tailwind ramp 的 --tl-purple-500 primitive；現升格為「品牌」層 token，與 * navy/green/gold 同級管理，讓全站硬編的 #A855F7 收斂到單一真相）。 * --tl-purple = 品牌紫 base（給全站 var(--tl-purple) 用）；下方 300/500/700 小色階鏡射 * --tl-brand-gold / --tl-gold-* 的命名慣例（亮 / base / 暗），供漸層與 hover/active 用。 --- */ --tl-purple-700: #7c3aed; /* 暗紫（active / 深底） */ --tl-purple: #A855F7; /* 品牌紫 base（採用色·= --tl-purple-500 同值·第 9 品牌色） */ /* [2026-07-05 / Claude] 品牌紫 RGB 通道：給 rgba(var(--tl-purple-rgb), .x) 用（同 --tl-brand-*-rgb 慣例）。 */ --tl-purple-rgb: 168, 85, 247; /* #A855F7 */ /* logo 換色變數：00-master/shield.svg 的 fill="var(--tl-logo-*,#hex)" 會讀這三個。 * 子服務線只要覆寫這三個變數，同一個 logo 即整體換色（見 docs/BRAND_CI_GUIDELINES.md §3）。 */ --tl-logo-navy: var(--tl-brand-navy); --tl-logo-green: var(--tl-brand-green); --tl-logo-gold: var(--tl-brand-gold); /* --- 認證封印 seal（KYC/夥伴/版權·**與主標誌分開的另一套**·見 BRAND_CI_GUIDELINES §10） * [2026-06-18 / Claude] 標章換等級＝改 --tl-seal-metal（金屬色），底盤 navy 不變。 --- */ --tl-seal-ground: #0E264B; /* 封印底盤（固定深藍·不跟 logo 提亮） */ --tl-seal-bronze: #B08D57; /* 銅 · 基礎 */ --tl-seal-silver: #C2C7CD; /* 銀 · 進階 */ --tl-seal-gold: #C9A84B; /* 金 · 旗艦 */ --tl-seal-platinum: #DDE3E8; /* 白金 · 聯名 */ --tl-seal-metal: var(--tl-seal-gold); /* 00-master/08-cert-seal/seal.svg 讀此值 */ /* --- Spacing（4px base；對齊 Tailwind spacing scale） --- */ --tl-space-0: 0; --tl-space-1: 0.25rem; /* 4px */ --tl-space-2: 0.5rem; /* 8px */ --tl-space-3: 0.75rem; /* 12px */ --tl-space-4: 1rem; /* 16px */ --tl-space-5: 1.25rem; /* 20px */ --tl-space-6: 1.5rem; /* 24px */ --tl-space-8: 2rem; /* 32px */ --tl-space-10: 2.5rem; /* 40px */ --tl-space-12: 3rem; /* 48px */ --tl-space-16: 4rem; /* 64px */ --tl-space-20: 5rem; /* 80px */ --tl-space-24: 6rem; /* 96px */ /* --- Typography --- */ --tl-font-sans: "Noto Sans TC", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --tl-font-mono: Consolas, "Liberation Mono", "SFMono-Regular", Menlo, monospace; --tl-text-xs: 0.75rem; /* 12px */ --tl-text-sm: 0.875rem; /* 14px */ --tl-text-base: 1rem; /* 16px（手機 input 最小字級，避免 iOS 聚焦放大） */ --tl-text-lg: 1.125rem; /* 18px */ --tl-text-xl: 1.25rem; /* 20px */ --tl-text-2xl: 1.5rem; /* 24px */ --tl-text-3xl: 1.875rem; /* 30px */ --tl-text-4xl: 2.25rem; /* 36px */ --tl-text-5xl: 3rem; /* 48px */ --tl-leading-tight: 1.2; --tl-leading-snug: 1.35; --tl-leading-normal: 1.5; --tl-leading-relaxed: 1.7; --tl-weight-normal: 400; --tl-weight-medium: 600; --tl-weight-bold: 800; --tl-weight-black: 900; /* --- Radius（grounded：全站常見 8/12/14/999） --- */ --tl-radius-xs: 4px; --tl-radius-sm: 6px; --tl-radius-md: 8px; --tl-radius-lg: 12px; --tl-radius-xl: 16px; --tl-radius-2xl: 20px; --tl-radius-full: 9999px; /* --- Shadow（深色面上的層次；底色用 slate-950 alpha） --- */ --tl-shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.40); --tl-shadow-md: 0 4px 12px rgba(2, 6, 23, 0.45); --tl-shadow-lg: 0 12px 30px rgba(2, 6, 23, 0.50); --tl-shadow-xl: 0 20px 48px rgba(2, 6, 23, 0.55); --tl-glow-primary: 0 0 20px rgba(56, 189, 248, 0.25); /* sky-400 光暈 */ --tl-glow-danger: 0 0 20px rgba(239, 68, 68, 0.20); /* --- Z-index scale（避免各頁亂寫；admin 導覽 ~930、modal 最高） --- */ --tl-z-base: 1; --tl-z-sticky: 100; --tl-z-nav: 930; --tl-z-toggle: 940; --tl-z-overlay: 9000; --tl-z-modal: 9500; --tl-z-toast: 9800; /* --- Motion --- */ --tl-duration-fast: 150ms; --tl-duration-normal: 200ms; --tl-duration-slow: 300ms; --tl-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* =========================================================================== * LAYER 2 — SEMANTIC（用途別名；**元件請優先用這層**） * 預設 = 深色主題。淺色見檔尾 [data-tl-theme="light"]。 * =========================================================================== */ /* Surfaces / 背景層 */ --tl-bg: var(--tl-slate-950); /* 頁面底 */ --tl-bg-elevated: var(--tl-slate-900); /* 卡片 / panel */ --tl-bg-elevated-2:var(--tl-slate-800); /* hover / 內層 */ --tl-bg-inset: var(--tl-ink); /* 導覽 / 最深槽 */ /* Text / 前景 */ --tl-text: var(--tl-slate-50); --tl-text-muted: var(--tl-slate-400); --tl-text-subtle: var(--tl-slate-500); --tl-text-on-accent: var(--tl-slate-950); /* 放在亮色（primary/gold）上的深字 */ /* Borders / 線 */ --tl-border: var(--tl-slate-700); --tl-border-strong: var(--tl-slate-600); --tl-border-subtle: var(--tl-slate-800); /* Primary（青） */ --tl-primary: var(--tl-sky-400); --tl-primary-hover: var(--tl-sky-300); --tl-primary-active: var(--tl-sky-500); --tl-primary-contrast:var(--tl-slate-950); /* primary 底上的字 */ /* Accent（紫）/ Brand gold（金） */ --tl-accent: var(--tl-purple-500); --tl-accent-hover: var(--tl-purple-400); --tl-gold: var(--tl-gold-500); --tl-gold-strong: var(--tl-gold-300); /* Status */ --tl-success: var(--tl-emerald-500); --tl-success-fg: var(--tl-slate-950); --tl-warning: var(--tl-amber-500); --tl-warning-fg: var(--tl-slate-950); --tl-danger: var(--tl-red-500); --tl-danger-fg: var(--tl-slate-50); --tl-info: var(--tl-sky-500); --tl-info-fg: var(--tl-slate-950); /* Focus ring（無障礙：可見聚焦） */ --tl-ring: var(--tl-sky-400); --tl-ring-width: 2px; --tl-ring-offset: 2px; /* Semantic spacing / radius 別名 */ --tl-gap: var(--tl-space-4); --tl-pad-card: var(--tl-space-5); --tl-pad-page-x: var(--tl-space-6); --tl-pad-page-y: var(--tl-space-8); --tl-radius-control:var(--tl-radius-md); --tl-radius-card: var(--tl-radius-lg); /* =========================================================================== * LAYER 3 — COMPONENT（元件層；示範 button / card / input。 * 採用頁可只用 Semantic 層；元件 token 讓共用元件好統一。） * =========================================================================== */ /* Button（primary 預設） */ --tl-btn-bg: var(--tl-primary); --tl-btn-fg: var(--tl-primary-contrast); --tl-btn-hover-bg: var(--tl-primary-hover); --tl-btn-radius: var(--tl-radius-control); --tl-btn-pad-y: var(--tl-space-2); --tl-btn-pad-x: var(--tl-space-4); --tl-btn-min-h: 44px; /* tap target ≥ 44px（行動端） */ --tl-btn-weight: var(--tl-weight-bold); /* --------------------------------------------------------------------------- * Button v2 — 共用 crafted 元件（/global/tl-buttons.css 讀這批） * [2026-07-04 / Claude] 加此區：把「不像 AI 做的」按鈕系統的 craft 決策收斂成 token。 * * 🔴 可換色關鍵（踩過雷·瀏覽器實測）：CSS 自訂屬性的「別名」若在 :root 定義成 * var(另一個 token)，會在 :root 就「烘焙」成該 token 的 root 值 → 之後在下層覆寫 * 來源 primitive（如 --tl-gold-500）不會重算這個別名。所以「顏色類」token 這裡**不** * 做別名指向；tl-buttons.css 的上色宣告**直接讀 primitive / brand 來源 token** * （--tl-gold-500 / --tl-brand-navy / --tl-red-600…），服務線在任何層級覆寫來源即整體換色。 * 本區只保留「幾何 / 尺寸 / 字重」這類**不需要主題重算**的 token（它們指向 primitive 沒差）。 * * 圓角刻意「克制」（企業級）：控制項用 --tl-radius-sm(6px) 這一個刻意值，不到處 rounded-lg。 * gold CTA = hero：亮金底 + 深墨字（對比 ≈9.6:1、像「鑄印」而非平填），一畫面最多一個。 */ --tl-btn2-radius: var(--tl-radius-sm); /* 6px · 刻意、專業、不過圓 */ --tl-btn2-weight: var(--tl-weight-bold); /* 800 · label 有份量 */ --tl-btn2-tracking: 0.01em; /* 適度字距 · 顯得「刻過」 */ --tl-btn2-border-w: 1px; --tl-btn2-min-h: var(--tl-btn-min-h); /* 44px tap target（md） */ /* 尺寸刻度 sm / md / lg（padding + 字級 + tap 高度一致 · 幾何不需主題重算） */ --tl-btn2-sm-pad-y: var(--tl-space-1); /* 4px */ --tl-btn2-sm-pad-x: var(--tl-space-3); /* 12px */ --tl-btn2-sm-font: var(--tl-text-sm); /* 14px */ --tl-btn2-sm-min-h: 36px; --tl-btn2-md-pad-y: var(--tl-space-2); /* 8px */ --tl-btn2-md-pad-x: var(--tl-space-5); /* 20px */ --tl-btn2-md-font: var(--tl-text-sm); /* 14px（按鈕字略小＝精緻） */ --tl-btn2-lg-pad-y: var(--tl-space-3); /* 12px */ --tl-btn2-lg-pad-x: var(--tl-space-6); /* 24px */ --tl-btn2-lg-font: var(--tl-text-base); /* 16px */ --tl-btn2-lg-min-h: 52px; /* 顏色類（primary/secondary/ghost/danger 的 bg/fg/border/hover/active）**不**在此別名—— * 直接在 tl-buttons.css 讀來源 token，見上方 🔴 可換色關鍵。 */ /* Card / Panel */ --tl-card-bg: var(--tl-bg-elevated); --tl-card-border: var(--tl-border); --tl-card-radius: var(--tl-radius-card); --tl-card-pad: var(--tl-pad-card); --tl-card-shadow: var(--tl-shadow-md); /* Input / Select / Textarea */ --tl-input-bg: var(--tl-slate-950); --tl-input-fg: var(--tl-text); --tl-input-border: var(--tl-border); --tl-input-radius: var(--tl-radius-control); --tl-input-pad-y: var(--tl-space-2); --tl-input-pad-x: var(--tl-space-3); --tl-input-min-h: 44px; --tl-input-font-size: var(--tl-text-base); /* ≥16px 防 iOS 放大 */ --tl-input-focus-ring:var(--tl-ring); /* =========================================================================== * APP — 五 tab 共用語意別名（issue #1282 · App 設計系統基礎） * * 用法：app tab 頁載入 /global/tl-tokens.css 後，用 var(--tl-app-*) 取代就近 hardcode。 * =========================================================================== */ --tl-app-bg: var(--tl-bg); /* tab 頁面底 */ --tl-app-surface: var(--tl-bg-elevated); /* 卡片 / panel */ --tl-app-surface-2: var(--tl-bg-elevated-2); /* hover / 內層 */ --tl-app-inset: var(--tl-bg-inset); /* 導覽 / 最深槽 / tab bar */ --tl-app-border: var(--tl-border); --tl-app-border-strong: var(--tl-border-strong); --tl-app-text: var(--tl-text); --tl-app-text-muted: var(--tl-text-muted); --tl-app-primary: var(--tl-primary); /* 五 tab 共用主色（招牌青） */ --tl-app-primary-hover: var(--tl-primary-hover); --tl-app-primary-contrast: var(--tl-primary-contrast); --tl-app-accent: var(--tl-accent); --tl-app-success: var(--tl-success); --tl-app-warning: var(--tl-warning); --tl-app-danger: var(--tl-danger); --tl-app-radius-card: var(--tl-radius-card); --tl-app-radius-control:var(--tl-radius-control); --tl-app-shadow-card: var(--tl-shadow-md); /* tab bar（底部導覽列）共用 token */ --tl-app-tabbar-bg: var(--tl-bg-inset); --tl-app-tabbar-border: var(--tl-border-subtle); --tl-app-tab-active: var(--tl-primary); --tl-app-tab-inactive: var(--tl-text-muted); } /* ============================================================================= * APP COMPONENT CLASSES — 五 tab 共用元件（issue #1282） * * ============================================================================= */ .tl-app-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--tl-space-2); min-height: var(--tl-btn-min-h); /* 44px tap target */ padding: var(--tl-btn-pad-y) var(--tl-btn-pad-x); background: var(--tl-app-primary); color: var(--tl-app-primary-contrast); border: 0; border-radius: var(--tl-app-radius-control); font: inherit; font-weight: var(--tl-weight-bold); cursor: pointer; text-decoration: none; transition: background-color var(--tl-duration-normal) var(--tl-ease-standard); } .tl-app-btn-primary:hover { background: var(--tl-app-primary-hover); } .tl-app-btn-primary:focus-visible { outline: var(--tl-ring-width) solid var(--tl-ring); outline-offset: var(--tl-ring-offset); } .tl-app-surface { background: var(--tl-app-surface); border: 1px solid var(--tl-app-border); border-radius: var(--tl-app-radius-card); box-shadow: var(--tl-app-shadow-card); } /* ============================================================================= * LIGHT THEME OVERRIDE — 只改 Semantic 層（Primitive 不動） * 用法：或，也可套在區塊容器。 * 給以淺色為主的行銷 / 公開頁採用；app/admin 維持預設深色。 * ============================================================================= */ [data-tl-theme="light"], .tl-theme-light { --tl-bg: var(--tl-slate-50); --tl-bg-elevated: var(--tl-white); --tl-bg-elevated-2: var(--tl-slate-100); --tl-bg-inset: var(--tl-slate-100); --tl-text: var(--tl-slate-900); --tl-text-muted: var(--tl-slate-500); --tl-text-subtle: var(--tl-slate-400); --tl-border: var(--tl-slate-200); --tl-border-strong: var(--tl-slate-300); --tl-border-subtle: var(--tl-slate-100); --tl-primary: var(--tl-sky-600); /* 淺底上加深 primary，保對比 */ --tl-primary-hover: var(--tl-sky-700); --tl-primary-active: var(--tl-sky-700); --tl-primary-contrast: var(--tl-white); --tl-success: var(--tl-emerald-600); --tl-warning: var(--tl-amber-600); --tl-danger: var(--tl-red-600); --tl-danger-fg: var(--tl-white); --tl-info: var(--tl-sky-600); --tl-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.10); --tl-input-bg: var(--tl-white); } /* 尊重使用者「減少動態」偏好（全站一致；採用 token 的頁自動受惠） */ @media (prefers-reduced-motion: reduce) { :root { --tl-duration-fast: 1ms; --tl-duration-normal: 1ms; --tl-duration-slow: 1ms; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }