CremaUIStudio/crema-app-aifirst-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: appbar pickers, multi-agent personas, threads, library, profile

Browse Source 
Adds a substantial chrome layer atop the bare template:

Appbar
- Font-size picker (root font-size scale): S/M/L/XL
- Surface picker: tints --background/--card/--popover/--sidebar/--muted/
  --secondary/--accent across light + dark
- Background picker: 11 atmospheric gradients (Pearl, Linen, Mist, Dawn,
  Seafoam, Aurora, Sunset, Meadow, Midnight, Blush, Noir) + None
- Vivid foreground tokens for stronger text contrast; fixed dark-mode
  blue-on-blue user bubble (deeper --primary, near-white --primary-fg)

Assistant route
- Multi-agent personas (~/lib/agents.ts): Atlas, Forge, Inkwell, Pilot,
  Cursor — each with name/role/sub-prompt; per-thread persona; agent
  picker with avatar tint + handoff submenu
- Conversation threads (~/lib/threads.ts): new/switch/rename/delete,
  auto-titling from first user message, per-thread pinned indices
- Compact summarization with snapshot-based Restore that preserves
  pinned messages verbatim
- Edit & retry the last user message, Regenerate, Continue, Show
  system prompt, Copy / Export Markdown, Save to Library, Compare
  across agents (parallel completions in a side-by-side modal)
- Per-message Pin / Read aloud (Web Speech) / Edit
- Voice input via Web Speech Recognition
- Two-column Actions popover (UI Control + Conversation / Share /
  Multi-agent / Clear sections)
- Status bar: connection dot + LOCAL/API/MOCK chip + host chip +
  context progress bar
- Compactly named threads picker; New conversation
- DropdownMenuItem onSelect → onClick (base-ui Menu fires onClick)

Library
- ~/lib/library.ts store, /library route with search + detail panel
  (Copy / Download / Delete)

Profile
- /profile route + ~/lib/profile.ts (name/email/title/bio/signature/
  avatar dataURL/default agent), AppShell uses live profile for the
  appbar avatar; account menu now navigates to /profile

Settings
- Sub-sidenav (LLM / Agents / Appearance / Account / About)
- Editable system prompt with reset-to-default
- Agents CRUD panel
- Reorganized layout

UI Control
- Static action catalog in the system prompt so the assistant can
  drive controls on routes that aren't currently mounted
- Always returns to /assistant after a UI Control sequence (model-
  side rule + deterministic safety net)
- Cursor uses click-nav over direct navigate so the virtual cursor
  is visibly involved
- New ids tagged across the app (sidebar, settings, profile, library,
  assistant tools, agent handoff, thread management)

Hydration
- root.tsx: suppressHydrationWarning on html/body since the pre-mount
  script sets dark/data-bg/data-surface/data-font-scale before React

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-04-28 14:29:58 +10:00
parent 11b17b6b6a
commit eea5b262cb
17 changed files with 3995 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

382
app/app.css
View File

