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

Tangible AI search primitives for Quorix service pages

Bộ lớp mới trong 2.1.8 giúp dựng nhanh ô tìm kiếm, kết quả tóm tắt, danh sách nguồn và luồng chat follow-up mà vẫn giữ được visual language của Quorix UI.

Prepared demo result for package version 2.1.8

AI Overview

Presentation primitive only, ready to wire into any backend.

High confidence

Quorix UI 2.1.8 extends the toolkit beyond generic layout primitives by packaging article and search experiences that were already proven inside Quorix Vietnam.

For service pages, teams can now combine readable editorial layouts, metadata grids, fast result cards, source citations, and follow-up chat shells without introducing third-party UI dependencies.

Source

README package note

Documents the new article extensions and AI search/chat presentation primitives in v2.1.8.

docs + npm package metadata

Follow-up mode for a service-detail or article reading experience.

User

Neu toi viet bai gioi thieu dich vu Quorix UI, nen nhan manh diem moi nao cua 2.1.8?

AI assistant

Hay nhan manh 3 cum gia tri: article layouts de viet noi dung dai, metadata grid cho trang service/project, va AI search/chat surfaces de mo rong hanh trinh hoi dap ngay trong giao dien.

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.*