@leonardaustin/ui 0.6.0 → 0.6.1

package/dist/config/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/config/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACtC;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,SAAS,EA2CjC,CAAC;AAQF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,IAAI,UAAU,CAE9D;AAED,eAAO,MAAM,WAAW,aAAkD,CAAC;AAC3E,eAAO,MAAM,UAAU,aAAmD,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,UAAU,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,UAAU,CAAC;IACtB,WAAW,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,UAAU,CAAC;IAC3B,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAqDD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAQ3D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAM7D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,UAAU,EASnC,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/config/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG/C,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,8BAA8B,CAAC;AAC5E,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAEnE,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;CACtC;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU,EAAE,SAAS,EAiDjC,CAAC;AASF,wBAAgB,YAAY,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,IAAI,UAAU,CAE9D;AAED,eAAO,MAAM,WAAW,aAAkD,CAAC;AAC3E,eAAO,MAAM,UAAU,aAAmD,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,UAAU,CAAC;IACnB,WAAW,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,UAAU,CAAC;IACtB,WAAW,EAAE,UAAU,CAAC;IACxB,SAAS,EAAE,UAAU,CAAC;IACtB,cAAc,EAAE,UAAU,CAAC;IAC3B,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,UAAU,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AAqDD,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAS3D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAM7D,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,UAAU,EASnC,CAAC"}

package/dist/index.js

@@ -1799,6 +1799,15 @@ var xt = [
 			fg: "#d4d4d8"
 		}
 	},
+	{
+		value: "lightInverted",
+		label: "Light Inverted",
+		icon: oe,
+		preview: {
+			bg: "#f1f2f4",
+			fg: "#ffffff"
+		}
+	},
 	{
 		value: "monokai",
 		label: "Monokai",
@@ -1846,6 +1855,7 @@ var xt = [
 	}
 ], St = new Set([
 	"light",
+	"lightInverted",
 	"cyberBrutalLight",
 	"hashiTheme"
 ]);
