/** * EwoooC Design Token v3.0 — Production * ───────────────────────────────────────────────────────────── * DNA: MOMO Pro × minimal grid × operational clarity * 變更重點（相對 v2.x）： * 1. 全站去除 linear-gradient／radial-gradient／box-shadow blur，改為單色 + 1px 線條 * 2. 五大導航群組各自 accent，避免「全站焦糖橘」造成主次不分 * 3. 字級從 16 級壓到 8 級；spacing scale 重新排序為 4/8/12/16/24/32/48 * 4. 米色背景統一 #f0ebe1（介於原本 body 與 surface 之間） * 5. 不純黑：所有 ink 都帶 5% 暖色，避免 var(--momo-text-strong) / var(--momo-on-accent, #fff8ef) 的數位刺眼 * * 用法： * .momo-app[data-active-page="..."] 由 _ewoooc_shell.html 自動套群組 accent * 不要在 component CSS 裡再重新指定群組色，全部走 var(--momo-page-*) */ :root { /* ════════════════════════════════════════════════════════ * 1. 中性色系 — 暖米基底 * ════════════════════════════════════════════════════════ */ /* 頁面層 */ --momo-bg-body: #f0ebe1; /* 主背景，比 v2 略提亮 */ --momo-bg-surface: #faf6ec; /* 卡片底 */ --momo-bg-elevated: #fdfaf2; /* 浮層、modal */ --momo-bg-paper: #f5efe2; /* 第二層卡片、表格列 */ --momo-bg-subtle: #e6e0d2; /* 分區底色 */ --momo-bg-muted: #d3cbb9; /* disabled 區塊 */ --momo-bg-sidebar: #ebe4d4; /* sidebar 米色（不再是黑底） */ --momo-bg-sidebar-hover: #e0d8c4; /* 暖墨色（用於文字 / 線條，永遠不純黑） */ --momo-ink: #2a2520; --momo-ink-strong: #1a1612; --momo-ink-soft: #4a4138; /* 主錦 KPI 深色家族 — 各群組獨立設計性格 */ --momo-ink-monitor: #3d2e22; /* walnut 胡桃 — 監控 */ --momo-ink-analytics: #3a2e1a; /* 焦糖糖蜜 — 分析 */ --momo-ink-ops: #3f2418; /* 深陶土 — 營運 */ --momo-ink-ai: #3a2a1f; /* espresso — AI */ --momo-ink-system: #352621; /* 烏木 — 系統 */ /* 文字三層 */ --momo-text-primary: #2a2520; --momo-text-secondary: #6b6155; --momo-text-tertiary: #9b9081; --momo-text-disabled: #c4baa8; --momo-text-inverse: #faf7f0; /* 邊框 — 全部走低對比暖色 */ --momo-border: rgba(42, 37, 32, 0.16); --momo-border-strong: rgba(42, 37, 32, 0.28); --momo-border-light: rgba(42, 37, 32, 0.10); --momo-border-faint: rgba(42, 37, 32, 0.06); --momo-divider: rgba(42, 37, 32, 0.10); /* ════════════════════════════════════════════════════════ * 2. 暖色家族 — 全站可用的 accent token * ════════════════════════════════════════════════════════ * 所有 accent 都在「不太暗」的暖色域：HSL L 38–62 * 命名遵循「材質感」而非「明度」：caramel/honey/clay/rust... */ --momo-warm-caramel: #c96442; /* 焦糖橘 — 監控群組 */ --momo-warm-clay: #b86f52; /* 陶土橘紅 — 營運群組 */ --momo-warm-honey: #c89043; /* 蜂蜜金 — 分析群組 */ --momo-warm-saffron: #b8792f; /* 番紅花橘 — AI 中樞群組 */ --momo-warm-terra: #a85d3d; /* 暖陶土 — 系統群組 */ --momo-warm-rose: #a84428; /* 磚紅 — danger only (HSL 12°，真暖紅) */ --momo-warm-olive: #8a7340; /* 焦土 — 中性暖 */ --momo-warm-cream: #f7efe3; /* 奶油米白 */ --momo-warm-latte: #d8c1aa; /* 奶茶木 */ --momo-warm-apricot: #e7b98f; /* 杏色 */ --momo-warm-blush: #edd6cc; /* 霧粉 */ --momo-warm-greige: #b8aea2; /* 暖灰 */ /* 暖色 soft 版本（背景 / chip 用） */ --momo-warm-caramel-soft: rgba(201, 100, 66, 0.12); --momo-warm-clay-soft: rgba(184, 111, 82, 0.12); --momo-warm-honey-soft: rgba(200, 144, 67, 0.14); --momo-warm-saffron-soft: rgba(184, 121, 47, 0.13); --momo-warm-terra-soft: rgba(168, 93, 61, 0.12); --momo-warm-rose-soft: rgba(168, 68, 40, 0.12); --momo-warm-olive-soft: rgba(138, 115, 64, 0.12); --momo-accent-strong: #8f4530; /* V2 compatibility: prefer --momo-page-accent-dark in new CSS */ /* ════════════════════════════════════════════════════════ * 3. 群組主題 — 五大導航群組各自 accent * ════════════════════════════════════════════════════════ * 由 _ewoooc_shell.html 設置 data-page-group="" * 未指定時 fallback 到 caramel * * 群組映射： * monitor → caramel (商品看板 / 活動看板) * analytics → honey (業績分析 / 月份總表 / 成長 / 當日) * ops → clay (廠商缺貨 / 雲端匯入) * ai → saffron (AI 助手 / AI 觀測台) * system → terra (系統管理 / 設定) */ --momo-page-accent: var(--momo-warm-caramel); --momo-page-accent-dark: #8f4530; --momo-page-accent-soft: var(--momo-warm-caramel-soft); --momo-page-accent-line: rgba(201, 100, 66, 0.32); --momo-page-inverse: #fff8ef; /* 圖表 / 視覺輔助色（屬於同群組的協和色） */ --momo-page-chart-1: var(--momo-warm-caramel); --momo-page-chart-2: var(--momo-warm-apricot); --momo-page-chart-3: var(--momo-warm-honey); --momo-page-chart-4: var(--momo-warm-olive); --momo-page-chart-5: var(--momo-warm-clay); --momo-page-chart-6: var(--momo-warm-greige); /* ════════════════════════════════════════════════════════ * 4. 狀態色 — 去飽和 * ════════════════════════════════════════════════════════ */ --momo-success: #5a7a3f; --momo-success-bg: #e6ead6; --momo-success-border: rgba(90, 122, 63, 0.32); --momo-success-text: #3d5527; --momo-warning: #b8792f; --momo-warning-bg: #f3e7c4; --momo-warning-border: rgba(184, 121, 47, 0.32); --momo-warning-text: #6e500e; --momo-danger: #a84428; --momo-danger-bg: #efd3c4; --momo-danger-border: rgba(168, 68, 40, 0.32); --momo-danger-text: #7a3210; --momo-info: #4a6b85; --momo-info-bg: #dfe5ec; --momo-info-border: rgba(74, 107, 133, 0.32); --momo-info-text: #2d4459; /* ════════════════════════════════════════════════════════ * 5. 標籤色（Tag / Chip / Badge） * ════════════════════════════════════════════════════════ * 一個標籤 = 一組 (bg + border + text)，三件成套 * 全部 WCAG AA on bg */ --momo-tag-caramel-bg: #f5e1d9; --momo-tag-caramel-border: rgba(201, 100, 66, 0.32); --momo-tag-caramel-text: #7a3520; --momo-tag-honey-bg: #f3e7c4; --momo-tag-honey-border: rgba(200, 144, 67, 0.36); --momo-tag-honey-text: #6e500e; --momo-tag-clay-bg: #ebd9cb; --momo-tag-clay-border: rgba(184, 111, 82, 0.34); --momo-tag-clay-text: #6f3a23; --momo-tag-saffron-bg: #f0dfc1; --momo-tag-saffron-border: rgba(184, 121, 47, 0.36); --momo-tag-saffron-text: #6f4915; --momo-tag-terra-bg: #ecdcd0; --momo-tag-terra-border: rgba(168, 93, 61, 0.34); --momo-tag-terra-text: #6a3621; --momo-tag-rust-bg: #efd3c4; --momo-tag-rust-border: rgba(168, 68, 40, 0.34); --momo-tag-rust-text: #7a3210; --momo-tag-olive-bg: #ece5d2; --momo-tag-olive-border: rgba(138, 115, 64, 0.32); --momo-tag-olive-text: #5a4a1c; --momo-tag-ink-bg: #2a2520; --momo-tag-ink-border: #2a2520; --momo-tag-ink-text: #faf7f0; --momo-tag-muted-bg: #e2dccf; --momo-tag-muted-border: rgba(42, 37, 32, 0.16); --momo-tag-muted-text: #645c52; --momo-tag-success-bg: #e6ead6; --momo-tag-success-border: rgba(90, 122, 63, 0.30); --momo-tag-success-text: #3d5527; /* P0 / P1 / P2 警示專用（與蜂蜜黃同家族，HSL 12° / 39° / 30°） */ --momo-priority-p0-bg: #efd3c4; --momo-priority-p0-border: rgba(168, 68, 40, 0.36); --momo-priority-p0-text: #7a3210; --momo-priority-p1-bg: #f3e7c4; --momo-priority-p1-border: rgba(200, 144, 67, 0.36); --momo-priority-p1-text: #6e500e; --momo-priority-p2-bg: #ece5d2; --momo-priority-p2-border: rgba(138, 115, 64, 0.32); --momo-priority-p2-text: #5a4a1c; /* ════════════════════════════════════════════════════════ * 6. Typography * ════════════════════════════════════════════════════════ */ --momo-font-display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --momo-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif; --momo-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --momo-font-family-base: var(--momo-font-family); --momo-font-family-mono: var(--momo-font-mono); /* 字級 — 8 階 (從 28 種降到 8) */ --momo-text-display: 30px; /* hero 數字 */ --momo-text-headline: 22px; /* 區塊大數字 */ --momo-text-title: 17px; /* 卡片標題 */ --momo-text-body: 14px; /* 內文 */ --momo-text-body-sm: 13px; /* 表格內文 */ --momo-text-meta: 12px; /* mono 數據 / 次要 */ --momo-text-label: 11px; /* LABEL only */ --momo-text-label-tiny: 10px; /* 角落標籤 only */ /* 兼容 v2 命名 */ --momo-font-size-xs: 12px; --momo-font-size-sm: 13px; --momo-font-size-base: 14px; --momo-font-size-lg: 17px; --momo-font-size-xl: 22px; --momo-font-size-2xl: 30px; --momo-font-weight-normal: 400; --momo-font-weight-medium: 500; --momo-font-weight-semibold: 600; --momo-font-weight-bold: 700; --momo-font-weight-black: 800; --momo-line-height-tight: 1.2; --momo-line-height-base: 1.5; --momo-line-height-loose: 1.7; /* ════════════════════════════════════════════════════════ * 7. Spacing — 7 階 * ════════════════════════════════════════════════════════ */ --momo-space-1: 4px; --momo-space-2: 8px; --momo-space-3: 12px; --momo-space-4: 16px; --momo-space-5: 24px; --momo-space-6: 32px; --momo-space-7: 48px; --momo-space-8: 64px; /* ════════════════════════════════════════════════════════ * 8. Radius — 全站偏方角 * ════════════════════════════════════════════════════════ */ --momo-radius-sm: 2px; --momo-radius-md: 4px; --momo-radius-lg: 6px; --momo-radius-xl: 10px; /* 只有 hero / modal */ --momo-radius-pill: 999px; --momo-radius-circle: 50%; /* ════════════════════════════════════════════════════════ * 9. Shadow — Nothing 風：用線條取代陰影 * ════════════════════════════════════════════════════════ */ --momo-shadow-sm: inset 0 -1px 0 var(--momo-border-light); --momo-shadow-md: 0 0 0 1px var(--momo-border-light); --momo-shadow-lg: 0 0 0 1px var(--momo-border-strong); --momo-shadow-modal: 0 8px 28px -10px rgba(42, 37, 32, 0.18), 0 0 0 1px var(--momo-border-light); --momo-shadow-focus: 0 0 0 3px var(--momo-page-accent-soft); /* ════════════════════════════════════════════════════════ * 10. Transition * ════════════════════════════════════════════════════════ */ --momo-duration-fast: 0.12s; --momo-duration-normal: 0.2s; --momo-duration-slow: 0.4s; --momo-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --momo-ease-out: cubic-bezier(0, 0, 0.2, 1); --momo-transition-base: color var(--momo-duration-fast) var(--momo-ease-in-out), background-color var(--momo-duration-fast) var(--momo-ease-in-out), border-color var(--momo-duration-fast) var(--momo-ease-in-out), box-shadow var(--momo-duration-fast) var(--momo-ease-in-out); /* ════════════════════════════════════════════════════════ * 10b. Dot Matrix — 點陣視覺語言（Nothing Phone 風） * ════════════════════════════════════════════════════════ * 全站共用 utility token；不要在 component CSS 裡重新定義 dot 圖樣 * 尺寸 token：tight(8) / base(10) / loose(12) / wide(14) * 濃度 token：whisper(0.06) / soft(0.14) / mid(0.28) / strong(0.55) * 顏色：預設吃 currentColor，由父層字色決定 */ --momo-dot-size-tight: 8px; --momo-dot-size-base: 10px; --momo-dot-size-loose: 12px; --momo-dot-size-wide: 14px; --momo-dot-radius: 1.1px; /* 點半徑（用於 radial-gradient 半徑） */ --momo-dot-alpha-whisper: 0.06; --momo-dot-alpha-soft: 0.14; --momo-dot-alpha-mid: 0.28; --momo-dot-alpha-strong: 0.55; /* ════════════════════════════════════════════════════════ * 11. z-index * ════════════════════════════════════════════════════════ */ --momo-z-base: 1; --momo-z-dropdown: 1000; --momo-z-sticky: 1020; --momo-z-fixed: 1030; --momo-z-modal-backdrop: 1040; --momo-z-modal: 1050; --momo-z-popover: 1060; --momo-z-tooltip: 1070; --momo-z-toast: 1080; /* ════════════════════════════════════════════════════════ * 12. Layout * ════════════════════════════════════════════════════════ */ --momo-sidebar-width: 240px; --momo-sidebar-collapsed-width: 64px; --momo-topbar-height: 56px; --momo-content-max-width: 1600px; --momo-content-padding-x: 28px; --momo-content-padding-y: 24px; } /* ════════════════════════════════════════════════════════ * 群組主題切換 — 由 [data-page-group] 觸發 * ════════════════════════════════════════════════════════ */ .momo-app[data-page-group="monitor"] { --momo-page-accent: var(--momo-warm-caramel); --momo-page-accent-dark: #8f4530; --momo-page-accent-soft: var(--momo-warm-caramel-soft); --momo-page-accent-line: rgba(201, 100, 66, 0.32); --momo-page-ink: var(--momo-ink-monitor); --momo-page-chart-1: var(--momo-warm-caramel); --momo-page-chart-2: var(--momo-warm-apricot); --momo-page-chart-3: var(--momo-warm-honey); --momo-page-chart-4: var(--momo-warm-olive); --momo-page-chart-5: var(--momo-warm-clay); --momo-page-chart-6: var(--momo-warm-greige); } .momo-app[data-page-group="analytics"] { --momo-page-accent: var(--momo-warm-honey); --momo-page-accent-dark: #80541a; --momo-page-accent-soft: var(--momo-warm-honey-soft); --momo-page-accent-line: rgba(200, 144, 67, 0.36); --momo-page-ink: var(--momo-ink-analytics); --momo-page-chart-1: var(--momo-warm-honey); --momo-page-chart-2: var(--momo-warm-caramel); --momo-page-chart-3: var(--momo-warm-olive); --momo-page-chart-4: var(--momo-warm-apricot); --momo-page-chart-5: var(--momo-warm-clay); --momo-page-chart-6: var(--momo-warm-greige); } .momo-app[data-page-group="ops"] { --momo-page-accent: var(--momo-warm-clay); --momo-page-accent-dark: #6f3a23; --momo-page-accent-soft: var(--momo-warm-clay-soft); --momo-page-accent-line: rgba(184, 111, 82, 0.34); --momo-page-ink: var(--momo-ink-ops); --momo-page-chart-1: var(--momo-warm-clay); --momo-page-chart-2: var(--momo-warm-terra); --momo-page-chart-3: var(--momo-warm-honey); --momo-page-chart-4: var(--momo-warm-caramel); --momo-page-chart-5: var(--momo-warm-apricot); --momo-page-chart-6: var(--momo-warm-greige); } .momo-app[data-page-group="ai"] { --momo-page-accent: var(--momo-warm-saffron); --momo-page-accent-dark: #6f4915; --momo-page-accent-soft: var(--momo-warm-saffron-soft); --momo-page-accent-line: rgba(184, 121, 47, 0.36); --momo-page-ink: var(--momo-ink-ai); --momo-page-chart-1: var(--momo-warm-saffron); --momo-page-chart-2: var(--momo-warm-honey); --momo-page-chart-3: var(--momo-warm-caramel); --momo-page-chart-4: var(--momo-warm-olive); --momo-page-chart-5: var(--momo-warm-apricot); --momo-page-chart-6: var(--momo-warm-greige); } .momo-app[data-page-group="system"] { --momo-page-accent: var(--momo-warm-terra); --momo-page-accent-dark: #6a3621; --momo-page-accent-soft: var(--momo-warm-terra-soft); --momo-page-accent-line: rgba(168, 93, 61, 0.34); --momo-page-ink: var(--momo-ink-system); --momo-page-chart-1: var(--momo-warm-terra); --momo-page-chart-2: var(--momo-warm-clay); --momo-page-chart-3: var(--momo-warm-olive); --momo-page-chart-4: var(--momo-warm-greige); --momo-page-chart-5: var(--momo-warm-honey); --momo-page-chart-6: var(--momo-warm-apricot); } /* ════════════════════════════════════════════════════════ * 全域基礎 * ════════════════════════════════════════════════════════ */ .momo-app { font-family: var(--momo-font-family); font-size: var(--momo-text-body); line-height: var(--momo-line-height-base); color: var(--momo-text-primary); background-color: var(--momo-bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: 0; } .momo-app *, .momo-app *::before, .momo-app *::after { box-sizing: border-box; } .momo-mono { font-family: var(--momo-font-mono); font-feature-settings: "tnum"; } .momo-display { font-family: var(--momo-font-display); font-feature-settings: "tnum", "ss01"; letter-spacing: 0; } .momo-label { font-family: var(--momo-font-display); font-size: var(--momo-text-label-tiny); font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--momo-text-tertiary); } /* 滾動條 */ .momo-scroll::-webkit-scrollbar { width: 8px; height: 8px; } .momo-scroll::-webkit-scrollbar-track { background: transparent; } .momo-scroll::-webkit-scrollbar-thumb { background: rgba(42, 37, 32, 0.18); border-radius: var(--momo-radius-pill); } .momo-scroll::-webkit-scrollbar-thumb:hover { background: rgba(42, 37, 32, 0.32); } .momo-app button:not(.btn):not(.btn-close) { font-family: inherit; } /* 動畫 */ @keyframes momo-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } @keyframes momo-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }