## Приклад компонента ```tsx export function ProductCard() { return (

Pro Plan

Best for growing teams.

); } ``` Компонент не знає hex-кольорів - лише токени. --- ## Dark Theme ```css :root { --color-background: #ffffff; --color-primary: #2563eb; } .dark { --color-background: #020617; --color-primary: #60a5fa; } ``` ```tsx

Content

``` Змінюється тема, не JSX. --- ## Навіщо Theme System 1. **Уніфікація** - один продуктовий вигляд. 2. **Швидкі зміни** - primary color в одному місці. 3. **Dark mode** - зміна variables, не дубль компонентів. 4. **Масштаб** - команда не вигадує свої кольори. 5. **Design system** - спільна мова: `primary`, `muted`, `radius-lg`. --- ## Типові помилки 1. **Випадкові значення** - `p-[19px]` замість `p-5`. 2. **Колір за виглядом** - `--color-blue` замість `--color-primary`. 3. **Занадто багато токенів** - проста шкала `--spacing` + `p-4`, `p-6`. --- ## Підсумок ```txt Theme System → фундамент UI Design tokens → іменовані значення CSS variables → runtime @theme (v4) → tokens + utilities --color-* → color utilities --font-* → font utilities --breakpoint-* → responsive variants --spacing → spacing scale ``` Тема робить код чистішим, дизайн стабільнішим, масштабування простішим.