@trinityui/design-system 2.1.2 → 2.1.4

package/dist/theme.js

@@ -1,47 +1,47 @@
 import { createTheme as M, useTheme as C } from "@mui/material/styles";
-import { t, c as o, d as x, e as R, s as m, a as y } from "./app-shell.js";
-import { g as Z, j as q, f as J, o as K, m as Q, p as U, n as Y, h as _, k, i as S, l as rr } from "./app-shell.js";
-import { useMemo as w } from "react";
+import { t as p, c as i, d as f, e as w, s as m, a as y } from "./app-shell.js";
+import { g as X, j as Z, f as q, o as J, m as K, p as Q, n as Y, h as _, k, i as S, l as rr } from "./app-shell.js";
+import { useMemo as R } from "react";
 function O(...r) {
   return `--trinity-${r.join("-").replace(/([A-Z])/g, "-$1").toLowerCase()}`;
 }
-function i(r, a = []) {
-  const s = [];
-  for (const [e, c] of Object.entries(r)) {
-    const u = [...a, e];
+function e(r, a = []) {
+  const o = [];
+  for (const [s, c] of Object.entries(r)) {
+    const g = [...a, s];
     if (c != null)
       if (typeof c == "object" && !Array.isArray(c))
-        s.push(...i(c, u));
+        o.push(...e(c, g));
       else {
-        const n = typeof c == "number" && !e.includes("opacity") && !e.includes("weight") && !e.includes("Height") ? `${c}px` : String(c);
-        s.push({ name: O(...u), value: n });
+        const n = typeof c == "number" && !s.includes("opacity") && !s.includes("weight") && !s.includes("Height") ? `${c}px` : String(c);
+        o.push({ name: O(...g), value: n });
       }
   }
-  return s;
+  return o;
 }
-function z(r = t) {
+function z(r = p) {
   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(`
+  return a.push(...e(r.base.colors, ["color"])), a.push(...e(r.base.spacing, ["spacing"])), a.push(...e(r.base.fontSize, ["font-size"])), a.push(...e(r.base.fontWeight, ["font-weight"])), a.push(...e(r.base.lineHeight, ["line-height"])), a.push(...e(r.base.letterSpacing, ["letter-spacing"])), a.push(...e(r.base.borderRadius, ["radius"])), a.push(...e(r.base.borderWidth, ["border-width"])), a.push(...e(r.base.shadows, ["shadow"])), a.push(...e(r.base.zIndex, ["z-index"])), a.push(...e(r.base.duration, ["duration"])), a.push(...e(r.base.easing, ["easing"])), a.push(...e(r.base.opacity, ["opacity"])), a.push(...e(r.base.breakpoints, ["breakpoint"])), a.push(...e(r.semantic.colors, ["semantic"])), a.push(...e(r.semantic.spacing, ["semantic-spacing"])), a.push(...e(r.semantic.borders, ["semantic-border"])), a.push(...e(r.semantic.shadows, ["semantic-shadow"])), a.push(...e(r.semantic.motion, ["motion"])), a.push(...e(r.component, ["component"])), a.map((o) => `  ${o.name}: ${o.value};`).join(`
 `);
 }
-function $(r = t) {
+function $(r = p) {
   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(`
+  return a.push(...e(r.darkMode.colors.text, ["semantic", "text"])), a.push(...e(r.darkMode.colors.background, ["semantic", "background"])), a.push(...e(r.darkMode.colors.border, ["semantic", "border"])), r.darkMode.colors.interactive && a.push(...e(r.darkMode.colors.interactive, ["semantic", "interactive"])), r.darkMode.colors.status && a.push(...e(r.darkMode.colors.status, ["semantic", "status"])), a.map((o) => `  ${o.name}: ${o.value};`).join(`
 `);
 }
-function D(r = t) {
+function P(r = p) {
   if (typeof window > "u") return;
-  const a = z(r), s = document.createElement("style");
-  s.id = "trinity-css-variables", s.textContent = `:root {
+  const a = z(r), o = document.createElement("style");
+  o.id = "trinity-css-variables", o.textContent = `:root {
 ${a}
 }`;
-  const e = document.getElementById("trinity-css-variables");
-  e && e.remove(), document.head.appendChild(s);
+  const s = document.getElementById("trinity-css-variables");
+  s && s.remove(), document.head.appendChild(o);
 }
-function I(r = t) {
+function D(r = p) {
   if (typeof window > "u") return;
-  const a = $(r), s = document.createElement("style");
-  s.id = "trinity-dark-mode-variables", s.textContent = `
+  const a = $(r), o = document.createElement("style");
+  o.id = "trinity-dark-mode-variables", o.textContent = `
 [data-theme="dark"],
 .dark-mode,
 :root.dark {
@@ -53,29 +53,29 @@ ${a}
 ${a}
   }
 }`;
-  const e = document.getElementById("trinity-dark-mode-variables");
-  e && e.remove(), document.head.appendChild(s);
+  const s = document.getElementById("trinity-dark-mode-variables");
+  s && s.remove(), document.head.appendChild(o);
 }
 function W(r, a) {
-  function s(n) {
-    let g = n.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 o(n) {
+    let u = n.replace("#", "");
+    u.length === 3 && (u = u.split("").map((l) => l + l).join(""));
+    const t = parseInt(u, 16);
+    return [t >> 16 & 255, t >> 8 & 255, t & 255];
   }
-  function e([n, g, p]) {
-    const l = [n, g, p].map((b) => (b /= 255, b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)));
+  function s([n, u, t]) {
+    const l = [n, u, t].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 c = e(s(r)), u = e(s(a));
-  return (Math.max(c, u) + 0.05) / (Math.min(c, u) + 0.05);
+  const c = s(o(r)), g = s(o(a));
+  return (Math.max(c, g) + 0.05) / (Math.min(c, g) + 0.05);
 }
-function P(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 L(r, a, o = 4.5) {
+  const s = W(r, a);
+  return s < o && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${s.toFixed(2)} for ${r} on ${a}`), s >= o;
 }
-function T(r = t, 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];
+function T(r = p, a = "light") {
+  const o = a === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], s = a === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300];
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -234,7 +234,7 @@ function T(r = t, a = "light") {
           borderRadius: r.base.borderRadius.lg,
           // 12px — matches component tokens
           backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base,
           transition: "box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out",
           "&:hover": {
@@ -252,30 +252,30 @@ function T(r = t, a = "light") {
           borderRadius: r.base.borderRadius.lg,
           // 12px — consistent with cards
           backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
         },
         rounded: {
           borderRadius: r.base.borderRadius.lg
         },
         elevation0: {
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
         },
         elevation1: {
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base
         },
         elevation2: {
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.md
         },
         elevation3: {
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.lg
         },
         outlined: {
-          border: `1px solid ${e}`,
+          border: `1px solid ${s}`,
           boxShadow: "none"
         }
       }
@@ -321,7 +321,7 @@ function T(r = t, a = "light") {
           borderRadius: r.base.borderRadius.xl,
           // 16px — allows nested cards with lg:12px
           backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
-          border: `1px solid ${s}`,
+          border: `1px solid ${o}`,
           boxShadow: a === "dark" ? "0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1)" : r.base.shadows["2xl"]
         }
       }
@@ -329,7 +329,7 @@ function T(r = t, a = "light") {
     MuiDialogTitle: {
       styleOverrides: {
         root: {
-          fontSize: r.base.fontSize.lg,
+          fontSize: r.base.fontSize.xl,
           fontWeight: r.base.fontWeight.semibold,
           padding: `${r.base.spacing[5]}px ${r.base.spacing[6]}px`,
           paddingBottom: r.base.spacing[3],
@@ -598,7 +598,7 @@ function T(r = t, a = "light") {
             transitionDuration: "300ms",
             "&.Mui-checked": {
               transform: "translateX(20px)",
-              color: "#fff",
+              color: r.base.colors.gray[0],
               "& + .MuiSwitch-track": {
                 backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
                 opacity: 1,
@@ -607,7 +607,18 @@ function T(r = t, a = "light") {
               "& .MuiSwitch-thumb": {
                 width: 24,
                 height: 24,
-                margin: 0
+                margin: 0,
+                "&::before": {
+                  content: '""',
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  left: 0,
+                  top: 0,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center",
+                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
+                }
               },
               "&.Mui-disabled + .MuiSwitch-track": {
                 opacity: 0.5
@@ -615,7 +626,7 @@ function T(r = t, a = "light") {
             },
             "&.Mui-focusVisible .MuiSwitch-thumb": {
               color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
-              border: "6px solid #fff"
+              border: `6px solid ${r.base.colors.gray[0]}`
             },
             "&.Mui-disabled .MuiSwitch-thumb": {
               color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
@@ -629,6 +640,7 @@ function T(r = t, a = "light") {
             width: 16,
             height: 16,
             margin: 4,
+            position: "relative",
             boxShadow: r.base.shadows.sm,
             transition: "all 200ms ease-in-out"
           },
@@ -652,7 +664,18 @@ function T(r = t, a = "light") {
               "& .MuiSwitch-thumb": {
                 width: 18,
                 height: 18,
-                margin: 0
+                margin: 0,
+                "&::before": {
+                  content: '""',
+                  position: "absolute",
+                  width: "100%",
+                  height: "100%",
+                  left: 0,
+                  top: 0,
+                  backgroundRepeat: "no-repeat",
+                  backgroundPosition: "center",
+                  backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 24 24"><path fill="${encodeURIComponent(a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900])}" d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>')`
+                }
               }
             }
           },
@@ -761,7 +784,7 @@ function T(r = t, a = "light") {
     MuiTableCell: {
       styleOverrides: {
         root: {
-          borderBottom: `1px solid ${s}`,
+          borderBottom: `1px solid ${o}`,
           padding: `${r.base.spacing[3]}px ${r.base.spacing[4]}px`
         },
         head: {
@@ -803,7 +826,7 @@ function T(r = t, a = "light") {
         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}`,
+          border: `1px solid ${o}`,
           marginTop: r.base.spacing[1]
         },
         list: {
@@ -835,7 +858,7 @@ function T(r = t, a = "light") {
         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}`
+          border: `1px solid ${o}`
         }
       }
     },
@@ -901,7 +924,7 @@ function T(r = t, a = "light") {
       styleOverrides: {
         paper: {
           backgroundColor: a === "dark" ? r.base.colors.gray[800] : r.base.colors.gray[0],
-          borderRight: `1px solid ${s}`
+          borderRight: `1px solid ${o}`
         }
       }
     },
@@ -968,7 +991,7 @@ function T(r = t, a = "light") {
           backgroundColor: r.base.colors.coral[600]
         },
         colorSuccess: {
-          backgroundColor: "#1DC286"
+          backgroundColor: r.semantic.colors.status.success.text
         }
       }
     },
@@ -1031,7 +1054,7 @@ function T(r = t, a = "light") {
             color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
           },
           "&.Mui-completed": {
-            color: "#1DC286"
+            color: r.semantic.colors.status.success.text
           }
         }
       }
@@ -1069,6 +1092,7 @@ function T(r = t, a = "light") {
       styleOverrides: {
         root: {
           color: "#FFB400"
+          // @intentional-color: rating star gold — no token equivalent
         },
         iconEmpty: {
           color: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300]
@@ -1164,31 +1188,33 @@ function T(r = t, a = "light") {
     }
   };
 }
-function E(r) {
+function F(r) {
   const {
     mode: a,
+    direction: o = "ltr",
     name: s = "custom",
-    tokens: e,
-    palette: c,
-    components: u,
-    typography: n,
-    shape: g,
-    config: p = {}
-  } = r, l = h(a, e);
+    tokens: c,
+    palette: g,
+    components: n,
+    typography: u,
+    shape: t,
+    config: l = {}
+  } = r, b = v(a, c, o);
   return {
-    theme: M(l, {
-      palette: c,
-      components: u,
-      typography: n,
-      shape: g
+    theme: M(b, {
+      direction: o,
+      palette: g,
+      components: n,
+      typography: u,
+      shape: t
     }),
     name: s,
     mode: a,
-    config: p
+    config: l
   };
 }
-function h(r, a) {
-  const s = { ...t, ...a }, e = r === "dark" ? {
+function v(r, a, o = "ltr") {
+  const s = { ...p, ...a }, c = 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 },
@@ -1219,15 +1245,15 @@ function h(r, a) {
         focus: s.base.colors.purple[400]
       },
       status: {
-        success: { text: "#4ADE80", background: "rgba(74, 222, 128, 0.15)", border: "rgba(74, 222, 128, 0.3)" },
-        warning: { text: "#FBBF24", background: "rgba(251, 191, 36, 0.15)", border: "rgba(251, 191, 36, 0.3)" },
-        error: { text: "#F87171", background: "rgba(248, 113, 113, 0.15)", border: "rgba(248, 113, 113, 0.3)" },
-        info: { text: "#60A5FA", background: "rgba(96, 165, 250, 0.15)", border: "rgba(96, 165, 250, 0.3)" }
+        success: { text: s.darkMode.colors.status.success.text, background: s.darkMode.colors.status.success.background, border: s.darkMode.colors.status.success.border },
+        warning: { text: s.darkMode.colors.status.warning.text, background: s.darkMode.colors.status.warning.background, border: s.darkMode.colors.status.warning.border },
+        error: { text: s.darkMode.colors.status.error.text, background: s.darkMode.colors.status.error.background, border: s.darkMode.colors.status.error.border },
+        info: { text: s.darkMode.colors.status.info.text, background: s.darkMode.colors.status.info.background, border: s.darkMode.colors.status.info.border }
       },
       border: {
-        default: "rgba(255, 255, 255, 0.12)",
-        subtle: "rgba(255, 255, 255, 0.08)",
-        strong: "rgba(255, 255, 255, 0.24)"
+        default: s.darkMode.colors.border.default,
+        subtle: s.darkMode.colors.border.subtle,
+        strong: s.darkMode.colors.border.strong
       }
     }
   } : {
@@ -1261,10 +1287,10 @@ function h(r, a) {
         focus: s.base.colors.purple[700]
       },
       status: {
-        success: { text: "#16A34A", background: "#F0FDF4", border: "#BBF7D0" },
-        warning: { text: "#D97706", background: "#FFFBEB", border: "#FDE68A" },
-        error: { text: "#DC2626", background: "#FEF2F2", border: "#FECACA" },
-        info: { text: s.base.colors.azure[500], background: s.base.colors.azure[50], border: s.base.colors.azure[200] }
+        success: { text: s.semantic.colors.status.success.text, background: s.semantic.colors.status.success.background, border: s.semantic.colors.status.success.border },
+        warning: { text: s.semantic.colors.status.warning.text, background: s.semantic.colors.status.warning.background, border: s.semantic.colors.status.warning.border },
+        error: { text: s.semantic.colors.status.error.text, background: s.semantic.colors.status.error.background, border: s.semantic.colors.status.error.border },
+        info: { text: s.semantic.colors.status.info.text, background: s.semantic.colors.status.info.background, border: s.semantic.colors.status.info.border }
       },
       border: {
         default: s.base.colors.gray[200],
@@ -1272,7 +1298,7 @@ function h(r, a) {
         strong: s.base.colors.gray[400]
       }
     }
-  }, c = {
+  }, g = {
     fontFamily: '"Montserrat", sans-serif',
     // Button text style
     button: {
@@ -1282,85 +1308,86 @@ function h(r, a) {
     // 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,
+      fontSize: i.heading.scale.h1.size,
+      fontWeight: i.heading.scale.h1.weight,
+      lineHeight: i.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,
+      fontSize: i.heading.scale.h2.size,
+      fontWeight: i.heading.scale.h2.weight,
+      lineHeight: i.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,
+      fontSize: i.heading.scale.h3.size,
+      fontWeight: i.heading.scale.h3.weight,
+      lineHeight: i.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,
+      fontSize: i.heading.scale.h4.size,
+      fontWeight: i.heading.scale.h4.weight,
+      lineHeight: i.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,
+      fontSize: i.heading.scale.h5.size,
+      fontWeight: i.heading.scale.h5.weight,
+      lineHeight: i.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,
+      fontSize: i.heading.scale.h6.size,
+      fontWeight: i.heading.scale.h6.weight,
+      lineHeight: i.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,
+      fontSize: i.body.scale.medium.size,
+      fontWeight: i.body.scale.medium.weight,
+      lineHeight: i.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,
+      fontSize: i.body.scale.small.size,
+      fontWeight: i.body.scale.small.weight,
+      lineHeight: i.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,
+      fontSize: i.label.scale.large.size,
+      fontWeight: i.label.scale.large.weight,
+      lineHeight: i.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,
+      fontSize: i.label.scale.medium.size,
+      fontWeight: i.label.scale.medium.weight,
+      lineHeight: i.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,
+      fontSize: i.caption.scale.default.size,
+      fontWeight: i.caption.scale.default.weight,
+      lineHeight: i.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,
+      fontSize: i.overline.scale.default.size,
+      fontWeight: i.overline.scale.default.weight,
+      lineHeight: i.overline.scale.default.lineHeight,
+      letterSpacing: i.overline.scale.default.tracking,
       textTransform: "uppercase",
       color: r === "dark" ? s.darkMode.colors.text.tertiary : s.semantic.colors.text.tertiary
     }
   };
   return M({
-    palette: e,
-    typography: c,
+    direction: o,
+    palette: c,
+    typography: g,
     shape: {
       borderRadius: s.base.borderRadius.md
       // 8px base - components override as needed
@@ -1395,7 +1422,7 @@ const d = {
     darkBg: "#18181B",
     darkPaper: "#27272A"
   }
-}, L = {
+}, E = {
   // White text on colored backgrounds
   whiteOnNavy: { text: d.neutral.white, bg: d.primary.main },
   whiteOnPurple: { text: d.neutral.white, bg: d.primary.light },
@@ -1408,61 +1435,61 @@ const d = {
   // Accent colors on navy background
   coralOnNavy: { text: d.secondary.main, bg: d.primary.main },
   azureOnNavy: { text: d.secondary.light, bg: d.primary.main }
-}, V = h("light"), j = h("dark");
+}, V = v("light"), j = v("dark");
 function N() {
-  const a = C().palette.mode, s = a === "dark";
-  return w(() => ({
-    tokens: t,
+  const a = C().palette.mode, o = a === "dark";
+  return R(() => ({
+    tokens: p,
     base: y,
     semantic: m,
-    component: R,
-    darkMode: x,
+    component: w,
+    darkMode: f,
     mode: a,
-    isDarkMode: s,
-    getColor: (l, b) => s && b ? b : l,
+    isDarkMode: o,
+    getColor: (l, b) => o && b ? b : l,
     getSemanticColor: (l, b) => {
-      const v = m.colors[l]?.[b];
-      if (s) {
-        const f = x.colors[l]?.[b];
-        if (f) return f;
+      const h = m.colors[l]?.[b];
+      if (o) {
+        const x = f.colors[l]?.[b];
+        if (x) return x;
       }
-      return typeof v == "string" ? v : "";
+      return typeof h == "string" ? h : "";
     },
     spacing: (l) => y.spacing[l],
     spacingCss: (l) => `${y.spacing[l]}px`,
     radius: (l) => y.borderRadius[l],
     shadow: (l) => y.shadows[l]
-  }), [s, a]);
+  }), [o, a]);
 }
 export {
-  L as accessibleCombinations,
-  Z as attentionHierarchy,
+  E as accessibleCombinations,
+  X as attentionHierarchy,
   y as baseTokens,
   d as brandColors,
-  R as componentTokens,
-  q as contrastHierarchy,
-  h as createTrinityTheme,
-  E as createTrinityThemePreset,
-  x as darkModeTokens,
+  w as componentTokens,
+  Z as contrastHierarchy,
+  v as createTrinityTheme,
+  F as createTrinityThemePreset,
+  f as darkModeTokens,
   j as darkTheme,
-  J as elevationHierarchy,
+  q as elevationHierarchy,
   z as generateCssVariables,
   $ as generateDarkModeCssVariables,
-  K as getAttentionColor,
+  J as getAttentionColor,
   W as getContrastRatio,
-  Q as getElevation,
-  U as getHierarchySpacing,
+  K as getElevation,
+  Q as getHierarchySpacing,
   Y as getTypography,
   _ as hierarchy,
-  I as injectDarkModeCssVariables,
-  D as injectTrinityCssVariables,
+  D as injectDarkModeCssVariables,
+  P as injectTrinityCssVariables,
   k as interactiveHierarchy,
   V as lightTheme,
   S as scaleHierarchy,
   m as semanticTokens,
   rr as spacingHierarchy,
-  t as tokens,
-  o as typographicHierarchy,
+  p as tokens,
+  i as typographicHierarchy,
   N as useTrinityTokens,
-  P as validateAccessibility
+  L as validateAccessibility
 };

package/dist/trinity.css

@@ -359,8 +359,7 @@
   --trinity-radius-button: 9999px;
   --trinity-radius-input: 6px;
   --trinity-radius-card: 12px;
-  --trinity-radius-modal: 12px;
-  --trinity-radius-modal-large: 16px;
+  --trinity-radius-modal: 16px;
   --trinity-radius-badge: 6px;
   --trinity-radius-avatar: 9999px;
   --trinity-radius-chip: 6px;
@@ -556,6 +555,16 @@
   --trinity-dense-badge: 0.625rem;
   --trinity-dense-text: 0.75rem;
 
+  /* ============================================
+     ICON SIZES - SEMANTIC (Intent-Based)
+     ============================================ */
+  --trinity-icon-size-inline: 14px;
+  --trinity-icon-size-control: 16px;
+  --trinity-icon-size-navigation: 20px;
+  --trinity-icon-size-prominent: 24px;
+  --trinity-icon-size-hero: 28px;
+  --trinity-icon-size-display: 36px;
+
   /* ============================================
      TYPOGRAPHY - DATA STYLES
      ============================================ */