material-theme-builder 4.0.0 → 5.0.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.
Files changed (4) hide show
  1. package/README.md +27 -40
  2. package/dist/tailwind-plugin.d.ts +13 -13
  3. package/package.json +1 -2
  4. package/dist/tailwind.css +0 -145
package/README.md CHANGED
@@ -153,19 +153,18 @@ return (
153
153
 
154
154
  ## Tailwind
155
155
 
156
- Compatible through [theme variables](https://tailwindcss.com/docs/theme) — a
157
- stylesheet for the standard tokens, and a plugin for the custom colors:
156
+ Compatible through [theme variables](https://tailwindcss.com/docs/theme) — one
157
+ plugin, one line:
158
158
 
159
159
  ```css
160
160
  @import "tailwindcss";
161
161
 
162
- @import "material-theme-builder/tailwind.css";
163
162
  @plugin "material-theme-builder/tailwind" {
164
163
  custom-colors: myCustomColor1, myCustomColor2;
165
164
  }
166
165
  ```
167
166
 
168
- Drop the `@plugin` line if you have no custom colors.
167
+ Drop the `custom-colors` block if you have none.
169
168
 
170
169
  <details>
171
170
 
@@ -193,27 +192,16 @@ Each name listed brings its four scheme roles and eleven shades —
193
192
  > of a nested `<Mtb>`.
194
193
 
195
194
  <details>
196
- <summary>The theme variables the stylesheet declares</summary>
195
+ <summary>The names it declares</summary>
197
196
 
198
- Generated from [`toTailwind()`](#programmatic-api), so the two cannot drift:
197
+ 115 standard ones — every M3 scheme token (`bg-surface-container-low`,
198
+ `text-on-primary`, `border-outline-variant`…), plus eleven Tailwind shades for
199
+ each of `primary`, `secondary`, `tertiary`, `error`, `neutral` and
200
+ `neutral-variant` (`bg-primary-300`). Then four roles and eleven shades per
201
+ custom color you name.
199
202
 
200
- ```css
201
- @theme inline {
202
- --color-background: var(--md-sys-color-background);
203
- --color-error: var(--md-sys-color-error);
204
- --color-error-container: var(--md-sys-color-error-container);
205
- --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
206
- --color-inverse-primary: var(--md-sys-color-inverse-primary);
207
- --color-inverse-surface: var(--md-sys-color-inverse-surface);
208
- --color-on-background: var(--md-sys-color-on-background);
209
- --color-on-error: var(--md-sys-color-on-error);
210
- /* ... */
211
- }
212
- ```
213
-
214
- 115 names in all — every M3 scheme token, plus eleven Tailwind shades for each
215
- of `primary`, `secondary`, `tertiary`, `error`, `neutral` and
216
- `neutral-variant`.
203
+ They are theme _defaults_, so an `@theme` block of your own wins over them
204
+ whatever the order. See [shadcn](#shadcn), where three names collide.
217
205
 
218
206
  </details>
219
207
 
@@ -233,9 +221,8 @@ In your
233
221
  @import "shadcn/tailwind.css";
234
222
 
235
223
  /* 👇🏻 ADD THIS 👇🏻 */
236
- @import "material-theme-builder/tailwind.css"; /* the M3 tw classNames (optional) */
237
224
  @import "material-theme-builder/shadcn.css"; /* shadcn's variables remapping on M3 */
238
- @plugin "material-theme-builder/tailwind" { /* your custom colors (optional) */
225
+ @plugin "material-theme-builder/tailwind" { /* the M3 tw classNames (optional) */
239
226
  custom-colors: myCustomColor1, myCustomColor2;
240
227
  }
241
228
  /* 👆🏻 ADD THIS 👆🏻 */
@@ -265,10 +252,10 @@ the M3 custom properties, so every shadcn component follows whichever `<Mtb>` is
265
252
  above it in the tree. It carries no colors of its own — mount an `<Mtb>`, or
266
253
  emit [`toCss()`](#programmatic-api) server-side, or nothing resolves.
267
254
 
268
- The other two are optional. They are the [Tailwind](#tailwind) recipe unchanged,
269
- and what they add is names to write yourself — `bg-surface-container-low`,
270
- `text-on-primary`, your custom colors. Drop them and every shadcn component
271
- still follows the theme.
255
+ The `@plugin` line is optional. It is the [Tailwind](#tailwind) recipe
256
+ unchanged, and what it adds is names to write yourself —
257
+ `bg-surface-container-low`, `text-on-primary`, your custom colors. Drop it and
258
+ every shadcn component still follows the theme.
272
259
 
273
260
  For the opposite trade — concrete `oklch()` values and no `var()` at all, frozen
274
261
  at build time — see [`toShadcn()`](#programmatic-api).
@@ -282,8 +269,9 @@ at build time — see [`toShadcn()`](#programmatic-api).
282
269
  > certainly do not need to care.
283
270
 
284
271
  Material and shadcn picked the same name for three things — `background`,
285
- `primary`, `secondary`. shadcn's `@theme inline` is the later of the two, so on
286
- those three it wins, and the utility goes through the mapping above:
272
+ `primary`, `secondary`. The plugin's colors are theme defaults, so on those
273
+ three shadcn's `@theme inline` wins, and the utility goes through the mapping
274
+ above:
287
275
 
288
276
  ```
289
277
  bg-secondary → --color-secondary → var(--secondary) → var(--md-sys-color-secondary-container)
@@ -506,18 +494,17 @@ $ pnpm run lgtm
506
494
  ## CONTRIBUTING
507
495
 
508
496
  ```bash
509
- pnpm run storybook # the day-to-day loop -- no build needed, the stylesheets regenerate as you edit
510
- pnpm run build # dist/, plus the generated stylesheets -- both gitignored
497
+ pnpm run storybook # the day-to-day loop -- no build needed, `shadcn.css` regenerates as you edit
498
+ pnpm run build # dist/, plus the generated files -- all gitignored
511
499
  pnpm run lgtm # everything CI checks
512
500
  ```
513
501
 
514
- `tailwind.css`, `shadcn.css` and `registry-item.json` are generated — from
515
- `toTailwind()`, `toShadcnAliases()` and `toShadcnRegistryItem()` — and
516
- gitignored. `pnpm run build` writes them (`scripts/generate.mjs`); the two
517
- stylesheets also get a `src/` copy, which is what Storybook `@import`s, and in
518
- Storybook a Vite plugin (`.storybook/main.ts`) rewrites those at server start
519
- and again on every edit under `src/lib/`, so the stories never show a stale
520
- vocabulary.
502
+ `shadcn.css` and `registry-item.json` are generated — from `toShadcnAliases()`
503
+ and `toShadcnRegistryItem()` — and gitignored. `pnpm run build` writes them
504
+ (`scripts/generate.mjs`); `shadcn.css` also gets a `src/` copy, which is what
505
+ Storybook `@import`s, and in Storybook a Vite plugin (`.storybook/main.ts`)
506
+ rewrites it at server start and again on every edit under `src/lib/`, so the
507
+ stories never show a stale vocabulary.
521
508
 
522
509
  `generate.mjs` builds the registry item without `{ fallback: true }`, which is
523
510
  what keeps every one of those outputs a function of the _mapping_ rather than of
package/dist/tailwind-plugin.d.ts CHANGED
@@ -38,8 +38,8 @@ declare function mtbColors({ customColors, prefix, }?: {
38
38
  prefix?: string;
39
39
  }): Record<string, string>;
40
40
  /**
41
- * Tailwind v4 plugin — the `@theme inline` block of
42
- * `material-theme-builder/tailwind.css`, minus the copy-paste.
41
+ * Tailwind v4 plugin — the whole M3 vocabulary as theme colors, from one line
42
+ * of CSS.
43
43
  *
44
44
  * ```css
45
45
  * @import "tailwindcss";
@@ -49,22 +49,22 @@ declare function mtbColors({ customColors, prefix, }?: {
49
49
  * ```
50
50
  *
51
51
  * Colors declared through a plugin's `theme` are inlined by Tailwind — the
52
- * utility resolves straight to `var(--md-sys-color-primary)` and no
53
- * `--color-*` indirection is emitted — which is what the stylesheet's
54
- * `@theme inline` was there to get. That indirection is not cosmetic: a
52
+ * utility resolves straight to `var(--md-sys-color-primary)`, with no
53
+ * `--color-*` in between. That indirection is not cosmetic: a
55
54
  * `--color-primary: var(--md-sys-color-primary)` declared on `:root` resolves
56
55
  * once, against `:root`, so a nested `<Mtb>` re-declaring the M3 properties
57
56
  * would not reach the utilities.
58
57
  *
59
- * Unlike the stylesheet, custom colors need no hand-written block: name them
60
- * in the options and their four scheme roles plus eleven shades come with them.
58
+ * Custom colors need no hand-written block either: name them in the options
59
+ * and their four scheme roles plus eleven shades come with them — which is
60
+ * what no shipped stylesheet, knowing nothing of your config, could do. That
61
+ * is why this replaced the `tailwind.css` the package used to ship.
61
62
  *
62
- * One thing the stylesheet does that this cannot: theme values a plugin
63
- * contributes are defaults, so an `@theme` block in the consumer's own CSS
64
- * wins over them whatever the order — where a later `@import` of the
65
- * stylesheet would have won. Only colliding names are affected, and against
66
- * shadcn there are exactly three (`background`, `primary`, `secondary`), which
67
- * a three-line `@theme inline` of one's own hands back. See the README.
63
+ * The one thing to know: theme values a plugin contributes are defaults, so an
64
+ * `@theme` block in the consumer's own CSS wins over them whatever the order.
65
+ * Only colliding names are affected, and against shadcn there are exactly
66
+ * three — `background`, `primary`, `secondary` — which `shadcn.css` points
67
+ * back at M3 anyway. See the README.
68
68
  *
69
69
  * @see https://tailwindcss.com/docs/functions-and-directives#plugin-directive
70
70
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "material-theme-builder",
3
- "version": "4.0.0",
3
+ "version": "5.0.0",
4
4
  "description": "m3 color-system for JS/TS ecosystem",
5
5
  "keywords": [
6
6
  "react",
@@ -21,7 +21,6 @@
21
21
  "import": "./dist/tailwind-plugin.js",
22
22
  "default": "./dist/tailwind-plugin.js"
23
23
  },
24
- "./tailwind.css": "./dist/tailwind.css",
25
24
  "./shadcn.css": "./dist/shadcn.css",
26
25
  "./registry-item.json": "./dist/registry-item.json"
27
26
  },
package/dist/tailwind.css DELETED
@@ -1,145 +0,0 @@
1
- /*
2
- * Generated by `scripts/generate.mjs` -- do not edit.
3
- *
4
- * Custom colors are not in here: they depend on your config, so they come from
5
- * the plugin instead.
6
- *
7
- * @plugin "material-theme-builder/tailwind" {
8
- * custom-colors: myCustomColor1, myCustomColor2;
9
- * }
10
- */
11
- @theme inline {
12
- --color-background: var(--md-sys-color-background);
13
- --color-error: var(--md-sys-color-error);
14
- --color-error-container: var(--md-sys-color-error-container);
15
- --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
16
- --color-inverse-primary: var(--md-sys-color-inverse-primary);
17
- --color-inverse-surface: var(--md-sys-color-inverse-surface);
18
- --color-on-background: var(--md-sys-color-on-background);
19
- --color-on-error: var(--md-sys-color-on-error);
20
- --color-on-error-container: var(--md-sys-color-on-error-container);
21
- --color-on-primary: var(--md-sys-color-on-primary);
22
- --color-on-primary-container: var(--md-sys-color-on-primary-container);
23
- --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
24
- --color-on-primary-fixed-variant: var(
25
- --md-sys-color-on-primary-fixed-variant
26
- );
27
- --color-on-secondary: var(--md-sys-color-on-secondary);
28
- --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
29
- --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
30
- --color-on-secondary-fixed-variant: var(
31
- --md-sys-color-on-secondary-fixed-variant
32
- );
33
- --color-on-surface: var(--md-sys-color-on-surface);
34
- --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
35
- --color-on-tertiary: var(--md-sys-color-on-tertiary);
36
- --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
37
- --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
38
- --color-on-tertiary-fixed-variant: var(
39
- --md-sys-color-on-tertiary-fixed-variant
40
- );
41
- --color-outline: var(--md-sys-color-outline);
42
- --color-outline-variant: var(--md-sys-color-outline-variant);
43
- --color-primary: var(--md-sys-color-primary);
44
- --color-primary-container: var(--md-sys-color-primary-container);
45
- --color-primary-fixed: var(--md-sys-color-primary-fixed);
46
- --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
47
- --color-scrim: var(--md-sys-color-scrim);
48
- --color-secondary: var(--md-sys-color-secondary);
49
- --color-secondary-container: var(--md-sys-color-secondary-container);
50
- --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
51
- --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
52
- --color-shadow: var(--md-sys-color-shadow);
53
- --color-surface: var(--md-sys-color-surface);
54
- --color-surface-bright: var(--md-sys-color-surface-bright);
55
- --color-surface-container: var(--md-sys-color-surface-container);
56
- --color-surface-container-high: var(--md-sys-color-surface-container-high);
57
- --color-surface-container-highest: var(
58
- --md-sys-color-surface-container-highest
59
- );
60
- --color-surface-container-low: var(--md-sys-color-surface-container-low);
61
- --color-surface-container-lowest: var(
62
- --md-sys-color-surface-container-lowest
63
- );
64
- --color-surface-dim: var(--md-sys-color-surface-dim);
65
- --color-surface-tint: var(--md-sys-color-surface-tint);
66
- --color-surface-variant: var(--md-sys-color-surface-variant);
67
- --color-tertiary: var(--md-sys-color-tertiary);
68
- --color-tertiary-container: var(--md-sys-color-tertiary-container);
69
- --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
70
- --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
71
-
72
- /* Shades */
73
-
74
- --color-primary-50: var(--md-ref-palette-primary-95);
75
- --color-primary-100: var(--md-ref-palette-primary-90);
76
- --color-primary-200: var(--md-ref-palette-primary-80);
77
- --color-primary-300: var(--md-ref-palette-primary-70);
78
- --color-primary-400: var(--md-ref-palette-primary-60);
79
- --color-primary-500: var(--md-ref-palette-primary-50);
80
- --color-primary-600: var(--md-ref-palette-primary-40);
81
- --color-primary-700: var(--md-ref-palette-primary-30);
82
- --color-primary-800: var(--md-ref-palette-primary-20);
83
- --color-primary-900: var(--md-ref-palette-primary-10);
84
- --color-primary-950: var(--md-ref-palette-primary-5);
85
-
86
- --color-secondary-50: var(--md-ref-palette-secondary-95);
87
- --color-secondary-100: var(--md-ref-palette-secondary-90);
88
- --color-secondary-200: var(--md-ref-palette-secondary-80);
89
- --color-secondary-300: var(--md-ref-palette-secondary-70);
90
- --color-secondary-400: var(--md-ref-palette-secondary-60);
91
- --color-secondary-500: var(--md-ref-palette-secondary-50);
92
- --color-secondary-600: var(--md-ref-palette-secondary-40);
93
- --color-secondary-700: var(--md-ref-palette-secondary-30);
94
- --color-secondary-800: var(--md-ref-palette-secondary-20);
95
- --color-secondary-900: var(--md-ref-palette-secondary-10);
96
- --color-secondary-950: var(--md-ref-palette-secondary-5);
97
-
98
- --color-tertiary-50: var(--md-ref-palette-tertiary-95);
99
- --color-tertiary-100: var(--md-ref-palette-tertiary-90);
100
- --color-tertiary-200: var(--md-ref-palette-tertiary-80);
101
- --color-tertiary-300: var(--md-ref-palette-tertiary-70);
102
- --color-tertiary-400: var(--md-ref-palette-tertiary-60);
103
- --color-tertiary-500: var(--md-ref-palette-tertiary-50);
104
- --color-tertiary-600: var(--md-ref-palette-tertiary-40);
105
- --color-tertiary-700: var(--md-ref-palette-tertiary-30);
106
- --color-tertiary-800: var(--md-ref-palette-tertiary-20);
107
- --color-tertiary-900: var(--md-ref-palette-tertiary-10);
108
- --color-tertiary-950: var(--md-ref-palette-tertiary-5);
109
-
110
- --color-error-50: var(--md-ref-palette-error-95);
111
- --color-error-100: var(--md-ref-palette-error-90);
112
- --color-error-200: var(--md-ref-palette-error-80);
113
- --color-error-300: var(--md-ref-palette-error-70);
114
- --color-error-400: var(--md-ref-palette-error-60);
115
- --color-error-500: var(--md-ref-palette-error-50);
116
- --color-error-600: var(--md-ref-palette-error-40);
117
- --color-error-700: var(--md-ref-palette-error-30);
118
- --color-error-800: var(--md-ref-palette-error-20);
119
- --color-error-900: var(--md-ref-palette-error-10);
120
- --color-error-950: var(--md-ref-palette-error-5);
121
-
122
- --color-neutral-50: var(--md-ref-palette-neutral-95);
123
- --color-neutral-100: var(--md-ref-palette-neutral-90);
124
- --color-neutral-200: var(--md-ref-palette-neutral-80);
125
- --color-neutral-300: var(--md-ref-palette-neutral-70);
126
- --color-neutral-400: var(--md-ref-palette-neutral-60);
127
- --color-neutral-500: var(--md-ref-palette-neutral-50);
128
- --color-neutral-600: var(--md-ref-palette-neutral-40);
129
- --color-neutral-700: var(--md-ref-palette-neutral-30);
130
- --color-neutral-800: var(--md-ref-palette-neutral-20);
131
- --color-neutral-900: var(--md-ref-palette-neutral-10);
132
- --color-neutral-950: var(--md-ref-palette-neutral-5);
133
-
134
- --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
135
- --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
136
- --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
137
- --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
138
- --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
139
- --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
140
- --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
141
- --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
142
- --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
143
- --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
144
- --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
145
- }