material-theme-builder 3.1.0 → 3.3.0

package/dist/react.js

@@ -3973,6 +3973,39 @@ function toShadcnVars(mergedColors) {
   });
   return Object.fromEntries(entries);
 }
+function toShadcnAliasVars(prefix, fallbacks) {
+  const entries = SHADCN_MAPPING.map(([cssVar, m3Token]) => {
+    const bare = cssVar.slice(2);
+    const property = `--${prefix}-sys-color-${m3Token}`;
+    return [
+      bare,
+      fallbacks ? `var(${property}, ${fallbacks[bare]})` : `var(${property})`
+    ];
+  });
+  return Object.fromEntries(entries);
+}
+function buildShadcnAliases(ctx) {
+  const lines = Object.entries(toShadcnAliasVars(ctx.prefix)).map(
+    ([name, value]) => `--${name}: ${value};`
+  );
+  return `:root,
+.dark {
+  ${lines.join("\n  ")}
+}
+`;
+}
+function buildShadcnRegistryItem(ctx, { fallback = false } = {}) {
+  const concrete = fallback ? buildShadcn(ctx) : void 0;
+  const vars = (mode) => toShadcnAliasVars(ctx.prefix, concrete?.[mode]);
+  return {
+    $schema: "https://ui.shadcn.com/schema/registry-item.json",
+    name: "material-theme-builder",
+    type: "registry:theme",
+    title: "Material Theme Builder",
+    description: `Points shadcn's CSS variables at the M3 custom properties \`<Mtb>\` emits, so every shadcn component follows whichever theme is above it in the tree.${fallback ? " Falls back to this theme's own colors where no `<Mtb>` is mounted." : ""}`,
+    cssVars: { light: vars("light"), dark: vars("dark") }
+  };
+}
 function buildShadcn(ctx) {
   const { mergedColorsLight, mergedColorsDark } = ctx;
   return {
@@ -3983,6 +4016,64 @@ function buildShadcn(ctx) {
 
 // src/lib/builder.tailwind.ts
 import { kebabCase as kebabCase3 } from "lodash-es";
+
+// src/lib/tokens.ts
+var DEFAULT_PREFIX = "md";
+var tokenDescriptions = {
+  background: "Default background color for screens and large surfaces.",
+  error: "Color for error states, used on elements like error text and icons.",
+  errorContainer: "Fill color for error container elements like error banners.",
+  inverseOnSurface: "Color for text and icons on inverse surface backgrounds.",
+  inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.",
+  inverseSurface: "Background for elements that require reverse contrast, such as snackbars.",
+  onBackground: "Color for text and icons displayed on the background.",
+  onError: "Color for text and icons on error-colored elements.",
+  onErrorContainer: "Color for text and icons on error container elements.",
+  onPrimary: "Color for text and icons on primary-colored elements like filled buttons.",
+  onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.",
+  onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.",
+  onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.",
+  onSecondary: "Color for text and icons on secondary-colored elements.",
+  onSecondaryContainer: "Color for text and icons on secondary container elements.",
+  onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.",
+  onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.",
+  onSurface: "High-emphasis color for text and icons on surface backgrounds.",
+  onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.",
+  onTertiary: "Color for text and icons on tertiary-colored elements.",
+  onTertiaryContainer: "Color for text and icons on tertiary container elements.",
+  onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.",
+  onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.",
+  outline: "Subtle color for borders and dividers to create visual separation.",
+  outlineVariant: "Lower-emphasis border color used for decorative dividers.",
+  primary: "Main brand color, used for key components like filled buttons and active states.",
+  primaryContainer: "Fill color for large primary elements like cards and tonal buttons.",
+  primaryFixed: "Fixed primary color that stays the same in light and dark themes.",
+  primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.",
+  scrim: "Color overlay for modals and dialogs to obscure background content.",
+  secondary: "Accent color for less prominent elements like filter chips and selections.",
+  secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.",
+  secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.",
+  secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.",
+  shadow: "Color for elevation shadows applied to surfaces and components.",
+  surface: "Default surface color for cards, sheets, and dialogs.",
+  surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.",
+  surfaceContainer: "Middle-emphasis container color for grouping related content.",
+  surfaceContainerHigh: "Higher-emphasis container color for elements like cards.",
+  surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.",
+  surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.",
+  surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.",
+  surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.",
+  surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.",
+  surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.",
+  tertiary: "Third accent color for complementary elements that balance primary and secondary.",
+  tertiaryContainer: "Fill color for tertiary container elements like complementary cards.",
+  tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
+  tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
+};
+function isTokenName(key) {
+  return key in tokenDescriptions;
+}
+var tokenNames = Object.keys(tokenDescriptions).filter(isTokenName);
 var SHADE_TO_TONE = [
   [50, 95],
   [100, 90],
@@ -4004,6 +4095,8 @@ var CORE_PALETTES = [
   "neutral",
   "neutral-variant"
 ];
+
+// src/lib/builder.tailwind.ts
 function buildTailwind(ctx, options) {
   const { prefix, mergedColorsLight, hexCustomColors } = ctx;
   const lines = [];
@@ -4036,17 +4129,8 @@ function buildTailwind(ctx, options) {
   ${lines.join("\n  ")}
 }
 `;
-  if (options?.shadcn) {
-    const shadcnLines = SHADCN_MAPPING.map(
-      ([shadcnVar, m3Token]) => `${shadcnVar}: var(--${prefix}-sys-color-${m3Token});`
-    );
-    output += `
-:root,
-.dark {
-  ${shadcnLines.join("\n  ")}
-}
-`;
-  }
+  if (options?.shadcn) output += `
+${buildShadcnAliases(ctx)}`;
   return output;
 }
 
@@ -4064,7 +4148,24 @@ var DEFAULT_SCHEME = "tonalSpot";
 var DEFAULT_CONTRAST = 0;
 var DEFAULT_CUSTOM_COLORS = [];
 var DEFAULT_BLEND = true;
-var DEFAULT_PREFIX = "md";
+var HEX_COLOR = /^#?(?:[0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+function isHexColor(value) {
+  return HEX_COLOR.test(value);
+}
+function assertHexColor(label, value) {
+  if (!isHexColor(value))
+    throw new Error(
+      `Invalid ${label}: '${value}'. Expected a hex color \u2014 3, 6 or 8 hex digits, with or without '#' (e.g. #6750A4).`
+    );
+}
+function assertHexInputs(source, cores, customColors) {
+  assertHexColor("source", source);
+  for (const [name, hex] of Object.entries(cores))
+    if (hex !== void 0) assertHexColor(name, hex);
+  customColors.forEach(
+    (color, i) => assertHexColor(`customColors[${i}].hex`, color.hex)
+  );
+}
 var STANDARD_TONES = [
   0,
   4,
@@ -4115,61 +4216,6 @@ var schemeToVariant = {
   fidelity: Variant.FIDELITY,
   content: Variant.CONTENT
 };
-var tokenDescriptions = {
-  background: "Default background color for screens and large surfaces.",
-  error: "Color for error states, used on elements like error text and icons.",
-  errorContainer: "Fill color for error container elements like error banners.",
-  inverseOnSurface: "Color for text and icons on inverse surface backgrounds.",
-  inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.",
-  inverseSurface: "Background for elements that require reverse contrast, such as snackbars.",
-  onBackground: "Color for text and icons displayed on the background.",
-  onError: "Color for text and icons on error-colored elements.",
-  onErrorContainer: "Color for text and icons on error container elements.",
-  onPrimary: "Color for text and icons on primary-colored elements like filled buttons.",
-  onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.",
-  onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.",
-  onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.",
-  onSecondary: "Color for text and icons on secondary-colored elements.",
-  onSecondaryContainer: "Color for text and icons on secondary container elements.",
-  onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.",
-  onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.",
-  onSurface: "High-emphasis color for text and icons on surface backgrounds.",
-  onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.",
-  onTertiary: "Color for text and icons on tertiary-colored elements.",
-  onTertiaryContainer: "Color for text and icons on tertiary container elements.",
-  onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.",
-  onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.",
-  outline: "Subtle color for borders and dividers to create visual separation.",
-  outlineVariant: "Lower-emphasis border color used for decorative dividers.",
-  primary: "Main brand color, used for key components like filled buttons and active states.",
-  primaryContainer: "Fill color for large primary elements like cards and tonal buttons.",
-  primaryFixed: "Fixed primary color that stays the same in light and dark themes.",
-  primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.",
-  scrim: "Color overlay for modals and dialogs to obscure background content.",
-  secondary: "Accent color for less prominent elements like filter chips and selections.",
-  secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.",
-  secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.",
-  secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.",
-  shadow: "Color for elevation shadows applied to surfaces and components.",
-  surface: "Default surface color for cards, sheets, and dialogs.",
-  surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.",
-  surfaceContainer: "Middle-emphasis container color for grouping related content.",
-  surfaceContainerHigh: "Higher-emphasis container color for elements like cards.",
-  surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.",
-  surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.",
-  surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.",
-  surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.",
-  surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.",
-  surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.",
-  tertiary: "Third accent color for complementary elements that balance primary and secondary.",
-  tertiaryContainer: "Fill color for tertiary container elements like complementary cards.",
-  tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
-  tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
-};
-function isTokenName(key) {
-  return key in tokenDescriptions;
-}
-var tokenNames = Object.keys(tokenDescriptions).filter(isTokenName);
 function deriveCustomPaletteName(tokenName, allPaletteNamesKebab) {
   let baseName = tokenName;
   if (/^on[A-Z]/.test(baseName) && baseName.length > 2) {
@@ -4288,6 +4334,11 @@ function builder(hexSource, {
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
+  assertHexInputs(
+    hexSource,
+    { primary, secondary, tertiary, error, neutral, neutralVariant },
+    hexCustomColors
+  );
   const sourceArgb = argbFromHex2(hexSource);
   const sourceHct = Hct2.fromInt(sourceArgb);
   const effectiveSource = primary || hexSource;
@@ -4431,6 +4482,8 @@ function builder(hexSource, {
     toFigmaTokens: () => buildFigmaTokens(ctx),
     toTailwind: (options) => buildTailwind(ctx, options),
     toShadcn: () => buildShadcn(ctx),
+    toShadcnAliases: () => buildShadcnAliases(ctx),
+    toShadcnRegistryItem: (options) => buildShadcnRegistryItem(ctx, options),
     toFlutter: () => buildFlutter(ctx),
     mergedColorsLight,
     mergedColorsDark,
@@ -4524,15 +4577,15 @@ var createRequiredContext = () => {
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var [useMtb, Provider, MtbContext] = createRequiredContext();
 var MtbProvider = ({
-  styleId,
+  styleId: styleId2,
   children,
   ...configProps
 }) => {
   const [initials] = useState(() => configProps);
-  const [mcuConfig, setMcuConfig] = useState(initials);
+  const [mtbConfig, setMtbConfig] = useState(initials);
   const configKey = JSON.stringify(configProps);
   React.useEffect(() => {
-    setMcuConfig(configProps);
+    setMtbConfig(configProps);
   }, [configKey]);
   const {
     css,
@@ -4543,8 +4596,8 @@ var MtbProvider = ({
     figmaVariables
   } = useMemo(() => {
     const { toCss, toFigmaTokens, toFigmaVariables, ...rest } = builder(
-      mcuConfig.source,
-      mcuConfig
+      mtbConfig.source,
+      mtbConfig
     );
     return {
       css: toCss(),
@@ -4552,13 +4605,13 @@ var MtbProvider = ({
       figmaVariables: toFigmaVariables(),
       ...rest
     };
-  }, [mcuConfig]);
-  const getMcuColor = useCallback(
+  }, [mtbConfig]);
+  const getMtbColor = useCallback(
     (colorName, theme) => {
       const mergedColors = theme === "light" ? mergedColorsLight : mergedColorsDark;
       const colorValue = mergedColors[colorName];
       if (colorValue === void 0) {
-        throw new Error(`Unknown MCU token '${colorName}'`);
+        throw new Error(`Unknown token '${colorName}'`);
       }
       return hexFromArgb5(colorValue);
     },
@@ -4567,24 +4620,28 @@ var MtbProvider = ({
   const value = useMemo(
     () => ({
       initials,
-      mcuConfig,
-      setMcuConfig,
-      getMcuColor,
+      mtbConfig,
+      setMtbConfig,
+      getMtbColor,
       allPalettes,
       figmaTokens,
-      figmaVariables
+      figmaVariables,
+      // deprecated aliases
+      mcuConfig: mtbConfig,
+      setMcuConfig: setMtbConfig,
+      getMcuColor: getMtbColor
     }),
     [
-      getMcuColor,
+      getMtbColor,
       initials,
-      mcuConfig,
+      mtbConfig,
       allPalettes,
       figmaTokens,
       figmaVariables
     ]
   );
   return /* @__PURE__ */ jsxs2(Provider, { value, children: [
-    /* @__PURE__ */ jsx3("style", { id: styleId, dangerouslySetInnerHTML: { __html: css } }),
+    /* @__PURE__ */ jsx3("style", { id: styleId2, dangerouslySetInnerHTML: { __html: css } }),
     children
   ] });
 };
@@ -4592,7 +4649,7 @@ var useMcu = useMtb;
 
 // src/Mtb.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
-var mcuStyleId = "mcu-styles";
+var styleId = "mcu-styles";
 var DEFAULT_COLOR_MATCH = false;
 function Mtb({
   source,
@@ -4639,7 +4696,7 @@ function Mtb({
       prefix
     ]
   );
-  return /* @__PURE__ */ jsx4(MtbProvider, { ...config, styleId: mcuStyleId, children });
+  return /* @__PURE__ */ jsx4(MtbProvider, { ...config, styleId, children });
 }
 var Mcu = Mtb;
 export {

package/dist/registry-item.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "material-theme-builder",
+  "type": "registry:theme",
+  "title": "Material Theme Builder",
+  "description": "Points shadcn's CSS variables at the M3 custom properties `<Mtb>` emits, so every shadcn component follows whichever theme is above it in the tree.",
+  "cssVars": {
+    "light": {
+      "background": "var(--md-sys-color-surface)",
+      "foreground": "var(--md-sys-color-on-surface)",
+      "card": "var(--md-sys-color-surface-container-low)",
+      "card-foreground": "var(--md-sys-color-on-surface)",
+      "popover": "var(--md-sys-color-surface-container-high)",
+      "popover-foreground": "var(--md-sys-color-on-surface)",
+      "primary": "var(--md-sys-color-primary)",
+      "primary-foreground": "var(--md-sys-color-on-primary)",
+      "secondary": "var(--md-sys-color-secondary-container)",
+      "secondary-foreground": "var(--md-sys-color-on-secondary-container)",
+      "muted": "var(--md-sys-color-surface-container-highest)",
+      "muted-foreground": "var(--md-sys-color-on-surface-variant)",
+      "accent": "var(--md-sys-color-secondary-container)",
+      "accent-foreground": "var(--md-sys-color-on-secondary-container)",
+      "destructive": "var(--md-sys-color-error)",
+      "border": "var(--md-sys-color-outline-variant)",
+      "input": "var(--md-sys-color-outline)",
+      "ring": "var(--md-sys-color-primary)",
+      "chart-1": "var(--md-sys-color-primary-fixed)",
+      "chart-2": "var(--md-sys-color-secondary-fixed)",
+      "chart-3": "var(--md-sys-color-tertiary-fixed)",
+      "chart-4": "var(--md-sys-color-primary-fixed-dim)",
+      "chart-5": "var(--md-sys-color-secondary-fixed-dim)",
+      "sidebar": "var(--md-sys-color-surface-container-low)",
+      "sidebar-foreground": "var(--md-sys-color-on-surface)",
+      "sidebar-primary": "var(--md-sys-color-primary)",
+      "sidebar-primary-foreground": "var(--md-sys-color-on-primary)",
+      "sidebar-accent": "var(--md-sys-color-secondary-container)",
+      "sidebar-accent-foreground": "var(--md-sys-color-on-secondary-container)",
+      "sidebar-border": "var(--md-sys-color-outline-variant)",
+      "sidebar-ring": "var(--md-sys-color-primary)"
+    },
+    "dark": {
+      "background": "var(--md-sys-color-surface)",
+      "foreground": "var(--md-sys-color-on-surface)",
+      "card": "var(--md-sys-color-surface-container-low)",
+      "card-foreground": "var(--md-sys-color-on-surface)",
+      "popover": "var(--md-sys-color-surface-container-high)",
+      "popover-foreground": "var(--md-sys-color-on-surface)",
+      "primary": "var(--md-sys-color-primary)",
+      "primary-foreground": "var(--md-sys-color-on-primary)",
+      "secondary": "var(--md-sys-color-secondary-container)",
+      "secondary-foreground": "var(--md-sys-color-on-secondary-container)",
+      "muted": "var(--md-sys-color-surface-container-highest)",
+      "muted-foreground": "var(--md-sys-color-on-surface-variant)",
+      "accent": "var(--md-sys-color-secondary-container)",
+      "accent-foreground": "var(--md-sys-color-on-secondary-container)",
+      "destructive": "var(--md-sys-color-error)",
+      "border": "var(--md-sys-color-outline-variant)",
+      "input": "var(--md-sys-color-outline)",
+      "ring": "var(--md-sys-color-primary)",
+      "chart-1": "var(--md-sys-color-primary-fixed)",
+      "chart-2": "var(--md-sys-color-secondary-fixed)",
+      "chart-3": "var(--md-sys-color-tertiary-fixed)",
+      "chart-4": "var(--md-sys-color-primary-fixed-dim)",
+      "chart-5": "var(--md-sys-color-secondary-fixed-dim)",
+      "sidebar": "var(--md-sys-color-surface-container-low)",
+      "sidebar-foreground": "var(--md-sys-color-on-surface)",
+      "sidebar-primary": "var(--md-sys-color-primary)",
+      "sidebar-primary-foreground": "var(--md-sys-color-on-primary)",
+      "sidebar-accent": "var(--md-sys-color-secondary-container)",
+      "sidebar-accent-foreground": "var(--md-sys-color-on-secondary-container)",
+      "sidebar-border": "var(--md-sys-color-outline-variant)",
+      "sidebar-ring": "var(--md-sys-color-primary)"
+    }
+  }
+}

package/dist/shadcn.css

@@ -0,0 +1,43 @@
+/*
+ * 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.
+ */
+:root,
+.dark {
+  --background: var(--md-sys-color-surface);
+  --foreground: var(--md-sys-color-on-surface);
+  --card: var(--md-sys-color-surface-container-low);
+  --card-foreground: var(--md-sys-color-on-surface);
+  --popover: var(--md-sys-color-surface-container-high);
+  --popover-foreground: var(--md-sys-color-on-surface);
+  --primary: var(--md-sys-color-primary);
+  --primary-foreground: var(--md-sys-color-on-primary);
+  --secondary: var(--md-sys-color-secondary-container);
+  --secondary-foreground: var(--md-sys-color-on-secondary-container);
+  --muted: var(--md-sys-color-surface-container-highest);
+  --muted-foreground: var(--md-sys-color-on-surface-variant);
+  --accent: var(--md-sys-color-secondary-container);
+  --accent-foreground: var(--md-sys-color-on-secondary-container);
+  --destructive: var(--md-sys-color-error);
+  --border: var(--md-sys-color-outline-variant);
+  --input: var(--md-sys-color-outline);
+  --ring: var(--md-sys-color-primary);
+  --chart-1: var(--md-sys-color-primary-fixed);
+  --chart-2: var(--md-sys-color-secondary-fixed);
+  --chart-3: var(--md-sys-color-tertiary-fixed);
+  --chart-4: var(--md-sys-color-primary-fixed-dim);
+  --chart-5: var(--md-sys-color-secondary-fixed-dim);
+  --sidebar: var(--md-sys-color-surface-container-low);
+  --sidebar-foreground: var(--md-sys-color-on-surface);
+  --sidebar-primary: var(--md-sys-color-primary);
+  --sidebar-primary-foreground: var(--md-sys-color-on-primary);
+  --sidebar-accent: var(--md-sys-color-secondary-container);
+  --sidebar-accent-foreground: var(--md-sys-color-on-secondary-container);
+  --sidebar-border: var(--md-sys-color-outline-variant);
+  --sidebar-ring: var(--md-sys-color-primary);
+}

package/dist/tailwind-plugin.d.ts

@@ -0,0 +1,73 @@
+import * as node_modules_tailwindcss_dist_types_CJYAW1ql_mjs from 'node_modules/tailwindcss/dist/types-CJYAW1ql.mjs';
+
+/**
+ * Options accepted by `@plugin "material-theme-builder/tailwind" { ... }`.
+ *
+ * Tailwind parses the block as CSS declarations, so the property names are
+ * kebab-case and a comma-separated value arrives as an array. Everything is
+ * typed loosely on the way in because the values come from a stylesheet, not
+ * from a type-checked call site.
+ */
+type MtbTailwindPluginOptions = {
+    /**
+     * Custom color names, exactly as passed to `builder()` / `<Mtb>`:
+     *
+     * ```css
+     * @plugin "material-theme-builder/tailwind" {
+     *   custom-colors: myCustomColor1, myCustomColor2;
+     * }
+     * ```
+     */
+    "custom-colors"?: string | string[] | number | (string | number)[];
+    /** CSS custom-property prefix, matching `builder({ prefix })`. Default `md`. */
+    prefix?: string;
+};
+/**
+ * The `--color-*` map the plugin registers, as a plain object.
+ *
+ * Keys are Tailwind color names (`primary`, `on-primary`, `primary-500`),
+ * values are `var()` references into the `--{prefix}-sys-color-*` /
+ * `--{prefix}-ref-palette-*` properties `<Mtb>` (or `builder().toCss()`) emits.
+ *
+ * Custom colors keep the name they were declared with — `myCustomColor1` stays
+ * `bg-myCustomColor1` — while the CSS property it points at is kebab-cased,
+ * because that is the spelling the builder writes.
+ */
+declare function mtbColors({ customColors, prefix, }?: {
+    customColors?: string[];
+    prefix?: string;
+}): Record<string, string>;
+/**
+ * Tailwind v4 plugin — the `@theme inline` block of
+ * `material-theme-builder/tailwind.css`, minus the copy-paste.
+ *
+ * ```css
+ * @import "tailwindcss";
+ * @plugin "material-theme-builder/tailwind" {
+ *   custom-colors: myCustomColor1, myCustomColor2;
+ * }
+ * ```
+ *
+ * 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
+ * `--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.
+ *
+ * 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.
+ *
+ * @see https://tailwindcss.com/docs/functions-and-directives#plugin-directive
+ */
+declare const mtbTailwindPlugin: node_modules_tailwindcss_dist_types_CJYAW1ql_mjs.c<MtbTailwindPluginOptions>;
+
+export { type MtbTailwindPluginOptions, mtbTailwindPlugin as default, mtbColors };

package/dist/tailwind-plugin.js

@@ -0,0 +1,135 @@
+// src/tailwind-plugin.ts
+import { kebabCase } from "lodash-es";
+import plugin from "tailwindcss/plugin";
+
+// src/lib/tokens.ts
+var DEFAULT_PREFIX = "md";
+var tokenDescriptions = {
+  background: "Default background color for screens and large surfaces.",
+  error: "Color for error states, used on elements like error text and icons.",
+  errorContainer: "Fill color for error container elements like error banners.",
+  inverseOnSurface: "Color for text and icons on inverse surface backgrounds.",
+  inversePrimary: "Primary color used on inverse surface, e.g. buttons on snackbars.",
+  inverseSurface: "Background for elements that require reverse contrast, such as snackbars.",
+  onBackground: "Color for text and icons displayed on the background.",
+  onError: "Color for text and icons on error-colored elements.",
+  onErrorContainer: "Color for text and icons on error container elements.",
+  onPrimary: "Color for text and icons on primary-colored elements like filled buttons.",
+  onPrimaryContainer: "Color for text and icons on primary container elements like tonal buttons.",
+  onPrimaryFixed: "Color for text and icons on primary fixed elements, constant across themes.",
+  onPrimaryFixedVariant: "Lower-emphasis color for text and icons on primary fixed elements.",
+  onSecondary: "Color for text and icons on secondary-colored elements.",
+  onSecondaryContainer: "Color for text and icons on secondary container elements.",
+  onSecondaryFixed: "Color for text and icons on secondary fixed elements, constant across themes.",
+  onSecondaryFixedVariant: "Lower-emphasis color for text and icons on secondary fixed elements.",
+  onSurface: "High-emphasis color for text and icons on surface backgrounds.",
+  onSurfaceVariant: "Medium-emphasis color for text and icons on surface variant backgrounds.",
+  onTertiary: "Color for text and icons on tertiary-colored elements.",
+  onTertiaryContainer: "Color for text and icons on tertiary container elements.",
+  onTertiaryFixed: "Color for text and icons on tertiary fixed elements, constant across themes.",
+  onTertiaryFixedVariant: "Lower-emphasis color for text and icons on tertiary fixed elements.",
+  outline: "Subtle color for borders and dividers to create visual separation.",
+  outlineVariant: "Lower-emphasis border color used for decorative dividers.",
+  primary: "Main brand color, used for key components like filled buttons and active states.",
+  primaryContainer: "Fill color for large primary elements like cards and tonal buttons.",
+  primaryFixed: "Fixed primary color that stays the same in light and dark themes.",
+  primaryFixedDim: "Dimmed variant of the fixed primary color for lower emphasis.",
+  scrim: "Color overlay for modals and dialogs to obscure background content.",
+  secondary: "Accent color for less prominent elements like filter chips and selections.",
+  secondaryContainer: "Fill color for secondary container elements like tonal buttons and input fields.",
+  secondaryFixed: "Fixed secondary color that stays the same in light and dark themes.",
+  secondaryFixedDim: "Dimmed variant of the fixed secondary color for lower emphasis.",
+  shadow: "Color for elevation shadows applied to surfaces and components.",
+  surface: "Default surface color for cards, sheets, and dialogs.",
+  surfaceBright: "Brightest surface variant, used for elevated surfaces in dark themes.",
+  surfaceContainer: "Middle-emphasis container color for grouping related content.",
+  surfaceContainerHigh: "Higher-emphasis container color for elements like cards.",
+  surfaceContainerHighest: "Highest-emphasis container color for text fields and other input areas.",
+  surfaceContainerLow: "Lower-emphasis container color for subtle surface groupings.",
+  surfaceContainerLowest: "Lowest-emphasis container, typically the lightest surface in light theme.",
+  surfaceDim: "Dimmest surface variant, used for recessed areas or dark theme backgrounds.",
+  surfaceTint: "Tint color applied to surfaces for subtle primary color elevation overlay.",
+  surfaceVariant: "Alternative surface color for differentiated areas like sidebar backgrounds.",
+  tertiary: "Third accent color for complementary elements that balance primary and secondary.",
+  tertiaryContainer: "Fill color for tertiary container elements like complementary cards.",
+  tertiaryFixed: "Fixed tertiary color that stays the same in light and dark themes.",
+  tertiaryFixedDim: "Dimmed variant of the fixed tertiary color for lower emphasis."
+};
+function isTokenName(key) {
+  return key in tokenDescriptions;
+}
+var tokenNames = Object.keys(tokenDescriptions).filter(isTokenName);
+var SHADE_TO_TONE = [
+  [50, 95],
+  [100, 90],
+  [200, 80],
+  [300, 70],
+  [400, 60],
+  [500, 50],
+  [600, 40],
+  [700, 30],
+  [800, 20],
+  [900, 10],
+  [950, 5]
+];
+var CORE_PALETTES = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "error",
+  "neutral",
+  "neutral-variant"
+];
+
+// src/tailwind-plugin.ts
+function toNames(value) {
+  if (value === void 0 || value === null) return [];
+  return (Array.isArray(value) ? value : [value]).flatMap((entry) => String(entry).split(/[\s,]+/)).map((name) => name.trim().replace(/^["']|["']$/g, "")).filter(Boolean);
+}
+function mtbColors({
+  customColors = [],
+  prefix = DEFAULT_PREFIX
+} = {}) {
+  const colors = {};
+  const sys = (token) => `var(--${prefix}-sys-color-${token})`;
+  const ref = (palette, tone) => `var(--${prefix}-ref-palette-${palette}-${tone})`;
+  for (const name of tokenNames) {
+    const kebab = kebabCase(name);
+    colors[kebab] = sys(kebab);
+  }
+  for (const palette of CORE_PALETTES) {
+    for (const [shade, tone] of SHADE_TO_TONE) {
+      colors[`${palette}-${shade}`] = ref(palette, tone);
+    }
+  }
+  for (const name of customColors) {
+    const kebab = kebabCase(name);
+    colors[name] = sys(kebab);
+    colors[`on-${name}`] = sys(`on-${kebab}`);
+    colors[`${name}-container`] = sys(`${kebab}-container`);
+    colors[`on-${name}-container`] = sys(`on-${kebab}-container`);
+    for (const [shade, tone] of SHADE_TO_TONE) {
+      colors[`${name}-${shade}`] = ref(kebab, tone);
+    }
+  }
+  return colors;
+}
+var mtbTailwindPlugin = plugin.withOptions(
+  () => () => {
+  },
+  (options = {}) => ({
+    theme: {
+      extend: {
+        colors: mtbColors({
+          customColors: toNames(options["custom-colors"]),
+          prefix: options.prefix
+        })
+      }
+    }
+  })
+);
+var tailwind_plugin_default = mtbTailwindPlugin;
+export {
+  tailwind_plugin_default as default,
+  mtbColors
+};