Save Game - Semantic Design Tokens

Hệ thống Semantic Tokens được xây dựng chuẩn hóa dựa trên các lớp lớp nền tảng (Foundations), hỗ trợ đầy đủ Light/Dark Mode.

🎨 Foundations Tokens ⚡ Semantic & Components

📂 Semantic Tokens: Background

Tokens quy định màu nền cấu trúc cho toàn bộ giao diện từ lớp nền (Canvas), thẻ chứa (Surface) đến các trạng thái tương tác.

--bg-canvas
Nền canvas chính của trang web.
🔗 Foundation Mapping:
☀️ Light: --color-gray-50 🌙 Dark: --color-gray-900
--bg-surface
Nền của các thành phần nổi như thẻ (Card), khối nội dung.
🔗 Foundation Mapping:
☀️ Light: --color-white 🌙 Dark: --color-gray-800
--bg-surface-subtle
Nền nhẹ cho các vùng phân cách dữ liệu phụ.
🔗 Foundation Mapping:
☀️ Light: --color-gray-100 🌙 Dark: --color-gray-700
--bg-action-hover
Nền phủ tương tác khi rê chuột (Hover state).
🔗 Foundation Mapping:
☀️ Light: rgba(100,116,139, --opacity-hover) 🌙 Dark: rgba(248,250,252, --opacity-hover)
--bg-action-disabled
Nền dành cho các thành phần ở trạng thái vô hiệu hóa.
🔗 Foundation Mapping:
☀️ Light: --color-gray-200 🌙 Dark: --color-gray-700

📂 Semantic Tokens: Text

Tokens kiểm soát độ tương phẩn và thứ bậc thông tin của chữ, tối ưu hóa trải nghiệm đọc cho người dùng.

--text-primary

Tiêu đề và nội dung chính quan trọng (Primary Text)

🔗 Foundation Mapping:
☀️ Light: --color-gray-900 🌙 Dark: --color-gray-50
--text-secondary

Đoạn văn mô tả thông thường, nội dung cấp 2 (Secondary Text)

🔗 Foundation Mapping:
☀️ Light: --color-gray-600 🌙 Dark: --color-gray-300
--text-muted

Chữ ghi chú phụ, bản quyền hoặc caption nhỏ (Muted Text)

🔗 Foundation Mapping:
☀️ Light: --color-gray-400 🌙 Dark: --color-gray-500
--text-on-brand
CHỮ TRÊN NỀN BRAND
🔗 Foundation Mapping:
☀️ Light: --color-white 🌙 Dark: --color-white
--text-disabled

Nội dung bị vô hiệu hóa không tương tác được (Disabled Text)

🔗 Foundation Mapping:
☀️ Light: rgba(15,23,42, --opacity-disabled) 🌙 Dark: rgba(248,250,252, --opacity-disabled)

📂 Semantic Tokens: Border

Tokens định nghĩa các đường viền phân tách không gian giao diện một cách tinh tế.

--border-subtle
Đường viền mờ nhạt chia khối nội dung mặc định.
🔗 Foundation Mapping:
☀️ Light: --color-gray-200 🌙 Dark: --color-gray-700
--border-strong
Đường viền đậm nét dùng cho tiêu đề lớn hoặc phân vùng quan trọng.
🔗 Foundation Mapping:
☀️ Light: --color-gray-400 🌙 Dark: --color-gray-500
--border-focus
Đường viền chỉ định trạng thái focus khi dùng bàn phím.
🔗 Foundation Mapping:
☀️ Light: --color-cyan-500 🌙 Dark: --color-cyan-400
--border-disabled
Đường viền của cấu trúc đã bị khóa tương tác.
🔗 Foundation Mapping:
☀️ Light: --color-gray-300 🌙 Dark: --color-gray-600

📂 Semantic Tokens: Brand

Tokens đại diện cho bản sắc thương hiệu chính của hệ thống dựa trên Palette Green gốc.

--brand-default
Màu thương hiệu mặc định ứng dụng cho nút bấm, liên kết chính.
🔗 Foundation Mapping:
☀️ Light: --color-green-500 🌙 Dark: --color-green-600
--brand-hover
Màu thương hiệu khi rê chuột vào (tối hơn một tông).
🔗 Foundation Mapping:
☀️ Light: --color-green-600 🌙 Dark: --color-green-500
--brand-subtle
Màu nền thương hiệu dịu nhẹ thích hợp làm nhãn highlight thông tin.
🔗 Foundation Mapping:
☀️ Light: --color-green-100 🌙 Dark: --color-green-900

📂 Semantic Tokens: Status

Tokens thể hiện các trạng thái hệ thống: Thành công (Success), Cảnh báo (Warning), Nguy hiểm/Lỗi (Danger) và Thông tin (Info).

Success State
✔ Thành công mĩ mãn
--status-success-text ➔ grn-700 / grn-300
--status-success-bg ➔ grn-50 / grn-900
--status-success-border ➔ grn-200 / grn-700
Warning State
⚠ Cảnh báo chú ý
--status-warning-text ➔ org-700 / org-300
--status-warning-bg ➔ org-50 / org-950
--status-warning-border ➔ org-200 / org-800
Danger/Error State
✘ Lỗi nghiêm trọng
--status-danger-text ➔ red-700 / red-300
--status-danger-bg ➔ red-50 / red-950
--status-danger-border ➔ red-200 / red-800
Info State
ℹ Thông tin hệ thống
--status-info-text ➔ cyan-700 / cyan-300
--status-info-bg ➔ cyan-50 / cyan-950
--status-info-border ➔ cyan-200 / cyan-800

