Sunny Design System

This project provides a basic design system (DS) for fast and consistent UI development in React, built on top of Vite for lightning-fast tooling.

What's included?

• src/components/ – Reusable DS components (Button, Card, Loader, Badge, Toast)
• src/tokens/ – Centrally managed design tokens (color palette, spacing, border radius, typography, etc.)

How it works

• Components automatically use design tokens implemented as CSS custom properties (change values in tokens.json and re-generate CSS)
• Easily use tokens in both CSS and JS/TS (via the getToken utility)

Example usage – Button

import Button from './src/components/Button/Button';
<Button label="Click me" variant="primary" size="default" />

Example usage – Design tokens in CSS

.button {
  background: var(--colors-semantic-primary-default);
  border-radius: var(--borderRadius-md);
  padding: var(--spacing-md);
}

Generating styles from tokens

Every time you edit src/tokens/tokens.json, run (or use prepared npm script):

npm run tokens:generate

This automatically refreshes the CSS variables file.

Component development & extension

• To add your own DS element, create a folder in src/components/
• Always make use of tokens and keep prop signatures clean
• Prefer CSS keyframes for custom animation (see Loader as example)

Demo components

• Card – used for grouping related content
• Loader – playful animated three-dot loader in CSS
• Badge – semantic color label

For full design tokens details and usage tips, see src/tokens/README.md.