@@ -113,4 +113,386 @@
font-size: 18px;
overscroll-behavior-y: none;
}
html[data-font-scale="sm"] { font-size: 16px; }
html[data-font-scale="md"] { font-size: 18px; }
html[data-font-scale="lg"] { font-size: 20px; }
html[data-font-scale="xl"] { font-size: 22px; }
}
/* ── Vivid text ──
* Boost foreground tokens for more contrast + chroma than base mightypix.
* NOT wrapped in @layer base — mightypix's `.dark{…}` block is unlayered,
* which beats any layer. We use `html:root` / `html.dark` for matching
* specificity and unlayered placement so the cascade resolves by source order. */
html:root {
--foreground: oklch(0.16 0.08 255);
--card-foreground: oklch(0.16 0.08 255);
--popover-foreground: oklch(0.16 0.08 255);
--sidebar-foreground: oklch(0.16 0.08 255);
--muted-foreground: oklch(0.38 0.07 255);
--secondary-foreground: oklch(0.22 0.09 255);
--accent-foreground: oklch(0.22 0.09 255);
}
html.dark {
--foreground: oklch(0.98 0.025 80);
--card-foreground: oklch(0.98 0.025 80);
--popover-foreground: oklch(0.98 0.025 80);
--sidebar-foreground: oklch(0.98 0.025 80);
--muted-foreground: oklch(0.84 0.04 80);
--secondary-foreground: oklch(0.96 0.03 80);
--accent-foreground: oklch(0.96 0.03 80);
/* Darker primary so the user chat bubble is deep blue, not bright blue. */
--primary: oklch(0.48 0.18 255);
/* Near-white text on filled buttons / user chat bubble (was dark-blue). */
--primary-foreground: oklch(0.99 0.01 80);
/* Deepen muted so assistant bubble (bg-muted) reads cleanly. */
--muted: oklch(0.22 0.022 250);
--secondary: oklch(0.24 0.025 250);
}
/* ── Surface tints ──
* Override card / popover / sidebar tokens via `body[data-surface="<id>"]`.
* Light values are used in normal mode; dark values when `html.dark` is set.
* Swatch preview classes (`.surface-swatch-<id>`) sample the same hues. */
@layer base {
body[data-surface="snow"] {
--foreground: oklch(0.14 0.09 255);
--card-foreground: oklch(0.14 0.09 255);
--popover-foreground: oklch(0.14 0.09 255);
--sidebar-foreground: oklch(0.14 0.09 255);
--muted-foreground: oklch(0.36 0.08 255);
--background: oklch(1 0 0);
--card: oklch(0.99 0.002 250);
--popover: oklch(1 0 0);
--muted: oklch(0.96 0.004 250);
--secondary: oklch(0.95 0.005 250);
--accent: oklch(0.94 0.006 250);
--sidebar: oklch(0.98 0.003 250);
--sidebar-accent: oklch(0.94 0.005 250);
}
body[data-surface="stone"] {
--foreground: oklch(0.18 0.1 40);
--card-foreground: oklch(0.18 0.1 40);
--popover-foreground: oklch(0.18 0.1 40);
--sidebar-foreground: oklch(0.18 0.1 40);
--muted-foreground: oklch(0.4 0.08 40);
--background: oklch(0.97 0.012 65);
--card: oklch(0.985 0.008 60);
--popover: oklch(0.99 0.006 60);
--muted: oklch(0.94 0.016 65);
--secondary: oklch(0.93 0.02 65);
--accent: oklch(0.91 0.024 65);
--sidebar: oklch(0.95 0.014 65);
--sidebar-accent: oklch(0.9 0.022 65);
}
body[data-surface="sage"] {
--foreground: oklch(0.18 0.1 155);
--card-foreground: oklch(0.18 0.1 155);
--popover-foreground: oklch(0.18 0.1 155);
--sidebar-foreground: oklch(0.18 0.1 155);
--muted-foreground: oklch(0.4 0.08 155);
--background: oklch(0.97 0.022 155);
--card: oklch(0.985 0.014 155);
--popover: oklch(0.99 0.012 155);
--muted: oklch(0.94 0.025 155);
--secondary: oklch(0.93 0.028 155);
--accent: oklch(0.91 0.032 155);
--sidebar: oklch(0.95 0.024 155);
--sidebar-accent: oklch(0.9 0.034 155);
}
body[data-surface="slate"] {
--foreground: oklch(0.16 0.11 240);
--card-foreground: oklch(0.16 0.11 240);
--popover-foreground: oklch(0.16 0.11 240);
--sidebar-foreground: oklch(0.16 0.11 240);
--muted-foreground: oklch(0.38 0.09 240);
--background: oklch(0.96 0.014 240);
--card: oklch(0.98 0.01 240);
--popover: oklch(0.99 0.008 240);
--muted: oklch(0.93 0.018 240);
--secondary: oklch(0.92 0.022 240);
--accent: oklch(0.9 0.026 240);
--sidebar: oklch(0.94 0.018 240);
--sidebar-accent: oklch(0.89 0.026 240);
}
html.dark body[data-surface="snow"] {
--foreground: oklch(0.98 0.02 250);
--card-foreground: oklch(0.98 0.02 250);
--popover-foreground: oklch(0.98 0.02 250);
--sidebar-foreground: oklch(0.98 0.02 250);
--muted-foreground: oklch(0.84 0.03 250);
--background: oklch(0.18 0.004 250);
--card: oklch(0.24 0.005 250);
--popover: oklch(0.24 0.005 250);
--muted: oklch(0.26 0.006 250);
--secondary: oklch(0.28 0.007 250);
--accent: oklch(0.3 0.008 250);
--sidebar: oklch(0.16 0.004 250);
--sidebar-accent: oklch(0.26 0.007 250);
}
html.dark body[data-surface="stone"] {
--foreground: oklch(0.98 0.04 80);
--card-foreground: oklch(0.98 0.04 80);
--popover-foreground: oklch(0.98 0.04 80);
--sidebar-foreground: oklch(0.98 0.04 80);
--muted-foreground: oklch(0.84 0.05 80);
--background: oklch(0.18 0.016 60);
--card: oklch(0.24 0.014 60);
--popover: oklch(0.24 0.014 60);
--muted: oklch(0.26 0.018 60);
--secondary: oklch(0.28 0.02 60);
--accent: oklch(0.3 0.022 60);
--sidebar: oklch(0.16 0.018 60);
--sidebar-accent: oklch(0.27 0.022 60);
}
html.dark body[data-surface="sage"] {
--foreground: oklch(0.98 0.04 145);
--card-foreground: oklch(0.98 0.04 145);
--popover-foreground: oklch(0.98 0.04 145);
--sidebar-foreground: oklch(0.98 0.04 145);
--muted-foreground: oklch(0.84 0.05 145);
--background: oklch(0.18 0.025 155);
--card: oklch(0.24 0.022 155);
--popover: oklch(0.24 0.02 155);
--muted: oklch(0.26 0.028 155);
--secondary: oklch(0.28 0.03 155);
--accent: oklch(0.3 0.032 155);
--sidebar: oklch(0.16 0.026 155);
--sidebar-accent: oklch(0.27 0.032 155);
}
html.dark body[data-surface="slate"] {
--foreground: oklch(0.98 0.025 240);
--card-foreground: oklch(0.98 0.025 240);
--popover-foreground: oklch(0.98 0.025 240);
--sidebar-foreground: oklch(0.98 0.025 240);
--muted-foreground: oklch(0.84 0.04 240);
--background: oklch(0.18 0.02 240);
--card: oklch(0.24 0.018 240);
--popover: oklch(0.24 0.016 240);
--muted: oklch(0.26 0.024 240);
--secondary: oklch(0.28 0.026 240);
--accent: oklch(0.3 0.028 240);
--sidebar: oklch(0.16 0.022 240);
--sidebar-accent: oklch(0.27 0.028 240);
}
.surface-swatch-default { background: var(--card); }
.surface-swatch-snow { background: oklch(1 0 0); }
.surface-swatch-stone { background: oklch(0.97 0.008 60); }
.surface-swatch-sage { background: oklch(0.97 0.018 155); }
.surface-swatch-slate { background: oklch(0.96 0.012 240); }
html.dark .surface-swatch-snow { background: oklch(0.24 0.005 250); }
html.dark .surface-swatch-stone { background: oklch(0.24 0.014 60); }
html.dark .surface-swatch-sage { background: oklch(0.24 0.022 155); }
html.dark .surface-swatch-slate { background: oklch(0.24 0.018 240); }
}
/* ── Background atmospheres ──
* Selected via `body[data-bg="<id>"]` (set by BackgroundPicker).
* Default (no attribute) keeps the theme's flat surface. */
@layer base {
/* ── Light, airy variants ── */
body[data-bg="pearl"],
.bg-variant-pearl {
background-image:
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.98 0.02 320 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.97 0.03 220 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.98 0.025 260 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.99 0.02 60 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.99 0.005 280), oklch(0.97 0.012 240));
}
body[data-bg="linen"],
.bg-variant-linen {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.98 0.03 80 / 0.8), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.97 0.035 60 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.98 0.025 40 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.99 0.02 90 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.99 0.012 75), oklch(0.97 0.018 60));
}
body[data-bg="mist"],
.bg-variant-mist {
background-image:
radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.97 0.02 220 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.96 0.025 200 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.02 240 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.018 180 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.98 0.008 220), oklch(0.96 0.012 210));
}
body[data-bg="dawn"],
.bg-variant-dawn {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.97 0.04 30 / 0.8), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.035 320 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.97 0.03 50 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.98 0.025 290 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.99 0.012 40), oklch(0.97 0.018 320));
}
body[data-bg="seafoam"],
.bg-variant-seafoam {
background-image:
radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.97 0.035 180 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.96 0.03 160 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.97 0.03 200 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.98 0.025 145 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.98 0.012 175), oklch(0.96 0.018 165));
}
body[data-bg="aurora"],
.bg-variant-aurora {
background-image:
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.88 0.11 250 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.9 0.1 320 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.9 0.12 200 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.92 0.09 145 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.97 0.02 260), oklch(0.94 0.03 280));
}
body[data-bg="sunset"],
.bg-variant-sunset {
background-image:
radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.9 0.13 50 / 0.85), transparent 60%),
radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.88 0.14 20 / 0.8), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.9 0.12 340 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.92 0.1 75 / 0.7), transparent 55%),
linear-gradient(180deg, oklch(0.97 0.03 60), oklch(0.94 0.04 30));
}
body[data-bg="meadow"],
.bg-variant-meadow {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.9 0.12 145 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.91 0.11 180 / 0.75), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.9 0.12 120 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.93 0.1 95 / 0.65), transparent 55%),
linear-gradient(180deg, oklch(0.97 0.03 155), oklch(0.94 0.04 170));
}
body[data-bg="midnight"],
.bg-variant-midnight {
background-image:
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.58 0.19 270 / 0.9), transparent 60%),
radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.55 0.22 310 / 0.85), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.5 0.22 240 / 0.8), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.55 0.2 330 / 0.75), transparent 55%),
linear-gradient(180deg, oklch(0.35 0.12 265), oklch(0.28 0.14 290));
}
body[data-bg="blush"],
.bg-variant-blush {
background-image:
radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.92 0.1 10 / 0.85), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.93 0.09 340 / 0.8), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.92 0.1 300 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.94 0.08 45 / 0.7), transparent 55%),
linear-gradient(180deg, oklch(0.98 0.02 20), oklch(0.95 0.03 355));
}
body[data-bg="noir"],
.bg-variant-noir {
background-image:
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.85 0.01 260 / 0.9), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.82 0.01 280 / 0.85), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.8 0.01 240 / 0.8), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.84 0.01 200 / 0.75), transparent 55%),
linear-gradient(180deg, oklch(0.95 0.005 260), oklch(0.9 0.005 260));
}
/* ── Dark mode: same hues, deeper L, lower alpha ── */
html.dark body[data-bg="pearl"],
html.dark .bg-variant-pearl {
background-image:
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.42 0.06 320 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 18%, oklch(0.4 0.07 220 / 0.5), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 260 / 0.45), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 60 / 0.4), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.015 280), oklch(0.15 0.02 240));
}
html.dark body[data-bg="linen"],
html.dark .bg-variant-linen {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.07 80 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 60 / 0.5), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.07 40 / 0.45), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.06 90 / 0.4), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.025 75), oklch(0.15 0.03 60));
}
html.dark body[data-bg="mist"],
html.dark .bg-variant-mist {
background-image:
radial-gradient(ellipse 70% 60% at 18% 14%, oklch(0.4 0.06 220 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 82% 16%, oklch(0.4 0.07 200 / 0.5), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.06 240 / 0.45), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.05 180 / 0.4), transparent 55%),
linear-gradient(180deg, oklch(0.17 0.018 220), oklch(0.14 0.022 210));
}
html.dark body[data-bg="dawn"],
html.dark .bg-variant-dawn {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.42 0.1 30 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.1 320 / 0.5), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.09 50 / 0.45), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.08 290 / 0.4), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.03 40), oklch(0.15 0.035 320));
}
html.dark body[data-bg="seafoam"],
html.dark .bg-variant-seafoam {
background-image:
radial-gradient(ellipse 70% 60% at 15% 14%, oklch(0.42 0.08 180 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.4 0.08 160 / 0.5), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.4 0.08 200 / 0.45), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 90%, oklch(0.42 0.07 145 / 0.4), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.025 175), oklch(0.15 0.03 165));
}
html.dark body[data-bg="aurora"],
html.dark .bg-variant-aurora {
background-image:
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.45 0.18 250 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.42 0.2 320 / 0.65), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.4 0.18 200 / 0.6), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.42 0.16 145 / 0.55), transparent 55%),
linear-gradient(180deg, oklch(0.16 0.04 260), oklch(0.13 0.05 280));
}
html.dark body[data-bg="sunset"],
html.dark .bg-variant-sunset {
background-image:
radial-gradient(ellipse 70% 60% at 12% 15%, oklch(0.5 0.18 50 / 0.7), transparent 60%),
radial-gradient(ellipse 65% 55% at 85% 10%, oklch(0.48 0.2 20 / 0.65), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 90%, oklch(0.45 0.18 340 / 0.6), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 85%, oklch(0.5 0.16 75 / 0.55), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.06 30), oklch(0.14 0.08 15));
}
html.dark body[data-bg="meadow"],
html.dark .bg-variant-meadow {
background-image:
radial-gradient(ellipse 70% 60% at 15% 12%, oklch(0.45 0.16 145 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 18%, oklch(0.45 0.16 180 / 0.65), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 88%, oklch(0.42 0.16 120 / 0.6), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.45 0.14 95 / 0.55), transparent 55%),
linear-gradient(180deg, oklch(0.16 0.04 155), oklch(0.13 0.05 170));
}
html.dark body[data-bg="midnight"],
html.dark .bg-variant-midnight {
background-image:
radial-gradient(ellipse 70% 60% at 18% 12%, oklch(0.4 0.22 270 / 0.85), transparent 60%),
radial-gradient(ellipse 65% 55% at 85% 20%, oklch(0.38 0.24 310 / 0.8), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.36 0.24 240 / 0.75), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.38 0.22 330 / 0.7), transparent 55%),
linear-gradient(180deg, oklch(0.12 0.08 265), oklch(0.09 0.1 290));
}
html.dark body[data-bg="blush"],
html.dark .bg-variant-blush {
background-image:
radial-gradient(ellipse 70% 60% at 15% 15%, oklch(0.5 0.16 10 / 0.7), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 15%, oklch(0.48 0.16 340 / 0.65), transparent 55%),
radial-gradient(ellipse 80% 60% at 88% 88%, oklch(0.45 0.16 300 / 0.6), transparent 60%),
radial-gradient(ellipse 60% 50% at 12% 88%, oklch(0.5 0.14 45 / 0.55), transparent 55%),
linear-gradient(180deg, oklch(0.18 0.05 20), oklch(0.14 0.06 355));
}
html.dark body[data-bg="noir"],
html.dark .bg-variant-noir {
background-image:
radial-gradient(ellipse 70% 60% at 15% 10%, oklch(0.3 0.01 260 / 0.9), transparent 60%),
radial-gradient(ellipse 60% 50% at 85% 20%, oklch(0.28 0.01 280 / 0.85), transparent 55%),
radial-gradient(ellipse 80% 60% at 90% 85%, oklch(0.26 0.01 240 / 0.8), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, oklch(0.28 0.01 200 / 0.75), transparent 55%),
linear-gradient(180deg, oklch(0.12 0.005 260), oklch(0.08 0.005 260));
}
}