{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "md3-base",
  "title": "MD3 plumbing",
  "author": "pmndrs",
  "description": "The MD3 colour layer without any colours: the package's Tailwind plugin, its shadcn remap, and the pmndrs seed. Install this only if you compute the palette yourself — otherwise install `theme`, which supplies one.",
  "dependencies": [
    "material-theme-builder@^5.2.0"
  ],
  "files": [
    {
      "path": "registry/md3-base/md3.ts",
      "content": "import type { MtbConfig } from 'material-theme-builder'\n\n/**\n * The pmndrs Material Design 3 seed.\n *\n * The colours every pmndrs site derives from. The shadcn preset carries radius\n * and typography, not colour — moving `source` here is what actually moves the\n * rendered palette.\n *\n * Every colour, and the contrast, is overridable per deployment through a\n * `THEME_*` env var, so a site can reseed without forking the file.\n *\n * Read from a React Server Component (a Next.js root layout, typically): the\n * non-`NEXT_PUBLIC_` vars below are only substituted on the server.\n *\n * Need a colour M3 has no role for — a status, a category? Extend this rather\n * than editing it, so the next update of this item stays a clean overwrite:\n *\n * ```ts\n * export const myMtb = {\n *   ...pmndrsMtb,\n *   customColors: [...pmndrsMtb.customColors, { name: 'pending', hex: '#8250DF', blend: true }],\n * } satisfies MtbConfig\n * ```\n *\n * Append to `...pmndrsMtb.customColors` rather than writing the array afresh:\n * `customColors` replaces the defaults as a whole, so a bare list drops the\n * brand colours and the alert roles shipped below. `blend: true` harmonizes\n * yours against the seed above, so they stay yours and still belong to the\n * pmndrs palette. Then name them in the `@plugin` line this item added to your\n * CSS. It is installed in statement form (`@plugin '...';`); give it a body —\n * that is all the wiring there is:\n *\n * ```css\n * @plugin \"material-theme-builder/tailwind\" {\n *   custom-colors: pending;\n * }\n * ```\n *\n * Four roles follow (`bg-pending`, `text-on-pending`, `bg-pending-container`,\n * `text-on-pending-container`) and eleven shades (`bg-pending-50` …\n * `bg-pending-950`). The name is used verbatim, so `myColor` stays\n * `bg-myColor`.\n */\nexport const pmndrsMtb = {\n  /** poimandres lime — the primary (also exposed as `lime` below). */\n  source: process.env.THEME_PRIMARY || '#CAF543',\n  /**\n   * Material Theme Builder's \"Color match — Stay true to my color inputs\": each\n   * core colour keeps its seed's chroma, and the seed itself lands in the\n   * container role. It replaces `scheme`, which is ignored while it is on —\n   * Color match is the Content variant, applied to each seed separately.\n   */\n  colorMatch: true,\n  contrast: Number(process.env.THEME_CONTRAST) || 0,\n  /**\n   * The two neutral seeds look nothing like the ramps they produce, and that is\n   * expected. Under Color match a neutral ramp takes its seed's hue at a fraction\n   * of its chroma: chroma / 8 for neutral, chroma / 8 + 4 for neutral-variant.\n   * So a seed carries 8x the chroma you want back.\n   *\n   * - neutral `#c1b793`, the warm grey's hue (99) at chroma 16, gives the\n   *   surfaces and body text a ramp at chroma 2: a warm grey.\n   * - neutral-variant `#495720`, the lime's hue (124) at chroma 32, gives the\n   *   outlines and secondary text a ramp at chroma 8 (32 / 8 + 4): a hint of\n   *   the primary.\n   *\n   * A seed's tone does not matter, only its hue and chroma.\n   */\n  neutral: process.env.THEME_NEUTRAL || '#c1b793',\n  neutralVariant: process.env.THEME_NEUTRAL_VARIANT || '#495720',\n  /** red. */\n  error: process.env.THEME_ERROR || '#FF4980',\n  /**\n   * The seven brand colours, by name: `bg-lime`, `text-on-teal`,\n   * `bg-cyan-container`, `bg-purple-500`, … Lime is also the primary `source`\n   * above; red also drives the `error` role.\n   *\n   * `blend: false` keeps each colour true to its hex. `blend: true` would\n   * harmonize them toward the lime seed — more cohesive, but it pulls the hues\n   * off their brand values (measured ΔE 12–27 vs ~0–9 when exact).\n   *\n   * Secondary and tertiary are intentionally unused — MD3 still generates them\n   * (there's no flag to disable them), but these take their place.\n   *\n   * The order is part of the contract: the generated CSS follows it, so a new\n   * colour goes at the end.\n   */\n  customColors: [\n    { name: 'lime', hex: '#CAF543', blend: false },\n    { name: 'teal', hex: '#00F7A3', blend: false },\n    { name: 'cyan', hex: '#2BDCF6', blend: false },\n    { name: 'purple', hex: '#D855F9', blend: false },\n    { name: 'red', hex: '#FF4980', blend: false },\n    { name: 'orange', hex: '#FFC043', blend: false },\n    { name: 'yellow', hex: '#EBFF0F', blend: false },\n    /*\n     * The five alert roles: `bg-note`, `text-on-tip`, `bg-warning-container`,\n     * `bg-caution-500`, … for GitHub alerts, hints, badges and statuses.\n     *\n     * They keep GitHub's alert hues, so a reader recognises them at a glance.\n     * `blend: true` pulls them toward the seed, so they sit in any library's\n     * palette, reseeded or not. Each one is overridable, like the seed.\n     */\n    { name: 'note', hex: process.env.THEME_NOTE || '#1F6FEB', blend: true },\n    { name: 'tip', hex: process.env.THEME_TIP || '#238636', blend: true },\n    { name: 'important', hex: process.env.THEME_IMPORTANT || '#8957E5', blend: true },\n    { name: 'warning', hex: process.env.THEME_WARNING || '#D29922', blend: true },\n    { name: 'caution', hex: process.env.THEME_CAUTION || '#DA3633', blend: true },\n  ],\n} satisfies MtbConfig\n",
      "type": "registry:lib"
    }
  ],
  "css": {
    "@plugin 'material-theme-builder/tailwind'": {},
    "@import 'material-theme-builder/shadcn.css'": {}
  },
  "docs": "**This item ships no colours.** It is the plumbing: two lines of CSS pointing at the package — its Tailwind plugin, and the stylesheet remapping shadcn's variables onto MD3 roles — plus `lib/md3.ts`, the pmndrs seed.\n\nInstall it alone only if you compute the palette yourself. If you just want pmndrs colours, install `theme` instead — it adds a baked palette and the mono font on top of this and needs nothing mounted.\n\nNothing renders until something defines `--md-sys-color-*`, and it does not fail gracefully: the remap here overrides the *stock* shadcn variables, so an undefined palette takes `--background`, `--primary` and `--border` down with it, silently — no error from Tailwind, none from the browser.\n\nEmit it from a React Server Component. `builder` is the root export and carries no `'use client'`, so no palette code reaches the browser:\n\n```tsx\nimport { builder } from 'material-theme-builder'\nimport { pmndrsMtb } from '@/lib/md3'\n\nconst { source, ...rest } = pmndrsMtb\nconst css = builder(source, rest).toCss()\n// <style dangerouslySetInnerHTML={{ __html: css }} /> in <head>\n```\n\nThat repeats the palette in every document — around 32 kB raw, but 2 kB brotli, since it is all hex declarations. Only worth hoisting into your stylesheet with a build step if you have measured that it matters; the build step costs a generated file and an import-order rule that fails silently whenever your seed matches the baked default.\n\nComputed here, the palette is the baked `theme` one, colour for colour: both are `builder(pmndrsMtb)`.\n\n`<Mtb>` from `material-theme-builder/react` does the same as a client component. Avoid it in an app that renders on the server, but it is the right tool where there is no build to hook — a Storybook preview decorator, for instance. With `next-themes`, nest `<ThemeProvider>` inside it, not around it.\n\nThe seed ships twelve custom colours, and `theme` bakes their roles. Seven are the brand colours. Five are alert roles: `note`, `tip`, `important`, `warning` and `caution`. The [Colors page](https://pmndrs.github.io/design-system/colors/introduction#custom-colours) lists their seeds and what each is for. Each alert seed is overridable, like the primary: `THEME_NOTE`, `THEME_TIP`, `THEME_IMPORTANT`, `THEME_WARNING`, `THEME_CAUTION`.\n\nTheir utilities are not automatic. The `@plugin` line this item added to your CSS is installed in statement form (`@plugin '...';`), and the registry cannot give it a body, so give it one yourself:\n\n```css\n@plugin \"material-theme-builder/tailwind\" {\n  custom-colors: lime, teal, cyan, purple, red, orange, yellow, note, tip, important, warning, caution;\n}\n```\n\nNeed a colour M3 has no role for? Spread `pmndrsMtb` into your own config, rather than editing the installed file. Append to its `customColors`:\n\n```ts\ncustomColors: [...pmndrsMtb.customColors, { name: 'pending', hex: '#8250DF', blend: true }]\n```\n\nThe spread keeps the twelve above. A bare list replaces them, alert roles included. `blend: true` harmonizes yours against the pmndrs seed. Then add yours to the same body:\n\n```css\n@plugin \"material-theme-builder/tailwind\" {\n  custom-colors: lime, teal, cyan, purple, red, orange, yellow, note, tip, important, warning, caution, pending;\n}\n```\n\nFour roles and eleven shades follow per colour: `bg-pending`, `text-on-pending`, `bg-pending-container`, `text-on-pending-container`, `bg-pending-50` … `bg-pending-950`. Nothing else to write.",
  "type": "registry:lib"
}