From 37c7ed3e9682e0299688d3ef7f1ade127b4e5b40 Mon Sep 17 00:00:00 2001 From: jules Date: Thu, 11 Jun 2026 22:41:39 +1000 Subject: [PATCH] Derive primary-button gradient from --primary; narrow calm bg to violet family MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Two color-coherence fixes driven by me.sky-ai.com's UI review: - The premium button gradient was a fixed 290→350 sweep that ended in hot pink, so CTAs read magenta against violet nav/links — and ignored the data-palette accents entirely. It now derives from var(--primary) with a subtle ±12° hue sweep (relative color syntax; degrades to the solid primary fill on older browsers). Dark mode needs no override — it follows dark's --primary. Affects all Prism consumers. - The calm background variant (consumer surfaces) narrows from the full rainbow (violet/pink/cyan/mint corners) to an analogous violet family (periwinkle 245 → lavender 280 → violet 295 → pink 330), light + dark, including calm-specific aurora drift blobs. The cyan/green corners sat opposite the violet brand and made pages read as four brands at once. Full-strength drift is untouched. Co-Authored-By: Claude Fable 5 --- theme.css | 74 ++++++++++++++++++++++++++++++++++++------------------- 1 file changed, 48 insertions(+), 26 deletions(-) diff --git a/theme.css b/theme.css index 49cf7c2..8349ea1 100644 --- a/theme.css +++ b/theme.css @@ -500,34 +500,59 @@ } /* - * ── 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. + * ── Calm variant ── opt-in via body[data-bg="calm"]. Quieter AND + * narrower than drift: corner gradients drop to ~45% alpha, the + * drift layer dims to match, and the hue story tightens from the + * full rainbow (violet/pink/cyan/mint) to an analogous violet + * family (periwinkle 245 → lavender 280 → violet 295 → pink 330). + * The cyan/green corners sat opposite the violet brand on the hue + * wheel and made consumer pages read as four different brands at + * once. 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. */ 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)); + radial-gradient(ellipse 70% 60% at 88% 14%, oklch(0.93 0.09 330 / 0.30), transparent 55%), + radial-gradient(ellipse 80% 60% at 92% 88%, oklch(0.93 0.08 245 / 0.30), transparent 60%), + radial-gradient(ellipse 70% 60% at 8% 92%, oklch(0.94 0.07 280 / 0.28), transparent 55%), + linear-gradient(180deg, oklch(0.985 0.012 295), oklch(0.97 0.015 310)); } 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%), + radial-gradient(ellipse 60% 50% at 90% 14%, oklch(0.30 0.08 330 / 0.60), transparent 55%), + radial-gradient(ellipse 70% 55% at 92% 90%, oklch(0.28 0.06 245 / 0.55), transparent 60%), + radial-gradient(ellipse 60% 50% at 8% 92%, oklch(0.30 0.05 280 / 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; } + /* Calm drift blobs ride the same narrowed violet-family hues. */ + body[data-bg="calm"] .aurora-blob-1 { + background-image: + radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.9 0.11 295 / 0.85), transparent 60%), + radial-gradient(ellipse 38% 32% at 78% 22%, oklch(0.9 0.1 330 / 0.8), transparent 55%); + } + body[data-bg="calm"] .aurora-blob-2 { + background-image: + radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.9 0.1 245 / 0.8), transparent 60%), + radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.92 0.08 280 / 0.75), transparent 55%); + } + html.dark body[data-bg="calm"] .aurora-blob-1 { + background-image: + radial-gradient(ellipse 44% 36% at 22% 28%, oklch(0.32 0.09 295 / 0.55), transparent 60%), + radial-gradient(ellipse 38% 32% at 78% 22%, oklch(0.30 0.08 330 / 0.50), transparent 55%); + } + html.dark body[data-bg="calm"] .aurora-blob-2 { + background-image: + radial-gradient(ellipse 48% 38% at 82% 74%, oklch(0.28 0.06 245 / 0.50), transparent 60%), + radial-gradient(ellipse 42% 34% at 16% 80%, oklch(0.30 0.05 280 / 0.45), transparent 55%); + } + @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); } @@ -590,14 +615,18 @@ } /* - * Premium primary button — violet→fuchsia gradient + top-edge sheen. + * Premium primary button — gradient derived from --primary (subtle + * ±12° hue sweep) + top-edge sheen. Deriving rather than hardcoding + * keeps buttons on-brand with whatever --primary resolves to: the + * old fixed 290→350 sweep ended in hot pink, so CTAs read magenta + * against violet nav/links — and ignored the data-palette accents. */ [data-slot="button"].bg-primary { background-image: linear-gradient( 135deg, - oklch(0.56 0.24 290) 0%, - oklch(0.6 0.26 320) 50%, - oklch(0.58 0.24 350) 100% + oklch(from var(--primary) calc(l + 0.04) c calc(h - 12)) 0%, + var(--primary) 50%, + oklch(from var(--primary) calc(l - 0.02) c calc(h + 14)) 100% ); position: relative; isolation: isolate; @@ -616,14 +645,7 @@ ); mix-blend-mode: plus-lighter; } - .dark [data-slot="button"].bg-primary { - background-image: linear-gradient( - 135deg, - oklch(0.66 0.22 290) 0%, - oklch(0.7 0.24 320) 50%, - oklch(0.66 0.22 350) 100% - ); - } + /* Dark needs no gradient override — it derives from dark --primary. */ .dark [data-slot="button"].bg-primary::after { background: linear-gradient( 180deg,