@a4ui/core 0.20.0 → 0.21.0

package/dist/layout/Aurora.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface AuroraProps {
+    /** Blob opacity multiplier, 0..1 — higher = more visible color. @default 0.45 */
+    intensity?: number;
+    /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
+    animated?: boolean;
+    class?: string;
+}
+/**
+ * Ambient, theme-tinted blurred-blob backdrop that makes glass surfaces read as
+ * glass. Fixed behind the page (paints its own base background); keep the page
+ * root transparent. Reduced-motion aware when `animated`.
+ *
+ * @example
+ * ```tsx
+ * // at the top of your app/layout (root must NOT set its own bg):
+ * <div class="relative min-h-screen text-foreground">
+ *   <Aurora />
+ *   <YourPage />
+ * </div>
+ *
+ * <Aurora intensity={0.6} animated />
+ * ```
+ */
+export declare function Aurora(props: AuroraProps): JSX.Element;

package/dist/styles.css

@@ -228,6 +228,21 @@ body {
   animation: list-row-in 0.35s both ease-out;
 }
 
+/* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
+   <Aurora animated>). Held still under reduced motion by the global rule below. */
+@keyframes aurora-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3%, -3%, 0) scale(1.08);
+  }
+}
+.aurora-drift {
+  animation: aurora-drift 18s ease-in-out infinite;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -35,7 +35,9 @@ const glass = plugin(({ addComponents }) => {
       transition: 'transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease',
     },
     "[data-theme='light'] .card": {
-      background: 'hsl(var(--card) / 0.72)',
+      // A touch more transparent than fully opaque so the frosted blur reads on
+      // light themes (over an Aurora/scenery backdrop) — text stays legible.
+      background: 'hsl(var(--card) / 0.6)',
       border: '1px solid hsl(var(--border))',
     },
 

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.20.0'
+export const A4UI_VERSION = '0.21.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -172,6 +172,7 @@ export { flyToCart, type FlyToCartOptions } from './lib/flyToCart'
 // (Sidebar, Topbar, CompanySwitcher, DemoBanner, CommandPalette) stay in the app.
 export { AppShell } from './layout/AppShell'
 export { SpaceBackground } from './layout/SpaceBackground'
+export { Aurora, type AuroraProps } from './layout/Aurora'
 export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery'
 export { SnowScenery } from './layout/SnowScenery'
 export { ChristmasBackground } from './layout/ChristmasBackground'

package/src/layout/Aurora.tsx

@@ -0,0 +1,66 @@
+// Aurora — an ambient backdrop of soft, blurred color blobs tinted with the
+// theme tokens (`--primary` / `--accent`). Fixed behind the page so glass
+// surfaces read as glass: as glassy cards scroll over the fixed blobs, their
+// backdrop-blur samples the color behind them. Every theme tints it differently
+// for free. This is the lightweight, no-starfield alternative to
+// `SpaceBackground` / `ThemedScenery`.
+//
+// Usage: render it once at the top of your layout and keep the page root's
+// background transparent (don't put `bg-background` on the root) so the Aurora
+// shows through — the component paints the base background itself.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface AuroraProps {
+  /** Blob opacity multiplier, 0..1 — higher = more visible color. @default 0.45 */
+  intensity?: number
+  /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
+  animated?: boolean
+  class?: string
+}
+
+// Static class strings (scanned by Tailwind). token = which theme color; a =
+// per-blob opacity weight, multiplied by `intensity`.
+const BLOBS = [
+  { pos: '-left-40 -top-32', size: 'h-[40rem] w-[40rem]', token: '--primary', a: 1 },
+  { pos: '-right-32 top-1/4', size: 'h-[38rem] w-[38rem]', token: '--accent', a: 0.9 },
+  { pos: 'bottom-[-10%] left-1/3', size: 'h-[36rem] w-[36rem]', token: '--primary', a: 0.75 },
+] as const
+
+/**
+ * Ambient, theme-tinted blurred-blob backdrop that makes glass surfaces read as
+ * glass. Fixed behind the page (paints its own base background); keep the page
+ * root transparent. Reduced-motion aware when `animated`.
+ *
+ * @example
+ * ```tsx
+ * // at the top of your app/layout (root must NOT set its own bg):
+ * <div class="relative min-h-screen text-foreground">
+ *   <Aurora />
+ *   <YourPage />
+ * </div>
+ *
+ * <Aurora intensity={0.6} animated />
+ * ```
+ */
+export function Aurora(props: AuroraProps): JSX.Element {
+  const intensity = (): number => props.intensity ?? 0.45
+  return (
+    <div
+      aria-hidden="true"
+      class={cn('pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-background', props.class)}
+    >
+      <For each={BLOBS}>
+        {(b) => (
+          <div
+            class={cn('absolute rounded-full blur-3xl', b.pos, b.size, props.animated && 'aurora-drift')}
+            style={{
+              background: `radial-gradient(circle, hsl(var(${b.token}) / ${(intensity() * b.a).toFixed(2)}), transparent 70%)`,
+            }}
+          />
+        )}
+      </For>
+    </div>
+  )
+}