what's new
lịch sử thay đổi của 1thay design system. mỗi phiên bản ghi lại những thay đổi quan trọng — component mới, token thay đổi, và cải tiến hệ thống.
tái cấu trúc toàn diện — 3-layer tokens, dark mode, floorplans
design tokens
- tái cấu trúc tokens thành 3 lớp: reference → semantic → component
- thêm dark mode qua
data-theme="dark"— surface, text, border, shadow - đổi icon box sizing: 20/24/32/40px, phân vai lucide (nav/feature) vs carbon (data/action/status)
components
- thêm BrandSwitch component — dropdown 4 chế độ: blue → red → dark → light
- thêm maturity badge (sẵn sàng/beta) vào MDX docs
- MDX docs cho 7 core components với @storybook/addon-docs
- storybook sidebar: STORY + COMPONENTS (47 components, danh sách phẳng)
patterns & docs
- thêm 5 floorplan page templates: list, detail, dashboard, settings, empty/error
- trang content design guidelines: voice & tone, quy tắc viết, từ vựng chuẩn
- trang foundations/colors mở rộng: 3-layer, dark mode, brand switching
- xoá foundations/guidelines/patterns khỏi storybook → dẫn link về 1thay.com
kỹ thuật
- fix 62 lỗi TypeScript (astro check) → 0 lỗi
- CI bump Node 20 → 24
- source block hiển thị multi-format code: React + Astro + HTML
- dogfooding icons: thay toàn bộ emoji/unicode bằng lucide icons
- fix redirect loop trên cả 2 domain
khởi tạo — 46 components, 118 tokens, code-first workflow
nền tảng
- 46 react components trong 6 nhóm (core, form, nav, data, overlay, utility)
- 118 css custom properties trong tokens.css — single source of truth
- 2 brand: reputa-blue (#064BAE) + reputa-premier (#A10B2E)
- 4 font families: Hanken Grotesk, Inter, Merriweather, Space Grotesk
docs & tools
- 32 astro pages: foundations (5), patterns (12), guidelines (15)
- storybook 10 với react-vite, addons (links, a11y, docs, figma)
- 41 unit tests (vitest)
- chromatic visual regression setup
- cloudflare pages deploy cho 1thay.com + design.1thay.com
xem chi tiết từng quyết định trong project logs.