feat(design): violet accent + pastel neon glow for light mode

This commit is contained in:
opencode
2026-08-06 23:57:06 +02:00
parent 4d149fd927
commit f296070f3b
+50 -7
View File
@@ -99,7 +99,7 @@
--popover-foreground: 222 47% 11%;
--popover-border: 214 32% 91%;
--primary: 14 100% 57%; /* Sharp Builder Orange */
--primary: 262 83% 58%; /* Violet accent */
--primary-foreground: 0 0% 100%;
--secondary: 210 40% 96%;
@@ -115,17 +115,17 @@
--destructive-foreground: 0 0% 100%;
--input: 214 32% 91%;
--ring: 14 100% 57%;
--ring: 262 83% 58%;
--chart-1: 14 100% 57%;
--chart-1: 262 83% 58%;
--chart-2: 222 47% 11%;
--chart-3: 187 100% 42%;
--chart-3: 264 80% 70%;
--chart-4: 43 100% 50%;
--chart-5: 280 80% 50%;
--glow-1: 187 100% 50%; /* cyan */
--glow-2: 265 100% 68%; /* violet */
--glow-3: 14 100% 57%; /* orange (primary) */
--glow-1: 262 88% 62%; /* violet (accent) */
--glow-2: 285 92% 72%; /* magenta/violet */
--glow-3: 214 92% 62%; /* lavender-blue */
--app-font-sans: 'Inter', sans-serif;
--app-font-serif: Georgia, serif;
@@ -227,6 +227,10 @@
--chart-4: 43 100% 50%;
--chart-5: 280 80% 50%;
--glow-1: 187 100% 50%; /* cyan */
--glow-2: 265 100% 68%; /* violet */
--glow-3: 14 100% 57%; /* orange (primary) */
--shadow-2xs: 0px 1px 2px 0px rgba(0,0,0,0.5);
--shadow-xs: 0px 1px 3px 0px rgba(0,0,0,0.5);
--shadow-sm: 0px 2px 4px 0px rgba(0,0,0,0.5), 0px 1px 2px -1px rgba(0,0,0,0.5);
@@ -497,3 +501,42 @@
.neon-spin { animation: none; }
}
}
/* ------------------------------------------------------------------ */
/* LIGHT MODE — violet neon tuning
* Binds glow highlights so they read clearly on white/light surfaces
* instead of washing out to grey. Scoped to light only; dark untouched.
* ------------------------------------------------------------------ */
:root:not(.dark) .neon-glow {
box-shadow:
0 0 0 1px hsl(var(--glow-1) / 0.5),
0 0 22px -3px hsl(var(--glow-1) / 0.55),
0 0 52px -10px hsl(var(--glow-2) / 0.4);
}
:root:not(.dark) .neon-glow-primary {
box-shadow:
0 0 0 1px hsl(var(--primary) / 0.55),
0 0 20px -2px hsl(var(--primary) / 0.5),
0 0 44px -10px hsl(var(--primary) / 0.4);
}
:root:not(.dark) .neon-bar {
box-shadow:
0 0 10px 0 hsl(var(--glow-1) / 0.55),
0 0 22px -2px hsl(var(--glow-2) / 0.5);
}
/* Pastel ambient wash behind the light page */
:root:not(.dark) body {
background-image:
radial-gradient(1200px 800px at 8% -6%, hsl(var(--glow-1) / 0.09), transparent 60%),
radial-gradient(1100px 700px at 100% 0%, hsl(var(--glow-2) / 0.08), transparent 55%),
radial-gradient(1000px 800px at 50% 110%, hsl(var(--glow-3) / 0.06), transparent 60%);
background-attachment: fixed;
}
/* Cards get a subtle violet-tinted border for more surface depth */
:root:not(.dark) .bg-card {
border-color: hsl(var(--glow-1) / 0.18);
}