/* 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"] { /* ---- Background ---- */ --bg-primary: #ffffff; --bg-secondary: #f7f7f8; --bg-tertiary: #efefef; --bg-sidebar: #f7f7f8; --bg-hover: rgba(0,0,0,0.03); --bg-active: rgba(0,0,0,0.05); --bg-card: #ffffff; --bg-input: #ffffff; --bg-badge: rgba(0,0,0,0.05); --bg-tooltip: #1f2937; --bg-modal-overlay: rgba(0,0,0,0.40); /* ---- Text ---- */ --text-primary: #1a1a1a; --text-secondary: #6b6f76; --text-tertiary: #9b9da2; --text-placeholder: #c8c9cc; --text-inverse: #ffffff; --text-link: #5e6ad2; /* ---- Border ---- */ --border-primary: rgba(0,0,0,0.08); --border-secondary: rgba(0,0,0,0.04); --border-input: rgba(0,0,0,0.12); --border-focus: #5e6ad2; /* ---- Accent (Linear violet — same as dark) ---- */ --accent: #5e6ad2; --accent-hover: #4f5bc0; --accent-light: rgba(94,106,210,0.08); --accent-text: #5e6ad2; /* ---- Status ---- */ --success: #16a34a; --success-light: rgba(22,163,74,0.08); --error: #dc2626; --error-light: rgba(220,38,38,0.08); --warning: #d97706; --warning-light: rgba(217,119,6,0.08); --info: #2563eb; --info-light: rgba(37,99,235,0.08); /* ---- Shadow (light: dùng shadow thay border) ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-md: 0 2px 8px rgba(0,0,0,0.06); --shadow-lg: 0 4px 16px rgba(0,0,0,0.08); --shadow-card: 0 0 0 1px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04); /* ---- Scrollbar ---- */ --scrollbar-thumb: rgba(0,0,0,0.12); --scrollbar-hover: rgba(0,0,0,0.20); /* ---- Motion ---- */ --transition: 0.1s ease; /* ---- Typography ---- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif; --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: 4px; height: 4px; } html:not(.dark):not([data-theme="dark"]) ::-webkit-scrollbar-thumb, [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 2px; } 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; } /* Sidebar (web app + admin custom class) — Linear: KHÔNG border rõ, chỉ nền */ html:not(.dark) .sidebar-bg, [data-theme="light"] .sidebar { background: var(--bg-sidebar) !important; background-image: none !important; border-right: 1px solid var(--border-secondary) !important; box-shadow: none !important; } /* ============================================================ * LINEAR REFINEMENT — light mode * Sidebar icons mono, active violet. Brand CTA flat violet. * Card icons subtle bg per-tone. * ============================================================ */ /* ---- Sidebar items: icons mono, active row violet ---- */ html:not(.dark) .sidebar-bg [class*="bg-gradient-to-br"] { background-image: none !important; background-color: transparent !important; box-shadow: none !important; color: #6b6f76 !important; } html:not(.dark) .sidebar-bg a:hover { background: rgba(0,0,0,0.03) !important; } html:not(.dark) .sidebar-bg a[aria-current="page"] { background: rgba(94,106,210,0.08) !important; } html:not(.dark) .sidebar-bg a[aria-current="page"], html:not(.dark) .sidebar-bg a[aria-current="page"] [class*="bg-gradient-to-br"], html:not(.dark) .sidebar-bg a[aria-current="page"] i, html:not(.dark) .sidebar-bg a[aria-current="page"] span { color: #5e6ad2 !important; } /* ---- Brand gradient CTA → flat violet light ---- */ html:not(.dark) .bg-gradient-to-r.from-brand-500, html:not(.dark) .bg-gradient-to-r.from-brand-500.to-brand-700, html:not(.dark) .bg-gradient-to-r.from-brand-500.to-brand-600 { background-image: none !important; background-color: rgba(94,106,210,0.08) !important; color: #5e6ad2 !important; border: 1px solid rgba(94,106,210,0.15) !important; box-shadow: none !important; } html:not(.dark) .bg-gradient-to-r.from-brand-500:hover, html:not(.dark) .bg-gradient-to-r.from-brand-500.to-brand-700:hover, html:not(.dark) .bg-gradient-to-r.from-brand-500.to-brand-600:hover { background-color: rgba(94,106,210,0.12) !important; } /* ---- Card icons (AppCard tones) → bỏ gradient, subtle bg + icon đậm ---- */ html:not(.dark) main [class*="bg-gradient-to-br"]:not(.sidebar-bg [class*="bg-gradient-to-br"]) { background-image: none !important; box-shadow: none !important; } html:not(.dark) main .from-indigo-500 { background-color: rgba(99,102,241,0.10) !important; color: #4338ca !important; } html:not(.dark) main .from-blue-500 { background-color: rgba(59,130,246,0.10) !important; color: #1d4ed8 !important; } html:not(.dark) main .from-sky-500 { background-color: rgba(14,165,233,0.10) !important; color: #0369a1 !important; } html:not(.dark) main .from-cyan-500 { background-color: rgba(6,182,212,0.10) !important; color: #0e7490 !important; } html:not(.dark) main .from-emerald-500 { background-color: rgba(16,185,129,0.10) !important; color: #047857 !important; } html:not(.dark) main .from-green-500 { background-color: rgba(34,197,94,0.10) !important; color: #15803d !important; } html:not(.dark) main .from-violet-500 { background-color: rgba(139,92,246,0.10) !important; color: #6d28d9 !important; } html:not(.dark) main .from-purple-500 { background-color: rgba(168,85,247,0.10) !important; color: #7e22ce !important; } html:not(.dark) main .from-fuchsia-500 { background-color: rgba(217,70,239,0.10) !important; color: #a21caf !important; } html:not(.dark) main .from-pink-500 { background-color: rgba(236,72,153,0.10) !important; color: #be185d !important; } html:not(.dark) main .from-rose-500 { background-color: rgba(244,63,94,0.10) !important; color: #be123c !important; } html:not(.dark) main .from-orange-500 { background-color: rgba(249,115,22,0.10) !important; color: #c2410c !important; } html:not(.dark) main .from-amber-500 { background-color: rgba(245,158,11,0.10) !important; color: #b45309 !important; } html:not(.dark) main [class*="bg-gradient-to-br"] { text-shadow: none !important; } /* ---- Card container (AppCard wrapper) — Linear nhẹ ---- */ html:not(.dark) main .shadow-card { box-shadow: 0 1px 2px rgba(0,0,0,0.03) !important; } html:not(.dark) main .shadow-elevated, html:not(.dark) main .hover\:shadow-elevated:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important; } /* ---- Page bg (light Linear): trắng tinh ---- */ html:not(.dark) body { background: #ffffff !important; } /* ============================================================ * 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(94,106,210,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(94,106,210,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; }