material-theme-builder 3.2.0 → 4.0.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:root,
+.dark.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,27 @@ 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)
+  );
+}
+function optionalHex(hex) {
+  return hex?.trim() || void 0;
+}
 var STANDARD_TONES = [
   0,
   4,
@@ -4115,61 +4219,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,11 +4337,20 @@ function builder(hexSource, {
   customColors: hexCustomColors = DEFAULT_CUSTOM_COLORS,
   prefix = DEFAULT_PREFIX
 } = {}) {
+  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);
@@ -4300,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"
     },
@@ -4431,6 +4489,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,
@@ -4439,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 {
@@ -4473,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" })
         }
       )
     }
@@ -4521,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,
@@ -4587,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/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 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:root,
+.dark.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 };