Tài liệu Master Visualization
WCAG 2.1 AA Oriented
Q

Quorix UI Showcase

Bản showcase cho Quorix UI 2.1.8: từ màu sắc, kiểu chữ, nút bấm, forms, tabs, modal cho đến article/media primitives và bề mặt AI search/chat đạt chuẩn accessibility quốc tế.

1. Foundation: Colors & Typography

Semantic Color Palette (WCAG AA)

#6D8EEB (Bg)

Blue Text (Cont: 4.5+)

#58A67A (Bg)

Green Text (Cont: 4.5+)

#E67A86 (Bg)

Red Text (Cont: 4.5+)

#D9A441 (Bg)

Yellow Text (Cont: 4.5+)

#5C544B

Text Muted (Cont: 4.63:1 - WCAG AA Pass ✅)

Typography System

Display Heading

Tech Heading (AWS Diatype)

Soft Heading (Nunito Fallback)

This is a standard body paragraph (Quicksand) demonstrating line height and readability on a surface. It looks good!

Upper Case Tech Note

Small UI note/hint.

const ui = "Fragment Mono"; // Code block

2. Primitives: Buttons & Cards

Buttons & States

✅ Đã kiểm tra: Trạng thái :active lún nút (scale 0.97) hoạt động tốt trên tất cả variants.

Badges & Spatial Concepts

Neutral Primary Success Error Pulsing Warning
Glass Card

Hòa trộn bằng color-mix, tự adapt Dark/Light mode.

Spatial Shadow

Đổ bóng có chiều sâu (Lg).

3. Forms: Advanced Fields

Cấu hình máy chủ mới (Server Ops)

Sẽ được dùng làm SSH hostname.
Bật chế độ Maintenance

4. Components & Interactive Core (JS)

Tabs Component (Declarative JS)

Tab Content 1

Hệ thống Tab hoạt động bằng data-qx-tab. Content panel đã được thêm hiệu ứng Fade-in chuẩn UX.

Modals (Focus Trap & A11y)

✅ Đã kiểm tra: Focus Trap (bẫy phím Tab) và trả Focus về nút cũ hoạt động mượt mà.

Toast Notifications (A11y polite/assertive)

Hệ thống thông báo Toast hoạt động bằng Imperative API Quorix.toast({...}).

Bảng dữ liệu máy chủ (Tables + Components)

Hostname / ID Trạng thái Tải (Load) Dịch vụ chính Hành động
SG
srv-sg-01
192.168.1.1
Running 75%
JP
srv-tokyo-backup
172.16.1.1
Offline 0%

Article Layout + Media Player

Content column is capped with --qx-readable-content-max, while the whole TOC + content cluster stays centered to avoid large empty gaps on wide screens.

AI Search + Chat Surfaces

5. Utilities & Spacing (Base 4px)

Spacing Tokens (metrics.css)

Hệ thống khoảng cách dựa trên lưới 4px. Token map 100% sang hệ semantic (sm, md, lg...).

qx-p-10 (40px)
--qx-space-xl (qx-ml-6 - 24px)

Flexbox & Grid helpers

Căn giữa (.qx-justify-center)
Grid 1
Grid 2
Grid 3

Tiêu chuẩn tiếp cận (Accessibility - A11y)

Dự án này tuân thủ các hướng dẫn của **WCAG 2.1 AA** thông qua việc bẫy con trỏ Modal bằng bàn phím, opt-in animation, màu sắc tương phản cao, và các vùng aria-live linh hoạt cho Trình đọc màn hình.

*Hạn chế đã biết: Bẫy con trỏ yêu cầu bật JavaScript.*