Theme System — 1 bộ token, mọi sản phẩm ăn theo
Bấm 🌙/☀ và 4 ô màu ở góc phải trên: header, nav, card, nút, FAB, chip của cả trang này đổi đồng loạt — không app nào phải sửa code. Đó chính là cách Dark/Light + màu cá nhân hoạt động trên OIS thật.
Kiến trúc 2 lớp token 1
1
Lớp MODE (light/dark) — nền, chữ, viền, bóng: --bg --surface --ink --line… Đổi mode = đổi lớp này, màu chủ đạo giữ nguyên bản sắc
2
Lớp ACCENT (cá nhân) — màu chủ đạo: --ac --ac-deep --ac-tint --ac-on 4 template né 3 họ màu khóa (đỏ/cam/tím): Jade (mặc định) · Sapphire · Graphite · Mocha — thêm template mới = thêm 1 khối biến, 0 sửa app
3
Màu NGỮ NGHĨA không cá nhân hóa: URGENT đỏ, SLA amber, NHẬP BÙ tím — cố định mọi theme để cảnh báo không bao giờ bị "trang trí" mất nghĩa 2
Token contract (trích)
--bgnền app
--surfacecard/bar
--achành động chính
--ac-tintnhấn nhẹ/chip
--coral 🔒URGENT — khóa
--manual 🔒NHẬP BÙ — khóa
Cùng 1 màn PITS — thử đổi mode/accent để xem token làm việc:
Chú thích Theme
1 — Mode × Accent độc lập: 2 mode × 4 accent = 8 tổ hợp từ ĐÚNG 1 codebase; user pha trộn tự do.
2 — Nguyên tắc an toàn thị giác: đỏ khẩn cấp phải là đỏ ở mọi theme — cá nhân hóa dừng trước ngữ nghĩa.
3 — Kỷ luật enforce bằng CI (giống Permission-as-Code): lint chặn hex color ngoài file token.
👤 Tôi / Settings — thống nhất mọi sản phẩm
Cùng 1 màn "Tôi" render trong OIMA/PITS/CSAgent (Account là của platform, không của từng app). Khớp Auth v2: tài khoản do Admin cấp có Đổi mật khẩu + banner liên kết Google; tài khoản Google có Unlink.
☰
Tôi Nguyễn Thị Tuyết · VS Seiketsu @ Emerald
NT
📷
Nguyễn Thị Tuyết
Điểm cam kết 94/100
👤
Thông tin cá nhântên hiển thị, SĐT, ngôn ngữ
›🎨
Giao diệnDark · màu Jade (4 lựa chọn)
›🔔
Thông báođẩy khi giao việc, SLA sắp vỡ
›🔐
Tài khoản & bảo mậtmật khẩu, Google, quyền đã cấp
›📊
Số liệu của tôilịch sử việc, điểm theo tháng
›←
Tài khoản & bảo mật tài khoản do Org Admin cấp
🔗 Liên kết Google — kiến nghị
🔑
Đổi mật khẩuđổi lần cuối: 10/07 (lần đầu bắt buộc)
›📱
Thiết bị đang đăng nhập2 thiết bị · đăng xuất từ xa
›🛡
Quyền đã cấp cho OISxem & thu hồi từng quyền
›Vai trò hiện tại của bạn 2
←
Giao diện & cá nhân hóa áp dụng MỌI sản phẩm OIS
Chế độ hiển thị
☀ Sáng🌙 Tối🌓 Theo máy
Màu chủ đạo của bạn
Cỡ chữ
AAA
Tài khoản Google (đã liên kết)
G
phuong.duong@gmail.comCalendar ✓ · liên kết 10/07/2026
Chú thích Tôi/Settings
1 — Progressive consent đúng Auth v2: link Google chỉ xin scope cơ bản; Calendar xin khi bật tính năng lịch.
2 — Vai trò đọc từ Assignment (role × scope × zone × shift) — user thấy chính xác "mình là ai trong hệ thống".
3 — Preference lưu ở Account (platform-level), không phải per-app → mọi sản phẩm "Powered by OIS" đồng bộ.
4 — Account ≠ authProvider: gỡ 1 provider không đụng Person/dữ liệu — đúng thiết kế Account doc.
🧩 Luật mở rộng UI — thêm tính năng/sản phẩm KHÔNG phá cấu trúc
Trả lời trực tiếp câu hỏi của bạn: có — vì mọi lớp đều có "cửa mở rộng" định sẵn. Đây là bản tổng hợp để đưa vào Design System doc.
5 cửa mở rộng đã đặt sẵn
1
Token contract — feature mới chỉ dùng var(--token); theme/accent mới = thêm khối biến. CI lint chặn hex lạ
2
Shell contract — bar tối đa 4 tab + FAB; feature mới vào menu FAB (giữ→vòng 4+ hành động) hoặc "Tôi ▸ Tiện ích", không nêm icon
3
Sản phẩm mới = 1 app shell mới + đăng ký FAB action + permission tự vào Registry (default DENY) + source_channel mới nếu tạo Case — Console tự mọc nhóm quyền, dashboard tự thêm nguồn
4
Settings "Tôi" là component platform — sản phẩm mới nhúng nguyên khối, chỉ thêm section riêng nếu cần (VD: PITS thêm "zone của tôi")
5
Widget ◈ nhúng sẵn mọi shell — sản phẩm mới có trợ lý cá nhân ngay ngày đầu
Checklist khi thêm 1 tính năng mới
| Câu hỏi | Nếu vi phạm |
|---|---|
| Chỉ dùng token? | CI chặn |
| Có đòi thêm icon vào bottom bar? | → menu FAB/Tôi |
| Permission đã khai báo trong code? | mặc định DENY |
| Màu ngữ nghĩa bị dùng trang trí? | review chặn |
| Ẩn bar khi đang ghi âm/chờ xác nhận? | cấm — luật shell #3 |