# Casso Design System

> Component và token dùng chung cho các sản phẩm Casso. Component là HTML và CSS thuần, không gắn framework. Mọi trang ở https://brand.casso.vn/ds/ là HTML tĩnh, đọc được không cần chạy JavaScript.

Phiên bản: v0.2.0 (03/11/2026). Bản kế tiếp dự kiến có Table.

## Dùng ngay

- Hướng dẫn đầy đủ cho agent (cách nhúng, props và HTML mẫu từng component, danh sách token): https://brand.casso.vn/ds/llms-full.txt
- CSS (token, text style, shadow, component): https://brand.casso.vn/ds/casso-ds.css
- JS, ES module, hàm dựng component như `createButton`, `createInput`: https://brand.casso.vn/ds/casso-ds.js
- Icon, tên → SVG (JSON): https://brand.casso.vn/ds/icons.json
- Font: Be Vietnam Pro 400, 500, 600 (Google Fonts)

```html
<link rel="stylesheet" href="https://brand.casso.vn/ds/casso-ds.css">
<script type="module">
  import { createButton } from 'https://brand.casso.vn/ds/casso-ds.js';
  document.body.append(createButton({ label: 'Tiếp tục' }));
</script>
```

## Luật khi dựng giao diện

- Màu dùng token tier 3 (semantic) `--color-*`, chọn theo vai trò chứ không theo giá trị. Không dùng thẳng token tier 1 và tier 2 (`--_g-*`, `--_b-*`) vì sẽ mất theming. Tier 4 (`--button-*`…) là màu riêng của từng component.
- Chữ dùng class text style như `text-heading-1`, `text-body-base-regular`, `text-caption`. Spacing, radius và shadow cũng lấy từ token. Không gõ mã màu hay số px cứng.
- Class của component có tiền tố `c-` (ví dụ `c-button`, `c-input`). Component sản phẩm tự dựng dùng tiền tố riêng để không trùng tên.
- Button tự bắt hover, active, focus và disabled bằng CSS. Input, Checkbox, Radio và Chip cần `casso-ds.js` để cập nhật `data-state`, `data-select` khi người dùng thao tác. Prop `state` chỉ để chụp tài liệu, ứng dụng thật bỏ trống.
- Kiểm đủ 6 Mode, ít nhất light và dark, comfortable và compact, standard và rounded.
- Icon gọi bằng tên thật trên trang Iconography (dạng `icon-<tên>-line` / `icon-<tên>-solid`), không dùng alias.
- Chưa có Table, Toggle, Alert Banner, Inline Message. Date Picker mới có Day Cell (primitive), phần hành vi do ứng dụng tự làm.
- Tên component, property và Mode giữ tiếng Anh như trong file thiết kế.
- Dữ liệu trong ảnh Showcase là dữ liệu mẫu, không phải khách hàng thật.

Mã nguồn gốc nằm ở repo nội bộ. Bản phát hành ở trên (CSS, JS đã build, icon) dùng công khai được, import được từ tên miền khác.

## Theme

Design system đọc 6 thuộc tính trên thẻ <html>. Không đặt thuộc tính nào thì dùng bộ mặc định, là giá trị đầu tiên của mỗi Mode.

- data-theme: light | dark
- data-brand: casso | cas-id
- data-density: comfortable | compact
- data-radius: standard | rounded
- data-emphasis: brand | neutral
- data-type-scale: base-14 | base-16

Không dùng prefers-color-scheme. Đổi chế độ tối bằng data-theme.

## Chọn mode theo sản phẩm

- Casso, payOS, Casso Capital, Xinvoice, KySoQR: data-brand="casso"
- Quán X, Loa X: data-brand="casso" data-radius="rounded"
- Cas, Cas ID: data-brand="cas-id" (nút chính đen, chế độ tối lật thành nút trắng)

## Foundations

- Introduction, danh sách component và 6 Mode: https://brand.casso.vn/ds/index.html
- Theming: https://brand.casso.vn/ds/foundations-theming.html
- Colors: https://brand.casso.vn/ds/foundations-colors.html
- Typography: https://brand.casso.vn/ds/foundations-typography.html
- Spacing: https://brand.casso.vn/ds/foundations-spacing.html
- Radius: https://brand.casso.vn/ds/foundations-radius.html
- Elevation: https://brand.casso.vn/ds/foundations-elevation.html
- Iconography (1.826 icon, tra tên, tải SVG): https://brand.casso.vn/ds/foundations-iconography.html

## Components

Mỗi trang có bảng thuộc tính, rồi tới các mẫu theo từng property của contract.

- Button: https://brand.casso.vn/ds/components-button.html
- Button Flat: https://brand.casso.vn/ds/components-button-flat.html
- Button Icon-Flat: https://brand.casso.vn/ds/components-button-icon-flat.html
- Button Icon-Main: https://brand.casso.vn/ds/components-button-icon-main.html
- Checkbox: https://brand.casso.vn/ds/components-checkbox.html
- Chip: https://brand.casso.vn/ds/components-chip.html
- Date Picker: https://brand.casso.vn/ds/components-date-picker.html
- Input: https://brand.casso.vn/ds/components-input.html
- Radio: https://brand.casso.vn/ds/components-radio.html
- Top-Navigation: https://brand.casso.vn/ds/components-top-navigation.html
- Top-Navigation (Master): https://brand.casso.vn/ds/components-top-navigation-master.html
- Extending (component chưa có trong bộ: sản phẩm tự dựng theo luật nào, khi nào đưa về bộ chung. Table đang phát triển, dự kiến có ở bản kế tiếp; trong lúc chờ, sản phẩm tự dựng trước): https://brand.casso.vn/ds/components-extending.html

## Showcase

Các sản phẩm đang áp dụng Design System ở đúng phiên bản này, kèm màn mẫu. Dữ liệu trong ảnh là dữ liệu mẫu.

- Overview: https://brand.casso.vn/ds/showcase-tong-quan.html
- Casso Capital: https://brand.casso.vn/ds/showcase-casso-capital.html
- Quán X: https://brand.casso.vn/ds/showcase-quan-x.html
- Cas ID: https://brand.casso.vn/ds/showcase-cas-id.html

## Khác

- Danh sách mọi trang và mục con (JSON): https://brand.casso.vn/ds/index.json
- Màu, chữ, logo thương hiệu: https://brand.casso.vn/llms.txt