@trinitydesign/design-system 1.2.0

package/dist/theme.js

@@ -0,0 +1,1289 @@
+import { createTheme as M, useTheme as C } from "@mui/material/styles";
+import { Z as u, t as o, _ as m, c as R, s as f, a as h } from "./ai.js";
+import { p as X, v as Z, o as q, m as _, a0 as J, q as K, a1 as Q, $ as U, u as Y, r as k, n as S } from "./ai.js";
+import { useMemo as w } from "react";
+function O(...r) {
+  return `--trinity-${r.join("-").replace(/([A-Z])/g, "-$1").toLowerCase()}`;
+}
+function i(r, a = []) {
+  const s = [];
+  for (const [e, d] of Object.entries(r)) {
+    const n = [...a, e];
+    if (d != null)
+      if (typeof d == "object" && !Array.isArray(d))
+        s.push(...i(d, n));
+      else {
+        const t = typeof d == "number" && !e.includes("opacity") && !e.includes("weight") && !e.includes("Height") ? `${d}px` : String(d);
+        s.push({ name: O(...n), value: t });
+      }
+  }
+  return s;
+}
+function z(r = u) {
+  const a = [];
+  return a.push(...i(r.base.colors, ["color"])), a.push(...i(r.base.spacing, ["spacing"])), a.push(...i(r.base.fontSize, ["font-size"])), a.push(...i(r.base.fontWeight, ["font-weight"])), a.push(...i(r.base.lineHeight, ["line-height"])), a.push(...i(r.base.letterSpacing, ["letter-spacing"])), a.push(...i(r.base.borderRadius, ["radius"])), a.push(...i(r.base.borderWidth, ["border-width"])), a.push(...i(r.base.shadows, ["shadow"])), a.push(...i(r.base.zIndex, ["z-index"])), a.push(...i(r.base.duration, ["duration"])), a.push(...i(r.base.easing, ["easing"])), a.push(...i(r.base.opacity, ["opacity"])), a.push(...i(r.base.breakpoints, ["breakpoint"])), a.push(...i(r.semantic.colors, ["semantic"])), a.push(...i(r.semantic.spacing, ["semantic-spacing"])), a.push(...i(r.semantic.borders, ["semantic-border"])), a.push(...i(r.semantic.shadows, ["semantic-shadow"])), a.push(...i(r.semantic.motion, ["motion"])), a.push(...i(r.component, ["component"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
+`);
+}
+function $(r = u) {
+  const a = [];
+  return a.push(...i(r.darkMode.colors.text, ["semantic", "text"])), a.push(...i(r.darkMode.colors.background, ["semantic", "background"])), a.push(...i(r.darkMode.colors.border, ["semantic", "border"])), r.darkMode.colors.interactive && a.push(...i(r.darkMode.colors.interactive, ["semantic", "interactive"])), r.darkMode.colors.status && a.push(...i(r.darkMode.colors.status, ["semantic", "status"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
+`);
+}
+function P(r = u) {
+  if (typeof window > "u") return;
+  const a = z(r), s = document.createElement("style");
+  s.id = "trinity-css-variables", s.textContent = `:root {
+${a}
+}`;
+  const e = document.getElementById("trinity-css-variables");
+  e && e.remove(), document.head.appendChild(s);
+}
+function F(r = u) {
+  if (typeof window > "u") return;
+  const a = $(r), s = document.createElement("style");
+  s.id = "trinity-dark-mode-variables", s.textContent = `
+[data-theme="dark"],
+.dark-mode,
+:root.dark {
+${a}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+${a}
+  }
+}`;
+  const e = document.getElementById("trinity-dark-mode-variables");
+  e && e.remove(), document.head.appendChild(s);
+}
+function W(r, a) {
+  function s(t) {
+    let g = t.replace("#", "");
+    g.length === 3 && (g = g.split("").map((l) => l + l).join(""));
+    const p = parseInt(g, 16);
+    return [p >> 16 & 255, p >> 8 & 255, p & 255];
+  }
+  function e([t, g, p]) {
+    const l = [t, g, p].map((b) => (b /= 255, b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)));
+    return 0.2126 * l[0] + 0.7152 * l[1] + 0.0722 * l[2];
+  }
+  const d = e(s(r)), n = e(s(a));
+  return (Math.max(d, n) + 0.05) / (Math.min(d, n) + 0.05);
+}
+function L(r, a, s = 4.5) {
+  const e = W(r, a);
+  return e < s && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${e.toFixed(2)} for ${r} on ${a}`), e >= s;
+}
+function H(r = u, a = "light") {
+  const s = a === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], e = a === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300];
+  return {
+    MuiCssBaseline: {
+      styleOverrides: {
+        body: {
+          backgroundColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[50],
+          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+        }
+      }
+    },
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: "inherit"
+        }
+      }
+    },
+    MuiButton: {
+      defaultProps: {
+        disableElevation: !0
+      },
+      styleOverrides: {
+        root: {
+          padding: `${r.base.spacing[2]}px ${r.base.spacing[5]}px`,
+          borderRadius: r.base.borderRadius.full,
+          fontWeight: r.base.fontWeight.semibold
+        },
+        // Text buttons (default variant)
+        text: {
+          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900],
+          "&:hover": {
+            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hover
+            // 8% black - using semantic token
+          }
+        },
+        textPrimary: {
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+            // 8%
+          }
+        },
+        textSecondary: {
+          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
+            // 8%
+          }
+        },
+        // Contained buttons
+        contained: {
+          color: r.base.colors.gray[0]
+        },
+        containedPrimary: {
+          backgroundColor: r.base.colors.navy[900],
+          color: r.base.colors.gray[0],
+          "&:hover": {
+            backgroundColor: r.base.colors.coral[800]
+          }
+        },
+        containedSecondary: {
+          backgroundColor: r.base.colors.indigo[900],
+          color: r.base.colors.gray[0],
+          "&:hover": {
+            backgroundColor: r.base.colors.coral[800],
+            color: r.base.colors.gray[0]
+          }
+        },
+        // Outlined buttons
+        outlined: {
+          borderColor: r.base.colors.navy[900],
+          color: r.base.colors.navy[900],
+          borderWidth: 2,
+          "&:hover": {
+            backgroundColor: r.base.colors.coral[800],
+            borderColor: r.base.colors.coral[800],
+            color: r.base.colors.gray[0],
+            borderWidth: 2
+          }
+        },
+        outlinedPrimary: {
+          borderColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+        },
+        // Size variants
+        sizeSmall: {
+          padding: `${r.base.spacing[1]}px ${r.base.spacing[3]}px`,
+          fontSize: r.base.fontSize.sm
+        },
+        sizeLarge: {
+          padding: `${r.base.spacing[3]}px ${r.base.spacing[6]}px`,
+          fontSize: r.base.fontSize.lg
+        }
+      }
+    },
+    MuiCard: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.md,
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)" : "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08)",
+          transition: "box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out",
+          "&:hover": {
+            boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)" : "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      defaultProps: {
+        elevation: 0
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.md,
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.2)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+        },
+        rounded: {
+          borderRadius: r.base.borderRadius.md
+        },
+        elevation0: {
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.2)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+        },
+        elevation1: {
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)" : "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+        },
+        elevation2: {
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)" : "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+        },
+        elevation3: {
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+        },
+        outlined: {
+          border: `1px solid ${e}`,
+          boxShadow: "none"
+        }
+      }
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600],
+          "&:hover": {
+            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
+            // 4% black
+          }
+        },
+        colorPrimary: {
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+        },
+        colorSecondary: {
+          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800]
+        }
+      }
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: r.base.spacing[4],
+          paddingTop: r.base.spacing[2],
+          gap: r.base.spacing[2]
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: r.base.borderRadius.xl,
+          // 16px for dialogs - allows nested cards with lg:12px
+          border: `1px solid ${s}`
+        }
+      }
+    },
+    MuiAlert: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm
+          // 6px for alert feedback elements
+        }
+      }
+    },
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          textDecorationColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          "&:hover": {
+            color: a === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800],
+            textDecorationColor: a === "dark" ? r.base.colors.coral[300] : r.base.colors.coral[800]
+          }
+        }
+      }
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm
+          // 6px for chip elements
+        }
+      }
+    },
+    MuiInputLabel: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          "&.Mui-focused": {
+            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          }
+        }
+      }
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          "& .MuiInputBase-root": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for all inputs
+          },
+          "& .MuiInputBase-sizeSmall": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for small inputs
+          },
+          "& .MuiInputBase-input": {
+            color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+          },
+          "& .MuiInputBase-input::placeholder": {
+            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400],
+            opacity: 1
+          }
+        }
+      }
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm,
+          // 6px for all inputs
+          "&.MuiInputBase-sizeSmall": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for small inputs
+          },
+          "& .MuiOutlinedInput-notchedOutline": {
+            borderColor: a === "dark" ? "rgba(255, 255, 255, 0.23)" : r.base.colors.gray[300]
+            // @intentional-color: MUI standard border
+          },
+          "&:hover .MuiOutlinedInput-notchedOutline": {
+            borderColor: a === "dark" ? r.semantic.effects.onDark.tertiary : r.base.colors.gray[400]
+            // 50% white
+          },
+          "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+            borderColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          }
+        },
+        input: {
+          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+        }
+      }
+    },
+    MuiFilledInput: {
+      styleOverrides: {
+        root: {
+          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover,
+          // 8%
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.13)" : r.semantic.effects.overlay.pressed
+            // 12%
+          },
+          "&.Mui-focused": {
+            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.09)" : r.semantic.effects.overlay.hover
+            // 8%
+          }
+        },
+        input: {
+          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+        }
+      }
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600]
+        }
+      }
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        root: {
+          "& .MuiInputBase-root": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for all inputs
+          },
+          "& .MuiInputBase-sizeSmall": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for small inputs
+          }
+        }
+      }
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm,
+          // 6px for all selects
+          "&.MuiInputBase-sizeSmall": {
+            borderRadius: r.base.borderRadius.sm
+            // 6px for small inputs
+          }
+        }
+      }
+    },
+    // ============================================
+    // MUI X DATE/TIME PICKERS
+    // ============================================
+    MuiPickersInputBase: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm
+          // 6px for picker inputs
+        }
+      }
+    },
+    MuiPickersOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm
+          // 6px for picker inputs
+        }
+      }
+    },
+    MuiPickersLayout: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.lg
+          // 12px for picker popup
+        }
+      }
+    },
+    MuiDateCalendar: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.lg
+          // 12px for calendar
+        }
+      }
+    },
+    MuiPickersDay: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.semantic.borders.radius.badge,
+          // 12px for day cells
+          "&.Mui-selected": {
+            backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          }
+        }
+      }
+    },
+    MuiPickersCalendarHeader: {
+      styleOverrides: {
+        root: {
+          paddingLeft: r.base.spacing[4],
+          // 16px
+          paddingRight: r.base.spacing[4]
+        }
+      }
+    },
+    MuiMultiSectionDigitalClock: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.lg
+          // 12px for time picker
+        }
+      }
+    },
+    MuiTimeClock: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.lg
+          // 12px for analog clock
+        }
+      }
+    },
+    MuiPickersPopper: {
+      styleOverrides: {
+        paper: {
+          borderRadius: r.base.borderRadius.lg,
+          // 12px for popup
+          boxShadow: r.base.shadows.lg
+        }
+      }
+    },
+    MuiSlider: {
+      styleOverrides: {
+        root: {
+          "&.MuiSlider-sizeSmall": {
+            "& .MuiSlider-thumb": {
+              borderRadius: r.base.borderRadius.full
+              // Circular thumbs
+            }
+          }
+        }
+      }
+    },
+    // ============================================
+    // M3-STYLE SWITCH
+    // ============================================
+    MuiSwitch: {
+      styleOverrides: {
+        // Medium size (default) - 52x32 track
+        root: {
+          width: 52,
+          height: 32,
+          padding: 0,
+          "& .MuiSwitch-switchBase": {
+            padding: 0,
+            margin: 4,
+            transitionDuration: "300ms",
+            "&.Mui-checked": {
+              transform: "translateX(20px)",
+              color: "#fff",
+              "& + .MuiSwitch-track": {
+                backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+                opacity: 1,
+                border: 0
+              },
+              "& .MuiSwitch-thumb": {
+                width: 24,
+                height: 24,
+                margin: 0
+              },
+              "&.Mui-disabled + .MuiSwitch-track": {
+                opacity: 0.5
+              }
+            },
+            "&.Mui-focusVisible .MuiSwitch-thumb": {
+              color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+              border: "6px solid #fff"
+            },
+            "&.Mui-disabled .MuiSwitch-thumb": {
+              color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
+            },
+            "&.Mui-disabled + .MuiSwitch-track": {
+              opacity: a === "dark" ? 0.3 : 0.5
+            }
+          },
+          "& .MuiSwitch-thumb": {
+            boxSizing: "border-box",
+            width: 16,
+            height: 16,
+            margin: 4,
+            boxShadow: r.base.shadows.sm,
+            transition: "all 200ms ease-in-out"
+          },
+          "& .MuiSwitch-track": {
+            borderRadius: 32 / 2,
+            backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[300],
+            border: `2px solid ${a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]}`,
+            opacity: 1,
+            transition: "background-color 300ms, border-color 300ms",
+            boxSizing: "border-box"
+          }
+        },
+        // Small size - 40x24 track (proportionally smaller)
+        sizeSmall: {
+          width: 40,
+          height: 24,
+          "& .MuiSwitch-switchBase": {
+            margin: 3,
+            "&.Mui-checked": {
+              transform: "translateX(16px)",
+              "& .MuiSwitch-thumb": {
+                width: 18,
+                height: 18,
+                margin: 0
+              }
+            }
+          },
+          "& .MuiSwitch-thumb": {
+            width: 12,
+            height: 12,
+            margin: 3
+          },
+          "& .MuiSwitch-track": {
+            borderRadius: 24 / 2
+          }
+        }
+      }
+    },
+    MuiFormControlLabel: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+          gap: r.base.spacing[2]
+          // 8px gap between control and label
+        }
+      }
+    },
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0,
+          boxShadow: "none",
+          backgroundColor: "transparent",
+          "&:first-of-type": {
+            borderTopLeftRadius: r.base.borderRadius.lg,
+            // 12px for accordion container
+            borderTopRightRadius: r.base.borderRadius.lg
+          },
+          "&:last-of-type": {
+            borderBottomLeftRadius: r.base.borderRadius.lg,
+            borderBottomRightRadius: r.base.borderRadius.lg
+          },
+          "&:before": {
+            display: "none"
+          },
+          "&.Mui-expanded": {
+            margin: 0
+          }
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          minHeight: 48,
+          borderBottom: `1px solid ${r.base.colors.gray[100]}`,
+          "&.Mui-expanded": {
+            minHeight: 48
+          }
+        },
+        content: {
+          margin: "12px 0",
+          "&.Mui-expanded": {
+            margin: "12px 0"
+          }
+        }
+      }
+    },
+    // ============================================
+    // TABLE COMPONENTS
+    // ============================================
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          borderCollapse: "separate",
+          borderSpacing: 0
+        }
+      }
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.05)" : r.base.colors.gray[50]
+        }
+      }
+    },
+    MuiTableRow: {
+      styleOverrides: {
+        root: {
+          "&:last-child td": {
+            borderBottom: 0
+          },
+          "&.Mui-selected": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.08)" : r.semantic.effects.overlay.hoverSubtle
+            // 4%
+          },
+          "&.Mui-selected:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+            // 8%
+          }
+        },
+        hover: {
+          "&:hover": {
+            backgroundColor: a === "dark" ? r.semantic.effects.overlay.hoverSubtle : "rgba(0, 0, 0, 0.02)"
+            // @intentional-color: subtle table row hover
+          }
+        }
+      }
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          borderBottom: `1px solid ${s}`,
+          padding: `${r.base.spacing[3]}px ${r.base.spacing[4]}px`
+        },
+        head: {
+          fontWeight: r.base.fontWeight.semibold,
+          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
+          fontSize: r.base.fontSize.sm,
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        },
+        body: {
+          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
+        },
+        sizeSmall: {
+          padding: `${r.base.spacing[2]}px ${r.base.spacing[3]}px`
+        }
+      }
+    },
+    MuiTableSortLabel: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[700],
+          "&:hover": {
+            color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[900]
+          },
+          "&.Mui-active": {
+            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          }
+        },
+        icon: {
+          color: "inherit !important"
+        }
+      }
+    },
+    // ============================================
+    // MENU / DROPDOWN COMPONENTS
+    // ============================================
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          borderRadius: r.base.borderRadius.md,
+          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+          border: `1px solid ${s}`,
+          marginTop: r.base.spacing[1]
+        },
+        list: {
+          padding: r.base.spacing[1]
+        }
+      }
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm,
+          margin: `0 ${r.base.spacing[1]}px`,
+          padding: `${r.base.spacing[2]}px ${r.base.spacing[3]}px`,
+          fontSize: r.base.fontSize.sm,
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
+          },
+          "&.Mui-selected": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
+            "&:hover": {
+              backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
+            }
+          }
+        }
+      }
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          borderRadius: r.base.borderRadius.md,
+          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+          border: `1px solid ${s}`
+        }
+      }
+    },
+    // ============================================
+    // LIST COMPONENTS
+    // ============================================
+    MuiList: {
+      styleOverrides: {
+        root: {
+          padding: r.base.spacing[1]
+        }
+      }
+    },
+    MuiListItem: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm,
+          marginBottom: r.base.spacing[1],
+          "&:last-child": {
+            marginBottom: 0
+          }
+        }
+      }
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: r.base.borderRadius.sm,
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)"
+          },
+          "&.Mui-selected": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : "rgba(5, 7, 66, 0.08)",
+            "&:hover": {
+              backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.16)" : "rgba(5, 7, 66, 0.12)"
+            }
+          }
+        }
+      }
+    },
+    MuiListItemIcon: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          minWidth: 40
+        }
+      }
+    },
+    // ============================================
+    // DRAWER / SIDEBAR
+    // ============================================
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
+          borderRight: `1px solid ${s}`
+        }
+      }
+    },
+    // ============================================
+    // TABS COMPONENTS
+    // ============================================
+    MuiTabs: {
+      styleOverrides: {
+        root: {
+          minHeight: 40
+        },
+        indicator: {
+          backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          height: 3,
+          borderRadius: r.base.borderRadius.full
+        }
+      }
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: "none",
+          fontWeight: r.base.fontWeight.medium,
+          fontSize: r.base.fontSize.sm,
+          minHeight: 40,
+          padding: `${r.base.spacing[2]}px ${r.base.spacing[4]}px`,
+          color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          "&:hover": {
+            color: a === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900],
+            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.04)" : "rgba(0, 0, 0, 0.02)"
+          },
+          "&.Mui-selected": {
+            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+            fontWeight: r.base.fontWeight.semibold
+          }
+        }
+      }
+    },
+    // ============================================
+    // BADGE
+    // ============================================
+    MuiBadge: {
+      styleOverrides: {
+        badge: {
+          fontWeight: r.base.fontWeight.semibold,
+          fontSize: "0.65rem",
+          minWidth: 18,
+          height: 18,
+          padding: "0 4px"
+        },
+        colorPrimary: {
+          backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900]
+        },
+        colorSecondary: {
+          backgroundColor: r.base.colors.coral[500]
+        },
+        colorError: {
+          backgroundColor: r.base.colors.coral[600]
+        },
+        colorSuccess: {
+          backgroundColor: "#1DC286"
+        }
+      }
+    },
+    // ============================================
+    // AVATAR
+    // ============================================
+    MuiAvatar: {
+      styleOverrides: {
+        root: {
+          fontWeight: r.base.fontWeight.semibold,
+          fontSize: r.base.fontSize.sm
+        },
+        colorDefault: {
+          // Use navy background in light mode, gray in dark mode
+          // Always ensure accessible text contrast
+          backgroundColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.navy[900],
+          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.gray[0]
+          // White text on navy for accessibility
+        }
+      }
+    },
+    MuiAvatarGroup: {
+      styleOverrides: {
+        root: {
+          "& .MuiAvatar-root": {
+            borderColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
+            borderWidth: 2
+          }
+        }
+      }
+    },
+    // ============================================
+    // STEPPER
+    // ============================================
+    MuiStepper: {
+      styleOverrides: {
+        root: {
+          padding: r.base.spacing[3]
+        }
+      }
+    },
+    MuiStepLabel: {
+      styleOverrides: {
+        label: {
+          fontWeight: r.base.fontWeight.medium,
+          "&.Mui-active": {
+            fontWeight: r.base.fontWeight.semibold
+          },
+          "&.Mui-completed": {
+            fontWeight: r.base.fontWeight.medium
+          }
+        }
+      }
+    },
+    MuiStepIcon: {
+      styleOverrides: {
+        root: {
+          color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
+          "&.Mui-active": {
+            color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          },
+          "&.Mui-completed": {
+            color: "#1DC286"
+          }
+        }
+      }
+    },
+    // ============================================
+    // PAGINATION
+    // ============================================
+    MuiPagination: {
+      styleOverrides: {
+        root: {
+          "& .MuiPaginationItem-root": {
+            borderRadius: r.base.borderRadius.sm
+          }
+        }
+      }
+    },
+    MuiPaginationItem: {
+      styleOverrides: {
+        root: {
+          fontWeight: r.base.fontWeight.medium,
+          "&.Mui-selected": {
+            backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.navy[900],
+            color: r.base.colors.gray[0],
+            "&:hover": {
+              backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.coral[800]
+            }
+          }
+        }
+      }
+    },
+    // ============================================
+    // RATING
+    // ============================================
+    MuiRating: {
+      styleOverrides: {
+        root: {
+          color: "#FFB400"
+        },
+        iconEmpty: {
+          color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
+        }
+      }
+    },
+    // ============================================
+    // SKELETON
+    // ============================================
+    MuiSkeleton: {
+      styleOverrides: {
+        root: {
+          backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.11)" : "rgba(0, 0, 0, 0.08)"
+        },
+        rounded: {
+          borderRadius: r.base.borderRadius.md
+        }
+      }
+    },
+    // ============================================
+    // SNACKBAR / TOAST
+    // ============================================
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          "& .MuiSnackbarContent-root": {
+            borderRadius: r.base.borderRadius.md
+          }
+        }
+      }
+    },
+    MuiSnackbarContent: {
+      styleOverrides: {
+        root: {
+          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
+          color: r.base.colors.gray[0],
+          borderRadius: r.base.borderRadius.md,
+          boxShadow: "0 10px 15px -3px rgb(0 0 0 / 0.2), 0 4px 6px -4px rgb(0 0 0 / 0.2)"
+        }
+      }
+    },
+    // ============================================
+    // BREADCRUMBS
+    // ============================================
+    MuiBreadcrumbs: {
+      styleOverrides: {
+        separator: {
+          color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
+        },
+        li: {
+          "& .MuiLink-root": {
+            color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+            "&:hover": {
+              color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+            }
+          },
+          "& .MuiTypography-root": {
+            color: a === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900]
+          }
+        }
+      }
+    },
+    // ============================================
+    // TOOLTIP
+    // ============================================
+    MuiTooltip: {
+      styleOverrides: {
+        tooltip: {
+          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900],
+          color: r.base.colors.gray[0],
+          fontSize: r.base.fontSize.xs,
+          fontWeight: r.base.fontWeight.medium,
+          padding: `${r.base.spacing[1]}px ${r.base.spacing[2]}px`,
+          borderRadius: r.base.borderRadius.sm
+        },
+        arrow: {
+          color: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[900]
+        }
+      }
+    },
+    // ============================================
+    // GLOBAL FOCUS STYLES (Accessibility)
+    // ============================================
+    MuiButtonBase: {
+      styleOverrides: {
+        root: {
+          "&:focus-visible": {
+            outline: `2px solid ${a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]}`,
+            outlineOffset: 2
+          }
+        }
+      }
+    }
+  };
+}
+function v(r, a) {
+  const s = { ...u, ...a }, e = r === "dark" ? {
+    mode: "dark",
+    primary: { main: s.base.colors.coral[600], ...s.base.colors.coral },
+    secondary: { main: s.base.colors.purple[500], ...s.base.colors.purple },
+    background: {
+      default: s.base.colors.gray[800],
+      paper: s.base.colors.gray[700]
+    },
+    text: {
+      primary: s.base.colors.gray[50],
+      secondary: s.base.colors.gray[400],
+      disabled: s.base.colors.gray[500]
+    },
+    divider: "rgba(255, 255, 255, 0.12)",
+    action: {
+      active: s.base.colors.gray[100],
+      hover: "rgba(255, 255, 255, 0.08)",
+      selected: "rgba(255, 255, 255, 0.16)",
+      disabled: s.base.colors.gray[600],
+      disabledBackground: "rgba(255, 255, 255, 0.12)"
+    }
+  } : {
+    mode: "light",
+    primary: { main: s.base.colors.navy[900], ...s.base.colors.navy },
+    secondary: { main: s.base.colors.coral[800], ...s.base.colors.coral },
+    background: {
+      default: s.base.colors.gray[50],
+      paper: s.base.colors.gray[0]
+    },
+    text: {
+      primary: s.base.colors.gray[900],
+      secondary: s.base.colors.gray[600],
+      disabled: s.base.colors.gray[400]
+    },
+    divider: s.base.colors.gray[200],
+    action: {
+      active: s.base.colors.gray[700],
+      hover: "rgba(0, 0, 0, 0.04)",
+      selected: "rgba(0, 0, 0, 0.08)",
+      disabled: s.base.colors.gray[400],
+      disabledBackground: s.base.colors.gray[200]
+    }
+  }, d = {
+    fontFamily: '"Montserrat", sans-serif',
+    // Button text style
+    button: {
+      textTransform: "none",
+      fontWeight: s.base.fontWeight.semibold
+    },
+    // Hierarchy-based typography variants
+    // Display variants (Level 1 - Hero/Marketing)
+    h1: {
+      fontSize: o.heading.scale.h1.size,
+      fontWeight: o.heading.scale.h1.weight,
+      lineHeight: o.heading.scale.h1.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+    },
+    h2: {
+      fontSize: o.heading.scale.h2.size,
+      fontWeight: o.heading.scale.h2.weight,
+      lineHeight: o.heading.scale.h2.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+    },
+    h3: {
+      fontSize: o.heading.scale.h3.size,
+      fontWeight: o.heading.scale.h3.weight,
+      lineHeight: o.heading.scale.h3.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+    },
+    h4: {
+      fontSize: o.heading.scale.h4.size,
+      fontWeight: o.heading.scale.h4.weight,
+      lineHeight: o.heading.scale.h4.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.secondary
+    },
+    h5: {
+      fontSize: o.heading.scale.h5.size,
+      fontWeight: o.heading.scale.h5.weight,
+      lineHeight: o.heading.scale.h5.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+    },
+    h6: {
+      fontSize: o.heading.scale.h6.size,
+      fontWeight: o.heading.scale.h6.weight,
+      lineHeight: o.heading.scale.h6.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+    },
+    // Body variants (Level 3 - Content)
+    body1: {
+      fontSize: o.body.scale.medium.size,
+      fontWeight: o.body.scale.medium.weight,
+      lineHeight: o.body.scale.medium.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+    },
+    body2: {
+      fontSize: o.body.scale.small.size,
+      fontWeight: o.body.scale.small.weight,
+      lineHeight: o.body.scale.small.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+    },
+    // Supporting text variants
+    subtitle1: {
+      fontSize: o.label.scale.large.size,
+      fontWeight: o.label.scale.large.weight,
+      lineHeight: o.label.scale.large.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.primary : s.semantic.colors.text.primary
+    },
+    subtitle2: {
+      fontSize: o.label.scale.medium.size,
+      fontWeight: o.label.scale.medium.weight,
+      lineHeight: o.label.scale.medium.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.secondary : s.semantic.colors.text.secondary
+    },
+    caption: {
+      fontSize: o.caption.scale.default.size,
+      fontWeight: o.caption.scale.default.weight,
+      lineHeight: o.caption.scale.default.lineHeight,
+      color: r === "dark" ? s.darkMode.colors.text.tertiary : s.semantic.colors.text.tertiary
+    },
+    overline: {
+      fontSize: o.overline.scale.default.size,
+      fontWeight: o.overline.scale.default.weight,
+      lineHeight: o.overline.scale.default.lineHeight,
+      letterSpacing: o.overline.scale.default.tracking,
+      textTransform: "uppercase",
+      color: r === "dark" ? s.darkMode.colors.text.tertiary : s.semantic.colors.text.tertiary
+    }
+  };
+  return M({
+    palette: e,
+    typography: d,
+    shape: {
+      borderRadius: s.base.borderRadius.md
+      // 8px base - components override as needed
+    },
+    components: H(s, r)
+  });
+}
+const c = {
+  primary: {
+    main: "#050742",
+    // Deep Navy
+    light: "#7841C9",
+    // Light Violet/Purple
+    dark: "#3816A0"
+    // Deep Indigo
+  },
+  secondary: {
+    main: "#FF6150",
+    // Coral
+    light: "#27AAE1",
+    // Azure
+    dark: "#6B12ED"
+    // Electric Indigo
+  },
+  neutral: {
+    white: "#FFFFFF",
+    lightGray: "#FAFAFA",
+    gray100: "#E5E7EB",
+    gray400: "#9CA3AF",
+    gray500: "#6B7280",
+    gray600: "#374151",
+    darkBg: "#18181B",
+    darkPaper: "#27272A"
+  }
+}, D = {
+  // White text on colored backgrounds
+  whiteOnNavy: { text: c.neutral.white, bg: c.primary.main },
+  whiteOnPurple: { text: c.neutral.white, bg: c.primary.light },
+  // Navy text on light backgrounds
+  navyOnWhite: { text: c.primary.main, bg: c.neutral.white },
+  navyOnCoral: { text: c.primary.main, bg: c.secondary.main },
+  navyOnAzure: { text: c.primary.main, bg: c.secondary.light },
+  // Purple text on white background
+  purpleOnWhite: { text: c.primary.light, bg: c.neutral.white },
+  // Accent colors on navy background
+  coralOnNavy: { text: c.secondary.main, bg: c.primary.main },
+  azureOnNavy: { text: c.secondary.light, bg: c.primary.main }
+}, E = v("light"), V = v("dark");
+function j() {
+  const a = C().palette.mode, s = a === "dark";
+  return w(() => ({
+    tokens: u,
+    base: h,
+    semantic: f,
+    component: R,
+    darkMode: m,
+    mode: a,
+    isDarkMode: s,
+    getColor: (l, b) => s && b ? b : l,
+    getSemanticColor: (l, b) => {
+      const y = f.colors[l]?.[b];
+      if (s) {
+        const x = m.colors[l]?.[b];
+        if (x) return x;
+      }
+      return typeof y == "string" ? y : "";
+    },
+    spacing: (l) => h.spacing[l],
+    spacingCss: (l) => `${h.spacing[l]}px`,
+    radius: (l) => h.borderRadius[l],
+    shadow: (l) => h.shadows[l]
+  }), [s, a]);
+}
+export {
+  D as accessibleCombinations,
+  X as attentionHierarchy,
+  h as baseTokens,
+  c as brandColors,
+  R as componentTokens,
+  Z as contrastHierarchy,
+  v as createTrinityTheme,
+  m as darkModeTokens,
+  V as darkTheme,
+  q as elevationHierarchy,
+  z as generateCssVariables,
+  $ as generateDarkModeCssVariables,
+  _ as getAttentionColor,
+  W as getContrastRatio,
+  J as getElevation,
+  K as getHierarchySpacing,
+  Q as getTypography,
+  U as hierarchy,
+  F as injectDarkModeCssVariables,
+  P as injectTrinityCssVariables,
+  Y as interactiveHierarchy,
+  E as lightTheme,
+  k as scaleHierarchy,
+  f as semanticTokens,
+  S as spacingHierarchy,
+  u as tokens,
+  o as typographicHierarchy,
+  j as useTrinityTokens,
+  L as validateAccessibility
+};