mui-atelier 0.1.0

package/dist/theme/createSiteTheme.js

@@ -0,0 +1,974 @@
+import { createTheme } from "@mui/material/styles";
+const BODY_FONT = 'var(--font-inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)';
+const MONO_FONT = 'var(--font-mono, "SF Mono", ui-monospace, Menlo, Consolas, "Liberation Mono", monospace)';
+const AMBIENT = { warm: "87,64,30", neutral: "17,24,39", glow: "10,12,20", none: "17,24,39" };
+const BERRY_CARD_SHADOW = "0 2px 14px 0 rgb(32 40 45 / 8%)";
+const BERRY_CARD_SHADOW_LIFT = "0 4px 20px 0 rgb(32 40 45 / 12%)";
+const OUTLINE_ALPHA = 0.8;
+function createSiteTheme(def) {
+  const { accent, accent2, palette, radii, shadow, ui, rail, chrome, ink } = def;
+  const focus = def.focus ?? { light: accent.light, dark: accent.dark };
+  const berryChrome = ui.chrome === "berry";
+  const grad = "linear-gradient(135deg, var(--rt-grad-from), var(--rt-grad-to))";
+  const amb = AMBIENT[shadow] ?? AMBIENT.neutral;
+  const flat = shadow === "none";
+  const bodyFont = def.bodyFont ?? BODY_FONT;
+  const heading = {
+    ...def.headingFont ? { fontFamily: def.headingFont, fontWeight: 600 } : {},
+    // A theme may give its headings a darker ink than its body (Berry's
+    // grey-900 over grey-700). The var is emitted by the colour schemes below
+    // and re-scoped by OrgThemeRegistry like every other palette var.
+    ...palette.light.textHeading ? { color: "var(--mui-palette-text-heading)" } : {}
+  };
+  const dense = !!ui.dense;
+  const railInk = ui.nav === "rail" && rail ? {
+    bg: rail.bg,
+    fg: rail.fg,
+    dim: `color-mix(in srgb, ${rail.fg} 62%, transparent)`,
+    line: `color-mix(in srgb, ${rail.fg} 16%, transparent)`
+  } : {
+    bg: def.palette.dark.bgDefault,
+    fg: def.palette.dark.textPrimary,
+    dim: def.palette.dark.textSecondary,
+    line: def.palette.dark.divider
+  };
+  const lift = {
+    rest: `0 1px 2px rgba(${amb},0.05), 0 4px 10px -6px rgba(${amb},0.16)`,
+    raised: `0 2px 4px rgba(${amb},0.06), 0 10px 20px -10px rgba(${amb},0.22)`,
+    restDark: "0 1px 2px rgba(0,0,0,0.36), 0 4px 10px -6px rgba(0,0,0,0.46)",
+    raisedDark: "0 2px 4px rgba(0,0,0,0.40), 0 10px 20px -10px rgba(0,0,0,0.54)"
+  };
+  const containedPrimary = ui.button === "gradient" ? {
+    props: { variant: "contained", color: "primary" },
+    style: ({ theme }) => {
+      const pc = theme.vars.palette.primary.mainChannel;
+      return {
+        backgroundImage: grad,
+        color: theme.vars.palette.primary.contrastText,
+        boxShadow: ui.glow ? `0 2px 7px -2px rgba(${pc} / 0.34), 0 7px 18px -8px rgba(${pc} / 0.30)` : `0 1px 2px rgba(${amb},0.10), 0 6px 12px -8px rgba(${pc} / 0.30)`,
+        "&:hover": {
+          backgroundImage: grad,
+          filter: "brightness(1.06)",
+          transform: "translateY(-1px)",
+          boxShadow: ui.glow ? `0 3px 10px -2px rgba(${pc} / 0.42), 0 10px 22px -8px rgba(${pc} / 0.34)` : `0 2px 5px rgba(${amb},0.12), 0 8px 16px -8px rgba(${pc} / 0.36)`
+        },
+        "&:active": { transform: "translateY(0)", filter: "brightness(0.98)" },
+        "&.Mui-disabled": { backgroundImage: "none" }
+      };
+    }
+  } : {
+    props: { variant: "contained", color: "primary" },
+    style: ({ theme }) => {
+      const pc = theme.vars.palette.primary.mainChannel;
+      if (ui.solidShadow) {
+        return {
+          backgroundImage: "none",
+          backgroundColor: theme.vars.palette.primary.main,
+          color: theme.vars.palette.primary.contrastText,
+          fontWeight: 700,
+          boxShadow: `0 5px 10px 0 rgba(${pc} / 0.16)`,
+          "&:hover": { backgroundColor: theme.vars.palette.primary.dark, boxShadow: "none" },
+          "&:active": { backgroundColor: theme.vars.palette.primary.dark, boxShadow: "none" },
+          "&.Mui-disabled": { boxShadow: "none" }
+        };
+      }
+      if (ui.materialShadow) {
+        return {
+          backgroundImage: "none",
+          backgroundColor: theme.vars.palette.primary.main,
+          color: theme.vars.palette.primary.contrastText,
+          boxShadow: theme.shadows[2],
+          "&:hover": { backgroundColor: theme.vars.palette.primary.dark, boxShadow: theme.shadows[4] },
+          "&:active": { boxShadow: theme.shadows[8] },
+          "&.Mui-disabled": { boxShadow: "none" }
+        };
+      }
+      return {
+        backgroundImage: "none",
+        backgroundColor: theme.vars.palette.primary.main,
+        color: theme.vars.palette.primary.contrastText,
+        boxShadow: flat ? "none" : `0 1px 2px rgba(${amb},0.12)`,
+        "&:hover": {
+          backgroundColor: theme.vars.palette.primary.main,
+          filter: "brightness(0.92)",
+          boxShadow: flat ? "none" : `0 2px 5px rgba(${amb},0.14)`
+        },
+        "&:active": { filter: "brightness(0.86)" }
+      };
+    }
+  };
+  const inputRoot = ({ theme }) => {
+    const pc = theme.vars.palette.primary.mainChannel;
+    const base = {
+      borderRadius: radii.input,
+      transition: "background-color 140ms, box-shadow 140ms"
+    };
+    const denseInput = dense ? { "& .MuiOutlinedInput-input": { paddingBlock: 9 } } : {};
+    if (ui.input === "filled") {
+      return {
+        ...base,
+        ...denseInput,
+        backgroundColor: `rgba(${pc} / 0.06)`,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: "transparent" },
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: `rgba(${pc} / 0.35)` },
+        "&.Mui-focused": { backgroundColor: theme.vars.palette.background.paper, boxShadow: `0 0 0 3px rgba(${pc} / 0.16)` },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary.main, borderWidth: 1 }
+      };
+    }
+    if (ui.input === "glass") {
+      return {
+        ...base,
+        ...denseInput,
+        backgroundColor: `rgba(${pc} / 0.05)`,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.divider },
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: `rgba(${pc} / 0.5)` },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderWidth: 1, borderColor: theme.vars.palette.primary.main },
+        "&.Mui-focused": { boxShadow: `0 0 0 3px rgba(${pc} / 0.18)` }
+      };
+    }
+    if (ui.input === "minimal") {
+      return {
+        ...base,
+        ...denseInput,
+        backgroundColor: "transparent",
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.divider, borderWidth: 1 },
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.text.secondary },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary.main, borderWidth: 1 }
+      };
+    }
+    if (ui.input === "raised") {
+      return {
+        ...base,
+        ...denseInput,
+        backgroundColor: theme.vars.palette.background.paper,
+        boxShadow: lift.rest,
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.divider },
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: `rgba(${pc} / 0.44)` },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary.main, borderWidth: 1 },
+        ...theme.applyStyles("dark", { boxShadow: lift.restDark })
+      };
+    }
+    if (ui.input === "berry") {
+      return {
+        ...base,
+        ...denseInput,
+        backgroundColor: palette.light.field,
+        "& .MuiOutlinedInput-input": { fontWeight: 500, paddingBlock: "15.5px" },
+        "& .MuiOutlinedInput-notchedOutline": { borderColor: palette.light.fieldEdge },
+        /*
+         * THE 200 STEP, not `primary.light`, once a theme names its ramp. Berry's own rule reads `primary.light` — but Berry's
+         * primary is the BLUE, so its light step is a near-white #E3F2FD, and
+         * the rule is written `'&:hover $notchedOutline'`, JSS syntax that
+         * emotion never matches, so in Berry itself this hover does nothing at
+         * all. Ours matches. Pointed at the named light step it would draw a
+         * hover border paler than the resting one — a control that looks
+         * DISABLED when the pointer reaches it. #B39DDB is the step that reads.
+         */
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary[200] ?? theme.vars.palette.primary.light },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary.main, borderWidth: 1 },
+        ...theme.applyStyles("dark", {
+          backgroundColor: palette.dark.field,
+          "& .MuiOutlinedInput-notchedOutline": { borderColor: palette.dark.fieldEdge }
+        })
+      };
+    }
+    if (ui.input === "ruled") {
+      return {
+        ...base,
+        ...denseInput,
+        borderRadius: 0,
+        backgroundColor: "transparent",
+        "& .MuiOutlinedInput-notchedOutline": { border: "none", borderBottom: `1px solid ${theme.vars.palette.text.secondary}` },
+        "&:hover .MuiOutlinedInput-notchedOutline": { borderBottomColor: theme.vars.palette.text.primary },
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderBottomWidth: 2, borderBottomColor: theme.vars.palette.primary.main },
+        "& .MuiOutlinedInput-input": { paddingInline: 2 }
+      };
+    }
+    return {
+      ...base,
+      ...denseInput,
+      backgroundColor: theme.vars.palette.background.paper,
+      "& .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.divider },
+      "&:hover .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.text.secondary },
+      "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: theme.vars.palette.primary.main, borderWidth: 1 },
+      "&.Mui-focused": { boxShadow: `0 0 0 2px rgba(${theme.vars.palette.primary.mainChannel} / 0.18)` }
+    };
+  };
+  const cardSurface = ({ theme }) => {
+    const pc = theme.vars.palette.primary.mainChannel;
+    const base = {
+      borderRadius: radii.card,
+      border: `1px solid ${theme.vars.palette.divider}`,
+      backgroundImage: "none",
+      transition: "box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease"
+    };
+    if (ui.surface === "minimal") {
+      return {
+        borderRadius: radii.card,
+        border: `1px solid ${theme.vars.palette.divider}`,
+        backgroundImage: "none",
+        transition: "box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease",
+        boxShadow: "0 0 2px 0 rgba(145,158,171,0.16), 0 8px 16px -6px rgba(145,158,171,0.08)",
+        ...theme.applyStyles("dark", { boxShadow: "0 0 2px 0 rgba(0,0,0,0.20), 0 8px 16px -6px rgba(0,0,0,0.26)" }),
+        "&:has(.MuiCardActionArea-root):hover": {
+          transform: "translateY(-2px)",
+          boxShadow: "0 0 2px 0 rgba(145,158,171,0.18), 0 12px 22px -6px rgba(145,158,171,0.16)",
+          ...theme.applyStyles("dark", { boxShadow: "0 0 2px 0 rgba(0,0,0,0.26), 0 12px 22px -6px rgba(0,0,0,0.34)" })
+        }
+      };
+    }
+    if (ui.surface === "berry") {
+      return {
+        borderRadius: radii.card,
+        border: "none",
+        backgroundImage: "none",
+        transition: "box-shadow 180ms ease",
+        boxShadow: BERRY_CARD_SHADOW,
+        "&:has(.MuiCardActionArea-root):hover": { boxShadow: BERRY_CARD_SHADOW_LIFT }
+      };
+    }
+    if (ui.surface === "soft") {
+      return {
+        ...base,
+        boxShadow: `0 1px 2px rgba(${amb},0.04), 0 6px 14px -8px rgba(${amb},0.10), 0 16px 30px -18px rgba(${amb},0.20)`,
+        ...theme.applyStyles("dark", { boxShadow: "0 1px 2px rgba(0,0,0,0.35), 0 10px 22px -18px rgba(0,0,0,0.42)" }),
+        "&:has(.MuiCardActionArea-root):hover": {
+          transform: "translateY(-3px)",
+          borderColor: `rgba(${pc} / 0.35)`,
+          boxShadow: `0 3px 8px rgba(${amb},0.06), 0 18px 34px -18px rgba(${pc} / 0.22)`
+        }
+      };
+    }
+    if (ui.surface === "glass") {
+      return {
+        ...base,
+        position: "relative",
+        overflow: "hidden",
+        backgroundImage: `linear-gradient(180deg, rgba(${pc} / 0.05), transparent)`,
+        boxShadow: `0 1px 2px rgba(0,0,0,0.04), 0 6px 14px -10px rgba(${pc} / 0.10), 0 18px 32px -18px rgba(${amb},0.20)`,
+        ...theme.applyStyles("dark", { boxShadow: `0 1px 2px rgba(0,0,0,0.4), 0 13px 28px -20px rgba(${pc} / 0.20)` }),
+        "&::before": { content: '""', position: "absolute", insetInline: 0, top: 0, height: "1px", background: `linear-gradient(90deg, transparent, rgba(${pc} / 0.6), transparent)` },
+        "&:has(.MuiCardActionArea-root):hover": { transform: "translateY(-2px)", borderColor: `rgba(${pc} / 0.5)` }
+      };
+    }
+    return {
+      ...base,
+      boxShadow: `0 1px 2px rgba(${amb},0.04), 0 7px 16px -12px rgba(${amb},0.13)`,
+      ...theme.applyStyles("dark", { boxShadow: "0 1px 2px rgba(0,0,0,0.32), 0 9px 18px -14px rgba(0,0,0,0.36)" }),
+      "&:has(.MuiCardActionArea-root):hover": {
+        borderColor: `rgba(${pc} / 0.45)`,
+        boxShadow: `0 2px 4px rgba(${amb},0.05), 0 11px 22px -12px rgba(${amb},0.17)`
+      }
+    };
+  };
+  const cardEdge = (theme) => {
+    if (ui.cardEdge === "gradient") {
+      return {
+        position: "relative",
+        overflow: "hidden",
+        "&::after": { content: '""', position: "absolute", insetInline: 0, top: 0, height: "3px", backgroundImage: "linear-gradient(90deg, var(--rt-grad-from), var(--rt-grad-to))" }
+      };
+    }
+    if (ui.cardEdge === "accent") {
+      return {
+        position: "relative",
+        overflow: "hidden",
+        "&::after": { content: '""', position: "absolute", insetInline: 0, top: 0, height: "3px", backgroundColor: theme.vars.palette.primary.main }
+      };
+    }
+    if (ui.cardEdge === "ink") {
+      return { borderTop: `2px solid ${theme.vars.palette.text.primary}` };
+    }
+    return {};
+  };
+  const cardRoot = (args) => ({ ...cardSurface(args), ...cardEdge(args.theme) });
+  const dialogPaper = ({ theme }) => {
+    const pc = theme.vars.palette.primary.mainChannel;
+    const base = {
+      borderRadius: radii.dialog,
+      border: `1px solid ${theme.vars.palette.divider}`,
+      backgroundImage: "none",
+      position: "relative",
+      overflow: "hidden",
+      // clip the top rule to the dialog's rounded corners
+      // On a phone use nearly the full width — MUI's default 32px margin leaves a
+      // form dialog cramped at 375px. A slim 12px gutter each side instead.
+      [theme.breakpoints.down("sm")]: {
+        margin: 12,
+        width: "calc(100% - 24px)",
+        maxWidth: "calc(100% - 24px)",
+        /*
+         * A TASK-SIZED DIALOG TAKES THE WHOLE PHONE.
+         *
+         * A gutter is right for a confirm — a full-screen "Delete this?" is a
+         * jarring answer to a small question. It is not right for a wizard, a
+         * template editor, an import preview or a picker, each of which is a
+         * whole task rendered at `maxWidth="md"`: at 375px those become a form
+         * inside a box inside a box, with the 24px of gutter taken off the only dimension that
+         * mattered.
+         *
+         * Keyed on the SIZE the dialog already declares rather than on a new
+         * prop, so all twenty-seven get the right treatment without a single
+         * call site changing — and a dialog added later inherits it by saying
+         * how big it is, which it has to do anyway.
+         */
+        "&.MuiDialog-paperWidthMd, &.MuiDialog-paperWidthLg, &.MuiDialog-paperWidthXl": {
+          margin: 0,
+          width: "100%",
+          maxWidth: "100%",
+          height: "100%",
+          maxHeight: "100%",
+          borderRadius: 0,
+          border: 0
+        }
+      },
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        insetInline: 0,
+        top: 0,
+        height: "3px",
+        backgroundImage: grad
+      }
+    };
+    if (ui.surface === "berry") {
+      return {
+        ...base,
+        border: "none",
+        padding: "12px 0",
+        boxShadow: theme.shadows[24],
+        "&::before": { display: "none" }
+      };
+    }
+    if (ui.surface === "minimal") {
+      return {
+        ...base,
+        border: "none",
+        boxShadow: "0 0 3px 0 rgba(145,158,171,0.18), 0 20px 40px -14px rgba(145,158,171,0.22)",
+        ...theme.applyStyles("dark", { boxShadow: "0 0 3px 0 rgba(0,0,0,0.34), 0 20px 40px -14px rgba(0,0,0,0.46)" })
+      };
+    }
+    if (ui.surface === "glass") {
+      return {
+        ...base,
+        backgroundImage: `linear-gradient(180deg, rgba(${pc} / 0.06), transparent 160px)`,
+        boxShadow: ui.glow ? `0 0 0 1px rgba(${pc} / 0.12), 0 22px 46px -18px rgba(${pc} / 0.28)` : `0 19px 40px -18px rgba(${amb},0.34)`,
+        ...theme.applyStyles("dark", { boxShadow: `0 0 0 1px rgba(${pc} / 0.16), 0 22px 46px -18px rgba(0,0,0,0.55)` })
+      };
+    }
+    if (flat) {
+      return {
+        ...base,
+        boxShadow: `0 10px 30px -16px rgba(${amb},0.24)`,
+        ...theme.applyStyles("dark", { boxShadow: "0 12px 34px -16px rgba(0,0,0,0.52)" })
+      };
+    }
+    return {
+      ...base,
+      boxShadow: `0 2px 5px rgba(${amb},0.05), 0 20px 40px -18px rgba(${amb},0.30)`,
+      ...theme.applyStyles("dark", { boxShadow: "0 2px 5px rgba(0,0,0,0.4), 0 20px 40px -16px rgba(0,0,0,0.5)" })
+    };
+  };
+  const softLabel = (color) => ({
+    props: { variant: "filled", color },
+    style: ({ theme }) => ({
+      backgroundColor: `rgba(${theme.vars.palette[color].mainChannel} / 0.16)`,
+      color: theme.vars.palette[color].dark,
+      ...theme.applyStyles("dark", { color: theme.vars.palette[color].light })
+    })
+  });
+  const defaultChip = {
+    props: { variant: "filled", color: "default" },
+    style: ({ theme }) => ({ backgroundColor: theme.vars.palette.action.hover, color: theme.vars.palette.text.secondary })
+  };
+  const solidPrimaryChip = {
+    props: { variant: "filled", color: "primary" },
+    style: ({ theme }) => ({
+      backgroundColor: theme.vars.palette.primary.main,
+      color: theme.vars.palette.primary.contrastText,
+      /*
+       * THE DARK OVERRIDE HAS TO BE RESTATED, and it is not belt-and-braces.
+       *
+       * `softFill` above sets its dark colour through `applyStyles('dark', …)`,
+       * which emits a NESTED SELECTOR. A flat `color` here loses to it on
+       * SPECIFICITY no matter that this variant comes later in the array —
+       * order only decides ties. So the chip took the solid background from
+       * this variant and the pale label from that one: `primary.light` text on
+       * `primary.main` fill, which on damson measured 1.2:1 and was effectively
+       * invisible. Matching selector shape puts the two back on equal footing,
+       * where being last wins.
+       *
+       * Light mode was never as bad (softFill uses `.dark` there, on a solid
+       * mid-tone) which is exactly why this survived review.
+       */
+      ...theme.applyStyles("dark", { color: theme.vars.palette.primary.contrastText }),
+      fontWeight: 700
+    })
+  };
+  const accent2Chip = accent2 ? [{
+    props: { variant: "outlined", color: "default" },
+    style: ({ theme }) => ({
+      borderColor: `color-mix(in srgb, ${accent2.light} 55%, transparent)`,
+      color: accent2.light,
+      ...theme.applyStyles("dark", {
+        borderColor: `color-mix(in srgb, ${accent2.dark} 55%, transparent)`,
+        color: accent2.dark
+      })
+    })
+  }] : [];
+  const softFill = (color, alpha) => ({
+    props: { variant: "filled", color },
+    style: ({ theme }) => ({
+      backgroundColor: `rgba(${theme.vars.palette[color].mainChannel} / ${alpha})`,
+      color: theme.vars.palette[color].dark,
+      ...theme.applyStyles("dark", { color: theme.vars.palette[color].light })
+    })
+  });
+  const berryChip = (color) => ({
+    props: { variant: "filled", color },
+    style: ({ theme }) => ({
+      backgroundColor: `rgba(${theme.vars.palette[color].mainChannel} / 0.12)`,
+      color: theme.vars.palette[color].main,
+      ...theme.applyStyles("dark", {
+        backgroundColor: `rgba(${theme.vars.palette[color].mainChannel} / 0.2)`,
+        color: theme.vars.palette[color].light
+      })
+    })
+  });
+  const chipVariants = [
+    ...ui.chips === "berry" ? [berryChip("primary"), berryChip("secondary"), berryChip("info"), berryChip("success"), berryChip("warning"), berryChip("error"), defaultChip] : ui.labelChips ? [softLabel("primary"), softLabel("info"), softLabel("success"), softLabel("warning"), softLabel("error"), defaultChip] : [
+      softFill("primary", 0.14),
+      // The data hue is a chip colour like the other four — without this it
+      // fell through to MUI's own filled chip, a SOLID block with white
+      // text, and every "Published" on nineteen themes was the one heavy
+      // thing in a row of tints.
+      softFill("info", 0.14),
+      softFill("success", 0.16),
+      softFill("warning", 0.2),
+      softFill("error", 0.2),
+      defaultChip
+    ],
+    // After the base variants, so these win on order.
+    ...ui.solidChips ? [solidPrimaryChip] : [],
+    ...accent2Chip
+  ];
+  const ramp = (scheme, key) => def.ramps?.[scheme]?.[key] ?? {};
+  const grey = (scheme) => def.ramps?.[scheme]?.grey ? { grey: def.ramps[scheme].grey } : {};
+  return createTheme({
+    cssVariables: { colorSchemeSelector: "class" },
+    colorSchemes: {
+      light: {
+        palette: {
+          primary: { ...ramp("light", "primary"), main: accent.light, contrastText: accent.contrastLight },
+          secondary: { ...ramp("light", "secondary"), main: palette.light.secondary, contrastText: "#FFFFFF" },
+          success: { ...ramp("light", "success"), main: palette.light.success },
+          warning: { ...ramp("light", "warning"), main: palette.light.warning },
+          error: { ...ramp("light", "error"), main: palette.light.error },
+          /*
+           * `info` IS THE DATA HUE — the colour a status wears when it is in
+           * flight (Submitted, Scheduled, Mitigated). Every theme names its own
+           * (palette.*.data): far enough from its accent to read as a different
+           * thing, out of the green and amber bands so it cannot be mistaken
+           * for success or caution, and AA on that theme's paper. It used to be
+           * a copy of the accent, which is why nothing could use it.
+           */
+          info: { ...ramp("light", "info"), main: palette.light.data, contrastText: "#FFFFFF" },
+          text: { primary: palette.light.textPrimary, secondary: palette.light.textSecondary, ...palette.light.textHeading ? { heading: palette.light.textHeading } : {} },
+          ...grey("light"),
+          divider: palette.light.divider,
+          background: { default: palette.light.bgDefault, paper: palette.light.bgPaper }
+        }
+      },
+      dark: {
+        palette: {
+          primary: { ...ramp("dark", "primary"), main: accent.dark, contrastText: accent.contrastDark },
+          secondary: { ...ramp("dark", "secondary"), main: palette.dark.secondary, contrastText: "#0A0B0F" },
+          success: { ...ramp("dark", "success"), main: palette.dark.success },
+          warning: { ...ramp("dark", "warning"), main: palette.dark.warning },
+          error: { ...ramp("dark", "error"), main: palette.dark.error },
+          info: { ...ramp("dark", "info"), main: palette.dark.data, contrastText: "#0A0B0F" },
+          text: { primary: palette.dark.textPrimary, secondary: palette.dark.textSecondary, ...palette.dark.textHeading ? { heading: palette.dark.textHeading } : {} },
+          ...grey("dark"),
+          divider: palette.dark.divider,
+          background: { default: palette.dark.bgDefault, paper: palette.dark.bgPaper }
+        }
+      }
+    },
+    typography: def.typeRamp === "berry" ? {
+      /*
+       * berry: Berry's ramp — Roboto at 14px, 700/600/500 weights and NO
+       * negative tracking — keyed to the roles the variants play here (a page
+       * title is h4 or h3 depending on the app; a panel title is h6), so
+       * Berry's h6 at 0.75rem is not what a SectionPanel title becomes.
+       */
+      fontFamily: bodyFont,
+      h1: { fontSize: "2.125rem", fontWeight: 700, lineHeight: 1.2, ...heading },
+      h2: { fontSize: "1.75rem", fontWeight: 700, lineHeight: 1.25, ...heading },
+      h3: { fontSize: "1.5rem", fontWeight: 600, lineHeight: 1.3, ...heading },
+      h4: { fontSize: "1.25rem", fontWeight: 600, ...heading },
+      h5: { fontSize: "1.125rem", fontWeight: 500, ...heading },
+      h6: { fontSize: "1rem", fontWeight: 500, ...heading },
+      subtitle1: { fontSize: "0.875rem", fontWeight: 500 },
+      subtitle2: { fontSize: "0.75rem", fontWeight: 400 },
+      body1: { fontSize: "0.875rem", lineHeight: 1.5 },
+      body2: { fontSize: "0.875rem", lineHeight: 1.5 },
+      caption: { fontSize: "0.75rem" },
+      button: { textTransform: "capitalize", fontWeight: 500, letterSpacing: "0.02857em" }
+    } : {
+      fontFamily: bodyFont,
+      h1: { fontSize: "2.75rem", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.1, ...heading },
+      h2: { fontSize: "2.125rem", fontWeight: 800, letterSpacing: "-0.025em", lineHeight: 1.15, ...heading },
+      h3: { fontSize: "1.5rem", fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.2, ...heading },
+      h4: { fontSize: "1.25rem", fontWeight: 700, letterSpacing: "-0.015em", ...heading },
+      h5: { fontSize: "1.075rem", fontWeight: 700, letterSpacing: "-0.01em", ...heading },
+      h6: { fontSize: "0.95rem", fontWeight: 700, letterSpacing: "-0.005em", ...heading },
+      subtitle1: { letterSpacing: "-0.01em" },
+      body1: { lineHeight: 1.6 },
+      body2: { lineHeight: 1.55 },
+      button: { textTransform: "none", fontWeight: 600, letterSpacing: ui.button === "solid" ? "0.01em" : "0" }
+    },
+    shape: { borderRadius: radii.base },
+    // Custom extension: the theme's PERSONALITY, so the kit's components
+    // (ListRow, RowList, IconTile, EmptyNote, …) and any future component can
+    // render per-theme via useTheme().rt — not just inherit palette/shape.
+    // `rail` is read by DashboardLayout's own nav branch; `accent2` is here so a
+    // future component can reach the second hue without importing the theme defs.
+    rt: {
+      ui,
+      mono: MONO_FONT,
+      radii,
+      headingFont: def.headingFont ?? null,
+      outlineAlpha: OUTLINE_ALPHA,
+      accent2: accent2 ?? null,
+      rail: rail ?? null,
+      lift,
+      // berry: the chrome surface and the bar height the shells read. 64 is the
+      // MUI Toolbar height at md+, what every non-Berry shell already assumes.
+      // 84 for the ink bar: the marketing site's header height, so the app's
+      // front door and the page that links to it are the same object.
+      chrome: chrome ?? null,
+      barHeight: berryChrome ? 88 : ui.header === "ink" ? 84 : 64,
+      // berry: the resting card shadow, for the one non-Card surface that is
+      // drawn as a card (PageHeader's title strip). null elsewhere.
+      cardShadow: ui.surface === "berry" ? BERRY_CARD_SHADOW : null,
+      // A signed-in portal's section bar, which pins itself under the brand bar
+      // and which a sticky rail below (a form stepper, say) clears. One number,
+      // here, so the bar, the drawer and the rail cannot drift apart.
+      navHeight: 48
+    },
+    components: {
+      MuiCssBaseline: {
+        styleOverrides: (theme) => ({
+          body: {
+            "--rt-grad-from": accent.gradient.light[0],
+            "--rt-grad-to": accent.gradient.light[1],
+            ...theme.applyStyles("dark", { "--rt-grad-from": accent.gradient.dark[0], "--rt-grad-to": accent.gradient.dark[1] }),
+            /*
+             * THE FOCUS RING, as a variable, so a surface that the accent
+             * cannot be seen on can override it for its own subtree rather than
+             * re-declaring the whole rule. The dark rails do exactly that (see
+             * DashboardLayout): their ground IS the brand colour, and an accent
+             * ring on it is a colour on a colour.
+             */
+            "--rt-focus": focus.light,
+            ...theme.applyStyles("dark", { "--rt-focus": focus.dark }),
+            /*
+             * THE BRAND MARK'S SHAPE, for a theme that states one. Only the
+             * brand chrome does: the marketing site draws the glyph as a hard
+             * 2px square with no glow, and BrandMark's own default — a corner
+             * at 30% of the size, under a coloured glow — is a different mark
+             * standing next to the same wordmark. Absent, BrandMark keeps that
+             * default, so no org theme's mark moves.
+             */
+            ...ink?.markRadius ? { "--rt-mark-radius": ink.markRadius } : {},
+            ...ink?.markShadow ? { "--rt-mark-shadow": ink.markShadow } : {}
+          },
+          /*
+           * WHERE THE KEYBOARD IS. One `:focus-visible` rule for every theme.
+           *
+           * Inputs have a good focus treatment of their own (the tinted 3px ring
+           * further down this file); without this rule everything else falls
+           * back to MUI's
+           * `.Mui-focusVisible`, which is a faint `action.hover`-weight tint. On
+           * a nav row that already carries a tint, a gradient or a solid accent
+           * fill — which is most of them, across twelve nav voices — that is no
+           * indicator at all. A keyboard user tabbing through an admin could
+           * not tell where they were — WCAG 2.4.7, failing on every theme at once.
+           *
+           * `outline-offset` is what makes ONE rule work everywhere: the ring is
+           * drawn OUTSIDE the element, on whatever the element sits on, rather
+           * than on the element's own fill. A focused contained button therefore
+           * gets an accent ring on the page ground (where the accent is gated to
+           * 4.5:1) instead of an accent ring on an accent fill.
+           *
+           * `outline` rather than `box-shadow` deliberately: it survives Windows
+           * High Contrast Mode, where box-shadows are dropped entirely.
+           */
+          /*
+           * `html :focus-visible`, NOT a bare `:focus-visible`, and the extra
+           * type selector is the entire reason this works.
+           *
+           * MUI's ButtonBase emits `outline: 0px` in its own emotion class. A
+           * bare `:focus-visible` is specificity (0,1,0) — identical to a single
+           * class — and emotion's component styles are injected AFTER
+           * CssBaseline, so source order handed the tie to MUI and the ring was
+           * silently removed from every Button, IconButton, ListItemButton, Tab,
+           * Chip and CardActionArea in the product. It survived only on plain
+           * anchors, which is what made it look like it was working.
+           *
+           * `html` lifts this to (0,1,1), which beats a single class regardless
+           * of order. The input exclusions below are (0,2,0) and still win over
+           * this, which is what they are for.
+           *
+           * This was caught by tabbing through a real page. Both unit tests
+           * passed the whole time — one asserts the rule is emitted, the other
+           * that its colour contrasts, and neither can see a cascade.
+           */
+          "html :focus-visible": {
+            outline: "2px solid var(--rt-focus)",
+            outlineOffset: "2px"
+          },
+          /*
+           * The exceptions, and both are "this already has a focus treatment".
+           *
+           * A text field's ring is drawn on its notched outline by the input
+           * overrides in this file; the <input> inside would otherwise take a
+           * SECOND ring, nested a couple of pixels in from the first.
+           */
+          ".MuiInputBase-input:focus-visible, .MuiSelect-select:focus-visible": {
+            outline: "none"
+          }
+        })
+      },
+      MuiAppBar: {
+        defaultProps: { elevation: 0, color: "inherit" },
+        styleOverrides: {
+          root: ({ theme }) => {
+            if (ui.header === "ink" && ink) {
+              return {
+                backgroundColor: ink.bg,
+                backgroundImage: "none",
+                color: ink.text,
+                borderBottom: `1px solid ${ink.divider}`,
+                boxShadow: "none",
+                /*
+                 * A BARE `position: relative` HERE OVERRODE `<AppBar position="fixed">`.
+                 * DashboardLayout renders a fixed bar and puts a spacer under it; with
+                 * the bar dropped back into flow the spacer's height was added a second
+                 * time and every dashboard's content was pushed off the fold. Kept
+                 * scoped to a STATIC bar, which is the only one that needs it.
+                 */
+                "&.MuiAppBar-positionStatic": { position: "relative" },
+                /*
+                 * An IconButton takes `action.active` — an INK colour, chosen for a
+                 * light surface — rather than inheriting. On this bar that is the mode
+                 * toggle and the language picker rendered in near-black on near-black.
+                 */
+                "& .MuiIconButton-root": { color: "inherit" },
+                /*
+                 * The wordmark as the site sets it: 24px, 650, tracked in, and
+                 * lowercase with a full stop. `rt-wordmark`, NOT `.MuiTypography-h6`
+                 * — the dashboard bar uses that variant for the ORG'S OWN NAME, and
+                 * this would have lowercased it and punctuated it.
+                 *
+                 * `textTransform` is presentation only: the DOM still holds the name
+                 * as written, so what is read aloud and what is copied are unchanged.
+                 * The stop is generated content for the same reason — it belongs to
+                 * the drawing of the logo, not to the name of the company.
+                 */
+                "& .rt-wordmark": {
+                  fontSize: "1.5rem",
+                  fontWeight: 650,
+                  letterSpacing: "-1.2px",
+                  textTransform: "lowercase",
+                  "&::after": { content: '"."', color: ink.period }
+                },
+                /*
+                 * DARK SCHEME. The site has no dark mode to copy, and copying the bar
+                 * anyway would put #0B172D against a #0B1632 page — a bar with no
+                 * edge. The dark paper is what separates it, and the hairline stays.
+                 */
+                ...theme.applyStyles("dark", { backgroundColor: theme.vars.palette.background.paper })
+              };
+            }
+            if (ui.nav === "inverse" || ui.nav === "rail") {
+              return {
+                backgroundColor: theme.vars.palette.background.default,
+                borderBottom: "none"
+              };
+            }
+            if (berryChrome) {
+              return {
+                backgroundColor: chrome.light,
+                borderBottom: "none",
+                boxShadow: "none",
+                ...theme.applyStyles("dark", { backgroundColor: chrome.dark })
+              };
+            }
+            return {
+              backgroundColor: `rgba(${theme.vars.palette.background.paperChannel} / ${ui.surface === "glass" ? 0.6 : 0.72})`,
+              backdropFilter: "saturate(180%) blur(12px)",
+              WebkitBackdropFilter: "saturate(180%) blur(12px)",
+              borderBottom: `1px solid ${theme.vars.palette.divider}`
+            };
+          }
+        }
+      },
+      /*
+       * nav:'inverse' — the dashboard sidebar keeps the theme's DARK ground in
+       * both colour schemes (the dark-chrome SaaS chrome cobalt copies). Colours
+       * are literals from palette.dark, NOT vars: the drawer must not flip when
+       * the scheme does. Only dashboard drawers exist in these apps, so keying
+       * MuiDrawer is safe; row selection colours live in DashboardLayout, which
+       * reads rt.ui.nav for the same branch.
+       */
+      /*
+       * nav:'rail' owns its column too, but paints it in a BRAND surface of its
+       * own (def.rail) rather than in the theme's dark page ground. That is the
+       * whole difference between the two: verdigris's #0B5E58 is not its
+       * dark-mode ground, and a rail that borrowed the ground would lose the
+       * colour the theme is named for. Literals either way, for the same reason
+       * — the drawer must not flip when the scheme does.
+       */
+      ...berryChrome ? {
+        MuiDrawer: {
+          styleOverrides: {
+            paper: ({ theme }) => ({
+              backgroundColor: chrome.light,
+              borderRight: "none",
+              ...theme.applyStyles("dark", { backgroundColor: chrome.dark })
+            })
+          }
+        }
+      } : {},
+      ...ui.nav === "inverse" || ui.nav === "rail" ? {
+        MuiDrawer: {
+          styleOverrides: {
+            paper: {
+              backgroundColor: railInk.bg,
+              color: railInk.fg,
+              borderRight: "none",
+              "& .MuiListSubheader-root": { color: railInk.dim },
+              "& .MuiDivider-root": { borderColor: railInk.line },
+              "& .MuiChip-outlined": { color: railInk.dim, borderColor: railInk.line },
+              /*
+               * THE FOCUS RING, RE-POINTED FOR THIS COLUMN. Everywhere else the
+               * ring is the accent, which is gated to 4.5:1 on paper and on the
+               * page ground. Neither of those is what this drawer is made of:
+               * `inverse` paints it the theme's dark ground and `rail` paints it
+               * the BRAND colour itself, so an accent ring here is either lost
+               * in a dark surface or a colour drawn on the same colour.
+               *
+               * The rail already names the ink that reads on it — the same value
+               * its labels use — so the ring borrows that and inherits the
+               * contrast the surface was designed with.
+               */
+              "--rt-focus": railInk.fg
+            }
+          }
+        }
+      } : {},
+      MuiCard: { defaultProps: { elevation: 0 }, styleOverrides: { root: cardRoot } },
+      MuiButton: {
+        styleOverrides: {
+          root: {
+            borderRadius: radii.button,
+            paddingInline: ui.buttonCase ? 16 : dense ? 14 : 18,
+            paddingBlock: dense ? 5 : void 0,
+            transition: "transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, filter 140ms ease"
+          },
+          sizeLarge: { paddingBlock: dense ? 8 : 11, paddingInline: dense ? 18 : 22, fontSize: "0.95rem", borderRadius: radii.buttonLarge },
+          sizeSmall: { paddingInline: dense ? 10 : 14 },
+          /*
+           * A BUTTON'S EDGE IS WHAT SAYS IT IS A BUTTON, so it is held to
+           * WCAG 1.4.11's 3:1 for non-text UI boundaries — not to the 4.5 the
+           * label answers to, and not to nothing.
+           *
+           * It used to be `divider`, a hairline meant for separating rows of
+           * text. Against each theme's own page ground that measured 1.10–1.59
+           * — verdigris worst — and the control read as a floating label with a
+           * suggestion of a box round it. The hover state was no better: accent
+           * at 0.5 alpha lands at 1.99–2.46, so pointing at it barely helped.
+           *
+           * OUTLINE_ALPHA is the accent's weight at rest, resolved once in `rt`
+           * so the test that pins this reads the same number rather than a
+           * second copy of it. Hover goes to the accent at FULL strength, which
+           * is both a real affordance and strictly an increase — the previous
+           * pair had hover fainter than this rest.
+           */
+          outlined: ({ theme }) => ({
+            borderColor: `rgba(${theme.vars.palette.primary.mainChannel} / ${OUTLINE_ALPHA})`,
+            "&:hover": {
+              borderColor: theme.vars.palette.primary.main,
+              backgroundColor: theme.vars.palette.action.hover
+            }
+          }),
+          text: ui.underlineLinks ? { "&:hover": { backgroundColor: "transparent", textDecoration: "underline", textUnderlineOffset: "3px" } } : void 0
+        },
+        variants: [containedPrimary]
+      },
+      MuiChip: {
+        styleOverrides: {
+          // minimals.cc <Label>: compact 24px pill, 6px radius, bold 12px text,
+          // tight side padding. Other themes keep their softer 600-weight chip.
+          root: ui.labelChips ? { borderRadius: 6, height: 24, fontWeight: 700, fontSize: "0.75rem", "& .MuiChip-label": { paddingInline: 6 } } : { borderRadius: ui.pillChips ? 999 : radii.chip, fontWeight: 600, paddingInline: 2 }
+        },
+        variants: chipVariants
+      },
+      /*
+       * microLabels — the label moves ABOVE the field as an uppercase
+       * micro-label, and that is a theme decision no page should have to know
+       * about. Forcing `shrink` lifts every label out of every field at once,
+       * dialogs and settings panes included, and collapsing the notch legend
+       * closes the outline back up behind it.
+       *
+       * These two entries are ONE MuiOutlinedInput key either way — a second
+       * one later in the object would silently win.
+       */
+      ...ui.microLabels ? {
+        MuiInputLabel: {
+          defaultProps: { shrink: true },
+          styleOverrides: {
+            root: ({ theme }) => ({
+              position: "static",
+              transform: "none",
+              maxWidth: "100%",
+              marginBottom: 5,
+              fontSize: "0.625rem",
+              fontWeight: 700,
+              textTransform: "uppercase",
+              letterSpacing: "0.09em",
+              color: theme.vars.palette.text.secondary,
+              // Not the accent on focus: at this size a colour change reads as
+              // an error rather than as focus, and the field's own rule already
+              // says where the caret is.
+              "&.Mui-focused": { color: theme.vars.palette.text.secondary }
+            })
+          }
+        },
+        MuiOutlinedInput: {
+          styleOverrides: { root: inputRoot, notchedOutline: { "& legend": { display: "none" } } }
+        }
+      } : {
+        MuiOutlinedInput: { styleOverrides: { root: inputRoot } }
+      },
+      /*
+       * The header micro-label is the THEME's, not the page's: a page writes
+       * <TableCell>Last name</TableCell> and nothing else, so if the register
+       * look lives anywhere it has to live here.
+       */
+      MuiTableCell: {
+        styleOverrides: {
+          root: ({ theme }) => ({
+            ...dense ? { padding: "7px 12px", fontSize: "0.75rem" } : {},
+            ...ui.tableRules === "columns" ? { borderRight: `1px solid ${theme.vars.palette.divider}`, "&:last-of-type": { borderRight: "none" } } : {},
+            /*
+             * A ROW RULE DRAWN FROM THE INK, not from `divider`.
+             *
+             * MUI rules table rows with `palette.divider`, and the panelled
+             * themes set that very light on purpose — it is tuned for a hairline
+             * BETWEEN PANELS on a tinted ground (#E1E7E5 on verdigris). At that
+             * weight it vanishes against white paper, so the table read as one
+             * undivided block. 12% of the text colour is a line you can follow
+             * across a wide row, and it still tracks the palette in both schemes.
+             *
+             * Bundled with `tableHead: 'band'` rather than given a flag of its
+             * own: a banded header, visible row rules and no column rules are
+             * one look — the panelled table — and splitting them would be two
+             * switches nobody would set differently.
+             */
+            ...ui.tableHead === "band" ? { borderBottom: `1px solid color-mix(in srgb, ${theme.vars.palette.text.primary} 12%, transparent)` } : {}
+          }),
+          /*
+           * TWO WEIGHTS OF THE SAME IDEA, and the difference is what carries
+           * the separation. 'rule' puts the caps over a 2px INK rule — the
+           * printed-register move, which needs the weight because its rows are
+           * ruled too. 'band' lets a tinted strip do the work instead, so the
+           * header reads as a header without a black line across a soft,
+           * rounded card.
+           *
+           * The caps themselves are the theme's, not the page's: a page writes
+           * <TableCell>Last name</TableCell> and nothing else, so this is the
+           * only place the treatment can live.
+           */
+          head: ({ theme }) => {
+            const tint = `color-mix(in srgb, ${theme.vars.palette.text.primary} 4%, transparent)`;
+            const band = {
+              backgroundColor: theme.vars.palette.background.paper,
+              backgroundImage: `linear-gradient(${tint}, ${tint})`
+            };
+            return {
+              // A dense theme keeps its tighter rows; it is a size step, not a
+              // different treatment.
+              fontSize: dense ? "0.8125rem" : "0.875rem",
+              fontWeight: 500,
+              color: palette.light.textHeading ? "var(--mui-palette-text-heading)" : theme.vars.palette.text.primary,
+              ...band,
+              /*
+               * The rule is the one thing the variants still disagree about,
+               * because it is drawn rather than set: `rule` is the printed
+               * register's heavy ink line, and it belongs to the two themes
+               * that rule their columns too.
+               */
+              borderBottom: ui.tableHead === "rule" ? `2px solid ${theme.vars.palette.text.primary}` : `1px solid ${theme.vars.palette.divider}`
+            };
+          }
+        }
+      },
+      /*
+       * Zebra INSTEAD of row rules, not on top of them — a banded table that
+       * also rules every row reads as a grid of boxes, so the band comes with
+       * the row border removed and the column rules carry the vertical
+       * structure.
+       *
+       * nth-of-type rather than nth-child: a caption or colgroup dropped in
+       * later would shift nth-child by one.
+       */
+      MuiTableRow: {
+        styleOverrides: {
+          root: ({ theme }) => ui.tableZebra ? {
+            "&:nth-of-type(odd) > .MuiTableCell-body": {
+              backgroundColor: `color-mix(in srgb, ${theme.vars.palette.text.primary} 4%, transparent)`
+            },
+            // The band separates; ruling every row as well would make a grid
+            // of boxes. Only `ledger` bands, and its columns are ruled.
+            "& > .MuiTableCell-body": { borderBottom: "none" },
+            /*
+             * HOVER HAS TO WIN, and it does not for free: the band is
+             * painted on the CELLS while MUI's `hover` prop colours the
+             * ROW, so an opaque cell sits on top of it and every other row
+             * silently stops responding to the pointer. Clearing the cells
+             * on hover lets the row's own colour through.
+             */
+            "&:hover > .MuiTableCell-body": { backgroundColor: "transparent" }
+          } : {}
+        }
+      },
+      MuiDialog: { defaultProps: { slotProps: { paper: { elevation: 0 } } }, styleOverrides: { paper: dialogPaper } },
+      /*
+       * berry: Berry's tabs are MUI's — an underline in the data hue (the
+       * secondary blue), a divider under the whole strip. The theme sets the
+       * colour so SectionTabs and any bare <Tabs> agree.
+       */
+      ...ui.tabs === "underline" ? {
+        MuiTabs: {
+          defaultProps: { indicatorColor: "secondary", textColor: "secondary" },
+          styleOverrides: { root: ({ theme }) => ({ "& .MuiTabs-list": { borderBottom: `1px solid ${theme.vars.palette.divider}` } }) }
+        },
+        MuiTab: { styleOverrides: { root: { textTransform: "capitalize", fontWeight: 500, minWidth: 90 } } }
+      } : {},
+      MuiMenu: {
+        styleOverrides: {
+          paper: ({ theme }) => ({
+            borderRadius: radii.menu,
+            border: `1px solid ${theme.vars.palette.divider}`,
+            boxShadow: flat ? "0 5px 16px -12px rgba(0,0,0,0.16)" : `0 7px 22px -10px rgba(${amb},0.19)`
+          })
+        }
+      }
+    }
+  });
+}
+export {
+  createSiteTheme as default
+};