/* ============================================================= Beauty Line ERP — Design Tokens 深林綠 × 暖中性　v1.0 / 2026-09-07 來源：repo 根目錄 `beauty-line-design-system.md` + `_bl-tokens.scss`。 那兩份是規範正本（.gitignore 排除，只在本機），本檔是進版控的實作。 **改顏色改這裡，不要改各頁 CSS；要新增色票先改規範文件。** ── 五條硬規則（違反的話整套會垮）────────────────────────── 1. 品牌綠只出現在介面外框：側欄、Hero、主按鈕、選中態、Logo 區。 任何數字、趨勢、狀態標籤、圖表資料點都不得用 --bl-brand-*。 唯一例外是圖表的 --bl-series-1 與排行條的 --bl-brand-700。 2. 語意色只出現在數據與狀態，不當裝飾。待處理清單禁用 success ——清單裡每一項本質上都是「還沒做完」。 3. 狀態不得只靠顏色，一律附文字或圖示（紅綠色盲約佔男性 8%）。 4. 臨床影像區禁用品牌色與暖底，用 --bl-clinical-*。刻意的不一致，不要修。 5. 不新增色票。需要新顏色時改用既有色階的不同明度。 ── 掛載位置 ───────────────────────────────────────────── 放在 medical_srp（核心模組，一定會裝）的 assets_backend 最前面。 medical_srp_ux 的 sidebar_rail.scss 也吃這一份——兩個模組同屬 web.assets_backend，:root 自訂屬性是全域的，跨模組引用不需要 相依關係，也不受 bundle 內檔案順序影響（沒有第二處定義 --bl-*）。 ── 深色模式為什麼沒有自動生效 ──────────────────────────── 規範的遷移順序把深色模式排在最後一步（第 6 步）。現在若掛上 @media (prefers-color-scheme: dark)，OS 開深色的人會看到「側欄與 工作台是深色、其餘 200 多頁還是亮色」的半套畫面。因此本檔只提供 [data-bl-mode="dark"] 手動開關，等前 5 步做完再接系統偏好。 ============================================================= */ :root { /* --------------------------------------------------------- 1. 中性底色 — 頁面、卡片、線、文字 帶極輕微暖調。不可改成純白 #FFFFFF 底， 綠色配冷白會變成藥局／健保系統的視覺。 --------------------------------------------------------- */ --bl-bg: #F7F6F3; /* 頁面底 */ --bl-bg-alt: #F0EFEA; /* 次層底（表頭、hover 列） */ --bl-surface: #FFFFFF; /* 卡片、彈窗 */ --bl-border: #E5E3DD; /* 預設分隔線 0.5px */ --bl-border-strong: #D3D0C8; /* 強調分隔、hover 邊框 */ --bl-text-1: #232825; /* 主文字、數值 */ --bl-text-2: #6B716C; /* 次要文字、標籤 */ --bl-text-3: #9A9E99; /* 佔位字、時間戳 */ /* 反白字 —— 品牌色／語意色實心底上的文字與圖示。 ⚠️ 刻意**不**在 [data-bl-mode="dark"] 重新定義:這一格的意義就是 「不隨主題翻轉」。深色模式下品牌綠按鈕仍是綠底,上面仍要白字。 不可用 --bl-surface 代替 —— 那個在深色模式會變 #232825,白字會消失。 (原本 beauty-line.css 有一份 --srp-text-inverse: #fff,已改指這裡。) */ --bl-text-inverse: #FFFFFF; /* --------------------------------------------------------- 2. 品牌綠 — 只用於介面外框（見硬規則 1） --------------------------------------------------------- */ --bl-brand-50: #F1F5F2; /* 選中列底、輕標籤底 */ --bl-brand-100: #DFE9E2; --bl-brand-200: #C2D5C9; --bl-brand-300: #9CBAA7; /* 深色模式前景色、focus ring */ --bl-brand-400: #6E9480; /* icon rail 未選中 */ --bl-brand-500: #4E7360; --bl-brand-600: #3E5C4A; /* 主色：Hero、主按鈕 */ --bl-brand-700: #2F4A3A; /* hover、圖表主線、排行條 */ --bl-brand-800: #24382D; --bl-brand-900: #1A2822; /* 側欄底、icon rail */ /* --------------------------------------------------------- 3. 輔色 玫瑰銅 — 極少量。一個畫面最多出現一次。 --------------------------------------------------------- */ --bl-accent-50: #F7EEEA; --bl-accent-300: #E0BFB4; --bl-accent-500: #B5786A; --bl-accent-600: #9C6154; /* --------------------------------------------------------- 4. 語意色 — 只用於數據、狀態、趨勢（見硬規則 2） 500 = 填色（bar、圓點、左側 3px 條） 600 = 文字與圖示（已過 AA 4.5:1） bg = 淺底（標籤、徽章） success 刻意偏黃、彩度高，以與品牌綠拉開色相距離： 品牌綠 hue ≈ 150° / success hue ≈ 95°，差 55° 可辨識。 --------------------------------------------------------- */ --bl-success-500: #6BA23C; --bl-success-600: #4F7F2E; --bl-success-bg: #EDF4E5; --bl-info-500: #5289B4; --bl-info-600: #3E6C93; --bl-info-bg: #E9F0F6; --bl-warning-500: #C9932A; --bl-warning-600: #A8721B; --bl-warning-bg: #F8EFD9; --bl-danger-500: #C4635A; --bl-danger-600: #A8443C; --bl-danger-bg: #F7E9E8; --bl-neutral-500: #8B928C; --bl-neutral-600: #6E756F; --bl-neutral-bg: #EEF0EE; /* --------------------------------------------------------- 5. 圖表序列 — 固定順序，不得循環配色 單一序列一律用 series-1。 超過 6 類請收斂成「其他」或改用表格。 --------------------------------------------------------- */ --bl-series-1: #2F4A3A; --bl-series-2: #B5786A; --bl-series-3: #3E6C93; --bl-series-4: #A8721B; --bl-series-5: #6E9480; --bl-series-6: #8C7BA0; /* --------------------------------------------------------- 6. 臨床影像專用 — 硬性例外，勿統一（見硬規則 4） 膚況檢測、術前術後對照的照片檢視區。 綠色是紅色的補色，暖綠環境會在視覺上抵消泛紅， 導致諮詢師低估紅腫與術後反應。此區禁用品牌色與暖底。 --------------------------------------------------------- */ --bl-clinical-bg: #F5F5F5; --bl-clinical-border: #DDDDDD; --bl-clinical-text: #1A1A1A; /* --------------------------------------------------------- 7. 字級 — 字重只有 400 與 500 中文字在 600 以上會糊，密集表格頁會很吵。 層級靠字級與顏色拉開，不靠字重。12px 是下限。 --------------------------------------------------------- */ --bl-font-sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", -apple-system, "Segoe UI", sans-serif; --bl-font-num: "Inter", "SF Pro Display", "Noto Sans TC", "PingFang TC", sans-serif; /* 等寬：程式碼片段、識別碼、log。2026-09-09 補 —— 規範文件與 SPA 端一直 引用 --bl-font-mono，但正本從來沒定義過它，SPA 只能靠 var() fallback 兜著；沒有正本就無法從這裡統一改。 */ --bl-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --bl-fs-caption: 12px; /* 徽章、時間戳 */ --bl-fs-label: 13px; /* 卡片標籤、表格內文 */ --bl-fs-body: 14px; /* 內文、選單 */ --bl-fs-subtitle: 15px; /* 卡片標題 */ --bl-fs-title: 18px; /* 區塊標題 */ --bl-fs-page: 22px; /* 頁面標題 */ --bl-fs-metric: 28px; /* 指標數值 */ --bl-fs-hero: 32px; /* Hero 數值 */ --bl-fw-regular: 400; --bl-fw-medium: 500; --bl-lh-tight: 1.3; /* 標題、數值 */ --bl-lh-base: 1.6; /* 內文 */ /* --------------------------------------------------------- 8. 間距（4px 基準）與圓角 單邊框不加圓角：用 border-left: 3px 做強調條的元件 必須 border-radius: 0，否則會出現缺口。 --------------------------------------------------------- */ --bl-space-1: 4px; --bl-space-2: 8px; --bl-space-3: 12px; --bl-space-4: 16px; --bl-space-5: 24px; --bl-space-6: 32px; --bl-radius-sm: 6px; /* 徽章、狀態標籤 */ --bl-radius: 8px; /* 按鈕、輸入框 */ --bl-radius-card: 12px; /* 卡片、彈窗 */ --bl-radius-full: 999px; /* 頭像、數字圓點 */ --bl-h-control: 36px; /* 按鈕與輸入框高度 */ /* --------------------------------------------------------- 9. 陰影 — 僅兩級。列表與卡片一律用邊框，不用陰影。 --------------------------------------------------------- */ --bl-shadow-popover: 0 8px 24px rgba(26, 40, 34, 0.12), 0 2px 6px rgba(26, 40, 34, 0.08); --bl-shadow-modal: 0 16px 48px rgba(26, 40, 34, 0.18); --bl-focus-ring: 0 0 0 2px var(--bl-brand-300); /* --------------------------------------------------------- 10. 動態 --------------------------------------------------------- */ --bl-dur-fast: 120ms; --bl-dur-base: 200ms; --bl-ease: cubic-bezier(0.2, 0, 0.2, 1); } /* ============================================================= 深色模式（手動開關，尚未接系統偏好——原因見檔頭） 綠色壓暗容易發悶，因此深色模式的品牌前景色改用 brand-300， 不可直接沿用 brand-600。 ============================================================= */ [data-bl-mode="dark"] { --bl-bg: #141715; --bl-bg-alt: #1C201E; --bl-surface: #232825; --bl-border: #333A36; --bl-border-strong: #454D48; --bl-text-1: #EAEBE8; --bl-text-2: #A0A69F; --bl-text-3: #737974; --bl-brand-600: #9CBAA7; /* 前景／文字 */ --bl-brand-700: #B4CCBD; /* hover */ --bl-brand-50: #263029; /* 選中列底 */ --bl-brand-100: #2F3B33; --bl-brand-900: #0F1512; /* 側欄 */ --bl-success-600: #8CC45C; --bl-success-bg: #24301B; --bl-info-600: #7BAAD0; --bl-info-bg: #1B2731; --bl-warning-600: #D9A441; --bl-warning-bg: #302614; --bl-danger-600: #D97D74; --bl-danger-bg: #331D1B; --bl-neutral-600: #9BA29C; --bl-neutral-bg: #262A27; --bl-clinical-bg: #1A1A1A; --bl-clinical-border: #333333; --bl-clinical-text: #EDEDED; --bl-focus-ring: 0 0 0 2px var(--bl-brand-400); }