/* ============================================================================= tokens.css — LỚP NỀN TẢNG HỆ MÀU SmartWork (design tokens) ----------------------------------------------------------------------------- Triết lý "light / nhẹ nhàng": - Nhấn mạnh bằng MÀU CHỮ + MÀU VIỀN, hạn chế mảng màu nền khối. - Nền màu đặc CHỈ dành cho: nút hành động chính (primary) + chip trạng thái (nền "soft" rất nhạt). Không gradient, không shadow màu, KHÔNG glass/blur. - Contrast cao: chữ chính trên nền trắng ~16:1 (vượt WCAG AAA). KIẾN TRÚC 3 LỚP: 1) PRIMITIVE — giá trị thô, KHÔNG theme nào được đụng. 2) SEMANTIC — ánh xạ vai trò. Nền/chữ/border/TRẠNG THÁI cố định. Biến DUY NHẤT mà file theme (colors/*.css) được đổi: --accent*. 3) COMPONENT — nút/card/chip/badge tham chiếu lớp semantic, không chạm primitive. NẠP TRƯỚC site.css và trước colors/{theme}.min.css (xem _Layout*.cshtml). File theme chỉ override --accent / --accent-hover / --accent-soft / --accent-fg. ============================================================================= */ :root { /* ========================================================================== LỚP 1 — PRIMITIVE (hằng số, không đổi theo theme) ========================================================================== */ /* Thang xám trung tính (nền, chữ, viền) */ --gray-25: #FCFCFD; --gray-50: #F7F8FA; --gray-100: #F2F4F7; --gray-200: #EAECF0; --gray-300: #D0D5DD; --gray-400: #98A2B3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1D2939; --gray-900: #101828; --gray-950: #0C111D; /* Palette accent mặc định (xanh dương — hệ công việc) */ --blue-50: #EFF6FF; --blue-100: #DBEAFE; --blue-500: #1570EF; --blue-600: #155EEF; --blue-700: #1249C7; /* Màu trạng thái — CỐ ĐỊNH tuyệt đối qua mọi theme. KHÔNG file theme nào được định nghĩa lại các màu này. */ /* Tím — dùng phân biệt NGUỒN việc (công việc giao tay) với hồ sơ (xanh accent). Đặt ở lớp primitive vì đây là hằng số, không phải màu theme. */ --violet-50: #F5F3FF; --violet-600: #7839EE; --violet-700: #5720B7; --green-50: #ECFDF3; --green-600: #12B76A; --green-700: #027A48; --amber-50: #FFFAEB; --amber-500: #F79009; --amber-700: #B54708; --red-50: #FEF3F2; --red-600: #F04438; --red-700: #B42318; --sky-50: #F0F9FF; --sky-600: #0BA5EC; --sky-700: #026AA2; /* ========================================================================== LỚP 2 — SEMANTIC ========================================================================== */ /* --- Nền & bề mặt (đặc, KHÔNG trong suốt, KHÔNG blur) --- */ --bg-app: var(--gray-50); /* nền toàn app */ --surface: #ffffff; /* card, panel, modal */ --surface-raised: #ffffff; /* lớp nổi (dùng kèm elevation) */ --surface-sunken: var(--gray-50); /* vùng lõm: toolbar, header bảng */ --surface-hover: var(--gray-50); /* hover hàng danh sách */ /* --- Chữ (contrast cao) --- */ --text-primary: var(--gray-900); /* tiêu đề, nội dung chính ~16:1 */ --text-secondary: var(--gray-600); /* phụ, mô tả ~7:1 */ --text-tertiary: var(--gray-500); /* placeholder, meta ~5:1 */ --text-disabled: var(--gray-400); --text-on-accent: #ffffff; /* chữ trên nền accent đặc */ /* --- Viền (mảnh, dùng để phân lớp cùng-tầng thay cho nền) --- */ --border-subtle: var(--gray-200); /* chia ô cùng tầng, viền card phẳng */ --border-default: var(--gray-300); /* viền input, card nổi */ --border-strong: var(--gray-400); /* nhấn mạnh, focus phụ */ /* --- ACCENT — BIẾN DUY NHẤT FILE THEME ĐƯỢC ĐỔI --- Giá trị mặc định ở đây để _LayoutEmpty (không nạp theme) vẫn đúng màu. */ --accent: var(--blue-600); /* nút primary, link, tab active */ --accent-hover: var(--blue-700); /* trạng thái hover của accent (đậm hơn) */ --accent-strong: var(--blue-700); /* biến thể ĐẬM (gradient-end, viền nhấn) */ --accent-light: var(--blue-100); /* biến thể NHẠT hơn soft (glow, gradient-start nhạt) */ --accent-fg: #ffffff; /* chữ trên nền accent đặc */ --accent-soft: var(--blue-50); /* nền nhạt: chip, selected, hover active */ --accent-soft-fg: var(--blue-700); /* chữ trên nền accent-soft */ --accent-border: var(--blue-600); /* viền outline theo accent */ /* --- Màu trạng thái ngữ nghĩa (ánh xạ từ primitive cố định) --- Mỗi trạng thái có: nền soft + chữ đậm (chuẩn chip "light"). */ --success: var(--green-600); --success-soft: var(--green-50); --success-fg: var(--green-700); --warning: var(--amber-500); --warning-soft: var(--amber-50); --warning-fg: var(--amber-700); --danger: var(--red-600); --danger-soft: var(--red-50); --danger-fg: var(--red-700); --info: var(--sky-600); --info-soft: var(--sky-50); --info-fg: var(--sky-700); --neutral: var(--gray-500); --neutral-soft: var(--gray-100); --neutral-fg: var(--gray-700); /* --- NGUỒN VIỆC (hộp việc hợp nhất) --- Phân biệt HỒ SƠ với CÔNG VIỆC bằng viền trái + badge, để 2 loại nằm chung MỘT danh sách mà vẫn đọc được ngay. Cố định qua mọi theme như màu trạng thái: file theme KHÔNG được định nghĩa lại. */ --src-case: var(--blue-600); --src-case-soft: var(--blue-50); --src-case-fg: var(--blue-700); --src-task: var(--violet-600); --src-task-soft: var(--violet-50); --src-task-fg: var(--violet-700); /* --- Elevation (chiều sâu KHÔNG cần blur — bóng xám trung tính) --- */ --elevation-0: none; /* phẳng, cạnh nhau */ --elevation-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .04); /* card, toolbar */ --elevation-2: 0 4px 8px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04); /* dropdown, popover */ --elevation-3: 0 12px 24px rgba(16, 24, 40, .10), 0 4px 8px rgba(16, 24, 40, .06); /* modal ký, dialog */ /* --- Bo góc (thang cố định, không trôi nổi) --- */ --radius-xs: 4px; /* badge nhỏ */ --radius-sm: 6px; /* input, button, badge */ --radius-md: 8px; /* card, dropdown */ --radius-lg: 12px; /* modal, panel lớn */ --radius-full: 999px; /* avatar, chip tròn, pill */ /* --- Spacing (thang 4px) --- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* --- Focus ring (dùng chung, theo accent) --- */ --focus-ring: 0 0 0 3px rgba(21, 94, 239, .25); /* --- Density: cao hàng bảng (list chặt để quét nhanh) --- */ --row-height: 40px; /* vùng quét: danh sách hồ sơ */ --control-height: 38px; /* input, button */ /* ========================================================================== LỚP 3 — COMPONENT (tham chiếu lớp 2) ========================================================================== */ /* Nút primary = NỀN ACCENT ĐẶC PHẲNG (không gradient/shadow màu) */ --btn-primary-bg: var(--accent); --btn-primary-bg-hover: var(--accent-hover); --btn-primary-fg: var(--accent-fg); /* Nút thứ cấp / mặc định = "light": chữ + viền, nền trong suốt */ --btn-default-bg: transparent; --btn-default-bg-hover: var(--gray-50); --btn-default-fg: var(--text-primary); --btn-default-border: var(--border-default); /* Nút outline theo accent = chữ accent + viền accent, nền trong suốt */ --btn-outline-fg: var(--accent); --btn-outline-border: var(--accent-border); --btn-outline-bg-hover: var(--accent-soft); /* Card / panel */ --card-bg: var(--surface); --card-border: var(--border-subtle); --card-radius: var(--radius-md); --card-shadow: var(--elevation-1); /* Chip / badge trạng thái = nền soft + chữ đậm màu (không nền đặc) */ --chip-radius: var(--radius-full); /* Tab / nav active = gạch chân accent + chữ accent (không nền khối) */ --tab-active-fg: var(--accent); --tab-active-border: var(--accent); --tab-inactive-fg: var(--text-secondary); /* Link */ --link-color: var(--accent); --link-color-hover: var(--accent-hover); } /* ============================================================================= BOOTSTRAP BRIDGE — map biến --bs-* của Bootstrap về token semantic. Đặt ở `body` (KHÔNG `:root`) để var() resolve đúng scope: token dark override nằm ở body[data-theme=dark], nếu để ở :root sẽ đóng băng giá trị sáng-mode. Nhờ khối này, MỌI component Bootstrap (card/modal/dropdown/table/nav-tabs/ list-group/accordion/form/offcanvas...) TỰ ĐẢO theo theme sáng/tối, không cần override dark thủ công từng component. ============================================================================= */ body { /* Nền/chữ/viền lõi (Bootstrap dùng khắp nơi). KHÔNG set --bs-body-bg ở đây: nền trang do .wrapper/.main-panel + data-background-color quản; ép --bs-body-bg dễ làm input/nền lệch. */ --bs-body-color: var(--text-primary); --bs-border-color: var(--border-subtle); --bs-border-color-translucent: var(--border-subtle); --bs-secondary-color: var(--text-secondary); --bs-tertiary-color: var(--text-tertiary); --bs-tertiary-bg: var(--surface-sunken); --bs-secondary-bg: var(--surface-sunken); --bs-emphasis-color: var(--text-primary); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-hover); /* Card */ --bs-card-bg: var(--surface); --bs-card-color: var(--text-primary); --bs-card-border-color: var(--border-subtle); --bs-card-cap-bg: var(--surface-sunken); /* Modal */ --bs-modal-bg: var(--surface); --bs-modal-color: var(--text-primary); --bs-modal-border-color: var(--border-subtle); --bs-modal-header-border-color: var(--border-subtle); --bs-modal-footer-border-color: var(--border-subtle); /* Offcanvas */ --bs-offcanvas-bg: var(--surface); --bs-offcanvas-color: var(--text-primary); --bs-offcanvas-border-color: var(--border-subtle); /* Table */ --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-subtle); --bs-table-striped-color: var(--text-primary); --bs-table-hover-color: var(--text-primary); /* Nav / Tabs / Pills */ --bs-nav-link-color: var(--text-secondary); --bs-nav-link-hover-color: var(--accent); --bs-nav-tabs-border-color: var(--border-subtle); --bs-nav-tabs-link-active-color: var(--accent); --bs-nav-tabs-link-active-bg: var(--surface); --bs-nav-tabs-link-active-border-color: var(--border-subtle) var(--border-subtle) var(--surface); --bs-nav-tabs-link-hover-border-color: var(--border-subtle); --bs-nav-pills-link-active-color: var(--accent-fg); --bs-nav-pills-link-active-bg: var(--accent); /* List group */ --bs-list-group-bg: var(--surface); --bs-list-group-color: var(--text-primary); --bs-list-group-border-color: var(--border-subtle); --bs-list-group-action-color: var(--text-primary); --bs-list-group-action-hover-color: var(--text-primary); --bs-list-group-action-hover-bg: var(--surface-hover); --bs-list-group-active-color: var(--accent-fg); --bs-list-group-active-bg: var(--accent); --bs-list-group-active-border-color: var(--accent); /* Accordion */ --bs-accordion-bg: var(--surface); --bs-accordion-color: var(--text-primary); --bs-accordion-border-color: var(--border-subtle); --bs-accordion-btn-color: var(--text-primary); --bs-accordion-btn-bg: var(--surface); --bs-accordion-active-color: var(--accent); --bs-accordion-active-bg: var(--accent-soft); } /* ----------------------------------------------------------------------------- Nút đóng (.btn-close) — Bootstrap 5.2 dùng icon X đen cố định (fill #000), chưa có biến --bs-btn-close-* nên không đảo màu theo theme -> ở dark mode dấu X gần như tàng hình. Đảo màu X sang trắng bằng đúng filter mà Bootstrap 5.3 dùng cho .btn-close-white, chỉ khi đang ở dark theme. ---------------------------------------------------------------------------- */ body[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }