Foundations
Casso Design System
Trang này là bản bàn giao cho FE. Component viết bằng HTML và CSS thuần, không cần React, Vue hay Tailwind, nên dùng được với mọi stack.
- Color scheme
- Brand
- Density
- Radius
- Emphasis
- Type scale
Generated Styles, Hand-Written Behavior
Phần hình của component không gõ tay. CSS của từng component sinh ra từ contract đo trong file Figma.
Khi Figma đổi, chỉ cần sinh lại contract là CSS đổi theo. Nhờ vậy, component ở đây không lệch khỏi file thiết kế.
Phần hành vi viết tay trong file <name>.js, gồm dựng DOM, thuộc tính a11y (accessibility) và gắn sự kiện.
Components in This Version
| Folder | Figma Contract | Variant | Properties |
|---|---|---|---|
| button | Button/Main | 200 | Size × Level × State |
| button-flat | Button/Flat | 50 | Size × Level × State |
| button-icon-main | Button/Icon-Main | 240 | Size × Level × State |
| button-icon-flat | Button/Icon-Flat | 125 | Size × Level × State |
| input | Input/Text-Field | 36 | Size × State |
| top-navigation-master | Top-Navigation/Master/Medium | 4 | Size × Inverse |
| top-navigation | Top-Navigation/Sub/Medium | 12 | Size × Type × Inverse |
| checkbox | Checkbox/Mark | 45 | Size × Type × State × Select |
| radio | Radio-Button/Radio-Mark | 30 | Size × State × Select |
| chip | Chip/Normal | 108 | Size × Level × Leading × State × Select |
| date-picker | .Primitives/Date-Picker/Day-Cell | 42 | State × Selection |
Not Yet Included
| Item | Why |
|---|---|
| Toggle · Alert Banner · Inline Message | Đang hoàn thiện, chưa có trong bản này |
| Icon | Đã có 1.826 icon 24×24 đơn sắc, dùng currentColor. Xem Foundations / Iconography |
| Component nhiều logic | Date Picker ở đây chỉ là Day Cell (primitive). Phần hành vi do ứng dụng tự làm |
Next Version
- 01Table: đang phát triển, chưa có mẫu nào đạt. Trong lúc chờ, anh em cứ vibe trước theo luật ở Components / Extending.
Modes
Design system không đọc prefers-color-scheme mà đọc 6 Mode, đặt bằng thuộc tính trên thẻ <html>. Mode bar ở đầu trang có đủ 6 Mode, đổi Mode nào thì mọi mẫu trên trang đổi theo.
| Attribute | Mode | Values |
|---|---|---|
data-theme | Color scheme | light · dark |
data-brand | Brand | casso · cas-id |
data-density | Density | comfortable · compact |
data-radius | Radius | standard · rounded |
data-emphasis | Emphasis | brand · neutral |
data-type-scale | Type scale | base-14 · base-16 |
Color Token Tiers
Token màu tách thành bốn file theo đúng bốn tier trong Figma, để mỗi file đủ ngắn mà đọc được.
| File | Tier |
|---|---|
src/styles/color/1-global.css | Tier 1, thang màu gốc. Token riêng của hệ thống, dùng thẳng là mất theming. |
src/styles/color/2-base.css | Tier 2, bảng màu của brand. Mode data-brand (casso | cas-id). |
src/styles/color/3-semantic.css | Tier 3, màu theo vai trò. Mode data-theme (light | dark). Tier nên dùng. |
src/styles/color/4-component.css | Tier 4, màu riêng của component. Mode data-emphasis (brand | neutral). |
src/styles/dimension.css | Kích thước: spacing · corner-radius · size component · lưới breakpoint. |
src/styles/type.css | Biến chữ: font · cỡ · line-height · letter-spacing · độ đậm. |