@@ -1885,6 +1895,7 @@ var wt = xt.filter((e) => Ct(e.value)), Tt = xt.filter((e) => !Ct(e.value)), Et
 }, Ot = {
 	dark: Et,
 	light: Et,
+	lightInverted: Et,
 	monokai: Et,
 	solarized: Et,
 	cyberBrutalDark: Dt,
@@ -3413,13 +3424,13 @@ function Pn({ data: e, columns: t, getRowId: n, onRowClick: r, emptyMessage: i =
 		u(e), m(t);
 	}
 	return /* @__PURE__ */ h("div", {
-		className: "border-border overflow-x-auto rounded-md border",
+		className: "border-border bg-bg-table overflow-x-auto rounded-md border",
 		children: /* @__PURE__ */ g("table", {
 			className: "font-data w-full text-xs",
 			children: [/* @__PURE__ */ h("thead", { children: /* @__PURE__ */ h("tr", {
-				className: "border-border bg-bg-secondary border-b",
+				className: "border-border bg-bg-table-header border-b",
 				children: t.map((e) => /* @__PURE__ */ h("th", {
-					className: V("text-2xs text-text-tertiary font-label h-7 px-3 text-left font-semibold tracking-wider uppercase", e.sortable && "hover:text-text-secondary cursor-pointer select-none"),
+					className: V("text-2xs text-text-table-header font-label h-7 px-3 text-left font-semibold tracking-wider uppercase", e.sortable && "hover:text-text-table-header-hover cursor-pointer select-none"),
 					style: { width: e.width },
 					onClick: e.sortable ? () => S(e.key) : void 0,
 					children: /* @__PURE__ */ g("span", {
@@ -3432,7 +3443,7 @@ function Pn({ data: e, columns: t, getRowId: n, onRowClick: r, emptyMessage: i =
 				className: "text-text-tertiary h-32 text-center",
 				children: i
 			}) }) : b.map((e) => /* @__PURE__ */ h("tr", {
-				className: V("border-border h-8 border-b last:border-b-0", "hover:bg-bg-hover", r && "cursor-pointer"),
+				className: V("border-border h-8 border-b last:border-b-0", "hover:bg-bg-hover transition-none", r && "cursor-pointer"),
 				onClick: r ? () => r(e) : void 0,
 				children: t.map((t) => /* @__PURE__ */ h("td", {
 					className: V("text-text-primary px-3 whitespace-nowrap", t.cellClassName),
@@ -8452,7 +8463,7 @@ function Do({ start: e, end: t, children: n, className: r, startClassName: i, en
 //#region src/components/ui/UploadDropzone.tsx
 function Oo({ title: e = "Drag and drop files here, or click to browse", description: t, icon: n, accept: r, multiple: i, disabled: a, onChange: o, className: s }) {
 	return /* @__PURE__ */ g("label", {
-		className: V("border-border hover:border-border-strong block rounded-md border-2 border-dashed p-8 text-center transition-colors duration-[100ms]", a ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-bg-hover", s),
+		className: V("border-border hover:border-border-strong relative block rounded-md border-2 border-dashed p-8 text-center transition-colors duration-[100ms]", a ? "cursor-not-allowed opacity-60" : "cursor-pointer hover:bg-bg-hover", s),
 		children: [
 			/* @__PURE__ */ h("input", {
 				type: "file",
@@ -8826,6 +8837,7 @@ function Jo({ children: e, storageKey: t = Lo }) {
 var Yo = {
 	dark: "",
 	light: "theme-light",
+	lightInverted: "theme-light-inverted",
 	monokai: "theme-monokai",
 	solarized: "theme-solarized",
 	cyberBrutalDark: "theme-cyber-brutal-dark",

package/dist/providers/ThemeContext.d.ts

@@ -1,5 +1,5 @@
 export type DarkTheme = "dark" | "monokai" | "solarized" | "cyberBrutalDark";
-export type LightTheme = "light" | "cyberBrutalLight" | "hashiTheme";
+export type LightTheme = "light" | "lightInverted" | "cyberBrutalLight" | "hashiTheme";
 export type Theme = DarkTheme | LightTheme;
 export interface ThemeContextValue {
     theme: Theme;

package/dist/providers/ThemeContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeContext.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAC7E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,kBAAkB,GAAG,YAAY,CAAC;AACrE,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,YAAY,4CAEvB,CAAC"}
+{"version":3,"file":"ThemeContext.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeContext.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAC7E,MAAM,MAAM,UAAU,GAClB,OAAO,GACP,eAAe,GACf,kBAAkB,GAClB,YAAY,CAAC;AACjB,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;AAE3C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC;CACd;AAED,eAAO,MAAM,YAAY,4CAEvB,CAAC"}

package/dist/providers/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAe9D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAiBlE"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../src/providers/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB9D,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAiBlE"}

package/dist/styles.css

@@ -96,7 +96,8 @@
 
 /* ─── Light Theme ─── */
 
-.theme-light {
+.theme-light,
+.theme-light-inverted {
   --bg-primary: #f9fafb;
   --bg-secondary: #f5f5f5;
   --bg-tertiary: #ffffff;
@@ -163,6 +164,22 @@
   color-scheme: light;
 }
 
+/* ─── Light Inverted Theme ─── */
+
+.theme-light-inverted {
+  --bg-primary: #f1f2f4;
+  --bg-secondary: #ffffff;
+  --bg-tertiary: #f7f7f8;
+  --bg-sidebar: #ffffff;
+  --text-secondary: #6b6b75;
+
+  --bg-content: var(--bg-secondary);
+  --bg-table: var(--bg-secondary);
+  --bg-table-header: var(--bg-tertiary);
+  --text-table-header: var(--text-secondary);
+  --text-table-header-hover: var(--text-primary);
+}
+
 /* ─── HashiTheme ─── */
 
 .theme-hashi {
@@ -669,6 +686,8 @@ pre.shiki span {
 
 .theme-light pre.shiki,
 .theme-light pre.shiki span,
+.theme-light-inverted pre.shiki,
+.theme-light-inverted pre.shiki span,
 .theme-cyber-brutal-light pre.shiki,
 .theme-cyber-brutal-light pre.shiki span,
 .theme-hashi pre.shiki,
@@ -676,6 +695,64 @@ pre.shiki span {
   color: var(--shiki-light, var(--text-primary));
 }
 
+/* Reading areas and grouped controls become islands on the inverted canvas.
+   The marker keeps existing themes' spacing and backgrounds unchanged. */
+.theme-light-inverted .ui-content-surface {
+  background-color: var(--bg-content);
+  border: var(--ui-border-width) solid var(--border);
+  border-radius: var(--ui-radius-md);
+  padding: clamp(1rem, 2vw, 1.5rem);
+}
+
+.theme-light-inverted .ui-content-surface-flush {
+  padding: 0;
+}
+
+.theme-light-inverted .ui-content-inset {
+  padding: 1rem;
+}
+
+@media (width < 40rem) {
+  .theme-light-inverted .ui-email-header {
+    flex-wrap: wrap;
+  }
+
+  .theme-light-inverted .ui-email-header h1 {
+    flex: 1 0 calc(100% - 2rem);
+  }
+}
+
+/* Keep role utilities in the same layer as hover/focus and consumer utilities. */
+@layer utilities {
+  /* Content roles fall back to the original backgrounds in existing themes. */
+  .bg-bg-content {
+    background-color: var(--bg-content, var(--bg-primary));
+  }
+
+  .bg-bg-content-raised {
+    background-color: var(--bg-content, var(--bg-tertiary));
+  }
+
+  /* Table roles fall back to the original appearance in existing themes. */
+  .bg-bg-table {
+    background-color: var(--bg-table, transparent);
+  }
+
+  .bg-bg-table-header {
+    background-color: var(--bg-table-header, var(--bg-secondary));
+  }
+
+  .text-text-table-header {
+    color: var(--text-table-header, var(--text-tertiary));
+  }
+
+  @media (hover: hover) {
+    .hover\:text-text-table-header-hover:hover {
+      color: var(--text-table-header-hover, var(--text-secondary));
+    }
+  }
+}
+
 /* ─── Shared prose content ─── */
 
 .ui-prose {
@@ -966,7 +1043,7 @@ textarea:disabled {
 .ui-cal {
   --cal-gutter: 3.5rem;
   --cal-hatch: color-mix(in srgb, var(--text-tertiary) 16%, transparent);
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
   color: var(--text-primary);
 }
 
@@ -1079,7 +1156,7 @@ textarea:disabled {
       color-mix(in srgb, var(--cal-c) 16%, transparent),
       color-mix(in srgb, var(--cal-c) 16%, transparent)
     ),
-    var(--bg-primary);
+    var(--bg-content, var(--bg-primary));
   color: var(--text-primary);
   transition:
     box-shadow 100ms ease,
@@ -1144,7 +1221,9 @@ textarea:disabled {
   border: var(--ui-border-width) solid
     color-mix(in srgb, var(--cal-c) 35%, transparent);
   border-left: 3px solid var(--cal-c);
-  background: linear-gradient(var(--cal-m), var(--cal-m)), var(--bg-primary);
+  background:
+    linear-gradient(var(--cal-m), var(--cal-m)),
+    var(--bg-content, var(--bg-primary));
   color: var(--text-primary);
   padding: 2px 6px;
   font-size: var(--text-2xs);
@@ -1167,7 +1246,7 @@ textarea:disabled {
 }
 
 .ui-cal-event[data-status="tentative"] {
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
   border-style: dashed;
   border-color: var(--cal-c);
 }
@@ -1175,7 +1254,7 @@ textarea:disabled {
 .ui-cal-event[data-status="held"] {
   background:
     repeating-linear-gradient(135deg, var(--cal-m) 0 6px, transparent 6px 12px),
-    var(--bg-primary);
+    var(--bg-content, var(--bg-primary));
   border-style: dashed;
   border-left-style: solid;
 }
@@ -1300,7 +1379,11 @@ textarea:disabled {
   z-index: 5;
   pointer-events: none;
   border-color: var(--cal-c);
-  background: color-mix(in srgb, var(--cal-c) 28%, var(--bg-primary));
+  background: color-mix(
+    in srgb,
+    var(--cal-c) 28%,
+    var(--bg-content, var(--bg-primary))
+  );
   box-shadow: var(--shadow-md);
 }
 
@@ -1341,7 +1424,11 @@ textarea:disabled {
   pointer-events: none;
   border-radius: var(--ui-radius-md);
   border: 1px dashed var(--accent);
-  background: color-mix(in srgb, var(--accent) 18%, var(--bg-primary));
+  background: color-mix(
+    in srgb,
+    var(--accent) 18%,
+    var(--bg-content, var(--bg-primary))
+  );
   box-shadow: var(--shadow-md);
   color: var(--text-primary);
   font-size: var(--text-2xs);
@@ -1351,7 +1438,11 @@ textarea:disabled {
 
 .ui-cal-ghost[data-invalid] {
   border-color: var(--red);
-  background: color-mix(in srgb, var(--red) 16%, var(--bg-primary));
+  background: color-mix(
+    in srgb,
+    var(--red) 16%,
+    var(--bg-content, var(--bg-primary))
+  );
 }
 
 .ui-cal-cursor {
@@ -1508,7 +1599,11 @@ textarea:disabled {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: color-mix(in srgb, var(--bg-primary) 55%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--bg-content, var(--bg-primary)) 55%,
+    transparent
+  );
 }
 
 /* Printing: show the whole schedule, drop the controls. */
@@ -1531,7 +1626,7 @@ textarea:disabled {
   position: sticky;
   top: 0;
   z-index: 20;
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
 }
 
 .ui-cal-corner,
@@ -1545,14 +1640,14 @@ textarea:disabled {
   left: 0;
   z-index: 21;
   align-self: stretch;
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
 }
 
 .ui-cal-gutter {
   position: sticky;
   left: 0;
   z-index: 10;
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
 }
 
 .ui-cal-subhead {
@@ -1592,7 +1687,7 @@ textarea:disabled {
   width: var(--cal-row-head);
   min-width: 0;
   border-right: var(--ui-border-width) solid var(--border);
-  background: var(--bg-primary);
+  background: var(--bg-content, var(--bg-primary));
 }
 
 .ui-cal-corner-x {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leonardaustin/ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Reusable React component library and application shell for Leonard Austin projects.",
   "license": "MIT",
   "type": "module",