🛠 Ứng Dụng Thực Tế Giao Diện (Semantic Components)

Khu vực kiểm thử các thành phần UI thực tế sử dụng 100% hệ thống Semantic Tokens vừa định nghĩa ở trên.

Đăng nhập hệ thống

Thành công: Đồng bộ dữ liệu hệ thống Design System lên production hoàn tất!
Lỗi: Kết nối cơ sở dữ liệu MySQL thất bại. Vui lòng kiểm tra lại file cấu hình .env

Buttons System

Hệ thống các biến thể Button được thiết kế đồng bộ theo Semantic Token.

Link Button

Buttons System

Hệ thống thành phần Button hoàn chỉnh với đầy đủ các biến thể và trạng thái tương tác.

Token Route
☀️ bg-default: --brand-default ➔ --color-green-500 🌙 bg-default: --brand-default ➔ --color-green-600 ☀️ bg-hover: --brand-hover ➔ --color-green-600 🌙 bg-hover: --brand-hover ➔ --color-green-500 ☀️ bg-active (press): --color-green-700 🌙 bg-active (press): --color-green-700 ☀️ text: --text-on-brand ➔ --color-white 🌙 text: --text-on-brand ➔ --color-white ☀️ shadow: --elevation-sm
Token Route
☀️ bg-default: --bg-surface ➔ --color-white 🌙 bg-default: --bg-surface ➔ --color-gray-800 ☀️ bg-hover: --bg-surface-subtle ➔ --color-gray-100 🌙 bg-hover: --bg-surface-subtle ➔ --color-gray-700 ☀️ bg-active (press): --bg-action-disabled ➔ --color-gray-200 🌙 bg-active (press): --bg-action-disabled ➔ --color-gray-700 ☀️ border: --border-strong ➔ --color-gray-400 🌙 border: --border-strong ➔ --color-gray-500 ☀️ text: --text-primary ➔ --color-gray-900 🌙 text: --text-primary ➔ --color-gray-50
Token Route
☀️ bg-default: --status-danger-text ➔ --color-red-700 🌙 bg-default: --status-danger-text ➔ --color-red-300 ☀️ bg-hover: --color-red-700 🌙 bg-hover: --color-red-700 ☀️ bg-active (press): --color-red-800 🌙 bg-active (press): --color-red-800 ☀️ text: --text-on-brand ➔ --color-white
Token Route
☀️ text-default: --color-cyan-600 🌙 text-default: --color-cyan-400 ☀️ text-hover: --border-focus ➔ --color-cyan-500 🌙 text-hover: --border-focus ➔ --color-cyan-400 ☀️ text-active (press): --color-cyan-700 🌙 text-active (press): --color-cyan-700
Token Route
☀️ bg-disabled: --bg-action-disabled ➔ --color-gray-200 🌙 bg-disabled: --bg-action-disabled ➔ --color-gray-700 ☀️ text-disabled: --text-disabled ➔ rgba(15, 23, 42, 0.38) 🌙 text-disabled: --text-disabled ➔ rgba(248, 250, 252, 0.38) ☀️ border: transparent

Inputs System

Hệ thống Input Fields đầy đủ các trạng thái tương tác từ phía người dùng.

Sử dụng ký tự chữ hoặc số.

Token Route
☀️ bg: --bg-canvas ➔ --color-gray-50 🌙 bg: --bg-canvas ➔ --color-gray-900 ☀️ border: --border-subtle ➔ --color-gray-200 🌙 border: --border-subtle ➔ --color-gray-700 ☀️ hover-brd: --border-strong ➔ --color-gray-400 🌙 hover-brd: --border-strong ➔ --color-gray-500 ☀️ label/hint: --text-secondary ➔ --color-gray-600 🌙 label/hint: --text-secondary ➔ --color-gray-300
Token Route
☀️ focus-brd: --border-focus ➔ --color-cyan-500 🌙 focus-brd: --border-focus ➔ --color-cyan-400 ☀️ focus-bg: --bg-surface ➔ --color-white 🌙 focus-bg: --bg-surface ➔ --color-gray-800 ☀️ text: --text-primary ➔ --color-gray-900 🌙 text: --text-primary ➔ --color-gray-50

✓ Đã áp dụng mã giảm giá thành công!

Token Route
☀️ bg: --status-success-bg ➔ --color-green-50 🌙 bg: --status-success-bg ➔ --color-green-900 ☀️ border: --status-success-border ➔ --color-green-200 🌙 border: --status-success-border ➔ --color-green-700 ☀️ text/hint: --status-success-text ➔ --color-green-700 🌙 text/hint: --status-success-text ➔ --color-green-300

⚠ Định dạng email không hợp lệ.

Token Route
☀️ bg: --status-danger-bg ➔ --color-red-50 🌙 bg: --status-danger-bg ➔ --color-red-950 ☀️ border: --status-danger-border ➔ --color-red-200 🌙 border: --status-danger-border ➔ --color-red-800 ☀️ text/hint: --status-danger-text ➔ --color-red-700 🌙 text/hint: --status-danger-text ➔ --color-red-300

Mã định danh không thể chỉnh sửa.

Token Route
☀️ bg: --bg-action-disabled ➔ --color-gray-200 🌙 bg: --bg-action-disabled ➔ --color-gray-700 ☀️ border: --border-disabled ➔ --color-gray-300 🌙 border: --border-disabled ➔ --color-gray-600 ☀️ text-disabled: --text-disabled ➔ rgba(15, 23, 42, 0.38) 🌙 text-disabled: --text-disabled ➔ rgba(248, 250, 252, 0.38)