CremaUIStudio/lib-theme-prism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add calm background variant (body[data-bg=calm])
Some checks failed
validate theme / validate (push) Has been cancelled
Details

Browse Source 
Full-strength drift floods short consumer pages — the white glass
surfaces cluster and the app reads as a card floating on a poster
(diagnosed on me.sky-ai.com). Calm keeps the same hue story at about
half the stain: corner gradients ~45% alpha, drift blobs at 0.4. Dark
mode keeps its standard gradients (already calm); only the drift layer
eases to 0.7.

Opt-in per consumer app; drift stays the default.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
jules
2026-06-10 13:47:54 +10:00
parent d38352fcc6
commit f688b2b343
1 changed files with 29 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
theme.css
View File

@@ -499,6 +499,35 @@
radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.30 0.07 145 / 0.45), transparent 55%);
}
/*
* ── Calm variant ── opt-in via body[data-bg="calm"]. The same hue
* story at roughly half the stain: corner gradients drop to ~45%
* alpha and the drift layer dims to match. For consumer surfaces
* (me.sky-ai.com) where full-strength drift floods short pages and
* the app reads as a white card floating on a poster. Dark mode is
* already calm — it keeps the standard dark gradients, only the
* drift layer eases.
*/
body[data-bg="calm"] {
background-image:
radial-gradient(ellipse 80% 60% at 12% 8%, oklch(0.92 0.09 295 / 0.32), transparent 60%),
radial-gradient(ellipse 70% 60% at 88% 14%, oklch(0.93 0.1 350 / 0.30), transparent 55%),
radial-gradient(ellipse 80% 60% at 92% 88%, oklch(0.93 0.1 200 / 0.30), transparent 60%),
radial-gradient(ellipse 70% 60% at 8% 92%, oklch(0.94 0.09 145 / 0.28), transparent 55%),
linear-gradient(180deg, oklch(0.985 0.012 295), oklch(0.97 0.015 320));
}
html.dark body[data-bg="calm"] {
background-image:
radial-gradient(ellipse 70% 55% at 10% 8%, oklch(0.32 0.09 295 / 0.65), transparent 60%),
radial-gradient(ellipse 60% 50% at 90% 14%, oklch(0.30 0.09 340 / 0.60), transparent 55%),
radial-gradient(ellipse 70% 55% at 92% 90%, oklch(0.28 0.07 200 / 0.55), transparent 60%),
radial-gradient(ellipse 60% 50% at 8% 92%, oklch(0.30 0.06 145 / 0.50), transparent 55%),
linear-gradient(180deg, oklch(0.10 0.012 285), oklch(0.08 0.018 295));
}
body[data-bg="calm"] [data-slot="aurora-field"] { display: block; }
body[data-bg="calm"] .aurora-blob { opacity: 0.4; }
html.dark body[data-bg="calm"] .aurora-blob { opacity: 0.7; }
@keyframes prism-drift-a {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
33% { transform: translate3d(5%, -3%, 0) rotate(10deg) scale(1.07); }