@a4ui/core 0.3.1 → 0.4.0

package/dist/layout/ThemedScenery.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'solid-js';
+/** Props for {@link ThemedScenery}. */
+export interface ThemedSceneryProps {
+    /** Emoji/text glyphs scattered and gently floating across the backdrop. */
+    motifs: string[];
+    /** How many glyphs to render. @default 16 */
+    count?: number;
+}
+/**
+ * A lightweight, theme-tinted backdrop for non-`space` themes: the same
+ * token-driven nebula as {@link SpaceBackground} plus slowly floating motif
+ * glyphs you pass in. Mount it as {@link AppShell}'s `background` (fixed z-0
+ * layer behind all content). Motion is skipped under `motionReduced()`.
+ *
+ * @example
+ * ```tsx
+ * <AppShell background={<ThemedScenery motifs={['🦕', '🌿', '🦴']} />}>…</AppShell>
+ * ```
+ */
+export declare function ThemedScenery(props: ThemedSceneryProps): JSX.Element;

package/dist/styles.css

@@ -23,7 +23,7 @@
   --accent: 199 89% 55%;
   --accent-foreground: 0 0% 100%;
   --ring: 217 91% 52%;
-  --destructive: 0 72% 55%;
+  --destructive: 0 72% 52%;
   --destructive-foreground: 0 0% 100%;
 
   /* Semantic data colors (financial direction) — constant across themes. */
@@ -59,7 +59,7 @@
   --accent: 199 89% 48%;
   --accent-foreground: 0 0% 100%;
   --ring: 217 91% 52%;
-  --destructive: 0 72% 51%;
+  --destructive: 0 72% 50%;
   --destructive-foreground: 0 0% 100%;
 }
 
@@ -227,21 +227,25 @@ body {
   overflow: hidden;
 }
 
+/* Nebula tinted from the active theme (--primary / --accent / --destructive), so
+   switching palettes recolors the whole backdrop. Space's tokens keep it blue. */
 #space .sky {
   position: absolute;
   inset: 0;
   background:
-    radial-gradient(1200px 700px at 82% -8%, hsl(217 91% 60% / 0.34), transparent 60%),
-    radial-gradient(900px 600px at 8% 12%, hsl(275 80% 55% / 0.28), transparent 60%),
-    radial-gradient(1000px 800px at 50% 120%, hsl(199 89% 55% / 0.24), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(330 80% 55% / 0.14), transparent 60%), hsl(var(--background));
+    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
+    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
+    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
+    hsl(var(--background));
 }
 [data-theme='light'] #space .sky {
   background:
-    radial-gradient(1100px 680px at 84% -10%, hsl(38 95% 70% / 0.38), transparent 60%),
-    radial-gradient(900px 600px at 6% 8%, hsl(217 91% 70% / 0.32), transparent 60%),
-    radial-gradient(1000px 820px at 50% 120%, hsl(275 70% 75% / 0.26), transparent 55%),
-    radial-gradient(700px 500px at 30% 55%, hsl(340 85% 70% / 0.18), transparent 60%), hsl(var(--background));
+    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
+    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
+    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
+    hsl(var(--background));
 }
 @keyframes nebulaShift {
   0%,
@@ -260,7 +264,12 @@ body {
   left: -10%;
   right: -10%;
   height: 46%;
-  background: linear-gradient(180deg, hsl(160 84% 45% / 0.16), hsl(199 89% 55% / 0.1) 45%, transparent 80%);
+  background: linear-gradient(
+    180deg,
+    hsl(var(--accent) / 0.16),
+    hsl(var(--primary) / 0.1) 45%,
+    transparent 80%
+  );
   filter: blur(40px);
   opacity: 0.55;
   mix-blend-mode: screen;
@@ -552,3 +561,53 @@ body {
     display: none;
   }
 }
+
+/* ---- Generic themed scenery (non-space themes) --------------------------
+   A themed nebula (same token-tinted gradients as the starfield) plus a field
+   of slowly floating motif glyphs — <ThemedScenery motifs={[...]} />. Lighter
+   than the bespoke SpaceBackground so every extra theme costs almost nothing. */
+#scenery {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+#scenery .themed-sky {
+  position: absolute;
+  inset: 0;
+  background:
+    radial-gradient(1200px 700px at 82% -8%, hsl(var(--primary) / 0.34), transparent 60%),
+    radial-gradient(900px 600px at 8% 12%, hsl(var(--accent) / 0.28), transparent 60%),
+    radial-gradient(1000px 800px at 50% 120%, hsl(var(--accent) / 0.22), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.12), transparent 60%),
+    hsl(var(--background));
+}
+[data-theme='light'] #scenery .themed-sky {
+  background:
+    radial-gradient(1100px 680px at 84% -10%, hsl(var(--primary) / 0.22), transparent 60%),
+    radial-gradient(900px 600px at 6% 8%, hsl(var(--accent) / 0.2), transparent 60%),
+    radial-gradient(1000px 820px at 50% 120%, hsl(var(--accent) / 0.16), transparent 55%),
+    radial-gradient(700px 500px at 30% 55%, hsl(var(--destructive) / 0.1), transparent 60%),
+    hsl(var(--background));
+}
+#scenery .motif {
+  position: absolute;
+  user-select: none;
+  will-change: transform;
+  animation: motifFloat var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
+}
+@keyframes motifFloat {
+  0%,
+  100% {
+    transform: translateY(0) rotate(var(--r, 0deg));
+  }
+  50% {
+    transform: translateY(-16px) rotate(calc(var(--r, 0deg) + 5deg));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html:not(.force-motion) #scenery .motif {
+    animation: none !important;
+  }
+}

