eea5b262cb
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>
498 lines
25 KiB
CSS
498 lines
25 KiB
CSS
/* Active theme — must be first so its @import url() font directives resolve
|
|
* to the top of the output. Themes are self-contained: tokens + fonts. */
|
|
@import "../../lib-theme-mightypix/theme.css"; /* CREMA:THEME */
|
|
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
|
|
@source "../../lib-chat-ui/src";
|
|
@source "../../lib-aifirst-ui/src";
|
|
@source "../../lib-llm-ui/src";
|
|
@source "../../lib-action-bus/src";
|
|
/* CREMA:SOURCES */
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-heading: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
|
|
--font-ai-prose: "Source Serif 4", Georgia, serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
--color-sidebar-border: var(--sidebar-border);
|
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
--color-sidebar-accent: var(--sidebar-accent);
|
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
--color-sidebar-primary: var(--sidebar-primary);
|
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
--color-sidebar: var(--sidebar);
|
|
--color-chart-5: var(--chart-5);
|
|
--color-chart-4: var(--chart-4);
|
|
--color-chart-3: var(--chart-3);
|
|
--color-chart-2: var(--chart-2);
|
|
--color-chart-1: var(--chart-1);
|
|
--color-ring: var(--ring);
|
|
--color-input: var(--input);
|
|
--color-border: var(--border);
|
|
--color-destructive: var(--destructive);
|
|
--color-success: var(--success);
|
|
--color-success-foreground: var(--success-foreground);
|
|
--color-syntax-keyword: var(--syntax-keyword);
|
|
--color-syntax-string: var(--syntax-string);
|
|
--color-syntax-number: var(--syntax-number);
|
|
--color-syntax-comment: var(--syntax-comment);
|
|
--color-syntax-function: var(--syntax-function);
|
|
--color-syntax-type: var(--syntax-type);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-card: var(--card);
|
|
--color-foreground: var(--foreground);
|
|
--color-background: var(--background);
|
|
--ease-standard: var(--ease-standard);
|
|
--ease-emphasized: var(--ease-emphasized);
|
|
--ease-decelerate: var(--ease-decelerate);
|
|
--ease-accelerate: var(--ease-accelerate);
|
|
--ease-spring-gentle: var(--ease-spring-gentle);
|
|
--ease-spring-snappy: var(--ease-spring-snappy);
|
|
--ease-spring-bouncy: var(--ease-spring-bouncy);
|
|
--duration-spring: var(--duration-spring);
|
|
--duration-fast: var(--duration-fast);
|
|
--duration-base: var(--duration-base);
|
|
--duration-slow: var(--duration-slow);
|
|
--duration-slower: var(--duration-slower);
|
|
--text-display: var(--text-display-size);
|
|
--text-display--line-height: var(--text-display-lh);
|
|
--text-headline: var(--text-headline-size);
|
|
--text-headline--line-height: var(--text-headline-lh);
|
|
--text-title: var(--text-title-size);
|
|
--text-title--line-height: var(--text-title-lh);
|
|
--text-body: var(--text-body-size);
|
|
--text-body--line-height: var(--text-body-lh);
|
|
--text-label: var(--text-label-size);
|
|
--text-label--line-height: var(--text-label-lh);
|
|
--text-caption: var(--text-caption-size);
|
|
--text-caption--line-height: var(--text-caption-lh);
|
|
--shadow-e0: var(--elevation-0);
|
|
--shadow-e1: var(--elevation-1);
|
|
--shadow-e2: var(--elevation-2);
|
|
--shadow-e3: var(--elevation-3);
|
|
--shadow-e4: var(--elevation-4);
|
|
--shadow-e5: var(--elevation-5);
|
|
--border-width-thin: var(--border-width-thin);
|
|
--border-width-base: var(--border-width-base);
|
|
--border-width-thick: var(--border-width-thick);
|
|
--border-width-heavy: var(--border-width-heavy);
|
|
--radius-sm: calc(var(--radius) * 0.5);
|
|
--radius-md: calc(var(--radius) * 0.75);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.15);
|
|
--radius-2xl: calc(var(--radius) * 1.3);
|
|
--radius-3xl: calc(var(--radius) * 1.5);
|
|
--radius-4xl: calc(var(--radius) * 1.75);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
overscroll-behavior-y: none;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
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));
|
|
}
|
|
} |