matrix-design-system 1.0.0 → 1.1.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 +26 -10
- package/package.json +2 -1
package/README.md
CHANGED
|
@@ -17,11 +17,11 @@ would break.
|
|
|
17
17
|
Everything in the root barrel works with just those installed. Three groups need heavier libraries,
|
|
18
18
|
so they live behind their own entry points and you install a peer only if you import one:
|
|
19
19
|
|
|
20
|
-
| Import from
|
|
21
|
-
|
|
22
|
-
| `matrix-design-system/chart`
|
|
23
|
-
| `matrix-design-system/markdown`
|
|
24
|
-
| `matrix-design-system/command-palette` | `cmdk`
|
|
20
|
+
| Import from | Install | For |
|
|
21
|
+
| -------------------------------------- | ------------------------------------------------------ | ------------------------------------------ |
|
|
22
|
+
| `matrix-design-system/chart` | `recharts` | `ChartPanel`, `ChartTooltip`, `DonutChart` |
|
|
23
|
+
| `matrix-design-system/markdown` | `react-markdown`, `unified`, the remark/rehype plugins | `Markdown` |
|
|
24
|
+
| `matrix-design-system/command-palette` | `cmdk` | `CommandPalette` and its items |
|
|
25
25
|
|
|
26
26
|
Nothing else is optional: the rain effect is part of the design system's identity — `BrandHeader`
|
|
27
27
|
and the matrix backgrounds all render it — so `matrix-rain-webgpu` is a plain dependency and comes
|
|
@@ -50,12 +50,12 @@ components are near-invisible on white.
|
|
|
50
50
|
Style your own layout with Tailwind utilities — they resolve against this theme, so use its names
|
|
51
51
|
rather than stock Tailwind colours:
|
|
52
52
|
|
|
53
|
-
| Family
|
|
54
|
-
|
|
55
|
-
| Brand
|
|
53
|
+
| Family | Names |
|
|
54
|
+
| -------- | ---------------------------------------------------------------------------- |
|
|
55
|
+
| Brand | `primary` (#00FF41), `primary-dark`, `secondary`, `accent` (#39FF14) |
|
|
56
56
|
| Surfaces | `general-background` (#001100), `general-background-light`, `black`, `white` |
|
|
57
|
-
| Text
|
|
58
|
-
| Fonts
|
|
57
|
+
| Text | `primary-text` (#E8FFE8), `secondary-text`, `text-above-primary` |
|
|
58
|
+
| Fonts | `font-sans` → Open Sans · `font-mono` → Courier Prime |
|
|
59
59
|
|
|
60
60
|
**The breakpoint scale is overridden**: `xs` 576 · `sm` 768 · `md` 992 · `lg` 1200 · `xl` 1600 ·
|
|
61
61
|
`2xl` 2000 (px). So `md:` starts at 992px, not 768px — the most common way a layout built with this
|
|
@@ -93,3 +93,19 @@ custom properties, and the two global preferences (motion, glassmorphism variant
|
|
|
93
93
|
## License
|
|
94
94
|
|
|
95
95
|
MIT © Fabrizio Duroni
|
|
96
|
+
|
|
97
|
+
## Claude Design sync
|
|
98
|
+
|
|
99
|
+
`.design-sync/` and `.ds-sync/` in this folder are the [claude.ai/design](https://claude.ai/design)
|
|
100
|
+
converter. It reads the Storybook stories beside each component — there are no hand-authored
|
|
101
|
+
previews, so a story is the only place a component's example lives.
|
|
102
|
+
|
|
103
|
+
**Run `/design-sync` from a session rooted at this package, not at the repository root.** Every path
|
|
104
|
+
the converter uses is resolved from its working directory and it does no upward search, so a
|
|
105
|
+
root-level run fails with `[CONFIG] … ENOENT`. Rooting the session here also keeps the skill
|
|
106
|
+
consistent with itself, since it stages `.ds-sync/` relative to the session root.
|
|
107
|
+
|
|
108
|
+
The two folders must stay siblings: the fork in `.design-sync/overrides/` imports `../.ds-sync/lib/`,
|
|
109
|
+
and `.design-sync/node_modules` symlinks to `../.ds-sync/node_modules`.
|
|
110
|
+
|
|
111
|
+
`.design-sync/NOTES.md` has the full invocation and the re-sync watch-list.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "matrix-design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A Matrix-inspired React design system: green on near-black, terminal-flavoured, framework-agnostic.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -123,6 +123,7 @@
|
|
|
123
123
|
"@babel/core": "^7.28.5",
|
|
124
124
|
"@eslint/js": "^9",
|
|
125
125
|
"@rolldown/plugin-babel": "^0.2.3",
|
|
126
|
+
"@storybook/react-vite": "^10.5.10",
|
|
126
127
|
"@testing-library/dom": "^10.4.1",
|
|
127
128
|
"@testing-library/jest-dom": "^6.9.1",
|
|
128
129
|
"@testing-library/react": "^16.3.2",
|