package/dist/themes/index.d.ts

@@ -0,0 +1,34 @@
+import { Palette, ThemeDefinition } from './palettes';
+export type { Palette, ThemeDefinition } from './palettes';
+export { themes, space, dino, doctor, scientist, soccer, TOKEN_ORDER } from './palettes';
+/**
+ * Render a theme to the CSS you'd paste into your own stylesheet: a `:root`
+ * block (dark) plus a `:root[data-theme='light']` block. Same output the docs
+ * Theme Builder exports.
+ */
+export declare function themeToCss(theme: ThemeDefinition): string;
+/** Render a theme's tokens to a `{ dark, light }` JSON object. */
+export declare function themeToJson(theme: ThemeDefinition): {
+    dark: Palette;
+    light: Palette;
+};
+declare const activeTheme: import('solid-js').Accessor<ThemeDefinition>;
+/** Reactive accessor for the currently applied theme. */
+export { activeTheme };
+/**
+ * Apply a theme's palette globally by injecting/replacing the
+ * `<style id="a4ui-theme">` element. No-op during SSR. Does not persist or update
+ * the reactive signal — use {@link selectTheme} for the full, persisted version.
+ */
+export declare function applyThemeDefinition(theme: ThemeDefinition): void;
+/**
+ * Select the active theme by definition or name: applies it, updates the
+ * reactive {@link activeTheme} signal, and persists the choice to localStorage.
+ * Unknown names are ignored.
+ */
+export declare function selectTheme(theme: ThemeDefinition | string): void;
+/**
+ * Restore the persisted theme (or fall back to Space) and apply it. Call once at
+ * startup. No-op during SSR.
+ */
+export declare function initTheme(): void;

package/dist/themes/palettes.d.ts

@@ -0,0 +1,42 @@
+/** The 15 recolorable tokens, each an "H S% L%" channel string. */
+export interface Palette {
+    background: string;
+    foreground: string;
+    card: string;
+    'card-foreground': string;
+    muted: string;
+    'muted-foreground': string;
+    border: string;
+    input: string;
+    primary: string;
+    'primary-foreground': string;
+    accent: string;
+    'accent-foreground': string;
+    ring: string;
+    destructive: string;
+    'destructive-foreground': string;
+}
+/** A named theme: a label plus a dark and a light palette. */
+export interface ThemeDefinition {
+    /** URL/storage-safe slug, e.g. `space`. */
+    name: string;
+    /** Human label for the picker, e.g. `Space`. */
+    label: string;
+    /** One-line flavour text. */
+    description: string;
+    /** Emoji shown in the theme picker. */
+    icon: string;
+    dark: Palette;
+    light: Palette;
+    /** Motif glyphs for the generic `ThemedScenery` backdrop. Omit for themes that
+        ship their own bespoke scenery (e.g. `space` uses `SpaceBackground`). */
+    motifs?: string[];
+}
+export declare const TOKEN_ORDER: (keyof Palette)[];
+export declare const space: ThemeDefinition;
+export declare const dino: ThemeDefinition;
+export declare const doctor: ThemeDefinition;
+export declare const scientist: ThemeDefinition;
+export declare const soccer: ThemeDefinition;
+/** All built-in themes, in picker order. Space is the default. */
+export declare const themes: ThemeDefinition[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -58,6 +58,7 @@
     "test:unit": "vitest run",
     "test": "playwright test",
     "test:ui": "playwright test --ui",
+    "test:a11y": "playwright test a11y --project=desktop",
     "test:report": "playwright show-report",
     "prepublishOnly": "npm run build"
   },
@@ -74,10 +75,12 @@
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.12.1",
     "@eslint/js": "^9.39.5",
     "@playwright/test": "^1.61.1",
     "@solidjs/testing-library": "^0.8.10",
     "@testing-library/jest-dom": "^6.9.1",
+    "axe-core": "^4.12.1",
     "eslint": "^9.39.5",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-solid": "^0.14.5",