/* * teacher-ui-tokens.css * ----------------------------------------------------------------------- * Design tokens (CSS custom properties) dùng CHUNG cho 3 màn hình giáo * viên mới thuộc track UI-TEACHER-3SCREEN (xem DOCS/AI_ROSTER.md và * DOCS/KE_HOACH_UI_3_CONG_LOPTA.md mục 3.A): * 1) Trang chủ "Hôm nay" (host/views/home ...) * 2) Màn "Kiểm tra đề trước khi giao" * 3) Màn "Báo cáo & chấm" (bài đã giao) * * ĐÂY KHÔNG PHẢI theme cho toàn bộ site Lớp Ta — chỉ dùng cho 3 màn hình * trên và mọi component dùng chung của chúng. Không đổi host/style.css * hay host/home.css hiện có trong file này. * * Nguồn màu/bố cục: DOCS/KE_HOACH_UI_3_CONG_LOPTA.md mục 3.A + 3 ảnh mẫu * (Hôm nay / Kiểm tra đề / Báo cáo). Giá trị hex được đo bằng mắt từ ảnh * raster nên có thể lệch 1-2 sắc độ so với bản gốc thiết kế — nếu cần độ * chính xác pixel-perfect, đối chiếu lại với founder/điều phối trước khi * khoá bảng màu final. * * Quy ước đặt tên: --lt--[-] * lt = "Lớp Ta". Nhóm gồm: color, radius, shadow, space, font, focus. * ----------------------------------------------------------------------- */ :root { /* ======================================================================= * 1. MÀU SẮC — --lt-color-* * ===================================================================== */ /* --- Text --- */ --lt-color-text-navy: #16213a; /* chữ chính, heading (H1-H3) */ --lt-color-text-body: #3d4a5c; /* đoạn văn/body text thường */ --lt-color-text-muted: #6b7686; /* chú thích phụ, timestamp, helper text */ --lt-color-text-subtle: #94a0b3; /* text rất phụ, placeholder, disabled label */ --lt-color-text-on-cobalt: #ffffff; /* chữ trên nền CTA cobalt */ --lt-color-text-link: #2f5fe0; /* link text (dùng chung tông cobalt) */ /* --- Nền trang & bề mặt --- */ --lt-color-bg-page: #eef2f9; /* nền trang tổng thể (xanh rất nhạt) */ --lt-color-bg-surface: #ffffff; /* nền sidebar/topbar */ --lt-color-bg-card: #ffffff; /* nền card mặc định */ --lt-color-bg-card-muted: #f5f8fc; /* nền card phụ/nhóm bên trong card (vd: khối "Bắt đầu nhanh") */ --lt-color-bg-sidebar-active: #dbe6fc; /* nền mục sidebar đang active */ /* --- Viền --- */ --lt-color-border-card: #e2e8f0; /* viền mảnh quanh card */ --lt-color-border-subtle: #edf1f7; /* viền rất nhạt (chia tách nội bộ) */ --lt-color-border-input: #cbd5e1; /* viền input/select mặc định */ /* --- Cobalt: CTA / hành động chính --- */ --lt-color-cobalt-50: #eaf0fe; --lt-color-cobalt-100: #dbe6fc; --lt-color-cobalt-300: #7d9cf0; --lt-color-cobalt-500: #2f5fe0; /* nền CTA mặc định */ --lt-color-cobalt-600: #2850c8; /* nền CTA hover */ --lt-color-cobalt-700: #2142ab; /* nền CTA active/pressed */ --lt-color-cobalt-disabled-bg: #aebef2; --lt-color-cobalt-disabled-text: #f1f4fe; /* --- Xanh lá: tham gia lớp / tiến bộ / thành công --- */ --lt-color-green-50: #e9f8f0; --lt-color-green-100: #d3f1e1; --lt-color-green-500: #1f9d5c; /* icon/progress fill/success text */ --lt-color-green-600: #16814a; /* hover/active tông đậm hơn */ --lt-color-green-border: #a9e2c4; /* --- Amber: giáo viên cần chú ý / cảnh báo / chờ xử lý --- */ --lt-color-amber-50: #fdf3dc; --lt-color-amber-100: #faeac0; --lt-color-amber-500: #b9790b; /* text trên badge amber */ --lt-color-amber-600: #92600a; /* text đậm hơn, tương phản cao */ --lt-color-amber-border: #f0d99a; /* --- Tím: hình học (ít dùng ở 3 màn này, giữ để nhất quán hệ thống) --- */ --lt-color-purple-50: #f2edfc; --lt-color-purple-100: #e3d8f8; --lt-color-purple-500: #7c4fe0; --lt-color-purple-600: #6538c4; /* --- Đỏ: lỗi / từ chối / xóa --- */ --lt-color-red-50: #fdecec; --lt-color-red-100: #fbd9d9; --lt-color-red-500: #d13c3c; --lt-color-red-600: #b02e2e; --lt-color-red-border: #f3b9b9; /* --- Xám trung tính: chip/badge trung lập --- */ --lt-color-neutral-50: #f3f5f8; --lt-color-neutral-100: #e7ebf1; --lt-color-neutral-500: #5b6572; --lt-color-neutral-600: #414b57; --lt-color-neutral-border: #dbe1e9; /* --- Badge/chip: cặp nền + chữ dùng trực tiếp trong component --- */ --lt-color-badge-warning-bg: var(--lt-color-amber-50); --lt-color-badge-warning-text: var(--lt-color-amber-600); --lt-color-badge-warning-border: var(--lt-color-amber-border); --lt-color-badge-success-bg: var(--lt-color-green-50); --lt-color-badge-success-text: var(--lt-color-green-600); --lt-color-badge-success-border: var(--lt-color-green-border); --lt-color-badge-neutral-bg: var(--lt-color-neutral-50); --lt-color-badge-neutral-text: var(--lt-color-neutral-600); --lt-color-badge-neutral-border: var(--lt-color-neutral-border); --lt-color-badge-error-bg: var(--lt-color-red-50); --lt-color-badge-error-text: var(--lt-color-red-600); --lt-color-badge-error-border: var(--lt-color-red-border); --lt-color-badge-info-bg: var(--lt-color-cobalt-50); --lt-color-badge-info-text: var(--lt-color-cobalt-600); --lt-color-badge-info-border: var(--lt-color-cobalt-300); /* --- CTA nền/hover/active/disabled (alias ngữ nghĩa cho nút hành động chính) --- */ --lt-color-cta-bg: var(--lt-color-cobalt-500); --lt-color-cta-bg-hover: var(--lt-color-cobalt-600); --lt-color-cta-bg-active: var(--lt-color-cobalt-700); --lt-color-cta-bg-disabled: var(--lt-color-cobalt-disabled-bg); --lt-color-cta-text: var(--lt-color-text-on-cobalt); --lt-color-cta-text-disabled: var(--lt-color-cobalt-disabled-text); /* --- Card hover state (tông cobalt rất nhạt cho viền/nền khi hover) --- */ --lt-color-card-hover-border: var(--lt-color-cobalt-300); /* ======================================================================= * 2. BO GÓC — --lt-radius-* * ===================================================================== */ --lt-radius-card-lg: 16px; /* card lớn (khối nội dung chính) */ --lt-radius-card-md: 12px; /* card nhỏ/panel phụ */ --lt-radius-badge: 999px; /* badge/chip dạng viên thuốc (pill) */ --lt-radius-badge-sq: 8px; /* badge/chip dạng góc vuông bo nhẹ (khi không dùng pill) */ --lt-radius-control: 10px; /* input/button/select */ --lt-radius-control-sm: 8px; /* button nhỏ, tag bấm được */ /* ======================================================================= * 3. BÓNG ĐỔ — --lt-shadow-* * ===================================================================== */ --lt-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06); --lt-shadow-card-hover: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06); --lt-shadow-popover: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.08); /* ======================================================================= * 4. KHOẢNG CÁCH — --lt-space-* * ===================================================================== */ --lt-space-1: 4px; --lt-space-2: 8px; --lt-space-3: 12px; --lt-space-4: 16px; --lt-space-5: 24px; --lt-space-6: 32px; --lt-space-7: 40px; --lt-space-8: 48px; /* ======================================================================= * 5. TYPOGRAPHY — --lt-font-* * ===================================================================== */ --lt-font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --lt-font-size-h1: 28px; --lt-font-size-h2: 22px; --lt-font-size-h3: 18px; --lt-font-size-body: 15px; --lt-font-size-small: 13px; --lt-font-size-xsmall: 12px; --lt-font-line-height-heading: 1.3; --lt-font-line-height-body: 1.5; --lt-font-weight-regular: 400; --lt-font-weight-medium: 500; --lt-font-weight-semibold: 600; --lt-font-weight-bold: 700; /* ======================================================================= * 6. FOCUS RING — --lt-focus-* * Đáp ứng WCAG 2.4.7: viền outline rõ ràng, không chỉ dựa vào đổi màu nền. * ===================================================================== */ --lt-focus-ring-color: #2f5fe0; --lt-focus-ring-width: 3px; --lt-focus-ring-offset: 2px; --lt-focus-ring: 0 0 0 var(--lt-focus-ring-offset) var(--lt-color-bg-surface), 0 0 0 calc(var(--lt-focus-ring-offset) + var(--lt-focus-ring-width)) var(--lt-focus-ring-color); } /* * Gợi ý sử dụng focus ring (áp dụng ở CSS của từng màn, không global ở đây * để tránh xung đột với các file style khác đang bị khoá bởi lane khác): * * .lt-btn:focus-visible { * outline: none; * box-shadow: var(--lt-focus-ring); * } */