/* AUTO-GENERATED from shared/theme-light.css — edit there, run: node scripts/sync-theme.js */ /* ============================================================ * BM Manager — Linear.app inspired LIGHT theme * Canonical source — DO NOT EDIT COPIES. * Edit at: shared/theme-light.css * Sync to projects with: node scripts/sync-theme.js * * Light mode = DEFAULT (no dark trigger present). * ============================================================ */ /* Trigger selectors — match when NO dark trigger is set: * - web app: without class="dark" → html:not(.dark) * - extension + admin: hoặc không có data-theme */ html:not(.dark):not([data-theme="dark"]), [data-theme="light"] { /* SHIM: tokens cũ trỏ về Apple tokens (xem design-tokens.css). */ --bg-primary: var(--bg); --bg-secondary: var(--card); --bg-tertiary: var(--card-2); --bg-sidebar: var(--bg); --bg-hover: rgba(0,0,0,0.04); --bg-active: rgba(0,0,0,0.06); --bg-card: var(--card); --bg-input: var(--card); --bg-badge: var(--card-3); --bg-tooltip: #1f2937; --bg-modal-overlay: var(--scrim); --text-primary: var(--label); --text-secondary: var(--label2); --text-tertiary: var(--label3); --text-placeholder: var(--label3); --text-inverse: #ffffff; --text-link: var(--accent); --border-primary: var(--sep); --border-secondary: var(--sep); --border-input: var(--sep-strong); --border-focus: var(--accent); --accent-hover: var(--accent); --accent-light: var(--accent-soft); --accent-text: var(--accent); --success: var(--green); --success-light: rgba(52,199,89,.15); --error: var(--red); --error-light: rgba(255,59,48,.13); --warning: var(--orange); --warning-light: rgba(255,149,0,.13); --info: var(--accent); --info-light: var(--accent-soft); --scrollbar-thumb: rgba(15,23,42,0.24); --scrollbar-hover: rgba(15,23,42,0.38); --transition: 0.1s ease; --font-sans: var(--ds-font); --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color-scheme: light; } /* ============================================================ * GLOBAL ELEMENT OVERRIDES (light mode only) * ============================================================ */ html:not(.dark):not([data-theme="dark"]) body, [data-theme="light"] body { background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } html:not(.dark):not([data-theme="dark"]) ::-webkit-scrollbar, [data-theme="light"] ::-webkit-scrollbar { width: 8px; height: 8px; } html:not(.dark):not([data-theme="dark"]) ::-webkit-scrollbar-thumb, [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; } html:not(.dark):not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover, [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); } html:not(.dark):not([data-theme="dark"]) ::-webkit-scrollbar-track, [data-theme="light"] ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ * WEB APP — Tailwind compat overrides (light only) * Web dùng `ink-50..300` cho light. Map sang Linear light palette. * ============================================================ */ html:not(.dark) .bg-ink-50 { background-color: var(--bg-primary) !important; } html:not(.dark) .bg-ink-100, html:not(.dark) .bg-ink-100\/60, html:not(.dark) .bg-ink-100\/40 { background-color: var(--bg-sidebar) !important; } html:not(.dark) .bg-ink-200, html:not(.dark) .bg-ink-200\/60, html:not(.dark) .bg-ink-200\/80, html:not(.dark) .bg-ink-200\/70 { background-color: var(--bg-hover) !important; } html:not(.dark) .bg-white { background-color: var(--bg-card) !important; } html:not(.dark) .hover\:bg-ink-100:hover, html:not(.dark) .hover\:bg-ink-100\/60:hover, html:not(.dark) .hover\:bg-ink-200\/60:hover, html:not(.dark) .hover\:bg-ink-50:hover { background-color: var(--bg-hover) !important; } html:not(.dark) .border-ink-200, html:not(.dark) .border-ink-200\/60, html:not(.dark) .border-ink-200\/50, html:not(.dark) .border-ink-200\/40 { border-color: var(--border-primary) !important; } html:not(.dark) .border-ink-300 { border-color: var(--border-input) !important; } html:not(.dark) .text-ink-800, html:not(.dark) .text-ink-900 { color: var(--text-primary) !important; } html:not(.dark) .text-ink-600, html:not(.dark) .text-ink-700 { color: var(--text-primary) !important; } html:not(.dark) .text-ink-500, html:not(.dark) .text-ink-400 { color: var(--text-secondary) !important; } html:not(.dark) .text-ink-300 { color: var(--text-tertiary) !important; } html:not(.dark) .text-brand-500, html:not(.dark) .text-brand-600 { color: var(--accent-text) !important; } html:not(.dark) .bg-brand-500\/10, html:not(.dark) .bg-brand-500\/22 { background-color: var(--accent-light) !important; } /* ============================================================ * BM Manager light — Tinh chỉnh nền 3 lớp (sidebar đậm → page vừa → cards sáng) * ============================================================ */ html:not(.dark) body { background: var(--bg-page) !important; } /* App-shell wrapper dùng bg-ink-100 (#F5F5F7) — đồng tone với --bg-page */ html:not(.dark) .bg-ink-100 { background-color: var(--bg-page) !important; } /* Khung viền indigo overlay đã DISABLE (refactor UI overhaul 260525): * thay bằng header bar 56px nền brand-700 — xem .ds-header trong design-tokens.css */ html:not(.dark):not(.bm-embedded) body:has(> #root)::after { content: none; } html:not(.dark) .sidebar-bg, [data-theme="light"] .sidebar { background: var(--surface) !important; background-image: none !important; border-right: 1px solid var(--border) !important; border-radius: 0 !important; box-shadow: none !important; transition: background-color 0.15s ease !important; } /* Sidebar active — icon đổi xanh #4f8ef7, nền tile trắng */ html:not(.dark) .sidebar-bg a[aria-current="page"] [class*="bg-gradient-to-br"] { background-image: none !important; background-color: rgba(79,142,247,0.10) !important; color: #4f8ef7 !important; box-shadow: none !important; } /* Cards / app-shell borders dễ nhìn hơn */ html:not(.dark) .border-ink-200\/70, html:not(.dark) .border-ink-200\/60 { border-color: rgba(0,0,0,0.08) !important; } /* Text selection (bôi đen) — tone Indigo */ html:not(.dark) ::selection, [data-theme="light"] ::selection { background: rgba(79,70,229,0.30); color: #1a1a1a; } html:not(.dark) ::-moz-selection, [data-theme="light"] ::-moz-selection { background: rgba(79,70,229,0.30); color: #1a1a1a; } /* Scrollbar (10px) — to vừa + xám rõ hơn */ html:not(.dark) ::-webkit-scrollbar { width: 8px; height: 8px; } html:not(.dark) ::-webkit-scrollbar-thumb { background: rgba(15,23,42,0.24); border-radius: 999px; } html:not(.dark) ::-webkit-scrollbar-thumb:hover { background: rgba(15,23,42,0.38); } html:not(.dark) ::-webkit-scrollbar-track { background: transparent; } /* ============================================================ * SHARED COMPONENT CLASSES (light + dark dùng chung tên `.bm-*`) * Áp dụng cho cả light + dark — đọc biến từ tương ứng. * ============================================================ */ .bm-btn-primary { background: var(--accent); color: var(--text-inverse); height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 1px 2px rgba(79,70,229,0.3); transition: background var(--transition), box-shadow var(--transition); } .bm-btn-primary:hover { background: var(--accent-hover); } .bm-btn-secondary { background: var(--bg-card); color: var(--text-primary); height: 32px; padding: 0 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid var(--border-input); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: var(--shadow-sm); transition: background var(--transition); } .bm-btn-secondary:hover { background: var(--bg-sidebar); } .bm-input { background: var(--bg-input); color: var(--text-primary); height: 32px; padding: 0 10px; border-radius: 6px; font-size: 13px; border: 1px solid var(--border-input); font-family: var(--font-sans); outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .bm-input:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(79,70,229,0.10); } .bm-input::placeholder { color: var(--text-placeholder); } .bm-card { background: var(--bg-card); border: 1px solid var(--border-secondary); border-radius: 8px; padding: 16px; box-shadow: var(--shadow-card); transition: box-shadow var(--transition); } .bm-card:hover { box-shadow: var(--shadow-md); } .bm-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; background: var(--bg-badge); color: var(--text-secondary); } .bm-label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .bm-sidebar-item { display: flex; align-items: center; gap: 8px; height: 28px; padding: 4px 12px; border-radius: 5px; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: background var(--transition), color var(--transition); } .bm-sidebar-item:hover { background: var(--bg-hover); color: var(--text-primary); } .bm-sidebar-item.is-active { background: var(--accent-light); color: var(--accent-text); } .bm-sidebar-section-label { font-size: 11px; font-weight: 500; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 12px; }