/* ============================================================================= * bulbal-tokens.css — BẢNG TOKEN THIẾT KẾ Bulbal Chat (nạp TRƯỚC mọi partial khác: * bulbal-shell.css, bulbal-contacts.css, bulbal-messages.css, bulbal-composer.css). * * ĐÂY LÀ NGUỒN SỰ THẬT DUY NHẤT cho màu / khoảng cách / bo góc / đổ bóng / * typography của giao diện mới. 4 file CSS còn lại CHỈ được dùng var(--bb-*) * khai báo ở đây — CẤM hardcode màu ở bất kỳ file nào khác trong bộ overlay. * Đổi giao diện (rebrand, chỉnh tương phản...) chỉ cần sửa MỘT chỗ này. * * Cú pháp light-dark(, ) — KHÔNG dùng [data-theme]. App thật chuyển * chế độ màu bằng cách set `document.documentElement.style.colorScheme = * 'light' | 'dark' | 'light dark'` (xem src/views/tinode-web.jsx:332,1322) — * light-dark() tự bám theo giá trị đó. [data-theme]/prefers-color-scheme sẽ * KHÔNG đồng bộ khi người dùng chọn thủ công trong Cài đặt trong khi hệ điều * hành đang để chế độ khác, nên tuyệt đối không dùng 2 cách đó. * * Toàn bộ số đo tương phản (WCAG, công thức relative luminance chuẩn) đã tính * và ghi trong report: * plans/20260729-1500-bulbal-chat-ui-theme/reports/phase-01-tokens-shell.md * ============================================================================= */ :root { /* ---- 1. Thương hiệu -------------------------------------------------------- * 3 sắc xanh không đổi theo chế độ màu (đã chốt trong plan.md). */ --bb-brand: #3B82F6; --bb-brand-600: #2563EB; --bb-brand-700: #1D4ED8; --bb-ok: light-dark(#22C55E, #4ADE80); /* ---- 1b. Nguy hiểm / cảnh báo / lỗi — BỔ SUNG 260729 (đợt 2) --------------- * Thiếu nhóm này khiến 3 chỗ trượt AA ở chế độ TỐI (số đo của agent panels): * nút "Đăng xuất"/"Xóa" 3.69:1 · mục nguy hiểm trong menu 3.04:1 · và tệ nhất * là dải .info-box.error chỉ 1.70:1 (chữ đỏ trên nền đỏ, gần như không đọc). * Quy tắc: chế độ tối dùng sắc SÁNG cho CHỮ và sắc RẤT TỐI cho NỀN. */ /* SỬA đợt 3: #DC2626 trên nền chat sáng (#F5F7FB) chỉ đạt ĐÚNG 4.50 — sát mép, * agent dialogs đo được 4.41 ở một số nền phụ. Đậm thêm 1 bậc → 5.35-5.74. */ --bb-danger: light-dark(#C81E1E, #F87171); /* chữ/icon nguy hiểm */ --bb-danger-strong: light-dark(#B91C1C, #FCA5A5); /* hover/nhấn mạnh */ --bb-danger-bg: light-dark(#FEF2F2, #2A1215); /* nền dải lỗi */ --bb-danger-line: light-dark(#FECACA, #7F1D1D); /* viền dải lỗi */ --bb-warn: light-dark(#B45309, #FBBF24); /* chữ cảnh báo */ --bb-warn-bg: light-dark(#FFFBEB, #2A2210); /* nền dải cảnh báo */ --bb-warn-line: light-dark(#FDE68A, #78350F); /* viền dải cảnh báo */ /* ---- 1c. Bảng màu avatar chữ cái — THAY TOÀN BỘ (đợt 3, 260730) ----------- * LỖI GỐC CỦA TINODE (agent people phát hiện, tôi đo lại xác nhận): cả 16 màu * nền `lt-bg-*` (sáng) lẫn `dk-bg-*` (tối) đều KHÔNG đạt AA với chữ trên nó. * - Chế độ sáng: nền pastel + chữ trắng = 1.17–2.22:1 (gần như không đọc) * - Chế độ tối: chữ trắng hỏng ở nền vàng/cam (1.97–3.07), chữ tối hỏng ở * nền xanh/tím (1.42–2.64) ⇒ KHÔNG màu chữ đơn nào cứu được cả 16 nền. * ⇒ Không vá bằng cách đổi màu CHỮ, mà thay chính bảng màu NỀN: 16 sắc trải * đều vòng màu, độ sáng canh sao cho MỌI nền đạt ~5:1 với chữ trắng, dùng * chung cả 2 chế độ (đo bằng script, thấp nhất 4.99 cao nhất 5.20). * Lợi thêm: avatar hết loang lổ pastel, hợp tông với theme Bulbal. */ --bb-tile-text: #FFFFFF; --bb-tile-0: #CF3434; --bb-tile-1: #AB5928; --bb-tile-2: #866D1F; --bb-tile-3: #6A751C; --bb-tile-4: #4D7C1D; --bb-tile-5: #2A801E; --bb-tile-6: #1E8037; --bb-tile-7: #1E7E5A; --bb-tile-8: #1D7C7C; --bb-tile-9: #2776A5; --bb-tile-10: #4569D3; --bb-tile-11: #6959D8; --bb-tile-12: #914CD5; --bb-tile-13: #B52FC8; --bb-tile-14: #C32E9E; --bb-tile-15: #CC306A; /* ---- 1d. Bảng màu CHỮ @nhắc tên — hệ quả bắt buộc của 1c (260730) --------- * base.css dòng ~251/269 khai báo `--clr-lt-fg-N: var(--clr-lt-bg-N)` và * `--clr-dk-fg-N: var(--clr-dk-bg-N)`: Tinode DÙNG CHUNG một bảng cho nền * avatar VÀ màu chữ @nhắc tên (`span.mention.dk-fg-N`). Bảng 1c được tính để * làm NỀN cho chữ trắng nên tông trung-đậm; dùng làm MÀU CHỮ thì: * - trên nền sáng: ~5:1 → ĐẠT (đo `.mention` #C32E9E trên trắng); * - trên nền TỐI (bong bóng #1E293B, nền chat #0F172A): trượt nặng. * ⇒ tách riêng biến chữ: chế độ tối trộn 55% màu gốc + 45% trắng, giữ nguyên * sắc độ nên vẫn phân biệt được người, mà lên ~6.4–7.7:1 với nền tối. * (Chữ @nhắc tên nằm trong bong bóng GỬI ĐI được ép trắng riêng ở * bulbal-messages.css mục 11b — nền xanh không thuộc cặp sáng/tối này.) */ --bb-tile-fg-0: light-dark(var(--bb-tile-0), color-mix(in srgb, var(--bb-tile-0) 55%, #FFF)); --bb-tile-fg-1: light-dark(var(--bb-tile-1), color-mix(in srgb, var(--bb-tile-1) 55%, #FFF)); --bb-tile-fg-2: light-dark(var(--bb-tile-2), color-mix(in srgb, var(--bb-tile-2) 55%, #FFF)); --bb-tile-fg-3: light-dark(var(--bb-tile-3), color-mix(in srgb, var(--bb-tile-3) 55%, #FFF)); --bb-tile-fg-4: light-dark(var(--bb-tile-4), color-mix(in srgb, var(--bb-tile-4) 55%, #FFF)); --bb-tile-fg-5: light-dark(var(--bb-tile-5), color-mix(in srgb, var(--bb-tile-5) 55%, #FFF)); --bb-tile-fg-6: light-dark(var(--bb-tile-6), color-mix(in srgb, var(--bb-tile-6) 55%, #FFF)); --bb-tile-fg-7: light-dark(var(--bb-tile-7), color-mix(in srgb, var(--bb-tile-7) 55%, #FFF)); --bb-tile-fg-8: light-dark(var(--bb-tile-8), color-mix(in srgb, var(--bb-tile-8) 55%, #FFF)); --bb-tile-fg-9: light-dark(var(--bb-tile-9), color-mix(in srgb, var(--bb-tile-9) 55%, #FFF)); --bb-tile-fg-10: light-dark(var(--bb-tile-10), color-mix(in srgb, var(--bb-tile-10) 55%, #FFF)); --bb-tile-fg-11: light-dark(var(--bb-tile-11), color-mix(in srgb, var(--bb-tile-11) 55%, #FFF)); --bb-tile-fg-12: light-dark(var(--bb-tile-12), color-mix(in srgb, var(--bb-tile-12) 55%, #FFF)); --bb-tile-fg-13: light-dark(var(--bb-tile-13), color-mix(in srgb, var(--bb-tile-13) 55%, #FFF)); --bb-tile-fg-14: light-dark(var(--bb-tile-14), color-mix(in srgb, var(--bb-tile-14) 55%, #FFF)); --bb-tile-fg-15: light-dark(var(--bb-tile-15), color-mix(in srgb, var(--bb-tile-15) 55%, #FFF)); /* Link trong bong bóng NHẬN. Màu link gốc #3B82F6 chỉ 3.68:1 trên nền trắng. * #1D4ED8 trên trắng = 6.73:1; #93C5FD trên bong bóng tối #1E293B = 8.04:1. */ --bb-link-in: light-dark(#1D4ED8, #93C5FD); /* Bong bóng của mình: gradient. light-dark() KHÔNG nhận / làm * tham số — phải lồng light-dark() ở TỪNG điểm dừng màu bên trong * linear-gradient(), không được bọc cả token bằng light-dark() (sẽ là CSS * không hợp lệ, cả token rớt về initial). Cách làm dưới đây vẫn giữ đúng 1 * tên biến --bb-bub-out để P03 dùng thẳng `background: var(--bb-bub-out)`. */ --bb-bub-out: linear-gradient(135deg, light-dark(#2E6BE6, #2563EB), light-dark(#1D4ED8, #1D4ED8)); /* ---- 2. Bề mặt (nền) -------------------------------------------------------- */ --bb-bg-side: light-dark(#FFFFFF, #111827); --bb-bg-chat: light-dark(#F5F7FB, #0F172A); --bb-bg-bar: light-dark(#FFFFFFEE, #111827EE); --bb-bub-in: light-dark(#FFFFFF, #1E293B); --bb-bub-in-line: light-dark(#E6EBF2, #2A3A55); --bb-chip: light-dark(#FFFFFF, #1E293B); --bb-line: light-dark(#E6EBF2, #22304A); --bb-hover: light-dark(#F1F5F9, #1A2436); --bb-sel: light-dark(#E8F1FE, #1E293B); --bb-dot: light-dark(rgba(15, 23, 42, .045), rgba(148, 163, 184, .075)); /* ---- 3. Chữ ------------------------------------------------------------------ * txt-3 hiện dùng CHUNG giá trị với txt-2 (bảng thiết kế chỉ cần 2 mức mờ) — * vẫn giữ tên riêng để phase khác gán đúng NGỮ NGHĨA (giờ/placeholder), không * phải vì 2 token này khác màu nhau. */ --bb-txt-1: light-dark(#0F172A, #E9EEF6); --bb-txt-2: light-dark(#64748B, #94A3B8); --bb-txt-3: light-dark(#64748B, #94A3B8); --bb-txt-on-sel: light-dark(#475569, #CBD5E1); --bb-txt-on-brand: #FFFFFF; --bb-chip-txt: light-dark(#475569, #CBD5E1); /* ---- 4. Header sidebar/chat — TƯỜNG MINH, KHÔNG ăn theo --bb-brand ------------ * Quyết định đã chốt (plan.md §"Quyết định đã chốt" #3, 2026-07-29 15:15, * KHÔNG bàn lại): chế độ sáng giữ banner xanh thương hiệu (không đổi sang nền * trắng như bản phác thảo mockup vẽ ở dòng 82 — xem report mục "Lệch mockup"), * chế độ tối giữ #1e3a8a như bản hiện hành. Khai báo riêng, tuyệt đối KHÔNG * cho --bb-hdr-bg/--bb-hdr-txt ăn theo --bb-brand hay --bb-sel — đây chính là * gốc của sự cố tương phản 1.09 trước đây. * * bulbal (P05, quyết định điều phối 260729): P01 đo #3B82F6 + chữ trắng chỉ * đạt 3.68:1 (dưới AA 4.5:1 cho text thường). Đổi sang #2E6BE6 — CÙNG sắc * xanh thương hiệu (điểm dừng đầu của gradient --bb-bub-out, đã dùng cho bong * bóng chat), chỉ đậm hơn 1 nấc. Trắng/#2E6BE6 = 4.81:1 (tự tính lại bằng * script scratch/scripts/wcag-contrast.mjs, công thức relative luminance * chuẩn WCAG) — ĐẠT AA. Không đổi #1e3a8a (chế độ tối, đã 10.36:1, dư AA). */ --bb-hdr-bg: light-dark(#2E6BE6, #1e3a8a); --bb-hdr-txt: light-dark(#FFFFFF, #E2E8F0); --bb-hdr-txt-hover: #FFFFFF; /* ---- 5. Bóng đổ -------------------------------------------------------------- * Cùng lý do như --bb-bub-out: box-shadow là , không phải — * light-dark() phải lồng ở phần màu (rgba), không bọc ngoài toàn giá trị. */ --bb-sh-1: 0 1px 2px light-dark(rgba(15, 23, 42, .06), rgba(0, 0, 0, .3)); --bb-sh-2: 0 4px 16px -4px light-dark(rgba(15, 23, 42, .12), rgba(0, 0, 0, .45)); --bb-sh-3: 0 8px 28px -8px light-dark(rgba(29, 78, 216, .35), rgba(0, 0, 0, .6)); /* ---- 6. Hình khối (không đổi theo chế độ màu) --------------------------------- */ --bb-r-row: 16px; --bb-r-bub: 18px; --bb-r-bub-tail: 7px; --bb-r-pill: 999px; --bb-r-composer: 26px; --bb-row-h: 72px; --bb-avatar: 52px; --bb-touch: 44px; --bb-side-w: 364px; --bb-chat-max: 880px; /* ---- 7. Chữ nghĩa (typography) -------------------------------------------------- * Font Be Vietnam Pro do P05 nạp Google Fonts; fallback Roboto/system-ui * đảm bảo hiển thị đúng ngay cả khi chưa có P05 hoặc mạng ngoài bị chặn. */ --bb-font: 'Be Vietnam Pro', Roboto, system-ui, sans-serif; --bb-fs-base: 14.5px; --bb-fs-title: 16px; --bb-fs-name: 15px; --bb-fs-preview: 13.5px; --bb-fs-meta: 11.5px; /* ---- 8. Chuyển động -------------------------------------------------------------- */ --bb-ease: ease-out; --bb-dur: .18s; /* ---- 9. Ghi đè biến upstream của base.css ---------------------------------------- * base.css:8 --caption-panel-height mặc định 4rem (64px). Đổi 4.25rem = 68px để * khớp mockup. LƯU Ý (Key Insight #1 của phase file): biến này còn dùng cho * `top:` của #video-container.minimized — đổi ở đây ảnh hưởng luôn overlay * video call, P05 kiểm tra bằng mắt nếu bật video call. */ --caption-panel-height: 4.25rem; /* ---- 10. Token bổ sung riêng của phase 01 ---------------------------------------- * KHÔNG nằm trong hợp đồng bắt buộc §Architecture (P02/03/04 không cần các * token này) — tách riêng để css/bulbal-shell.css không phải hardcode màu, * giữ đúng luật "cấm hardcode màu" + tiêu chí "0 hex trong bulbal-shell.css". */ --bb-info-bg: light-dark(#EFF6FF, #16233C); --bb-info-border: light-dark(#DBEAFE, #1E3A6B); --bb-info-txt: light-dark(#1D4ED8, #BFDBFE); --bb-online-txt: light-dark(#15803D, #4ADE80); --bb-avatar-ring: rgba(255, 255, 255, .35); --bb-hdr-hover-bg: rgba(255, 255, 255, .16); } /* ═══════════════════════════════════════════════════════════════════════════ * CẦU NỐI sang biến upstream --clr-* (Tinode base.css) * * Mục đích: các màn CHƯA được 4 phase restyle riêng (Cài đặt, các dialog, info * view, new-account panel...) vẫn đổi màu đồng bộ theo token mới, không lộ màu * xanh mặc định #2094f3 của Tinode gốc chọi với phần đã redesign. Danh sách * biến kế thừa y nguyên từ css/bulbal-theme.css (sẽ bị xoá ở P05) — chỉ đổi * NGUỒN giá trị từ hex cứng sang var(--bb-*) để một nguồn duy nhất. * ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Thương hiệu / hành động chính */ --clr-primary-accent: light-dark(var(--bb-brand), var(--bb-brand-600)); --clr-primary-accent-hover: light-dark(var(--bb-brand-600), var(--bb-brand)); /* --clr-primary-action bản cũ dùng #2f6fd0 riêng cho dark — không có token * --bb-* tương ứng, dùng luôn --bb-brand-600 cho gọn (lệch nhẹ so với hex cũ, * cùng tông xanh đậm, không đổi ý nghĩa — xem report mục "Lệch mockup"). */ --clr-primary-action: light-dark(var(--bb-brand), var(--bb-brand-600)); --clr-primary-action-hover: light-dark(var(--bb-brand-600), var(--bb-brand)); --clr-button-primary-bg: light-dark(var(--bb-brand), var(--bb-brand-600)); --clr-button-primary-hover-bg: light-dark(var(--bb-brand-600), var(--bb-brand)); --clr-header-stripe-bg: light-dark(var(--bb-brand), var(--bb-bg-chat)); /* Không có token --bb-* tương ứng màu xanh nhạt cho chữ/viền TRÊN nền tối * (nút outline, tab active... trong dialog Cài đặt) — giữ nguyên #60a5fa đã * chạy ổn định từ bulbal-theme.css, không phải màu bịa mới. */ --clr-button-outline-text: light-dark(var(--bb-brand), #60a5fa); --clr-button-secondary-text: light-dark(var(--bb-brand), #60a5fa); --clr-input-border-focus: light-dark(var(--bb-brand), #60a5fa); --clr-tabbar-active-border: light-dark(var(--bb-brand), #60a5fa); --clr-tabbar-active-text: light-dark(var(--bb-brand), #60a5fa); --clr-light-blue-accent: light-dark(var(--bb-brand), #60a5fa); --clr-reply-quote-border: light-dark(var(--bb-brand), #60a5fa); /* Bề mặt */ --clr-bright: var(--bb-bg-side); --clr-body-background: var(--bb-bg-chat); --clr-background-blue-gray-50: var(--bb-hover); --clr-background-blue-gray-100: var(--bb-sel); /* Không có token --bb-* cho 2 bậc bề mặt phụ này — chỉ ảnh hưởng "pinned" row * + info-view/lettertile chưa được 4 phase restyle, giữ nguyên giá trị cũ. */ --clr-background-blue-gray-75: light-dark(#e1e8eb, #182124); --clr-background-blue-gray-300: light-dark(#b0bec5, #2b3852); /* Bảng màu avatar chữ cái — bridge sang biến upstream (xem mục 1c). * Ghi đè CẢ 2 bộ (lt-bg = sáng, dk-bg = tối) bằng CÙNG một bộ màu, vì bộ mới * đã đạt AA với chữ trắng ở mọi chế độ. `--clr-lettertile-default-text` ép * trắng để không bị base.css kéo về màu nhạt. */ --clr-lt-bg-0: var(--bb-tile-0); --clr-lt-bg-1: var(--bb-tile-1); --clr-lt-bg-2: var(--bb-tile-2); --clr-lt-bg-3: var(--bb-tile-3); --clr-lt-bg-4: var(--bb-tile-4); --clr-lt-bg-5: var(--bb-tile-5); --clr-lt-bg-6: var(--bb-tile-6); --clr-lt-bg-7: var(--bb-tile-7); --clr-lt-bg-8: var(--bb-tile-8); --clr-lt-bg-9: var(--bb-tile-9); --clr-lt-bg-10: var(--bb-tile-10); --clr-lt-bg-11: var(--bb-tile-11); --clr-lt-bg-12: var(--bb-tile-12); --clr-lt-bg-13: var(--bb-tile-13); --clr-lt-bg-14: var(--bb-tile-14); --clr-lt-bg-15: var(--bb-tile-15); --clr-dk-bg-0: var(--bb-tile-0); --clr-dk-bg-1: var(--bb-tile-1); --clr-dk-bg-2: var(--bb-tile-2); --clr-dk-bg-3: var(--bb-tile-3); --clr-dk-bg-4: var(--bb-tile-4); --clr-dk-bg-5: var(--bb-tile-5); --clr-dk-bg-6: var(--bb-tile-6); --clr-dk-bg-7: var(--bb-tile-7); --clr-dk-bg-8: var(--bb-tile-8); --clr-dk-bg-9: var(--bb-tile-9); --clr-dk-bg-10: var(--bb-tile-10); --clr-dk-bg-11: var(--bb-tile-11); --clr-dk-bg-12: var(--bb-tile-12); --clr-dk-bg-13: var(--bb-tile-13); --clr-dk-bg-14: var(--bb-tile-14); --clr-dk-bg-15: var(--bb-tile-15); --clr-lettertile-default-text: var(--bb-tile-text); --clr-lettertile-hover-text: var(--bb-tile-text); /* Màu CHỮ @nhắc tên — PHẢI cắt liên kết `fg = bg` của base.css (xem mục 1d), * nếu không màu nền avatar sẽ tiếp tục làm màu chữ và hỏng ở chế độ tối. */ --clr-lt-fg-0: var(--bb-tile-fg-0); --clr-lt-fg-1: var(--bb-tile-fg-1); --clr-lt-fg-2: var(--bb-tile-fg-2); --clr-lt-fg-3: var(--bb-tile-fg-3); --clr-lt-fg-4: var(--bb-tile-fg-4); --clr-lt-fg-5: var(--bb-tile-fg-5); --clr-lt-fg-6: var(--bb-tile-fg-6); --clr-lt-fg-7: var(--bb-tile-fg-7); --clr-lt-fg-8: var(--bb-tile-fg-8); --clr-lt-fg-9: var(--bb-tile-fg-9); --clr-lt-fg-10: var(--bb-tile-fg-10); --clr-lt-fg-11: var(--bb-tile-fg-11); --clr-lt-fg-12: var(--bb-tile-fg-12); --clr-lt-fg-13: var(--bb-tile-fg-13); --clr-lt-fg-14: var(--bb-tile-fg-14); --clr-lt-fg-15: var(--bb-tile-fg-15); --clr-dk-fg-0: var(--bb-tile-fg-0); --clr-dk-fg-1: var(--bb-tile-fg-1); --clr-dk-fg-2: var(--bb-tile-fg-2); --clr-dk-fg-3: var(--bb-tile-fg-3); --clr-dk-fg-4: var(--bb-tile-fg-4); --clr-dk-fg-5: var(--bb-tile-fg-5); --clr-dk-fg-6: var(--bb-tile-fg-6); --clr-dk-fg-7: var(--bb-tile-fg-7); --clr-dk-fg-8: var(--bb-tile-fg-8); --clr-dk-fg-9: var(--bb-tile-fg-9); --clr-dk-fg-10: var(--bb-tile-fg-10); --clr-dk-fg-11: var(--bb-tile-fg-11); --clr-dk-fg-12: var(--bb-tile-fg-12); --clr-dk-fg-13: var(--bb-tile-fg-13); --clr-dk-fg-14: var(--bb-tile-fg-14); --clr-dk-fg-15: var(--bb-tile-fg-15); /* Viền + chữ */ --clr-border-light: var(--bb-line); --clr-border-muted: var(--bb-line); --clr-text-primary: var(--bb-txt-1); --clr-text-secondary: var(--bb-txt-2); --clr-text-tertiary: var(--bb-txt-3); }