@olympusoss/canvas 2.14.0 → 2.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@olympusoss/canvas",
-	"version": "2.14.0",
+	"version": "2.16.0",
 	"type": "module",
 	"main": "./src/index.ts",
 	"types": "./src/index.ts",

package/src/components/atoms/input.tsx

@@ -76,6 +76,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 		return (
 			<input
 				type={type}
+				data-slot="input"
 				className={cn(
 					"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
 					className,

package/src/components/molecules/card.tsx

@@ -15,6 +15,7 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
 const Card = React.forwardRef<HTMLDivElement, CardProps>(({ className, ...props }, ref) => (
 	<div
 		ref={ref}
+		data-slot="card"
 		className={cn("rounded-xl border border-border bg-card text-card-foreground shadow", className)}
 		{...props}
 	/>

package/src/components/molecules/code-block.tsx

@@ -32,6 +32,7 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
 		return (
 			<div
 				ref={ref}
+				data-slot="code-block"
 				className={cn(
 					"relative overflow-hidden rounded-md",
 					isDark ? "border border-border" : "bg-muted",

package/src/components/molecules/empty-state.tsx

@@ -28,6 +28,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
 		return (
 			<div
 				ref={ref}
+				data-slot="empty-state"
 				className={cn(
 					"flex flex-col items-center justify-center gap-3 py-12 text-muted-foreground",
 					className,

package/src/components/molecules/section-card.tsx

@@ -61,7 +61,7 @@ export function SectionCard({
 						</div>
 						{resolvedActions && <div className="flex items-center gap-2">{resolvedActions}</div>}
 					</CardHeader>
-					<div className="mx-5 mb-3.5 h-px bg-border" />
+					<div data-slot="card-divider" className="mx-5 mb-3.5 h-px bg-border" />
 				</>
 			)}
 			<CardContent className={cn(padding ? "px-5 pb-[18px] pt-0" : "p-0")}>

package/src/components/organisms/data-table.tsx

@@ -237,7 +237,7 @@ function DataTable<TData>({
 				</div>
 			)}
 
-			<div className="rounded-md border border-border">
+			<div data-slot="data-table" className="rounded-md border border-border">
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (

package/src/components/organisms/drawer.tsx

@@ -60,6 +60,7 @@ const DrawerContent = React.forwardRef<
 		<DrawerOverlay />
 		<DrawerPrimitive.Content
 			ref={ref}
+			data-slot="drawer-content"
 			className={cn(
 				"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border border-border bg-background",
 				className,

package/src/components/organisms/popover.tsx

@@ -132,6 +132,7 @@ const PopoverContent = React.forwardRef<
 		<PopoverPrimitive.Portal container={container ?? undefined}>
 			<PopoverPrimitive.Content
 				ref={ref}
+				data-slot="popover-content"
 				align={align}
 				sideOffset={sideOffset}
 				className={cn(

package/src/components/organisms/sheet.tsx

@@ -166,6 +166,7 @@ const SheetContent = React.forwardRef<
 			<SheetOverlay />
 			<SheetPrimitive.Content
 				ref={ref}
+				data-slot="sheet-content"
 				className={cn(sheetVariants({ side }), className)}
 				{...props}
 			>

package/src/components/organisms/sidebar.tsx

@@ -209,6 +209,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
 		if (collapsible === "none") {
 			return (
 				<div
+					data-slot="sidebar"
 					className={cn(
 						"flex h-full w-[var(--sidebar-width)] flex-col bg-sidebar text-sidebar-foreground",
 						className,
@@ -281,6 +282,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
 				>
 					<div
 						data-sidebar="sidebar"
+						data-slot="sidebar"
 						className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
 					>
 						{children}

package/styles/glass.css

@@ -0,0 +1,137 @@
+/* ---------- Glass surface mode ----------
+ *
+ * Activated by `html[data-surface="glass"]`. The conceit: an aurora-tinted
+ * backdrop shows through every chrome surface (sidebar, topbar, cards,
+ * tables) via `backdrop-filter: blur(...)`. Surfaces become tinted glass,
+ * with a low-alpha card color so the page palette bleeds through, plus a
+ * 1-px inner highlight on the top edge to suggest a refractive lip.
+ * Borders drop to white/black at low alpha so the layout reads as layered
+ * panes rather than rectangles drawn on flat paint.
+ *
+ * Two palettes:
+ *   - Light: pastel peach + sky + lavender washes on near-white
+ *   - Dark : deep indigo + violet + teal washes on near-black
+ *
+ * Surfaces opt in via `data-slot` attributes already present on Canvas
+ * components (`card`, `sidebar`, `data-table`, `input`, `popover-content`,
+ * `sheet-content`, `drawer-content`, `empty-state`, `code-block`). Consumer
+ * apps activate the mode by toggling the `data-surface` attribute on
+ * `<html>` (e.g. `document.documentElement.dataset.surface = "glass"`).
+ *
+ * Mirrors the Athena design handoff's `app.css` glass block; do not
+ * tighten these values without checking against the handoff bundle.
+ */
+
+@layer base {
+	html[data-surface="glass"] {
+		--glass-tint: 0 0% 100%; /* card tint base */
+		--glass-tint-alpha: 0.55;
+		--glass-border: 0 0% 100%;
+		--glass-border-alpha: 0.45;
+		--glass-highlight: 0 0% 100%;
+		--glass-highlight-alpha: 0.55;
+		--glass-shadow: 220 30% 20%;
+		--glass-blur: 18px;
+		--glass-saturate: 140%;
+	}
+
+	html[data-surface="glass"].dark {
+		--glass-tint: 222 22% 18%;
+		--glass-tint-alpha: 0.55;
+		--glass-border: 0 0% 100%;
+		--glass-border-alpha: 0.1;
+		--glass-highlight: 0 0% 100%;
+		--glass-highlight-alpha: 0.1;
+		--glass-shadow: 222 60% 4%;
+	}
+
+	/* ──────────────────────────────────────────────────────────────
+	 * Aurora backdrop — three soft radial washes anchored to body so
+	 * they remain stable across route changes and ignore the inner
+	 * shell's flat fill. The surfaces above are translucent so this
+	 * is what users actually see "through" the glass.
+	 * ──────────────────────────────────────────────────────────── */
+	html[data-surface="glass"] body {
+		background:
+			radial-gradient(60% 50% at 12% 10%, hsl(28 100% 80% / 0.55), transparent 60%),
+			radial-gradient(55% 55% at 88% 8%, hsl(210 100% 78% / 0.55), transparent 60%),
+			radial-gradient(70% 60% at 50% 100%, hsl(270 90% 82% / 0.45), transparent 65%),
+			hsl(220 30% 97%);
+		background-attachment: fixed;
+	}
+
+	html[data-surface="glass"].dark body {
+		background:
+			radial-gradient(55% 50% at 10% 8%, hsl(245 90% 60% / 0.4), transparent 60%),
+			radial-gradient(50% 55% at 92% 12%, hsl(280 85% 55% / 0.35), transparent 60%),
+			radial-gradient(70% 60% at 50% 100%, hsl(190 90% 45% / 0.28), transparent 70%),
+			hsl(222 30% 6%);
+		background-attachment: fixed;
+	}
+
+	/* ──────────────────────────────────────────────────────────────
+	 * Frosted-pane mixin. Same translucent fill, blur, and refractive
+	 * highlight on every load-bearing surface so the whole layout
+	 * reads as one stack of glass panes.
+	 * ──────────────────────────────────────────────────────────── */
+	html[data-surface="glass"] [data-slot="card"],
+	html[data-surface="glass"] [data-slot="sidebar"],
+	html[data-surface="glass"] [data-slot="topbar"],
+	html[data-surface="glass"] [data-slot="data-table"],
+	html[data-surface="glass"] [data-slot="empty-state"],
+	html[data-surface="glass"] [data-slot="popover-content"],
+	html[data-surface="glass"] [data-slot="sheet-content"],
+	html[data-surface="glass"] [data-slot="drawer-content"] {
+		background: hsl(var(--glass-tint) / var(--glass-tint-alpha));
+		backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+		-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+		box-shadow:
+			inset 0 1px 0 hsl(var(--glass-highlight) / var(--glass-highlight-alpha)),
+			0 1px 2px hsl(var(--glass-shadow) / 0.06),
+			0 8px 24px -12px hsl(var(--glass-shadow) / 0.18);
+	}
+
+	/* Sidebar and topbar take a slightly less-opaque tint so they
+	 * read as chrome rather than content cards. */
+	html[data-surface="glass"] [data-slot="sidebar"],
+	html[data-surface="glass"] [data-slot="topbar"] {
+		background: hsl(var(--glass-tint) / calc(var(--glass-tint-alpha) - 0.1));
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+
+	/* DataTable internal rules — header tint, row separators, hover. */
+	html[data-surface="glass"] [data-slot="data-table"] thead tr {
+		background: hsl(var(--glass-highlight) / 0.1);
+		border-bottom: 1px solid hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+	html[data-surface="glass"] [data-slot="data-table"] tbody tr {
+		border-bottom: 1px solid hsl(var(--glass-border) / calc(var(--glass-border-alpha) - 0.2));
+	}
+	html[data-surface="glass"] [data-slot="data-table"] tbody tr:hover {
+		background: hsl(var(--glass-highlight) / 0.1);
+	}
+
+	/* SectionCard divider matches the border tone. */
+	html[data-surface="glass"] [data-slot="card"] [data-slot="card-divider"] {
+		background: hsl(var(--glass-border) / var(--glass-border-alpha));
+	}
+
+	/* Inputs, kbd, codeblock — frosted to match. Less blur than full panes
+	 * so dense form rows stay readable. */
+	html[data-surface="glass"] [data-slot="input"],
+	html[data-surface="glass"] [data-slot="code-block"] {
+		background: hsl(var(--glass-tint) / 0.35);
+		border-color: hsl(var(--glass-border) / var(--glass-border-alpha));
+		backdrop-filter: blur(8px);
+		-webkit-backdrop-filter: blur(8px);
+	}
+
+	/* Popovers/sheets/drawers — slightly more opaque so the content stays
+	 * legible against the body aurora. */
+	html[data-surface="glass"] [data-slot="popover-content"],
+	html[data-surface="glass"] [data-slot="sheet-content"],
+	html[data-surface="glass"] [data-slot="drawer-content"] {
+		background: hsl(var(--glass-tint) / 0.85);
+	}
+}

package/styles/tokens.css

@@ -12,9 +12,25 @@
  *     v4's `@theme inline { --color-sidebar: var(--sidebar) }` mapping so
  *     `bg-sidebar` / `text-sidebar-foreground` utilities resolve.
  *
- * Typography canonical: Inter for surfaces, JetBrains Mono for code.
+ * Typography canonical (per handoff): Roboto for surfaces with Inter as a
+ * fallback while a consumer migrates, JetBrains Mono for code. The Roboto
+ * variable font is self-hosted at ./fonts/Roboto-VariableFont_wdth_wght.ttf
+ * and ships with the package (covered by the `styles` files entry).
  */
 
+/* Roboto variable font, self-hosted. Same axis range as the handoff
+ * (wght 100–900, wdth 75–100). JetBrains Mono is NOT loaded here:
+ * consumer apps own how they pull it in (e.g. Next.js `next/font/google`)
+ * so Canvas does not introduce an external @import dependency. */
+@font-face {
+	font-family: "Roboto";
+	src: url("./fonts/Roboto-VariableFont_wdth_wght.ttf") format("truetype-variations");
+	font-weight: 100 900;
+	font-stretch: 75% 100%;
+	font-style: normal;
+	font-display: swap;
+}
+
 @layer base {
 	:root {
 		/* ── Base palette (light) ───────────────────────────────────
@@ -76,7 +92,7 @@
 		--stat-amber: 38 92% 50%;        /* #f59e0b */
 
 		/* ── Typography ────────────────────────────────────────────── */
-		--font-sans: "Inter", system-ui, -apple-system, sans-serif;
+		--font-sans: "Roboto", "Inter", system-ui, -apple-system, sans-serif;
 		--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace;
 
 		/* ── Letter-spacing scale ──────────────────────────────────── *