/** * Theme Tokens - 士燿企業統一主題 Token 系統 * * 三層架構： * Layer 1: Primitive（原始色盤 — 不隨主題變） * Layer 2: Semantic（語意映射 — 主題在此切換） * Layer 3: Component（元件級 — 引用 Semantic） * * 品牌色規則： * #00A0E8 只做「重點色」— 按鈕、連結、active 狀態 * 側欄大面積底色 = 深中性色，不用品牌藍 * 明亮模式以白/淺灰為主，黑色文字優先 * * 切換方式： * 建立：2026-03-23 | 品牌色重構：2026-03-24 */ /* ================================================================ Layer 1: Primitive Tokens（原始色盤，只定義一次） ================================================================ */ :root { /* ---- 中性色階 (Cool Gray) ---- */ --gray-0: #ffffff; --gray-50: #f6f8fb; --gray-100: #f1f3f5; --gray-200: #dcdcdc; --gray-300: #c4c8cc; --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2a37; --gray-900: #111827; --gray-950: #0f141a; /* ---- 品牌色 (MG Blue #00A0E8) ---- */ /* 2026-04-24 UI 現代化：飽和度降低，調成 calm enterprise blue （原 #00A0E8 偏霓虹，Codex 建議） */ --brand-50: #e8f3f9; --brand-100: #c4dfec; --brand-200: #9bc8dd; --brand-400: #3d9ec4; --brand-500: #008BBF; --brand-600: #0077a6; --brand-700: #00628a; /* ---- 語意色 ---- */ --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --purple-400: #a78bfa; --purple-500: #8b5cf6; --purple-600: #7c3aed; } /* ================================================================ Layer 2: Semantic Tokens（語意映射 — 主題在此切換） ================================================================ */ /* ---- 亮色模式（預設） ---- */ :root { /* 背景 — 微灰底，減少純白刺眼 */ --bg-page: #eef1f5; /* 比 gray-50 深一階，不刺眼 */ /* 表面 */ --surface-base: #f8f9fb; /* 卡片：微灰白，不是純白 */ --surface-raised: var(--gray-100); /* #f1f3f5 表頭/巢狀 */ --surface-overlay: var(--gray-0); /* #ffffff modal/dropdown */ --surface-hover: var(--gray-200); /* #dcdcdc hover */ --surface-input: var(--gray-0); /* #ffffff 輸入框 */ --surface-section-muted: #edf6ff; /* 淺藍 section（CRM 詳情頁/儀表板） */ /* 文字 — 深靛灰藍（參考 Zoho CRM #313949），比純黑柔和 */ --text-primary: #313949; /* 標題/重要文字 */ --text-secondary: var(--gray-600); /* #4b5563 正文 */ --text-tertiary: #66707c; /* 2026-05-11 為達 4.5:1 vs bgColor-emphasis (#f1f3f5)，舊 #6b7280 只 4.35:1 */ --text-placeholder: var(--gray-500); /* #6b7280 placeholder（AA 4.6:1，舊 #9ca3af 不及格）*/ --text-inverse: var(--gray-0); /* 反色（深底白字）*/ --text-accent: #006f9f; /* 連結/icon 強調色（品牌藍深版，AA 6.5:1 on white）*/ /* 邊框 */ /* 2026-04-23 PR-C1: border 分 3 級（light 保持既有語意） 2026-05-11 註：vs bgColor-default 對比度 1.06~1.68:1 < WCAG 3.0:1，但卡片邊框屬「裝飾性分隔線」（非識別 UI 必要視覺線索 — 卡片靠 bg + shadow + 空間分隔識別），依 WCAG 1.4.11 SC Non-text Contrast 豁免；故維持低對比薄邊框風格不調深。Codex 與 Primer 業界做法一致。*/ --border-subtle: var(--gray-100); /* #f1f3f5 — 幾乎無感邊框 */ --border-default: var(--gray-200); /* #dcdcdc — 一般元件 */ --border-strong: var(--gray-300); /* #c4c8cc — hover/focus */ /* 2026-04-23 PR-C5: 互動狀態疊色（light 用黑色疊） */ --overlay-hover-subtle: rgba(0, 0, 0, 0.03); /* table row / list item hover */ --overlay-hover-strong: rgba(0, 0, 0, 0.06); /* 更明顯的 hover */ --overlay-active: rgba(0, 0, 0, 0.09); /* 按下狀態 */ --overlay-backdrop: rgba(0, 0, 0, 0.5); /* modal / bottom sheet 背景遮罩(2026-08-04 §4.12) */ --focus-ring: 0 0 0 2px rgba(0, 160, 232, 0.25); /* 焦點環（light 用原品牌色） */ /* 2026-04-24 互動狀態 token（ADR-012 規則 5）— 語意別名，指向 overlay/focus 既有值新元件撰寫 hover/active/focus/disabled 請優先用這組 --state-* token。 */ --state-hover-bg: var(--overlay-hover-subtle); --state-hover-bg-strong: var(--overlay-hover-strong); --state-active-bg: var(--overlay-active); --state-focus-ring: var(--focus-ring); --state-focus-ring-color: var(--color-focus-ring); --state-disabled-bg: var(--disabled-bg); --state-disabled-text: var(--disabled-text); --state-disabled-border: var(--disabled-border); --state-disabled-opacity: 0.5; /* ============================================================ Primer-style role-based tokens（2026-04-24 新增）對齊 GitHub Primer 命名慣例，便於新元件撰寫與對照業界文件。既有 --text-* / --surface-* / --border-* 保留不動；新元件優先用本段 --fgColor-* / --bgColor-* / --borderColor-* 語意命名。參考：https://primer.style/product/primitives/token-names/ ============================================================ */ /* 前景（文字 / icon） */ --fgColor-default: var(--text-primary); /* 主要文字、標題 */ --fgColor-muted: var(--text-secondary); /* 次要文字 */ --fgColor-subtle: var(--text-tertiary); /* 最弱文字、placeholder */ --fgColor-accent: var(--text-accent); /* 強調連結 */ --fgColor-onEmphasis: var(--gray-0); /* 深色底上白字（button primary 等） */ --fgColor-success: var(--state-success-text); --fgColor-warning: var(--state-warning-text); --fgColor-danger: var(--state-error-text); --fgColor-info: var(--state-info-text); /* 背景（表面） */ --bgColor-default: var(--surface-base); /* 頁面/卡面基底 */ --bgColor-muted: var(--surface-section-muted); /* 淺藍段落 */ --bgColor-inset: var(--surface-input); /* 凹陷感（input/textarea） */ --bgColor-emphasis: var(--surface-raised); /* 抬升（表頭、巢狀卡） */ --bgColor-overlay: var(--surface-overlay); /* modal/dropdown */ --bgColor-backdrop: rgba(0, 0, 0, 0.5); /* modal backdrop 黑色半透明遮罩（光/暗模式共用，視覺一致） */ --bgColor-accent-emphasis: var(--primary); /* 品牌色 solid（CTA 按鈕） */ --bgColor-accent-muted: var(--primary-tint); /* 品牌色淡底 */ --bgColor-success-muted: var(--state-success-bg); --bgColor-warning-muted: var(--state-warning-bg); --bgColor-danger-muted: var(--state-error-bg); --bgColor-info-muted: var(--state-info-bg); --bgColor-neutral-muted: var(--state-hover-bg); /* hover 疊色 */ --bgColor-neutral-emphasis: var(--state-active-bg); /* active 疊色 */ /* attention 是 Primer 命名，我們不用此命名 → alias 對到 warning（2026-05-11 補齊） */ --bgColor-attention-muted: var(--state-warning-bg); --bgColor-attention-emphasis: var(--state-warning-text); --fgColor-attention: var(--state-warning-text); /* emphasis 變體（state 色用實心，給 badge / button solid bg）— 2026-05-11 補齊 */ --bgColor-success-emphasis: var(--state-success-text); --bgColor-warning-emphasis: var(--state-warning-text); --bgColor-danger-emphasis: var(--state-error-text); /* 測試環境 banner 專屬底色（2026-07-24）：固定深紅,兩色模式一致的環境 chrome。不用 --bgColor-danger-emphasis（那個 alias 到 state-error-text 前景色,暗色變鮭魚粉）。用 palette red-600 固定值,不在 dark 區塊覆寫 → 亮暗都 #dc2626。 */ --bgColor-testBanner: var(--red-600); /* 邊框 */ --borderColor-default: var(--border-default); --borderColor-muted: var(--border-subtle); --borderColor-emphasis: var(--border-strong); /* hover / focus 強邊框 */ --borderColor-accent: var(--primary); --borderColor-success: var(--state-success-border); --borderColor-warning: var(--state-warning-border); --borderColor-danger: var(--state-error-border); --borderColor-info: var(--state-info-border); /* borderColor 變體 alias（2026-05-11 補齊，方便配對 bgColor-*-muted 等 muted bg）*/ --borderColor-accent-muted: var(--primary-tint); --borderColor-accent-emphasis: var(--primary); --borderColor-success-muted: var(--state-success-border); --borderColor-warning-muted: var(--state-warning-border); --borderColor-danger-muted: var(--state-error-border); --borderColor-danger-emphasis: var(--state-error-text); --borderColor-attention-muted: var(--state-warning-border); /* typography.css 內 .iq-bg-secondary / .iq-bg-dark 用的舊命名 alias（2026-05-11 補） */ --iq-bg-secondary: var(--bgColor-muted); --iq-bg-dark: var(--bgColor-emphasis); --iq-text-secondary: var(--fgColor-muted); --iq-text-dark: var(--fgColor-default); /* mono 字體 token — visitor / chart 多處引用，集中定義 */ --font-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; --fontFamily-mono: ui-monospace, Menlo, Consolas, "Courier New", monospace; /* 通用 transition / hover token（responsive.css / container-shared.css / card-mobile 引用）*/ --transition-default: 0.2s ease; --primary-hover: var(--primary); /* hover 加亮由 brightness/opacity 處理，色仍是品牌色 */ /* 2026-05-11 CRM Primer 遷移完成：原 --color-* alias 已全部換到正規 Primer 命名 (borderColor-default / primary / bgColor-default/muted/inset / fgColor-default/muted)， alias 拿掉避免自我參照迴圈 */ /* 陰影 */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.06); /* 2026-04-24 扁平化 */ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* 卡片 */ --card-border: none; --card-radius: 10px; --card-radius-mobile: 8px; /* 品牌色 — 只做重點，不做大面積背景 */ --primary: var(--brand-500); /* #00A0E8 */ --primary-dark: var(--brand-600); /* #0092d4 */ --primary-light: var(--brand-400); /* #33b8ef */ --primary-tint: var(--brand-50); /* #e6f6fd 極淺底 */ --primary-rgb: 0, 139, 191; /* 側欄 — 淺色模式跟隨主題（Notion/Figma 風格），不再永久深色 */ --sidebar-bg: #f0f2f5; /* 淺灰底，與 content 柔和過渡 */ --sidebar-text: var(--gray-700); /* #374151 深灰文字 */ --sidebar-text-muted: var(--gray-400); /* #9ca3af 次要文字 */ --sidebar-hover-bg: rgba(0, 0, 0, 0.04); /* 微暗 hover */ --sidebar-active-bg: rgba(0, 160, 232, 0.10); /* 品牌藍淡底 active */ --sidebar-active-text: var(--text-accent); /* #006f9f 深藍文字 */ --sidebar-logo-bg: #f0f2f5; /* 與側欄一體 */ --sidebar-border: var(--gray-200); /* #dcdcdc 分隔線 */ /* 互動 */ --color-focus-ring: rgba(0, 160, 232, 0.4); --color-overlay: rgba(0, 0, 0, 0.5); --color-link: var(--text-accent); /* #006f9f（AA 合格，取代亮藍 #00A0E8）*/ --color-link-hover: var(--brand-700); /* #007bb3 */ --color-link-visited: var(--purple-600); /* 狀態色 */ --state-success-bg: #d1fae5; --state-success-text: #065f46; --state-success-border: #6ee7b7; --state-warning-bg: #fef3c7; --state-warning-text: #92400e; --state-warning-border: #fcd34d; --state-error-bg: #fee2e2; --state-error-text: #991b1b; --state-error-border: #fca5a5; --state-info-bg: var(--brand-50); --state-info-text: var(--brand-700); --state-info-border: var(--brand-200); /* 按鈕系統 — 淡色系統一風格（soft button pattern） 2026-04-24 改走 --primary-rgb token，跟著 brand palette 自動變 */ --btn-primary-bg: rgba(var(--primary-rgb), 0.16); --btn-primary-bg-hover: rgba(var(--primary-rgb), 0.24); --btn-primary-text: #005E85; /* 深藍，composite on bg 達 5.84:1 WCAG AA */ --btn-primary-border: rgba(var(--primary-rgb), 0.34); --btn-secondary-bg: var(--gray-0); --btn-secondary-bg-hover: var(--gray-50); --btn-secondary-text: #334155; --btn-secondary-border: #dcdcdc; --btn-ghost-bg: transparent; --btn-ghost-bg-hover: rgba(var(--primary-rgb), 0.08); --btn-ghost-text: #005E85; /* 對齊 btn-primary-text */ --btn-danger-bg: rgba(239, 68, 68, 0.10); --btn-danger-bg-hover: rgba(239, 68, 68, 0.18); --btn-danger-text: #b42318; --btn-danger-border: rgba(239, 68, 68, 0.26); --btn-success-bg: rgba(34, 197, 94, 0.12); --btn-success-bg-hover: rgba(34, 197, 94, 0.20); --btn-success-text: #065f46; --btn-success-border: rgba(34, 197, 94, 0.28); --btn-warning-bg: rgba(245, 158, 11, 0.12); --btn-warning-bg-hover: rgba(245, 158, 11, 0.20); --btn-warning-text: #92400e; --btn-warning-border: rgba(245, 158, 11, 0.28); --btn-info-bg: rgba(6, 182, 212, 0.12); --btn-info-bg-hover: rgba(6, 182, 212, 0.20); --btn-info-text: #0e7490; --btn-info-border: rgba(6, 182, 212, 0.28); --btn-light-bg: #f8fafc; --btn-light-bg-hover: #f1f5f9; --btn-light-text: #334155; --btn-light-text-hover: #1e293b; --btn-light-border: #e2e8f0; --btn-dark-bg: #334155; --btn-dark-bg-hover: #475569; --btn-dark-text: #f1f5f9; --btn-dark-text-hover: #f8fafc; --btn-dark-border: #475569; /* Disabled */ --disabled-bg: var(--gray-100); --disabled-text: var(--gray-400); --disabled-border: var(--gray-200); /* 登入頁品牌面板 */ --login-brand-bg: #1f3650; --login-brand-bg-2: #2b4a66; /* 側欄選單 — 供 css.css fallback 使用 */ --sidebar-menu-active-bg: var(--sidebar-active-bg); --sidebar-menu-active-radius: 10px; --sidebar-menu-active-shadow: none; --sidebar-submenu-active-bg: rgba(0, 160, 232, 0.08); --sidebar-submenu-active-color: var(--sidebar-active-text); /* icon 預設色 — 用 accent 不用 primary（降低品牌藍使用率） */ --icon-color: var(--text-accent); --icon-color-muted: var(--gray-400); } /* ---- 暗色模式 ---- */ /* 2026-07-02 UI refresh (Stage 1): * 對齊 mockup slate 底色 + MG 藍強化。 * 選定過程:mockups/ 3 版 accent × 3 底色 → cowork compare 三欄對比。 * 底色 = B 灰藍 (#151a21,GitHub / VS Code 派帶藍調),招牌色 = MG 藍。 * 卡片浮起感靠底色階差(#151a21 → #1b212a → #232b36),減少 border 負擔。 * 只改 dark mode 值,不動亮色 / semantic / Primer token 結構 → 可 revert 一鍵回。 */ [data-theme="dark"] { --bg-page: #151a21; /* mockup slate,GitHub / VS Code 派 */ --surface-base: #1b212a; /* 卡片:比底一階,浮起感靠底色階差 */ --surface-raised: #232b36; /* 表頭 / 巢狀:再亮一階 */ --surface-overlay: #2b3441; /* modal / dropdown / tooltip 浮層 */ --surface-hover: #2e3844; /* hover 稍亮但不刺眼 */ --surface-input: #12161c; /* 比 surface-base 暗一階,形成凹陷 */ --text-primary: #dde3ea; /* mockup 值,減亮暈(舊 #eaf1f8 過亮) */ --text-secondary: #a3adba; --text-tertiary: #717d8c; /* AA 4.5:1 vs surface-raised (#232b36) */ --text-placeholder: #6a7079; /* AA vs surface-input */ --text-inverse: var(--gray-900); --text-accent: #33B4EC; /* MG 藍當強調色(舊 #8fdaff 過淡) */ /* 邊框稍降透明度 — 靠底色階差不靠 border 扛(mockup pattern) */ --border-subtle: rgba(255, 255, 255, 0.06); /* 大外層容器 — 極 subtle */ --border-default: rgba(255, 255, 255, 0.10); /* 一般元件 + input — 中等 */ --border-strong: rgba(255, 255, 255, 0.18); /* hover / focus / 強調 */ /* 2026-04-23 PR-C5: 互動狀態疊色（透明，不改底色只加光） */ --overlay-hover-subtle: rgba(255, 255, 255, 0.04); /* table row / list item hover */ --overlay-hover-strong: rgba(255, 255, 255, 0.08); /* 更明顯的 hover */ --overlay-active: rgba(255, 255, 255, 0.12); /* 按下狀態 */ --overlay-backdrop: rgba(0, 0, 0, 0.65); /* 暗色遮罩要更深才看得出層次 */ --focus-ring: 0 0 0 3px rgba(0, 160, 232, 0.35); /* MG 藍焦點環 */ --surface-section-muted: rgba(0, 160, 232, 0.08); /* 淺藍 section 暗色版(半透明 MG 藍) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.14); /* 暗色弱化陰影 */ --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.16); /* 2026-04-24 扁平化 */ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.28); /* 卡片 */ --card-border: 1px solid var(--border-default); --card-radius: 10px; /* 品牌色 — 暗色升亮到 mockup MG 藍 (2026-07-02 UI refresh) */ --primary: #33B4EC; /* mockup MG 藍升亮 */ --primary-dark: #00A0E8; /* MG 品牌原色當 hover base */ --primary-light: #55c7f3; --primary-tint: rgba(0, 160, 232, 0.15); --primary-rgb: 0, 160, 232; /* 側欄 — 對齊新 surface-base 而非另做深底(mockup pattern:sidebar 跟 topbar 同層) 2026-07-02 微調:text 降階讓 active MG 藍當視覺焦點,不再爭同亮度 */ --sidebar-bg: #1b212a; /* 對齊 surface-base */ --sidebar-text: #8a94a3; /* 中灰(舊 #a3adba 對新底顯亮,降階讓 active 突出) */ --sidebar-text-muted: #5f6875; /* 群組 label 更 muted */ --sidebar-hover-bg: rgba(255, 255, 255, 0.04); --sidebar-active-bg: rgba(0, 160, 232, 0.14); /* MG 藍 active 底,不刺眼 */ --sidebar-active-text: #33B4EC; /* 與 --text-accent dark 一致 */ --sidebar-logo-bg: #1b212a; --sidebar-border: rgba(255, 255, 255, 0.06); --icon-color: var(--text-accent); --icon-color-muted: #6b7a8e; --color-focus-ring: rgba(0, 160, 232, 0.5); --color-overlay: rgba(0, 0, 0, 0.7); --color-link: var(--text-accent); /* #33B4EC MG 藍,AA vs surface-base */ --color-link-hover: #55c7f3; --color-link-visited: var(--purple-400); --state-success-bg: rgba(34, 197, 94, 0.15); --state-success-text: #86efac; --state-success-border: rgba(34, 197, 94, 0.3); --state-warning-bg: rgba(245, 158, 11, 0.15); --state-warning-text: #fcd34d; --state-warning-border: rgba(245, 158, 11, 0.3); --state-error-bg: rgba(239, 68, 68, 0.15); --state-error-text: #fca5a5; --state-error-border: rgba(239, 68, 68, 0.3); --state-info-bg: rgba(0, 160, 232, 0.14); --state-info-text: #7dd3fc; --state-info-border: rgba(0, 160, 232, 0.28); /* 按鈕系統 — 暗色淡色系(2026-07-02 對齊 MG 藍) */ --btn-primary-bg: rgba(0, 160, 232, 0.22); --btn-primary-bg-hover: rgba(0, 160, 232, 0.32); --btn-primary-text: #a0e0ff; --btn-primary-border: rgba(0, 160, 232, 0.38); --btn-secondary-bg: rgba(255, 255, 255, 0.06); --btn-secondary-bg-hover: rgba(255, 255, 255, 0.10); --btn-secondary-text: #dbe4ee; --btn-secondary-border: rgba(255, 255, 255, 0.14); --btn-ghost-bg: transparent; --btn-ghost-bg-hover: rgba(0, 160, 232, 0.14); --btn-ghost-text: #33B4EC; --btn-danger-bg: rgba(248, 113, 113, 0.16); --btn-danger-bg-hover: rgba(248, 113, 113, 0.26); --btn-danger-text: #fda4a4; --btn-danger-border: rgba(248, 113, 113, 0.30); --btn-success-bg: rgba(74, 222, 128, 0.16); --btn-success-bg-hover: rgba(74, 222, 128, 0.26); --btn-success-text: #86efac; --btn-success-border: rgba(74, 222, 128, 0.30); --btn-warning-bg: rgba(251, 191, 36, 0.16); --btn-warning-bg-hover: rgba(251, 191, 36, 0.26); --btn-warning-text: #fcd34d; --btn-warning-border: rgba(251, 191, 36, 0.30); --btn-info-bg: rgba(34, 211, 238, 0.16); --btn-info-bg-hover: rgba(34, 211, 238, 0.26); --btn-info-text: #67e8f9; --btn-info-border: rgba(34, 211, 238, 0.30); --btn-light-bg: rgba(255, 255, 255, 0.06); --btn-light-bg-hover: rgba(255, 255, 255, 0.10); --btn-light-text: #dbe4ee; --btn-light-text-hover: #eaf1f8; --btn-light-border: rgba(255, 255, 255, 0.14); --btn-dark-bg: rgba(255, 255, 255, 0.10); --btn-dark-bg-hover: rgba(255, 255, 255, 0.16); --btn-dark-text: #eaf1f8; --btn-dark-text-hover: #ffffff; --btn-dark-border: rgba(255, 255, 255, 0.20); --disabled-bg: var(--gray-800); --disabled-text: var(--gray-600); --disabled-border: var(--gray-700); /* 登入頁品牌面板 — 暗色 */ --login-brand-bg: #16283b; --login-brand-bg-2: #1c3248; /* 側欄選單 */ --sidebar-menu-active-bg: var(--sidebar-active-bg); --sidebar-menu-active-shadow: none; --sidebar-submenu-active-bg: rgba(43, 183, 240, 0.12); --sidebar-submenu-active-color: #ffffff; /* Bootstrap 5 CSS 變數覆蓋 */ --bs-body-bg: var(--gray-950); --bs-body-color: #9fb0c3; --bs-table-bg: transparent; --bs-table-color: #9fb0c3; --bs-table-border-color: rgba(255, 255, 255, 0.10); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); --bs-table-hover-bg: rgba(43, 183, 240, 0.06); --bs-card-bg: #1a2233; --bs-border-color: rgba(255, 255, 255, 0.10); } /* ================================================================ Layer 3: Component Tokens（元件級 — 引用 Semantic） ================================================================ */ :root { --card-bg: var(--surface-base); --card-border-color: var(--border-default); --card-shadow: var(--shadow-sm); --nav-bg: var(--surface-base); --nav-border: var(--border-strong); --input-bg: var(--surface-input); --input-border: var(--border-strong); --input-focus-border: var(--primary); --input-focus-ring: var(--color-focus-ring); --table-header-bg: var(--surface-raised); --table-border: var(--border-default); --table-hover-bg: var(--surface-hover); --modal-bg: var(--surface-overlay); --dropdown-bg: var(--surface-overlay); --tooltip-bg: var(--surface-overlay); } /* ================================================================ 語意色彩（不隨主題變） ================================================================ */ :root { --color-success: var(--green-500); --color-success-light: var(--green-400); --color-success-dark: var(--green-600); --color-warning: var(--amber-500); --color-warning-light: var(--amber-400); --color-warning-dark: var(--amber-600); --color-danger: var(--red-500); --color-danger-light: var(--red-400); --color-danger-dark: var(--red-600); --color-info: var(--brand-500); --color-info-light: var(--brand-400); --color-info-dark: var(--brand-600); --color-secondary: #6967ce; --color-secondary-light: #8583db; --color-secondary-dark: #4d4bb3; } /* ================================================================ 非色彩 Token（不隨主題變） ================================================================ */ :root { /* ---- 間距系統 (8dp grid) ---- */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; --spacing-3xl: 64px; /* ---- 陰影層級（基礎定義） ---- */ --shadow-none: none; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25); --shadow-2xl: 0 20px 48px rgba(0, 0, 0, 0.3); /* ---- 圓角系統 ---- */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-2xl: 32px; --radius-full: 9999px; --radius-card: 12px; --radius-button: 8px; --radius-input: 8px; --radius-badge: 12px; /* ---- 字型系統 ---- */ --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-heading: var(--font-family-base); --font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 28px; --font-size-4xl: 32px; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.75; /* ---- 過渡動畫 ---- */ --transition-fast: 150ms ease-in-out; --transition-base: 300ms ease-in-out; --transition-slow: 500ms ease-in-out; --transition-all: all 300ms ease-in-out; --transition-transform: transform 300ms ease-in-out; --transition-opacity: opacity 300ms ease-in-out; --transition-colors: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out; /* ---- Z-Index 層級 ---- */ --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-bottom-nav: 1000; --z-navbar: 1001; --z-sidebar-overlay: 1099; --z-sidebar: 1100; --z-modal-backdrop: 1040; --z-modal: 1050; --z-tooltip: 1060; /* ---- 手機版專用 ---- */ --mobile-navbar-height: 60px; --mobile-bottom-nav-height: 56px; --mobile-touch-target-min: 44px; /* ---- 斷點（僅供參考） ---- */ --breakpoint-xs: 0; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; --breakpoint-2xl: 1400px; } /* ================================================================ 工具類別 (Utility Classes) ================================================================ */ /* 間距 */ .m-0 { margin: 0 !important; } .mt-xs { margin-top: var(--spacing-xs) !important; } .mt-sm { margin-top: var(--spacing-sm) !important; } .mt-md { margin-top: var(--spacing-md) !important; } .mt-lg { margin-top: var(--spacing-lg) !important; } .mt-xl { margin-top: var(--spacing-xl) !important; } .mb-xs { margin-bottom: var(--spacing-xs) !important; } .mb-sm { margin-bottom: var(--spacing-sm) !important; } .mb-md { margin-bottom: var(--spacing-md) !important; } .mb-lg { margin-bottom: var(--spacing-lg) !important; } .mb-xl { margin-bottom: var(--spacing-xl) !important; } .p-xs { padding: var(--spacing-xs) !important; } .p-sm { padding: var(--spacing-sm) !important; } .p-md { padding: var(--spacing-md) !important; } .p-lg { padding: var(--spacing-lg) !important; } .p-xl { padding: var(--spacing-xl) !important; } /* 陰影 */ .shadow-none { box-shadow: var(--shadow-none) !important; } .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* 圓角 */ .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-full { border-radius: var(--radius-full) !important; } /* ============================================================ 語意色 utility（Bootstrap 4 對齊） - text-primary / bg-primary 為「語意 primary 強調色」，不是品牌色 - 要套品牌色請用 .text-brand / .bg-brand（見下） - 歷史原因：2026-04 前 .text-primary 被綁定 --primary 品牌色，導致 92 處模板誤用。ADR-006 / IMPROVEMENT_PLAN §6.3 規劃移除 !important 並拆成語意/品牌兩組。目前採「加 .text-brand 不動既有綁定」過渡。 ============================================================ */ /* 文字顏色（語意 — 保留既有綁定向下相容；之後遷移後拔 !important） §6.3 完成後（2026-04-24）：.text-primary 全站只剩 Bootstrap .spinner-border 使用，其他品牌色用途已改 .text-brand / .bg-brand。請勿再把 .text-primary 當作品牌色 utility 使用。pre-commit guard 會擋非 spinner-border 的新增使用。 */ .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-danger { color: var(--color-danger) !important; } .text-muted { color: var(--text-tertiary) !important; } /* 背景顏色 */ .bg-primary { background-color: var(--primary) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-success { background-color: var(--color-success) !important; } .bg-warning { background-color: var(--color-warning) !important; } .bg-danger { background-color: var(--color-danger) !important; } .bg-surface { background-color: var(--surface-base) !important; } /* ============================================================ 品牌色 utility（2026-04-23 新增）新程式碼要表達「MG 品牌藍」時請用這組，不要用 .text-primary ============================================================ */ .text-brand { color: var(--primary); } .bg-brand { background-color: var(--primary); color: #fff; } .text-accent { color: var(--text-accent); } /* 連結色 / hover */ /* ============================================================ Icon size utility（2026-04-23 新增，PR-B3）取代模板 inline style="font-size: Xrem" 常見寫法（大型裝飾 icon、空狀態 icon） ============================================================ */ .icon-lg { font-size: 1.5rem; line-height: 1; } .icon-xl { font-size: 2rem; line-height: 1; } .icon-2x { font-size: 2rem; line-height: 1; } /* 別名，與 FontAwesome 對齊 */ .icon-3x { font-size: 3rem; line-height: 1; } .icon-4x { font-size: 4rem; line-height: 1; } /* Badge size（取代 inline font-size: 0.7rem / 0.75rem） */ .badge-xs { font-size: 0.7rem; } .badge-sm2 { font-size: 0.75rem; } /* 避開 Bootstrap 4 的 .badge-sm 可能衝突 */ /* ============================================================ Surface / Border utility（2026-04-23 新增，PR-B2）取代模板 inline style 的硬編碼 #f8f9fa / #fff / #e9ecef / #e3e6f0 支援 light + dark（token 自動切換） ============================================================ */ /* 背景層級（由上至下：越低越深） */ .bg-surface-raised { background-color: var(--surface-raised) !important; } /* 表頭 / 巢狀卡片 */ .bg-surface-input { background-color: var(--surface-input) !important; } /* 輸入框 / 白色卡面 */ .bg-surface-muted { background-color: var(--surface-section-muted) !important; } /* 淺藍 section */ /* 邊框 */ .border-subtle { border-color: var(--border-subtle) !important; } .border-default { border-color: var(--border-default) !important; } .border-strong { border-color: var(--border-strong) !important; } .border-subtle-1 { border: 1px solid var(--border-subtle) !important; } .border-default-1 { border: 1px solid var(--border-default) !important; } .border-default-2 { border: 2px solid var(--border-default) !important; } /* ================================================================ 全域樣式 ================================================================ */ /* 桌面版隱藏手機版底部導航欄 */ .mobile-bottom-nav { display: none; } /* 主題切換過渡動畫 */ html[data-theme] body, html[data-theme] .iq-card, html[data-theme] .iq-sidebar, html[data-theme] .iq-top-navbar { transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, color 150ms ease-in-out; }