/* ============================================================================= * 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; /* 品牌金（base） */ --tl-gold-700: #92722a; /* 暗金 */ /* --- 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); /* 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); } /* ============================================================================= * 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; } }