/* Nexa Mini App SDK — LỚP 1: design token. * * Chưng cất từ `support-center/frontend/public/tokens.css` (đọc kỹ trước khi sửa file * này) — CHỈ giữ phần dùng chung được cho MỌI mini app. Bỏ những gì riêng của Support * Center (`--tk-bub-me`, `--bg-elev/--bg-active/--bg-chat`, biến thể mật độ) vì §4.1 của * spec nói rõ: * * SDK KHÔNG HỨA mini app "giống host". SDK HỨA: các mini app GIỐNG NHAU, theo được * sáng/tối, và theo được accent của workspace. * * Lý do: host (chat-platform-app) có ~46 biến trên :root * (`chat-platform-app/src/lib/theme/applyThemeVars.ts:14-61`), nhưng hợp đồng * postMessage chỉ chở ĐÚNG 7 tham số kiểu Telegram * (`chat-platform-app/src/features/mini-apps/components/MiniAppLauncher.tsx:20-32`). * 46 ≠ 7 — SDK không thể và không giả vờ tái tạo toàn bộ theme của host. * * CẦU NỐI THEME — `_sdk/frontend/nexa/nexa-web-app.js` nhận message `theme` từ host rồi: * Object.keys(WebApp.themeParams).forEach((k) => * root.style.setProperty('--nexa-' + k.replace(/_/g, '-'), WebApp.themeParams[k])); * ⚠️ Chú ý phép `replace(/_/g, '-')`: field host gửi là `bg_color` (dấu GẠCH DƯỚI, đúng * hợp đồng kiểu Telegram) nhưng biến CSS được đặt là `--nexa-bg-color` (dấu GẠCH NGANG). * Viết `var(--nexa-bg_color, …)` trong tokens.css sẽ KHÔNG BAO GIỜ khớp — biến luôn rơi * về fallback trong im lặng (không lỗi, không cảnh báo). Bảy dòng dưới đây dùng đúng tên * đã đổi dấu gạch. * * Ba điểm giữ nguyên từ support-center (hơn hẳn room-booking, xem so sánh trong từng * điểm) + hai token mới: * 1. Họ accent DẪN XUẤT bằng color-mix() từ --accent, KHÔNG hardcode hsl(). Bản * hsl(var(--accent-h) …) của room-booking khoá cứng hue nên --accent-strong vẫn là * indigo dù host đổi button_color. * 2. --scrim khai RIÊNG cho sáng và tối. room-booking hardcode một giá trị và không có * bản dark ⇒ nền mờ modal ở theme tối đang là nền mờ của theme sáng. * 3. (mới) --on-accent (chữ/icon trên nền accent) và --knob (núm switch, tick * checkbox). #fff xuất hiện 13 lần trong support-center/frontend/public/styles.css * và 12 lần trong room-booking/…/styles.css — không có token cho chúng thì lint màu * (_sdk/cli/lint-css.mjs) phải whitelist "#fff" (mở cửa cho mọi hex 3 ký tự) hoặc * fail hàng chục chỗ hợp lệ. */ :root { /* ── type ─────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --text-11: 11px; --text-12: 12px; --text-13: 13px; --text-14: 14px; --text-15: 15px; --text-16: 16px; --text-17: 17px; --text-18: 18px; --text-20: 20px; --text-22: 22px; --text-24: 24px; --text-32: 32px; /* ── spacing (lưới 4pt) ───────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── bán kính ─────────────────────────────────────────── */ --r-xs: 4px; --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-2xl: 22px; --r-full: 999px; /* ── chuyển động ──────────────────────────────────────── */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --d-fast: 120ms; --d-base: 180ms; --d-slow: 280ms; /* ── 7 token host override được ───────────────────────── * Fallback là giá trị mặc định khi mở NGOÀI Nexa (dev-token, hoặc mất kết nối * postMessage). Tên biến khớp đúng cách nexa-web-app.js đặt (xem chú thích đầu file): * hậu tố dùng GẠCH NGANG, không phải gạch dưới như tên field gốc của host. */ --bg: var(--nexa-bg-color, #ffffff); --bg-hover: var(--nexa-secondary-bg-color, #f4f6f5); --text: var(--nexa-text-color, #101718); --text-muted: var(--nexa-hint-color, #5d6e6d); --link: var(--nexa-link-color, #0b7a70); --accent: var(--nexa-button-color, #0b7a70); --on-accent: var(--nexa-button-text-color, #ffffff); /* MỚI: chữ/icon trên nền accent */ --knob: #ffffff; /* MỚI: núm switch, tick checkbox — luôn trắng, không theo theme */ /* Họ accent DẪN XUẤT bằng color-mix, KHÔNG hardcode hsl() — xem điểm 1 ở đầu file. */ --accent-strong: color-mix(in srgb, var(--accent) 82%, #000); --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--bg)); --accent-softer: color-mix(in srgb, var(--accent) 7%, var(--bg)); --accent-ring: color-mix(in srgb, var(--accent) 35%, transparent); /* ── viền ─────────────────────────────────────────────── */ --border: #e6e8ef; --border-subtle: #eef0f6; --border-strong: #d5d9e4; /* ── ngữ nghĩa ────────────────────────────────────────── */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; /* ── đổ bóng ──────────────────────────────────────────── */ --shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.04); --shadow-md: 0 4px 12px rgba(15, 18, 32, 0.06), 0 1px 2px rgba(15, 18, 32, 0.04); --shadow-lg: 0 12px 32px rgba(15, 18, 32, 0.08), 0 4px 8px rgba(15, 18, 32, 0.04); --shadow-pop: 0 20px 48px rgba(15, 18, 32, 0.18), 0 2px 6px rgba(15, 18, 32, 0.06); /* Khai RIÊNG cho sáng và tối — xem block dark dưới (điểm 2 ở đầu file). */ --scrim: rgb(15 18 32 / 45%); /* Mũi tên của