/* ============================================================================ * TOKENS — NGUỒN DUY NHẤT CỦA MÀU, BÁN KÍNH, BÓNG VÀ PHÔNG CHỮ * * Nạp TRƯỚC mọi tệp css khác, ở mọi trang (app lẫn trang bán hàng). * * VÌ SAO CÓ TỆP NÀY: trước đây app (styles.css) và trang bán hàng (landing.css) * mỗi bên khai báo một bộ biến riêng. Cùng một vai trò mà hai tên khác nhau * (--text với --ink-main, --border với --line), và màu thương hiệu thì lệch hẳn * giá trị (#4f46e5 ở app, #6366f1 ở landing). Thêm vào đó hơn 500 mã màu gõ * thẳng nằm rải trong JS, không tên, không đổi được theo nền sáng/tối. * * BA TẦNG — đọc từ trên xuống: * * Tầng 1 BẢNG MÀU NGUYÊN THUỶ (--p-*) * Chỉ là màu, chưa mang ý nghĩa gì. ĐÂY LÀ NƠI DUY NHẤT ĐƯỢC PHÉP * VIẾT MÃ HEX. Không dùng --p-* trực tiếp trong giao diện. * * Tầng 2 NGỮ NGHĨA (--bg, --fg, --brand, --success, --cat-*) * Gán vai trò cho màu. Đây là tầng đổi theo nền sáng/tối. Code giao * diện chỉ nên chạm tới tầng này. * * Tầng 3 BÍ DANH TƯƠNG THÍCH NGƯỢC * Giữ nguyên mọi tên biến cũ của styles.css và landing.css, trỏ về * tầng 2. Nhờ vậy 5.800 dòng CSS sẵn có chạy y như cũ, và việc đổi * tên có thể làm dần từng phần thay vì một lần. * * LUẬT KHI THÊM MÀU MỚI: * 1. Có sẵn ở tầng 2 rồi thì dùng lại, đừng đẻ tên mới. * 2. Chưa có mà là VAI TRÒ mới -> thêm ở tầng 2, nhớ khai cả bản nền tối. * 3. Không bao giờ viết hex ngoài tầng 1. Viết hex trong JS hay trong CSS * thành phần là màu đó tự động sai ở nền tối, và không ai tìm lại được. * ==========================================================================*/ /* ========================================================================== * TẦNG 1 — BẢNG MÀU NGUYÊN THUỶ * Thang màu theo hệ Tailwind, chỉ giữ đúng những bậc dự án thật sự dùng. * ==========================================================================*/ :root { /* Trung tính (slate) — nền, viền, chữ */ --p-white: #ffffff; --p-slate-50: #f8fafc; --p-slate-100: #f1f5f9; --p-slate-200: #e2e8f0; --p-slate-300: #cbd5e1; --p-slate-400: #94a3b8; --p-slate-500: #64748b; --p-slate-550: #5f6d82; /* chữ mờ trên nền SÁNG: slate-500 đạt 4,34:1 khi nền là xám nhạt chứ không phải trắng tinh — vẫn hụt ngưỡng. Bậc này đạt 4,80:1 ở đó. */ --p-slate-450: #7d8b9e; /* bậc chen giữa 400 và 500 — chữ mờ trên nền TỐI: slate-500 chỉ 3,44:1 ở đó, còn slate-400 thì trùng luôn với chữ phụ nên mất phân cấp. */ --p-slate-600: #475569; --p-slate-700: #334155; --p-slate-800: #1e293b; --p-slate-900: #0f172a; --p-slate-950: #090d16; --p-card-dark: #141c2e; /* mặt thẻ ở nền tối — sáng hơn nền trang một bậc */ /* Xanh tím (indigo/violet) — thương hiệu */ --p-indigo-50: #eef2ff; --p-indigo-400: #818cf8; --p-indigo-500: #6366f1; --p-indigo-600: #4f46e5; --p-indigo-800: #3730a3; --p-indigo-950: #1e1b4b; --p-violet-50: #f3e8ff; --p-violet-600: #7c3aed; --p-violet-950: #2e1065; /* Xanh lá (emerald/green) — đúng, hoàn thành */ --p-green-50: #ecfdf5; --p-green-100: #dcfce7; --p-green-400: #34d399; --p-green-500: #10b981; --p-green-600: #16a34a; --p-green-700: #15803d; --p-green-900: #064e3b; --p-green-950: #14532d; /* Đỏ / hồng (rose/red) — sai, nguy hiểm */ --p-rose-50: #fff1f2; --p-rose-400: #fb7185; --p-rose-500: #f43f5e; --p-rose-600: #e11d48; --p-rose-950: #4c0519; --p-red-600: #dc2626; --p-red-700b: #b91c1c; /* Vàng / cam (amber/orange) — cảnh báo, chuỗi ngày học, XP */ --p-amber-50: #fffbeb; --p-amber-100: #fef3c7; --p-amber-400: #fbbf24; --p-amber-500: #f59e0b; --p-amber-600: #d97706; --p-amber-700: #b45309; --p-amber-950: #451a03; --p-orange-50: #fff7ed; --p-orange-700: #c2410c; /* Xanh ngọc / xanh dương (teal/cyan/blue/sky) — thông tin, phân loại */ --p-teal-100: #ccfbf1; --p-teal-400: #2dd4bf; --p-teal-600: #0d9488; --p-teal-700: #0f766e; --p-teal-900: #134e4a; --p-cyan-600: #0891b2; --p-cyan-700: #0e7490; --p-blue-50: #eff6ff; --p-blue-700: #1d4ed8; --p-blue-900: #1e3a8a; --p-sky-50: #f0f9ff; --p-sky-700: #0369a1; /* Nền khối mã */ --p-code-bg-l: #eef2f8; --p-code-line-l: #d7dfec; --p-code-bg-d: #0d1526; --p-code-txt-d: #e6edf7; --p-emerald-700: #047857; --p-emerald-200: #a7f3d0; --p-red-700: #b91c1c; --p-red-300: #fca5a5; } /* ========================================================================== * TẦNG 2 — NGỮ NGHĨA (nền sáng) * ==========================================================================*/ :root { /* --- Nền và bề mặt --- */ --bg: var(--p-slate-50); /* nền trang */ --surface: var(--p-white); /* mặt thẻ, hộp nổi lên trên nền */ --surface-sunken: var(--p-slate-100); /* mặt lõm xuống: ô nhập, vùng phụ */ /* --- Chữ --- */ --fg: var(--p-slate-900); /* chữ chính */ --fg-muted: var(--p-slate-600); /* chữ phụ, mô tả */ --fg-faint: var(--p-slate-550); /* chữ mờ nhất CÒN ĐỌC ĐƯỢC: slate-400 trên nền trắng chỉ 2,45:1, tức là không đọc được thật. */ /* --- Đường kẻ --- */ --stroke: var(--p-slate-200); /* viền thường */ --stroke-strong: var(--p-slate-300); /* viền cần thấy rõ */ /* --- Thương hiệu --- */ --brand: var(--p-indigo-600); --brand-strong: var(--p-indigo-800); /* trạng thái nhấn, chữ trên nền nhạt */ --brand-wash: var(--p-indigo-50); /* nền rất nhạt của thương hiệu */ --on-brand: var(--p-white); /* chữ đặt trên nền thương hiệu */ /* --- Trạng thái --- */ --ok: var(--p-green-500); --ok-wash: var(--p-green-50); --err: var(--p-rose-500); --err-wash: var(--p-rose-50); --warn: var(--p-amber-500); --warn-wash: var(--p-amber-50); --note: var(--p-teal-600); --note-wash: var(--p-teal-100); /* --- Khối mã --- */ --code-surface: var(--p-code-bg-l); --code-fg: var(--p-slate-900); --code-line: var(--p-code-line-l); --code-ok: var(--p-emerald-700); --code-err: var(--p-red-700); /* --- Bóng đổ --- */ --elev-1: 0 1px 4px rgba(15, 23, 42, 0.08); --elev-2: 0 4px 14px rgba(15, 23, 42, 0.05); --elev-3: 0 16px 36px rgba(79, 70, 229, 0.15); /* --- Bán kính --- */ --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-full: 9999px; /* --- Phông chữ --- */ --font-sans: 'Lexend', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: 'Quicksand', var(--font-sans); --font-mono: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', 'Roboto Mono', Menlo, 'Cascadia Mono', 'Courier New', monospace; } /* ========================================================================== * TẦNG 2 — NGỮ NGHĨA (nền tối) * Chỉ khai lại những gì THẬT SỰ đổi. Bán kính và phông không đổi theo nền. * ==========================================================================*/ [data-theme="dark"] { --bg: var(--p-slate-950); --surface: var(--p-card-dark); --surface-sunken: var(--p-slate-800); --fg: var(--p-slate-50); --fg-muted: var(--p-slate-400); --fg-faint: var(--p-slate-450); /* 5,30:1 trên nền tối */ --stroke: var(--p-slate-800); --stroke-strong: var(--p-slate-700); /* Nền tối cần màu thương hiệu SÁNG hơn một bậc thì mới đủ tương phản. */ --brand: var(--p-indigo-500); --brand-strong: var(--p-indigo-600); --brand-wash: var(--p-indigo-950); --ok: var(--p-green-400); --ok-wash: var(--p-green-900); --err: var(--p-rose-400); --err-wash: var(--p-rose-950); --warn: var(--p-amber-400); --warn-wash: var(--p-amber-950); --note: var(--p-teal-400); --note-wash: var(--p-teal-900); --code-surface: var(--p-code-bg-d); --code-fg: var(--p-code-txt-d); --code-line: var(--p-slate-800); --code-ok: var(--p-emerald-200); --code-err: var(--p-red-300); --elev-2: 0 4px 18px rgba(0, 0, 0, 0.35); --elev-3: 0 16px 40px rgba(0, 0, 0, 0.55); } /* ========================================================================== * TẦNG 2 — MÀU PHÂN LOẠI (--cat-*) * * Đây là tầng bù đúng chỗ đang thiếu. App gán cho MỖI hoạt động và MỖI chương * một màu riêng (Luyện tập xanh lá, Thi thử đỏ, Mô phỏng xanh ngọc...). Đó là * nhu cầu thật, nhưng trước nay viết thẳng hex trong JS nên không đổi được * theo nền tối: con chip nền #eef2ff vẫn sáng trưng giữa thẻ tối. * * Mỗi màu phân loại có HAI biến đi cặp: * --cat- màu đậm — icon, chữ, viền * --cat--wash nền nhạt — chip, ô nền sau icon * Ở nền tối, phần -wash đổi thành nền tối cùng tông thay vì nền nhạt. * * Dùng đúng cặp thì luôn đủ tương phản; đừng ghép chữ màu A với nền wash màu B. * ==========================================================================*/ :root { --cat-indigo: var(--p-indigo-600); --cat-indigo-wash: var(--p-indigo-50); --cat-violet: var(--p-violet-600); --cat-violet-wash: var(--p-violet-50); --cat-green: var(--p-green-700); --cat-green-wash: var(--p-green-100); --cat-red: var(--p-red-700b); --cat-red-wash: var(--p-rose-50); --cat-amber: var(--p-amber-700); --cat-amber-wash: var(--p-amber-100); --cat-orange: var(--p-orange-700); --cat-orange-wash: var(--p-orange-50); --cat-teal: var(--p-teal-700); --cat-teal-wash: var(--p-teal-100); --cat-cyan: var(--p-cyan-700); --cat-cyan-wash: var(--p-sky-50); --cat-blue: var(--p-blue-700); --cat-blue-wash: var(--p-blue-50); --cat-sky: var(--p-sky-700); --cat-sky-wash: var(--p-sky-50); --cat-slate: var(--p-slate-600); --cat-slate-wash: var(--p-slate-100); } /* --- BIẾN THỂ ĐẶC (nền tô kín, chữ trắng) --- Chip ở trạng thái ĐƯỢC CHỌN tô kín màu và đặt chữ trắng lên trên. Nếu dùng --cat-* cho nền thì ở nền tối màu ấy sáng lên, chữ trắng chìm nghỉm. Nên bộ -solid CỐ Ý KHÔNG đổi theo theme: giữ nguyên bậc đậm ở cả hai nền, chữ trắng lúc nào cũng đọc được. Luôn đi kèm --on-cat, đừng đặt chữ màu khác lên. */ :root { --on-cat: var(--p-white); --cat-indigo-solid: var(--p-indigo-600); --cat-violet-solid: var(--p-violet-600); --cat-green-solid: var(--p-green-700); --cat-red-solid: var(--p-red-700b); --cat-amber-solid: var(--p-amber-700); --cat-orange-solid: var(--p-orange-700); --cat-teal-solid: var(--p-teal-700); --cat-cyan-solid: var(--p-cyan-700); --cat-blue-solid: var(--p-blue-700); --cat-sky-solid: var(--p-sky-700); --cat-slate-solid: var(--p-slate-600); } [data-theme="dark"] { /* Màu đậm sáng lên một bậc để còn đọc được trên nền tối; nền wash đổi thành tông tối cùng họ. CỐ Ý KHÔNG DÙNG color-mix() ở đây. Nó gọn hơn thật, nhưng máy Android đời cũ (Chrome < 111) không hiểu, mà biến CSS thì không tự loại giá trị hỏng: trình duyệt vẫn nhận chuỗi color-mix(...) rồi mới vỡ lúc đem đi tô nền, và con chip thành TRONG SUỐT chứ không phải quay về màu dự phòng. Viết thẳng mã màu thì máy nào cũng chạy, và tương phản do mình định đoạt. */ --cat-indigo: var(--p-indigo-400); --cat-indigo-wash: #1c1940; --cat-violet: #a78bfa; --cat-violet-wash: #2e1065; --cat-green: var(--p-green-400); --cat-green-wash: #10391f; --cat-red: var(--p-rose-400); --cat-red-wash: #40151d; --cat-amber: var(--p-amber-400); --cat-amber-wash: #3d2708; --cat-orange: #fb923c; --cat-orange-wash: #40210c; --cat-teal: var(--p-teal-400); --cat-teal-wash: #10353a; --cat-cyan: #22d3ee; --cat-cyan-wash: #0e343f; --cat-blue: #60a5fa; --cat-blue-wash: #16305c; --cat-sky: #38bdf8; --cat-sky-wash: #103349; --cat-slate: var(--p-slate-400); --cat-slate-wash: var(--p-slate-800); } /* ========================================================================== * TẦNG 3 — BÍ DANH TƯƠNG THÍCH NGƯỢC * * Mọi tên biến cũ vẫn sống, chỉ đổi chỗ trỏ về tầng 2. Nhờ vậy toàn bộ CSS và * JS hiện có chạy y hệt trước, còn tên mới thì dùng được ngay cho phần viết * thêm. Xoá dần khối này khi đã đổi hết nơi gọi. * ==========================================================================*/ :root, [data-theme="dark"] { /* --- tên cũ của app (styles.css) --- */ --bg-card: var(--surface); --bg-soft: var(--surface-sunken); --text: var(--fg); --text-soft: var(--fg-muted); --border: var(--stroke); --border-strong: var(--stroke-strong); --primary: var(--brand); --primary-d: var(--brand-strong); --primary-soft: var(--brand-wash); --success: var(--ok); --success-soft: var(--ok-wash); --danger: var(--err); --danger-soft: var(--err-wash); --warning: var(--warn); --warning-soft: var(--warn-wash); --info: var(--note); --info-soft: var(--note-wash); --shadow: var(--elev-2); --shadow-xs: var(--elev-1); --shadow-lg: var(--elev-3); --radius: var(--r-md); --radius-sm: var(--r-sm); --code-bg: var(--code-surface); --code-text: var(--code-fg); --code-out: var(--code-ok); /* --- tên cũ của trang bán hàng (landing.css) --- */ --bg-subtle: var(--surface-sunken); --surface-card: var(--surface); --ink-main: var(--fg); --ink-muted: var(--fg-muted); --ink-faint: var(--fg-faint); --line: var(--stroke); --line-strong: var(--stroke-strong); --radius-md: var(--r-md); --radius-lg: var(--r-lg); --radius-full: var(--r-full); }