storybook

token usage

trang này đang được xây dựng — nội dung chưa hoàn thiện

design tokens là single source of truth. dùng chúng nhất quán. không bao giờ hardcode giá trị.

CSS custom properties

tokens có sẵn toàn cục qua src/tokens/tokens.css.

background: var(--btn-primary-bg);
color: var(--text-inverse);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
font: var(--text-ui);

ví dụ trực tiếp

card title
xây dựng hoàn toàn từ tokens
action cancel

JavaScript access

import { colors, typography, spacing } from './tokens';
export const theme = {
  colorPrimary: colors['reputa-blue'][600],
  appBg: colors.neutral[0],
};

chuyển đổi brand

chuyển brand với data-brand="reputa-premier".

reputa-blue (mặc định)

reputa-premier

lỗi thường gặp

đừng hardcode hex

#064BAE dùng var(--color-brand-600)

đừng dùng raw neutrals cho surfaces

var(--color-neutral-0) dùng var(--surface-bg)

đừng dùng sai tên token

var(--border-radius-lg) dùng var(--radius-lg)

đừng trộn pixel values với tokens

padding: 20px 16px; dùng padding: var(--space-lg) var(--space-md);