robr0-design-systemlisted
Install: claude install-skill robritacca-dotcom/design-system
# Using @robr0/design-system
Generated from the library's registries at version 0.15.0, alongside every deploy of https://robertritacca.com. The library is 122 React components across 11 categories, themed by 222 semantic design tokens, published to npm.
## Install
```bash
npm install @robr0/design-system
```
Import the token stylesheet once, then components from the barrel or by deep subpath:
```tsx
import '@robr0/design-system/tokens/tokens.css';
import { Button } from '@robr0/design-system';
import { Input } from '@robr0/design-system/components/Input/Input';
```
The package is ESM-only, resolved via exports subpaths: use a bundler that handles CSS and font imports from node_modules (Vite, Next.js, webpack) and set TypeScript's `moduleResolution` to `"bundler"` (or `"nodenext"`). Components are provider-free with one exception: wrap the tree in `ToastProvider` if (and only if) the toast queue is used via `useToast`.
## Dark mode
Set `data-theme="dark"` on the root element. Every semantic colour token has a light and a dark value; components never query `prefers-color-scheme` themselves.
## Theming
Components read semantic tokens (`--color-*`, `--radius-*`, `--font-*`, `--motion-*`, ...), and every semantic colour token references a `--primitive-*` value. Re-theme by overriding primitives: one override cascades through both themes at once. Never hardcode a colour beside the components; override the token it should come from. The full token reference lives at https