material-theme-builder 3.3.0 → 5.0.0

package/dist/react.js

@@ -3988,8 +3988,8 @@ function buildShadcnAliases(ctx) {
   const lines = Object.entries(toShadcnAliasVars(ctx.prefix)).map(
     ([name, value]) => `--${name}: ${value};`
   );
-  return `:root,
-.dark {
+  return `:root:root,
+.dark.dark {
   ${lines.join("\n  ")}
 }
 `;
@@ -4166,6 +4166,9 @@ function assertHexInputs(source, cores, customColors) {
     (color, i) => assertHexColor(`customColors[${i}].hex`, color.hex)
   );
 }
+function optionalHex(hex) {
+  return hex?.trim() || void 0;
+}
 var STANDARD_TONES = [
   0,
   4,
@@ -4334,16 +4337,20 @@ function builder(hexSource, {
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
-  assertHexInputs(
-    hexSource,
-    { primary, secondary, tertiary, error, neutral, neutralVariant },
-    hexCustomColors
-  );
+  const cores = {
+    primary: optionalHex(primary),
+    secondary: optionalHex(secondary),
+    tertiary: optionalHex(tertiary),
+    error: optionalHex(error),
+    neutral: optionalHex(neutral),
+    neutralVariant: optionalHex(neutralVariant)
+  };
+  assertHexInputs(hexSource, cores, hexCustomColors);
   const sourceArgb = argbFromHex2(hexSource);
   const sourceHct = Hct2.fromInt(sourceArgb);
-  const effectiveSource = primary || hexSource;
+  const effectiveSource = cores.primary || hexSource;
   const effectiveSourceArgb = argbFromHex2(effectiveSource);
-  const effectiveSourceForHarmonization = primary ? argbFromHex2(primary) : sourceArgb;
+  const effectiveSourceForHarmonization = cores.primary ? argbFromHex2(cores.primary) : sourceArgb;
   const SchemeClass = schemesMap[scheme];
   const primaryHct = Hct2.fromInt(effectiveSourceArgb);
   const baseScheme = new SchemeClass(primaryHct, false, contrast);
@@ -4351,32 +4358,32 @@ function builder(hexSource, {
     // Core colors (hex may be undefined)
     {
       name: "primary",
-      hex: primary,
+      hex: cores.primary,
       core: true,
       chromaSource: "primary"
     },
     {
       name: "secondary",
-      hex: secondary,
+      hex: cores.secondary,
       core: true,
       chromaSource: "primary"
     },
     {
       name: "tertiary",
-      hex: tertiary,
+      hex: cores.tertiary,
       core: true,
       chromaSource: "primary"
     },
-    { name: "error", hex: error, core: true, chromaSource: "primary" },
+    { name: "error", hex: cores.error, core: true, chromaSource: "primary" },
     {
       name: "neutral",
-      hex: neutral,
+      hex: cores.neutral,
       core: true,
       chromaSource: "neutral"
     },
     {
       name: "neutralVariant",
-      hex: neutralVariant,
+      hex: cores.neutralVariant,
       core: true,
       chromaSource: "neutralVariant"
     },
@@ -4492,7 +4499,7 @@ function builder(hexSource, {
 }
 
 // src/ExportButton.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function ExportButton({ config }) {
   const handleExport = () => {
     try {
@@ -4526,24 +4533,16 @@ function ExportButton({ config }) {
       onClick: handleExport,
       title: "Export Figma Tokens",
       "aria-label": "Export Figma Tokens",
-      className: "fixed z-50 bottom-6 right-6",
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx2(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
           width: "24",
           height: "24",
           viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-            /* @__PURE__ */ jsx2("polyline", { points: "7 10 12 15 17 10" }),
-            /* @__PURE__ */ jsx2("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
-          ]
+          fill: "currentColor",
+          "aria-hidden": true,
+          children: /* @__PURE__ */ jsx2("path", { d: "M8 24a4 4 0 0 1-4-4 4 4 0 0 1 4-4h4v4a4 4 0 0 1-4 4Zm0-6.5A2.5 2.5 0 0 0 5.5 20 2.5 2.5 0 0 0 8 22.5 2.5 2.5 0 0 0 10.5 20v-2.5H8ZM8 16a4 4 0 0 1-4-4 4 4 0 0 1 4-4h4v8H8Zm0-6.5A2.5 2.5 0 0 0 5.5 12 2.5 2.5 0 0 0 8 14.5h2.5v-5H8ZM8 8a4 4 0 0 1-4-4 4 4 0 0 1 4-4h4v8H8Zm0-6.5A2.5 2.5 0 0 0 5.5 4 2.5 2.5 0 0 0 8 6.5h2.5v-5H8Zm8 6.5h-4V0h4a4 4 0 0 1 4 4 4 4 0 0 1-4 4Zm-2.5-1.5H16A2.5 2.5 0 0 0 18.5 4 2.5 2.5 0 0 0 16 1.5h-2.5v5ZM16 16a4 4 0 0 1-4-4 4 4 0 0 1 4-4 4 4 0 0 1 4 4 4 4 0 0 1-4 4Zm0-6.5a2.5 2.5 0 0 0-2.5 2.5 2.5 2.5 0 0 0 2.5 2.5 2.5 2.5 0 0 0 2.5-2.5A2.5 2.5 0 0 0 16 9.5Z" })
         }
       )
     }
@@ -4574,7 +4573,7 @@ var createRequiredContext = () => {
 };
 
 // src/Mtb.context.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var [useMtb, Provider, MtbContext] = createRequiredContext();
 var MtbProvider = ({
   styleId: styleId2,
@@ -4640,7 +4639,7 @@ var MtbProvider = ({
       figmaVariables
     ]
   );
-  return /* @__PURE__ */ jsxs2(Provider, { value, children: [
+  return /* @__PURE__ */ jsxs(Provider, { value, children: [
     /* @__PURE__ */ jsx3("style", { id: styleId2, dangerouslySetInnerHTML: { __html: css } }),
     children
   ] });

package/dist/shadcn.css

@@ -2,13 +2,13 @@
  * Generated by `scripts/generate.mjs` -- do not edit.
  *
  * Points shadcn's variables at the M3 custom properties `<Mtb>` emits, so
- * shadcn components follow the theme above them in the tree. Import it after
- * shadcn's own `:root` and `.dark` blocks, which it has to override -- or
- * skip the ordering question entirely and install `registry-item.json` with
- * `shadcn add`, which writes the same mapping into those blocks in place.
+ * shadcn components follow the theme above them in the tree. Import it with
+ * your other imports: the selectors are doubled, so it outranks shadcn's own
+ * `:root` and `.dark` wherever it lands. Or install `registry-item.json`
+ * with `shadcn add`, which writes the same mapping into those blocks.
  */
-:root,
-.dark {
+:root:root,
+.dark.dark {
   --background: var(--md-sys-color-surface);
   --foreground: var(--md-sys-color-on-surface);
   --card: var(--md-sys-color-surface-container-low);

package/dist/tailwind-plugin.d.ts

@@ -38,8 +38,8 @@ declare function mtbColors({ customColors, prefix, }?: {
     prefix?: string;
 }): Record<string, string>;
 /**
- * Tailwind v4 plugin — the `@theme inline` block of
- * `material-theme-builder/tailwind.css`, minus the copy-paste.
+ * Tailwind v4 plugin — the whole M3 vocabulary as theme colors, from one line
+ * of CSS.
  *
  * ```css
  * @import "tailwindcss";
@@ -49,22 +49,22 @@ declare function mtbColors({ customColors, prefix, }?: {
  * ```
  *
  * Colors declared through a plugin's `theme` are inlined by Tailwind — the
- * utility resolves straight to `var(--md-sys-color-primary)` and no
- * `--color-*` indirection is emitted — which is what the stylesheet's
- * `@theme inline` was there to get. That indirection is not cosmetic: a
+ * utility resolves straight to `var(--md-sys-color-primary)`, with no
+ * `--color-*` in between. That indirection is not cosmetic: a
  * `--color-primary: var(--md-sys-color-primary)` declared on `:root` resolves
  * once, against `:root`, so a nested `<Mtb>` re-declaring the M3 properties
  * would not reach the utilities.
  *
- * Unlike the stylesheet, custom colors need no hand-written block: name them
- * in the options and their four scheme roles plus eleven shades come with them.
+ * Custom colors need no hand-written block either: name them in the options
+ * and their four scheme roles plus eleven shades come with them — which is
+ * what no shipped stylesheet, knowing nothing of your config, could do. That
+ * is why this replaced the `tailwind.css` the package used to ship.
  *
- * One thing the stylesheet does that this cannot: theme values a plugin
- * contributes are defaults, so an `@theme` block in the consumer's own CSS
- * wins over them whatever the order — where a later `@import` of the
- * stylesheet would have won. Only colliding names are affected, and against
- * shadcn there are exactly three (`background`, `primary`, `secondary`), which
- * a three-line `@theme inline` of one's own hands back. See the README.
+ * The one thing to know: theme values a plugin contributes are defaults, so an
+ * `@theme` block in the consumer's own CSS wins over them whatever the order.
+ * Only colliding names are affected, and against shadcn there are exactly
+ * three — `background`, `primary`, `secondary` — which `shadcn.css` points
+ * back at M3 anyway. See the README.
  *
  * @see https://tailwindcss.com/docs/functions-and-directives#plugin-directive
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-theme-builder",
-  "version": "3.3.0",
+  "version": "5.0.0",
   "description": "m3 color-system for JS/TS ecosystem",
   "keywords": [
     "react",
@@ -21,7 +21,6 @@
       "import": "./dist/tailwind-plugin.js",
       "default": "./dist/tailwind-plugin.js"
     },
-    "./tailwind.css": "./dist/tailwind.css",
     "./shadcn.css": "./dist/shadcn.css",
     "./registry-item.json": "./dist/registry-item.json"
   },
@@ -56,6 +55,7 @@
     "@fontsource-variable/inter": "^5.3.0",
     "@storybook/addon-docs": "^10.1.11",
     "@storybook/addon-themes": "^10.1.11",
+    "@storybook/icons": "^2.1.0",
     "@storybook/react-vite": "^10.1.11",
     "@tailwindcss/postcss": "^4.1.18",
     "@tanstack/react-table": "^9.1.2",
@@ -141,6 +141,7 @@
     "build-storybook": "pnpm run build && storybook build",
     "build-figma": "vite build --config figma-plugin/vite.config.ts && tsup --config figma-plugin/tsup.config.ts",
     "chromatic": "chromatic --project-token $CHROMATIC_PROJECT_TOKEN",
-    "changeset": "pnpm exec changeset"
+    "changeset": "pnpm exec changeset",
+    "dev": "pnpm run storybook"
   }
 }

package/dist/tailwind.css

@@ -1,145 +0,0 @@
-/*
- * Generated by `scripts/generate.mjs` -- do not edit.
- *
- * Custom colors are not in here: they depend on your config, so they come from
- * the plugin instead.
- *
- *   @plugin "material-theme-builder/tailwind" {
- *     custom-colors: myCustomColor1, myCustomColor2;
- *   }
- */
-@theme inline {
-  --color-background: var(--md-sys-color-background);
-  --color-error: var(--md-sys-color-error);
-  --color-error-container: var(--md-sys-color-error-container);
-  --color-inverse-on-surface: var(--md-sys-color-inverse-on-surface);
-  --color-inverse-primary: var(--md-sys-color-inverse-primary);
-  --color-inverse-surface: var(--md-sys-color-inverse-surface);
-  --color-on-background: var(--md-sys-color-on-background);
-  --color-on-error: var(--md-sys-color-on-error);
-  --color-on-error-container: var(--md-sys-color-on-error-container);
-  --color-on-primary: var(--md-sys-color-on-primary);
-  --color-on-primary-container: var(--md-sys-color-on-primary-container);
-  --color-on-primary-fixed: var(--md-sys-color-on-primary-fixed);
-  --color-on-primary-fixed-variant: var(
-    --md-sys-color-on-primary-fixed-variant
-  );
-  --color-on-secondary: var(--md-sys-color-on-secondary);
-  --color-on-secondary-container: var(--md-sys-color-on-secondary-container);
-  --color-on-secondary-fixed: var(--md-sys-color-on-secondary-fixed);
-  --color-on-secondary-fixed-variant: var(
-    --md-sys-color-on-secondary-fixed-variant
-  );
-  --color-on-surface: var(--md-sys-color-on-surface);
-  --color-on-surface-variant: var(--md-sys-color-on-surface-variant);
-  --color-on-tertiary: var(--md-sys-color-on-tertiary);
-  --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);
-  --color-on-tertiary-fixed: var(--md-sys-color-on-tertiary-fixed);
-  --color-on-tertiary-fixed-variant: var(
-    --md-sys-color-on-tertiary-fixed-variant
-  );
-  --color-outline: var(--md-sys-color-outline);
-  --color-outline-variant: var(--md-sys-color-outline-variant);
-  --color-primary: var(--md-sys-color-primary);
-  --color-primary-container: var(--md-sys-color-primary-container);
-  --color-primary-fixed: var(--md-sys-color-primary-fixed);
-  --color-primary-fixed-dim: var(--md-sys-color-primary-fixed-dim);
-  --color-scrim: var(--md-sys-color-scrim);
-  --color-secondary: var(--md-sys-color-secondary);
-  --color-secondary-container: var(--md-sys-color-secondary-container);
-  --color-secondary-fixed: var(--md-sys-color-secondary-fixed);
-  --color-secondary-fixed-dim: var(--md-sys-color-secondary-fixed-dim);
-  --color-shadow: var(--md-sys-color-shadow);
-  --color-surface: var(--md-sys-color-surface);
-  --color-surface-bright: var(--md-sys-color-surface-bright);
-  --color-surface-container: var(--md-sys-color-surface-container);
-  --color-surface-container-high: var(--md-sys-color-surface-container-high);
-  --color-surface-container-highest: var(
-    --md-sys-color-surface-container-highest
-  );
-  --color-surface-container-low: var(--md-sys-color-surface-container-low);
-  --color-surface-container-lowest: var(
-    --md-sys-color-surface-container-lowest
-  );
-  --color-surface-dim: var(--md-sys-color-surface-dim);
-  --color-surface-tint: var(--md-sys-color-surface-tint);
-  --color-surface-variant: var(--md-sys-color-surface-variant);
-  --color-tertiary: var(--md-sys-color-tertiary);
-  --color-tertiary-container: var(--md-sys-color-tertiary-container);
-  --color-tertiary-fixed: var(--md-sys-color-tertiary-fixed);
-  --color-tertiary-fixed-dim: var(--md-sys-color-tertiary-fixed-dim);
-
-  /* Shades */
-
-  --color-primary-50: var(--md-ref-palette-primary-95);
-  --color-primary-100: var(--md-ref-palette-primary-90);
-  --color-primary-200: var(--md-ref-palette-primary-80);
-  --color-primary-300: var(--md-ref-palette-primary-70);
-  --color-primary-400: var(--md-ref-palette-primary-60);
-  --color-primary-500: var(--md-ref-palette-primary-50);
-  --color-primary-600: var(--md-ref-palette-primary-40);
-  --color-primary-700: var(--md-ref-palette-primary-30);
-  --color-primary-800: var(--md-ref-palette-primary-20);
-  --color-primary-900: var(--md-ref-palette-primary-10);
-  --color-primary-950: var(--md-ref-palette-primary-5);
-
-  --color-secondary-50: var(--md-ref-palette-secondary-95);
-  --color-secondary-100: var(--md-ref-palette-secondary-90);
-  --color-secondary-200: var(--md-ref-palette-secondary-80);
-  --color-secondary-300: var(--md-ref-palette-secondary-70);
-  --color-secondary-400: var(--md-ref-palette-secondary-60);
-  --color-secondary-500: var(--md-ref-palette-secondary-50);
-  --color-secondary-600: var(--md-ref-palette-secondary-40);
-  --color-secondary-700: var(--md-ref-palette-secondary-30);
-  --color-secondary-800: var(--md-ref-palette-secondary-20);
-  --color-secondary-900: var(--md-ref-palette-secondary-10);
-  --color-secondary-950: var(--md-ref-palette-secondary-5);
-
-  --color-tertiary-50: var(--md-ref-palette-tertiary-95);
-  --color-tertiary-100: var(--md-ref-palette-tertiary-90);
-  --color-tertiary-200: var(--md-ref-palette-tertiary-80);
-  --color-tertiary-300: var(--md-ref-palette-tertiary-70);
-  --color-tertiary-400: var(--md-ref-palette-tertiary-60);
-  --color-tertiary-500: var(--md-ref-palette-tertiary-50);
-  --color-tertiary-600: var(--md-ref-palette-tertiary-40);
-  --color-tertiary-700: var(--md-ref-palette-tertiary-30);
-  --color-tertiary-800: var(--md-ref-palette-tertiary-20);
-  --color-tertiary-900: var(--md-ref-palette-tertiary-10);
-  --color-tertiary-950: var(--md-ref-palette-tertiary-5);
-
-  --color-error-50: var(--md-ref-palette-error-95);
-  --color-error-100: var(--md-ref-palette-error-90);
-  --color-error-200: var(--md-ref-palette-error-80);
-  --color-error-300: var(--md-ref-palette-error-70);
-  --color-error-400: var(--md-ref-palette-error-60);
-  --color-error-500: var(--md-ref-palette-error-50);
-  --color-error-600: var(--md-ref-palette-error-40);
-  --color-error-700: var(--md-ref-palette-error-30);
-  --color-error-800: var(--md-ref-palette-error-20);
-  --color-error-900: var(--md-ref-palette-error-10);
-  --color-error-950: var(--md-ref-palette-error-5);
-
-  --color-neutral-50: var(--md-ref-palette-neutral-95);
-  --color-neutral-100: var(--md-ref-palette-neutral-90);
-  --color-neutral-200: var(--md-ref-palette-neutral-80);
-  --color-neutral-300: var(--md-ref-palette-neutral-70);
-  --color-neutral-400: var(--md-ref-palette-neutral-60);
-  --color-neutral-500: var(--md-ref-palette-neutral-50);
-  --color-neutral-600: var(--md-ref-palette-neutral-40);
-  --color-neutral-700: var(--md-ref-palette-neutral-30);
-  --color-neutral-800: var(--md-ref-palette-neutral-20);
-  --color-neutral-900: var(--md-ref-palette-neutral-10);
-  --color-neutral-950: var(--md-ref-palette-neutral-5);
-
-  --color-neutral-variant-50: var(--md-ref-palette-neutral-variant-95);
-  --color-neutral-variant-100: var(--md-ref-palette-neutral-variant-90);
-  --color-neutral-variant-200: var(--md-ref-palette-neutral-variant-80);
-  --color-neutral-variant-300: var(--md-ref-palette-neutral-variant-70);
-  --color-neutral-variant-400: var(--md-ref-palette-neutral-variant-60);
-  --color-neutral-variant-500: var(--md-ref-palette-neutral-variant-50);
-  --color-neutral-variant-600: var(--md-ref-palette-neutral-variant-40);
-  --color-neutral-variant-700: var(--md-ref-palette-neutral-variant-30);
-  --color-neutral-variant-800: var(--md-ref-palette-neutral-variant-20);
-  --color-neutral-variant-900: var(--md-ref-palette-neutral-variant-10);
-  --color-neutral-variant-950: var(--md-ref-palette-neutral-variant-5);
-}