mui-atelier 0.1.0

package/dist/theme/themes.js

@@ -0,0 +1,438 @@
+const SANS_STACK = 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+const SERIF_STACK = '"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif';
+const SANS = `var(--font-inter, ${SANS_STACK})`;
+const SERIF = `var(--font-editorial, ${SERIF_STACK})`;
+const PUBLIC_SANS = `var(--font-public-sans, ${SANS_STACK})`;
+const SORA = `var(--font-sora, ${SANS_STACK})`;
+const GROTESK = `var(--font-grotesk, ${SANS_STACK})`;
+const MANROPE = `var(--font-manrope, ${SANS_STACK})`;
+const CHAKRA = `var(--font-chakra, ${SANS_STACK})`;
+const JETBRAINS = `var(--font-jetbrains, ui-monospace, "SF Mono", Menlo, Consolas, monospace)`;
+const SPECTRAL = `var(--font-spectral, ${SERIF_STACK})`;
+const ROBOTO = `var(--font-roboto, Roboto, ${SANS_STACK})`;
+const DEFAULT_DEF = {
+  accent: {
+    light: "#AC5C1E",
+    dark: "#F2A365",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#231A10",
+    gradient: { light: ["#F0A15C", "#E8894A"], dark: ["#F2A365", "#E8894A"] }
+  },
+  palette: {
+    light: { textPrimary: "#2C2925", textSecondary: "#6B6357", divider: "#E0D4C2", bgDefault: "#FBF7F1", bgPaper: "#FFFFFF", secondary: "#6B6357", data: "#1E59AC", success: "#2E7D54", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#EDE7DC", textSecondary: "#A79E90", divider: "rgba(255,244,224,0.11)", bgDefault: "#17140F", bgPaper: "#211D16", secondary: "#B4AC9E", data: "#67A0F0", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 10, card: 20, button: 12, buttonLarge: 14, chip: 999, input: 12, dialog: 20, menu: 16 },
+  shadow: "warm",
+  bodyFont: SANS,
+  ui: { button: "gradient", input: "filled", surface: "soft", pillChips: true, dense: false, tableHead: "band" }
+};
+const LUXE_DEF = {
+  accent: {
+    light: "#5860E6",
+    dark: "#8F96FF",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0A0B0F",
+    gradient: { light: ["#6366F1", "#4F46E5"], dark: ["#6EE7FF", "#7C83FF"] }
+  },
+  palette: {
+    light: { textPrimary: "#1A1C22", textSecondary: "#464C59", divider: "rgba(18,20,30,0.16)", bgDefault: "#F4F5FA", bgPaper: "#FFFFFF", secondary: "#464C59", data: "#BE1FCC", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E7E9EE", textSecondary: "#8B90A0", divider: "rgba(255,255,255,0.09)", bgDefault: "#0A0B0F", bgPaper: "#16171D", secondary: "#8B90A0", data: "#ED99F5", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 10, card: 14, button: 10, buttonLarge: 12, chip: 999, input: 10, dialog: 16, menu: 12 },
+  shadow: "glow",
+  bodyFont: SANS,
+  ui: { button: "gradient", glow: true, input: "glass", surface: "glass", pillChips: true, dense: false, tableHead: "band" }
+};
+const EDITORIAL_DEF = {
+  accent: {
+    light: "#4F46E5",
+    dark: "#818CF8",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#14151A",
+    gradient: { light: ["#4F46E5", "#4338CA"], dark: ["#818CF8", "#6366F1"] }
+  },
+  palette: {
+    light: { textPrimary: "#1A1C22", textSecondary: "#3A404B", divider: "rgba(0,0,0,0.16)", bgDefault: "#F5F5F4", bgPaper: "#FFFFFF", secondary: "#3A404B", data: "#137D86", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#ECEEF3", textSecondary: "#9AA0AC", divider: "rgba(255,255,255,0.12)", bgDefault: "#14151A", bgPaper: "#1B1D24", secondary: "#9AA0AC", data: "#E186F3", success: "#34D399", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 3, card: 4, button: 3, buttonLarge: 4, chip: 3, input: 3, dialog: 6, menu: 4 },
+  shadow: "none",
+  headingFont: SERIF,
+  // artifact: serif headlines over a sans body (not serif throughout)
+  bodyFont: SANS,
+  ui: { button: "solid", underlineLinks: true, input: "minimal", surface: "flat", pillChips: false, dense: false, tableHead: "band" }
+};
+const PRO_DEF = {
+  accent: {
+    light: "#4338CA",
+    dark: "#818CF8",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0F1117",
+    gradient: { light: ["#4338CA", "#4F46E5"], dark: ["#818CF8", "#6366F1"] }
+  },
+  palette: {
+    light: { textPrimary: "#1C2027", textSecondary: "#4B5563", divider: "#D2D7DE", bgDefault: "#F7F8FA", bgPaper: "#FFFFFF", secondary: "#4B5563", data: "#248189", success: "#15803D", warning: "#92600A", error: "#B4442E" },
+    dark: { textPrimary: "#E5E7EB", textSecondary: "#9AA0AC", divider: "rgba(255,255,255,0.10)", bgDefault: "#0F1117", bgPaper: "#171A21", secondary: "#9AA0AC", data: "#E186F3", success: "#22C55E", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 6, card: 8, button: 6, buttonLarge: 6, chip: 5, input: 6, dialog: 8, menu: 6 },
+  shadow: "neutral",
+  bodyFont: SANS,
+  ui: { button: "solid", input: "crisp", surface: "flat", pillChips: false, dense: true, tableHead: "band" }
+};
+const MINIMAL_DEF = {
+  accent: {
+    light: "#008057",
+    dark: "#5BE49B",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#004B50",
+    gradient: { light: ["#5BE49B", "#00A76F"], dark: ["#5BE49B", "#00A76F"] }
+  },
+  palette: {
+    light: { textPrimary: "#1C252E", textSecondary: "#4A5560", divider: "rgba(145,158,171,0.34)", bgDefault: "#F4F6F8", bgPaper: "#FFFFFF", secondary: "#4A5560", data: "#0E388B", success: "#11833F", warning: "#9A6600", error: "#D13B1F" },
+    dark: { textPrimary: "#FFFFFF", textSecondary: "#919EAB", divider: "rgba(145,158,171,0.2)", bgDefault: "#141A21", bgPaper: "#1C252E", secondary: "#919EAB", data: "#5B94E4", success: "#11833F", warning: "#9A6600", error: "#D13B1F" }
+  },
+  radii: { base: 8, card: 16, button: 8, buttonLarge: 8, chip: 8, input: 8, dialog: 16, menu: 10 },
+  shadow: "neutral",
+  bodyFont: PUBLIC_SANS,
+  // the Minimal kit's typeface — everything, headings included
+  // Design, not just colour: borderless cards on a soft grey shadow (surface:'minimal'),
+  // bold accent-shadowed CTAs (solidShadow), ring-less rounded inputs (input:'minimal').
+  ui: { button: "solid", solidShadow: true, input: "minimal", surface: "minimal", pillChips: false, labelChips: true, dense: false, tableHead: "band" }
+};
+const COBALT_DEF = {
+  accent: {
+    light: "#0063F2",
+    dark: "#5B9BFF",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#071022",
+    gradient: { light: ["#0068FF", "#6E3AFF"], dark: ["#3E7BFF", "#8B5CF6"] }
+  },
+  palette: {
+    light: { textPrimary: "#101828", textSecondary: "#475467", divider: "#D5DEEF", bgDefault: "#ECF1F9", bgPaper: "#FFFFFF", secondary: "#475467", data: "#8515D5", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E6EBF5", textSecondary: "#8E9AB3", divider: "rgba(148,170,220,0.16)", bgDefault: "#060B18", bgPaper: "#131E36", secondary: "#8E9AB3", data: "#B86AF0", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 12, card: 18, button: 12, buttonLarge: 14, chip: 999, input: 12, dialog: 20, menu: 14 },
+  shadow: "glow",
+  headingFont: SORA,
+  bodyFont: SANS,
+  // nav:'inverse' — the deep-navy sidebar over light content is cobalt's
+  // signature move, straight from the reference.
+  ui: { button: "gradient", glow: true, input: "filled", surface: "soft", pillChips: true, dense: false, nav: "inverse", cardEdge: "gradient", tableHead: "band", stat: "gradient" }
+};
+const NOIR_DEF = {
+  accent: {
+    light: "#111111",
+    dark: "#F5F5F5",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0C0C0D",
+    gradient: { light: ["#2A2A2E", "#111111"], dark: ["#FFFFFF", "#D9D9DE"] }
+  },
+  palette: {
+    light: { textPrimary: "#141414", textSecondary: "#5C5C61", divider: "rgba(0,0,0,0.13)", bgDefault: "#E9E9EC", bgPaper: "#FFFFFF", secondary: "#5C5C61", data: "#1A5FD0", success: "#1F7A4D", warning: "#A16207", error: "#B42318" },
+    dark: { textPrimary: "#F2F2F2", textSecondary: "#9C9CA3", divider: "rgba(255,255,255,0.11)", bgDefault: "#09090A", bgPaper: "#161618", secondary: "#9C9CA3", data: "#7FB2FF", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 4, card: 8, button: 6, buttonLarge: 6, chip: 4, input: 4, dialog: 10, menu: 6 },
+  shadow: "none",
+  headingFont: GROTESK,
+  bodyFont: SANS,
+  // nav:'quiet' — the compact ink edge-bar sidebar; selection is weight and a
+  // hairline, never a tinted pill.
+  ui: { button: "solid", input: "crisp", surface: "flat", pillChips: false, labelChips: true, dense: false, nav: "quiet", cardEdge: "ink", tableHead: "band" }
+};
+const AZURE_DEF = {
+  accent: {
+    light: "#D71C45",
+    dark: "#FB7185",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#1F0A10",
+    gradient: { light: ["#F43F5E", "#E11D48"], dark: ["#FB7185", "#F43F5E"] }
+  },
+  palette: {
+    light: { textPrimary: "#232B36", textSecondary: "#5A6572", divider: "#E3E7ED", bgDefault: "#F1F3F6", bgPaper: "#FFFFFF", secondary: "#5A6572", data: "#1B66D0", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E8ECF2", textSecondary: "#96A1AD", divider: "rgba(255,255,255,0.10)", bgDefault: "#0B1017", bgPaper: "#1A2230", secondary: "#96A1AD", data: "#7AACF2", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 8, card: 10, button: 8, buttonLarge: 10, chip: 6, input: 8, dialog: 12, menu: 8 },
+  shadow: "neutral",
+  bodyFont: MANROPE,
+  // Manrope everywhere, headings included — azure's whole voice
+  // nav:'accent' — selection wears a soft tint and the rounded accent side-bar.
+  ui: { button: "solid", input: "minimal", surface: "flat", pillChips: false, dense: false, nav: "accent", cardEdge: "accent", tableHead: "band" }
+};
+const PURPLEHAZE_DEF = {
+  accent: {
+    light: "#7C3AED",
+    dark: "#A78BFA",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#150D2B",
+    gradient: { light: ["#8B5CF6", "#D946EF"], dark: ["#A78BFA", "#E879F9"] }
+  },
+  palette: {
+    light: { textPrimary: "#1B1730", textSecondary: "#585175", divider: "#DFD9F0", bgDefault: "#EFECF8", bgPaper: "#FFFFFF", secondary: "#585175", data: "#137AC3", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#EBE6FA", textSecondary: "#9F97BE", divider: "rgba(167,139,250,0.16)", bgDefault: "#0B0716", bgPaper: "#171130", secondary: "#9F97BE", data: "#91D3F4", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 10, card: 14, button: 10, buttonLarge: 12, chip: 6, input: 10, dialog: 16, menu: 12 },
+  shadow: "glow",
+  headingFont: CHAKRA,
+  bodyFont: SANS,
+  // Glass under a gradient edge, inside a permanently dark violet rail — the
+  // whole chrome glows. Shares luxe's surface machinery, none of its palette.
+  ui: { button: "gradient", glow: true, input: "glass", surface: "glass", pillChips: false, dense: false, nav: "inverse", cardEdge: "gradient", tableHead: "band" }
+};
+const VERDIGRIS_DEF = {
+  accent: {
+    light: "#0C776F",
+    dark: "#34C4B4",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#04302C",
+    gradient: { light: ["#12A096", "#0E8A80"], dark: ["#34C4B4", "#12A096"] }
+  },
+  // Read by createSiteTheme's MuiDrawer override and by DashboardLayout's
+  // `rail` branch. Literals, not vars: the rail must not flip with the scheme.
+  rail: { bg: "#0B5E58", fg: "#EAF4F2" },
+  palette: {
+    light: { textPrimary: "#16211F", textSecondary: "#5A6B68", divider: "#DEE2DE", bgDefault: "#E8EDE8", bgPaper: "#FFFFFF", secondary: "#5A6B68", data: "#0E188B", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E6EFED", textSecondary: "#93A5A2", divider: "rgba(230,239,237,0.12)", bgDefault: "#0C1413", bgPaper: "#14201E", secondary: "#93A5A2", data: "#6E80D9", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  // input matches `card` — a raised field IS a small card on this theme, so a
+  // tighter corner than the panels it sits between reads as a different family.
+  radii: { base: 10, card: 16, button: 12, buttonLarge: 12, chip: 999, input: 16, dialog: 16, menu: 12 },
+  shadow: "neutral",
+  bodyFont: PUBLIC_SANS,
+  /*
+   * `input: 'raised'`. Two things were wrong before it: 'minimal' is
+   * TRANSPARENT, so every field took the soft green ground and read as a grey
+   * slab; 'crisp' fixed the fill but kept a hard border on a theme where
+   * nothing else has one. Raised gives a field the same paper-and-soft-lift
+   * treatment the cards and buttons have, so every surface on the page is the
+   * same kind of thing.
+   *
+   * `tableHead: 'band'` for the same reason at the other end: without it a
+   * header row is the same size and weight as its data, and on a soft rounded
+   * card the ink rule 'rule' draws would be far too heavy.
+   */
+  ui: { button: "solid", solidShadow: true, input: "raised", surface: "soft", pillChips: true, dense: false, nav: "rail", tableHead: "band" }
+};
+const CONSOLE_DEF = {
+  accent: {
+    light: "#3F7A15",
+    dark: "#7CD44B",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0E1112",
+    gradient: { light: ["#5CA32B", "#3F7A15"], dark: ["#9BE86F", "#7CD44B"] }
+  },
+  palette: {
+    light: { textPrimary: "#14181A", textSecondary: "#5A6468", divider: "#D3D8DA", bgDefault: "#F2F3F2", bgPaper: "#FFFFFF", secondary: "#5A6468", data: "#164383", success: "#0B855A", warning: "#B45309", error: "#C4442E" },
+    dark: { textPrimary: "#DFE5E4", textSecondary: "#8A9694", divider: "rgba(223,229,228,0.14)", bgDefault: "#0E1112", bgPaper: "#15191A", secondary: "#8A9694", data: "#6394DA", success: "#7CD44B", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 2, card: 2, button: 2, buttonLarge: 2, chip: 2, input: 2, dialog: 4, menu: 2 },
+  shadow: "none",
+  bodyFont: JETBRAINS,
+  // everything, headings included — the whole voice
+  ui: { button: "solid", input: "crisp", surface: "flat", pillChips: false, labelChips: true, dense: true, nav: "bar", tableRules: "columns", tableHead: "rule", microLabels: true }
+};
+const LEDGER_DEF = {
+  accent: {
+    light: "#8C2F22",
+    dark: "#E08472",
+    contrastLight: "#FDFAF3",
+    contrastDark: "#2B1611",
+    gradient: { light: ["#A63A2A", "#8C2F22"], dark: ["#E08472", "#C2604D"] }
+  },
+  palette: {
+    light: { textPrimary: "#2B2621", textSecondary: "#6B6155", divider: "#C9BFA9", bgDefault: "#F5EFE3", bgPaper: "#FDFAF3", secondary: "#6B6155", data: "#224E8C", success: "#3F6B3A", warning: "#8E6210", error: "#8C2F22" },
+    dark: { textPrimary: "#F1E9DB", textSecondary: "#B0A390", divider: "rgba(241,233,219,0.16)", bgDefault: "#221D18", bgPaper: "#2C251E", secondary: "#B0A390", data: "#72A0E0", success: "#8FBE86", warning: "#E0B063", error: "#E08472" }
+  },
+  radii: { base: 0, card: 0, button: 0, buttonLarge: 0, chip: 0, input: 0, dialog: 4, menu: 2 },
+  shadow: "none",
+  headingFont: SPECTRAL,
+  bodyFont: SPECTRAL,
+  ui: { button: "solid", underlineLinks: true, input: "ruled", surface: "flat", pillChips: false, labelChips: true, dense: false, nav: "ruled", tableRules: "columns", tableHead: "rule", tableZebra: true, microLabels: true }
+};
+const DAMSON_DEF = {
+  accent: {
+    light: "#7A3B69",
+    dark: "#C68BB6",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#1D1620",
+    gradient: { light: ["#8E4A7B", "#7A3B69"], dark: ["#C68BB6", "#8E4A7B"] }
+  },
+  accent2: { light: "#5F7A2E", dark: "#A8C46A" },
+  rail: { bg: "#4E2646", fg: "#F6EFF4" },
+  palette: {
+    light: { textPrimary: "#1D1620", textSecondary: "#6A5C66", divider: "#E3DCE2", bgDefault: "#EDE8EC", bgPaper: "#FFFFFF", secondary: "#6A5C66", data: "#325483", success: "#4A7A2E", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#EFE6EE", textSecondary: "#A697A4", divider: "rgba(239,230,238,0.12)", bgDefault: "#160F16", bgPaper: "#1F1620", secondary: "#A697A4", data: "#82A2CF", success: "#A8C46A", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 10, card: 16, button: 12, buttonLarge: 12, chip: 999, input: 12, dialog: 16, menu: 12 },
+  shadow: "neutral",
+  bodyFont: PUBLIC_SANS,
+  // solidChips, and the reason is measurable: a low-alpha tint of a muted plum
+  // lands on top of the neutral chip — `admin` and `member` came out about
+  // 10/255 apart, which is not a distinction in a data table.
+  // `input: 'crisp'` and `tableHead: 'band'` for the same reason as verdigris,
+  // which this theme is built the same way as: a transparent field on the soft
+  // mauve ground (#EDE8EC against white paper) reads as a grey slab rather than
+  // a card, and an untreated header row is indistinguishable from its data.
+  ui: { button: "solid", solidShadow: true, input: "raised", surface: "soft", pillChips: true, solidChips: true, dense: false, nav: "rail", tableHead: "band" }
+};
+const DAMSONLIGHT_DEF = {
+  accent: {
+    light: "#7A3B69",
+    dark: "#C68BB6",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#1D1620",
+    gradient: { light: ["#8E4A7B", "#7A3B69"], dark: ["#C68BB6", "#8E4A7B"] }
+  },
+  accent2: { light: "#5F7A2E", dark: "#A8C46A" },
+  palette: {
+    light: { textPrimary: "#1D1620", textSecondary: "#6A5C66", divider: "#ECE4EA", bgDefault: "#F3F0F3", bgPaper: "#FFFFFF", secondary: "#6A5C66", data: "#325483", success: "#4A7A2E", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#EFE6EE", textSecondary: "#A697A4", divider: "rgba(239,230,238,0.12)", bgDefault: "#171017", bgPaper: "#211823", secondary: "#A697A4", data: "#82A2CF", success: "#A8C46A", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 8, card: 12, button: 10, buttonLarge: 10, chip: 999, input: 10, dialog: 12, menu: 10 },
+  shadow: "neutral",
+  bodyFont: PUBLIC_SANS,
+  ui: { button: "solid", input: "minimal", surface: "flat", pillChips: true, solidChips: true, dense: false, nav: "bar", tableHead: "band" }
+};
+const SEAFOAM_DEF = {
+  accent: {
+    light: "#0E5F4E",
+    dark: "#8ECFBC",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0C3B31",
+    gradient: { light: ["#0E5F4E", "#12836B"], dark: ["#8ECFBC", "#A6D9C8"] }
+  },
+  palette: {
+    light: { textPrimary: "#1D2422", textSecondary: "#5C6461", divider: "#DCE9E3", bgDefault: "#EFF6F2", bgPaper: "#FFFFFF", secondary: "#5C6461", data: "#143085", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E9F1ED", textSecondary: "#93A39C", divider: "rgba(180,220,205,0.14)", bgDefault: "#0C1210", bgPaper: "#161D1A", secondary: "#93A39C", data: "#8AA2D3", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 14, card: 18, button: 12, buttonLarge: 14, chip: 999, input: 12, dialog: 20, menu: 16 },
+  shadow: "neutral",
+  bodyFont: MANROPE,
+  // Soft & airy: a floating rail with the gentle ringed-tint selection (not the
+  // bold pill periwinkle wears) and gradient stat tiles.
+  ui: { button: "solid", input: "filled", surface: "soft", pillChips: true, dense: false, tableHead: "band", stat: "gradient", navFloat: true, nav: "accent" }
+};
+const PERIWINKLE_DEF = {
+  accent: {
+    light: "#3A44BE",
+    dark: "#AAB4EE",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#1D2455",
+    gradient: { light: ["#4048C8", "#6A4FD6"], dark: ["#AAB4EE", "#C3C0F5"] }
+  },
+  palette: {
+    light: { textPrimary: "#1D1F2A", textSecondary: "#5E6274", divider: "#E2E4F3", bgDefault: "#EFF0FB", bgPaper: "#FFFFFF", secondary: "#5E6274", data: "#A937B4", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E9EAF5", textSecondary: "#989DB6", divider: "rgba(200,205,245,0.14)", bgDefault: "#0C0D15", bgPaper: "#171826", secondary: "#989DB6", data: "#E3AAEE", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 14, card: 18, button: 12, buttonLarge: 14, chip: 999, input: 12, dialog: 20, menu: 16 },
+  shadow: "glow",
+  headingFont: SORA,
+  bodyFont: SANS,
+  ui: { button: "gradient", glow: true, input: "filled", surface: "soft", pillChips: true, dense: false, tableHead: "band", stat: "gradient", navFloat: true, nav: "pill", navCollapsible: true, barFloat: true, pillHeading: true }
+};
+const VERDINKLE_SQUARE_DEF = {
+  accent: {
+    light: "#0E5F4E",
+    dark: "#8ECFBC",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0C3B31",
+    gradient: { light: ["#0E5F4E", "#12836B"], dark: ["#8ECFBC", "#A6D9C8"] }
+  },
+  palette: {
+    light: { textPrimary: "#1D2422", textSecondary: "#5C6461", divider: "#DCE9E3", bgDefault: "#EFF6F2", bgPaper: "#FFFFFF", secondary: "#5C6461", data: "#143085", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E9F1ED", textSecondary: "#93A39C", divider: "rgba(180,220,205,0.14)", bgDefault: "#0C1210", bgPaper: "#161D1A", secondary: "#93A39C", data: "#8AA2D3", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 0, card: 0, button: 0, buttonLarge: 0, chip: 0, input: 0, dialog: 0, menu: 0 },
+  shadow: "glow",
+  bodyFont: MANROPE,
+  ui: { button: "gradient", glow: true, input: "filled", surface: "soft", pillChips: false, dense: false, tableHead: "band", stat: "gradient", navFloat: true, nav: "pill", navCollapsible: true, barFloat: true, pillHeading: true }
+};
+const AZURINKLE_ROUNDED_DEF = {
+  accent: {
+    light: "#173A8C",
+    dark: "#8FB4FF",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#0A1B44",
+    gradient: { light: ["#173A8C", "#2457C4"], dark: ["#8FB4FF", "#AECBFF"] }
+  },
+  palette: {
+    light: { textPrimary: "#141A2B", textSecondary: "#565F73", divider: "#D8E0F0", bgDefault: "#E9EEFA", bgPaper: "#FFFFFF", secondary: "#565F73", data: "#65178C", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#E8EDF9", textSecondary: "#95A1BC", divider: "rgba(150,180,245,0.14)", bgDefault: "#080B16", bgPaper: "#121828", secondary: "#95A1BC", data: "#D699F5", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 6, card: 8, button: 6, buttonLarge: 8, chip: 8, input: 6, dialog: 10, menu: 8, nav: 8 },
+  shadow: "glow",
+  bodyFont: MANROPE,
+  ui: { button: "gradient", glow: true, input: "filled", surface: "soft", pillChips: false, dense: false, tableHead: "band", stat: "gradient", navFloat: true, nav: "pill", navCollapsible: true, barFloat: true, pillHeading: true }
+};
+const BUTTER_DEF = {
+  accent: {
+    light: "#6A4E0C",
+    dark: "#EBCF8B",
+    contrastLight: "#FFFFFF",
+    contrastDark: "#4A3609",
+    gradient: { light: ["#6A4E0C", "#8A6614"], dark: ["#EBCF8B", "#F0DBA2"] }
+  },
+  palette: {
+    light: { textPrimary: "#241F16", textSecondary: "#645C4B", divider: "#EAE2CE", bgDefault: "#F8F2E4", bgPaper: "#FFFFFF", secondary: "#645C4B", data: "#104289", success: "#0B855A", warning: "#A8630A", error: "#C4442E" },
+    dark: { textPrimary: "#F1EBDD", textSecondary: "#A79E8A", divider: "rgba(235,207,139,0.14)", bgDefault: "#121009", bgPaper: "#1E1A12", secondary: "#A79E8A", data: "#8BB3EB", success: "#5FCB92", warning: "#F2B347", error: "#F0876F" }
+  },
+  radii: { base: 14, card: 18, button: 12, buttonLarge: 14, chip: 999, input: 12, dialog: 20, menu: 16 },
+  shadow: "warm",
+  headingFont: SPECTRAL,
+  bodyFont: MANROPE,
+  // Warm & editorial: a floating rail with the accent left-edge bar selection
+  // and gradient stat tiles for the dashboard.
+  ui: { button: "solid", input: "filled", surface: "soft", pillChips: true, dense: false, tableHead: "band", stat: "gradient", nav: "bar", navFloat: true }
+};
+const FONTS = { SANS_STACK, SERIF_STACK, SANS, SERIF, PUBLIC_SANS, SORA, GROTESK, MANROPE, CHAKRA, JETBRAINS, SPECTRAL, ROBOTO };
+const ORG_THEMES = [
+  { id: "default", label: "Warm & rounded", def: DEFAULT_DEF },
+  { id: "luxe", label: "Dark luxe", def: LUXE_DEF },
+  { id: "editorial", label: "Editorial", def: EDITORIAL_DEF },
+  { id: "pro", label: "Data-dense pro", def: PRO_DEF },
+  { id: "minimal", label: "Minimal", def: MINIMAL_DEF },
+  { id: "cobalt", label: "Electric cobalt", def: COBALT_DEF },
+  { id: "noir", label: "Noir", def: NOIR_DEF },
+  { id: "azure", label: "Azure", def: AZURE_DEF },
+  { id: "purplehaze", label: "Purple haze", def: PURPLEHAZE_DEF },
+  { id: "verdigris", label: "Verdigris", def: VERDIGRIS_DEF },
+  { id: "console", label: "Console", def: CONSOLE_DEF },
+  { id: "ledger", label: "Ledger", def: LEDGER_DEF },
+  { id: "damson", label: "Damson", def: DAMSON_DEF },
+  { id: "damsonlight", label: "Damson Light", def: DAMSONLIGHT_DEF },
+  { id: "seafoam", label: "Seafoam", def: SEAFOAM_DEF },
+  { id: "periwinkle", label: "Periwinkle", def: PERIWINKLE_DEF },
+  { id: "verdinklesquare", label: "Verdinkle Square", def: VERDINKLE_SQUARE_DEF },
+  { id: "azurinklerounded", label: "Azurinkle Rounded", def: AZURINKLE_ROUNDED_DEF },
+  { id: "butter", label: "Butter", def: BUTTER_DEF }
+];
+const DEFAULT_THEME_ID = "default";
+function createThemeCatalog({ themes, chrome = {}, defaultId = DEFAULT_THEME_ID, chromeDefaultId = null }) {
+  const byId = /* @__PURE__ */ new Map();
+  for (const theme of themes) {
+    if (byId.has(theme.id)) throw new Error(`Duplicate theme id "${theme.id}"`);
+    byId.set(theme.id, theme);
+  }
+  if (!byId.has(defaultId)) throw new Error(`Default theme "${defaultId}" is not in the catalogue`);
+  const resolveThemeId2 = (id) => byId.has(id) ? id : defaultId;
+  const getOrgTheme2 = (id) => byId.get(resolveThemeId2(id)).def;
+  const getChromeTheme2 = (id) => chrome[id] ?? byId.get(id)?.def ?? chrome[chromeDefaultId] ?? getOrgTheme2(defaultId);
+  return { themes, defaultId, resolveThemeId: resolveThemeId2, getOrgTheme: getOrgTheme2, getChromeTheme: getChromeTheme2 };
+}
+const { resolveThemeId, getOrgTheme, getChromeTheme } = createThemeCatalog({ themes: ORG_THEMES });
+function appRootTheme(accent) {
+  return {
+    ...DEFAULT_DEF,
+    accent: { contrastLight: "#FFFFFF", contrastDark: "#231A10", ...accent }
+  };
+}
+export {
+  DEFAULT_THEME_ID,
+  FONTS,
+  ORG_THEMES,
+  appRootTheme,
+  createThemeCatalog,
+  getChromeTheme,
+  getOrgTheme,
+  resolveThemeId
+};

package/package.json

@@ -0,0 +1,118 @@
+{
+  "name": "mui-atelier",
+  "version": "0.1.0",
+  "description": "Twenty-odd complete MUI themes with a theme factory, per-organisation theme scoping, and the Next.js components built on them.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vladslobodkin/mui-atelier.git"
+  },
+  "homepage": "https://github.com/vladslobodkin/mui-atelier#readme",
+  "bugs": {
+    "url": "https://github.com/vladslobodkin/mui-atelier/issues"
+  },
+  "keywords": [
+    "mui",
+    "material-ui",
+    "theme",
+    "themes",
+    "nextjs",
+    "react",
+    "design-system",
+    "components"
+  ],
+  "files": [
+    "dist",
+    "NOTICE",
+    "CHANGELOG.md"
+  ],
+  "sideEffects": [
+    "./dist/test/jsdomShims.js"
+  ],
+  "exports": {
+    "./components/*": "./dist/components/*.js",
+    "./hooks/*": "./dist/hooks/*.js",
+    "./lib/*": "./dist/lib/*.js",
+    "./theme/*": "./dist/theme/*.js",
+    "./i18n/mergeMessages": "./dist/i18n/mergeMessages.js",
+    "./i18n/loadMessages": "./dist/i18n/loadMessages.js",
+    "./i18n/messages/*": "./dist/i18n/messages/*",
+    "./eslint": "./dist/eslint/chipRules.mjs",
+    "./test/*": "./dist/test/*.js",
+    "./package.json": "./package.json"
+  },
+  "engines": {
+    "node": ">=20.9"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "prepack": "npm run build",
+    "lint": "eslint",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "@dnd-kit/core": "^6",
+    "@dnd-kit/sortable": "^10",
+    "@dnd-kit/utilities": "^3",
+    "@emotion/react": "^11",
+    "@emotion/styled": "^11",
+    "@mui/icons-material": "^9",
+    "@mui/material": "^9",
+    "@tanstack/react-table": "^8",
+    "dompurify": "^3",
+    "next": ">=15",
+    "next-intl": "^4",
+    "react": "^19",
+    "react-dom": "^19",
+    "vitest": "^3"
+  },
+  "peerDependenciesMeta": {
+    "@dnd-kit/core": {
+      "optional": true
+    },
+    "@dnd-kit/sortable": {
+      "optional": true
+    },
+    "@dnd-kit/utilities": {
+      "optional": true
+    },
+    "@tanstack/react-table": {
+      "optional": true
+    },
+    "dompurify": {
+      "optional": true
+    },
+    "vitest": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.4.0",
+    "@mui/material": "^9.4.0",
+    "@tanstack/react-table": "^8.21.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "dompurify": "^3.4.16",
+    "esbuild": "^0.28.2",
+    "eslint": "^9.39.5",
+    "eslint-config-next": "^16.2.10",
+    "intl-messageformat": "^12.1.2",
+    "jsdom": "^27.4.0",
+    "next": "^16.2.10",
+    "next-intl": "^4.14.7",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "sanitize-html": "^2.17.7",
+    "vitest": "^3.2.7"
+  }
+}