@fabio.caffarello/react-design-system 1.14.2 → 1.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -8
- package/dist/index.cjs +688 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +17061 -392
- package/dist/index.js.map +1 -1
- package/dist/react-design-system.css +1 -1
- package/dist/styles/index.cjs +2 -0
- package/dist/styles/index.js +2 -0
- package/dist/{components → styles}/index.js.map +1 -1
- package/dist/ui/styles-entry.d.ts +1 -0
- package/package.json +2 -22
- package/dist/components/index.cjs +0 -2
- package/dist/components/index.js +0 -158
- package/dist/components-B08xLmiA.cjs +0 -689
- package/dist/components-B08xLmiA.cjs.map +0 -1
- package/dist/components-DEuqI-ld.js +0 -12572
- package/dist/components-DEuqI-ld.js.map +0 -1
- package/dist/primitives/index.cjs +0 -2
- package/dist/primitives/index.cjs.map +0 -1
- package/dist/primitives/index.js +0 -2874
- package/dist/primitives/index.js.map +0 -1
- package/dist/providers/index.cjs +0 -2
- package/dist/providers/index.cjs.map +0 -1
- package/dist/providers/index.js +0 -19
- package/dist/providers/index.js.map +0 -1
- package/dist/tokens/index.cjs +0 -2
- package/dist/tokens/index.cjs.map +0 -1
- package/dist/tokens/index.js +0 -1606
- package/dist/tokens/index.js.map +0 -1
- /package/dist/{components → styles}/index.cjs.map +0 -0
package/README.md
CHANGED
|
@@ -2,11 +2,78 @@
|
|
|
2
2
|
|
|
3
3
|
Mono-brand React design system. Single source of UI truth for my projects, maintained mainly through Claude Code prompts.
|
|
4
4
|
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @fabio.caffarello/react-design-system
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
`react@19` and `react-dom@19` are peer dependencies.
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
Import components and the bundled stylesheet. No Tailwind setup required in your project — the DS ships the full token cascade (tokens, dark mode, theme variants) in one CSS file.
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import { Button, Card, Form } from "@fabio.caffarello/react-design-system";
|
|
19
|
+
import "@fabio.caffarello/react-design-system/styles";
|
|
20
|
+
|
|
21
|
+
export default function App() {
|
|
22
|
+
return (
|
|
23
|
+
<div className="bg-surface-canvas text-fg-primary">
|
|
24
|
+
<Button variant="primary">Hello</Button>
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Use `bg-surface-canvas` / `text-fg-primary` (or any other DS semantic class) on your page wrapper so the surface follows the active theme — hardcoding `background: #fff` will look broken on a dark-mode machine.
|
|
31
|
+
|
|
32
|
+
## Theming
|
|
33
|
+
|
|
34
|
+
The DS follows the user's OS color scheme preference automatically via the `prefers-color-scheme` media query. A consumer in a dark-mode environment sees the dark variant of every token without any setup in the app.
|
|
35
|
+
|
|
36
|
+
### Override the theme
|
|
37
|
+
|
|
38
|
+
Force light or dark regardless of OS preference by setting the attribute or class on `<html>`:
|
|
39
|
+
|
|
40
|
+
```html
|
|
41
|
+
<html data-theme="light">
|
|
42
|
+
...
|
|
43
|
+
</html>
|
|
44
|
+
<!-- or -->
|
|
45
|
+
<html data-theme="dark">
|
|
46
|
+
...
|
|
47
|
+
</html>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
Class-based opt-in works too:
|
|
51
|
+
|
|
52
|
+
```html
|
|
53
|
+
<html class="light">
|
|
54
|
+
...
|
|
55
|
+
</html>
|
|
56
|
+
<html class="dark">
|
|
57
|
+
...
|
|
58
|
+
</html>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Theme variants
|
|
62
|
+
|
|
63
|
+
Beyond light/dark, the DS ships three style variants — `creative`, `minimal`, `tech`. Apply via `data-variant` attribute or `variant-<name>` class. Variants compose with the light/dark mode, so a `creative` variant in dark mode is its own coherent surface.
|
|
64
|
+
|
|
65
|
+
```html
|
|
66
|
+
<html data-variant="creative">
|
|
67
|
+
...
|
|
68
|
+
</html>
|
|
69
|
+
```
|
|
70
|
+
|
|
5
71
|
## Stack
|
|
6
72
|
|
|
7
73
|
- React 19 + TypeScript 5 (strict)
|
|
8
|
-
- Vite (build)
|
|
9
|
-
-
|
|
74
|
+
- Vite (build) via `@tailwindcss/vite` plugin
|
|
75
|
+
- Vitest + Testing Library (test)
|
|
76
|
+
- TailwindCSS v4 — CSS-first config via `@theme` in `src/styles/`
|
|
10
77
|
- Storybook (docs)
|
|
11
78
|
- Plop (scaffolding)
|
|
12
79
|
|
|
@@ -56,12 +123,10 @@ npm run plop # scaffold a new component
|
|
|
56
123
|
|
|
57
124
|
Consumers can import from:
|
|
58
125
|
|
|
59
|
-
- `@fabio.caffarello/react-design-system` —
|
|
60
|
-
- `@fabio.caffarello/react-design-system/
|
|
61
|
-
|
|
62
|
-
-
|
|
63
|
-
- `@fabio.caffarello/react-design-system/providers`
|
|
64
|
-
- `@fabio.caffarello/react-design-system/styles` — the CSS bundle
|
|
126
|
+
- `@fabio.caffarello/react-design-system` — all components, providers, hooks, tokens
|
|
127
|
+
- `@fabio.caffarello/react-design-system/styles` — the bundled CSS
|
|
128
|
+
|
|
129
|
+
Sub-entries (`/primitives`, `/components`, `/tokens`, `/providers`) were removed in Phase 13d — they had been silently broken for external consumers since v1.0.0 because cross-chunk references to `cva` and other shared utilities failed at runtime. A single entry collapses the cross-chunk class of bug structurally; tree-shaking still works at the named-export level via any modern bundler.
|
|
65
130
|
|
|
66
131
|
## Working with Claude Code
|
|
67
132
|
|