material-theme-builder 2.1.1 → 2.2.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 +19 -4
- package/dist/cli.js +784 -446
- package/dist/index.d.ts +78 -104
- package/dist/index.js +763 -566
- package/dist/react.d.ts +195 -0
- package/dist/react.js +4604 -0
- package/dist/tailwind.css +0 -2
- package/package.json +22 -4
- package/src/tailwind.css +0 -2
package/README.md
CHANGED
|
@@ -45,17 +45,28 @@ const theme = builder("#6750A4", {
|
|
|
45
45
|
theme.toFigmaTokens();
|
|
46
46
|
theme.toJson();
|
|
47
47
|
theme.toCss();
|
|
48
|
+
theme.toTailwind();
|
|
49
|
+
theme.toFlutter();
|
|
50
|
+
theme.toShadcn();
|
|
48
51
|
```
|
|
49
52
|
|
|
53
|
+
> [!NOTE]
|
|
54
|
+
>
|
|
55
|
+
> `builder` is server-safe. Only the React entry points (`Mcu`, `useMcu`,
|
|
56
|
+
> `ExportButton`) carry `"use client"`, so you can call it from a
|
|
57
|
+
> [React Server Component](https://react.dev/reference/rsc/server-components)
|
|
58
|
+
> — handy to emit `toCss()` into the document yourself rather than let `<Mcu>`
|
|
59
|
+
> do it on the client.
|
|
60
|
+
|
|
50
61
|
## CLI
|
|
51
62
|
|
|
52
63
|
```sh
|
|
53
|
-
$ npx material-theme-builder
|
|
64
|
+
$ npx material-theme-builder "#6750A4"
|
|
54
65
|
```
|
|
55
66
|
|
|
56
67
|
will generate a `material-theme` folder with: `Light.tokens.json` and `Dark.tokens.json` [design-tokens](https://www.designtokens.org/tr/2025.10/) files, you can (both) import into Figma.
|
|
57
68
|
|
|
58
|
-
See `npx material-theme-builder
|
|
69
|
+
See `npx material-theme-builder --help` for all available options.
|
|
59
70
|
|
|
60
71
|
## React
|
|
61
72
|
|
|
@@ -117,8 +128,6 @@ return (
|
|
|
117
128
|
Compatible through [theme variables](https://tailwindcss.com/docs/theme):
|
|
118
129
|
|
|
119
130
|
```css
|
|
120
|
-
@import "tailwindcss";
|
|
121
|
-
|
|
122
131
|
@theme inline {
|
|
123
132
|
--color-background: var(--md-sys-color-background);
|
|
124
133
|
--color-on-background: var(--md-sys-color-on-background);
|
|
@@ -450,6 +459,12 @@ Pre-requisites:
|
|
|
450
459
|
$ pnpm i
|
|
451
460
|
```
|
|
452
461
|
|
|
462
|
+
## Figma plugin
|
|
463
|
+
|
|
464
|
+
1. `pnpm run build-figma`
|
|
465
|
+
2. In Figma: Plugins → Development → Import plugin from manifest…
|
|
466
|
+
3. Select `figma-plugin/manifest.json`
|
|
467
|
+
|
|
453
468
|
## Validation
|
|
454
469
|
|
|
455
470
|
```sh
|