feat(colors): enhance light and dark mode color schemes with new glow accents and shadow tokens

2026-04-22 10:06:35 -04:00
parent 6440a24390
commit 9c0a1e4157
2 changed files with 182 additions and 0 deletions
--- a/themes/lucentui/css/app.css
+++ b/themes/lucentui/css/app.css
@@ -166,6 +166,154 @@ html {
  box-shadow: var(--shadow-glow-secondary-sm);
 }

+/* =============================================================================
+   GLASS PANEL — a lighter-weight variant than .card-glass for inline panels,
+   modals, dropdowns, and popovers. Uses the semantic --color-glass tokens
+   so light/dark modes render correctly.
+   ============================================================================= */
+@utility glass-panel {
+  background-color: hsl(var(--color-glass));
+  backdrop-filter: blur(14px) saturate(140%);
+  -webkit-backdrop-filter: blur(14px) saturate(140%);
+  border: 1px solid hsl(var(--color-glass-border));
+  border-radius: 0.875rem;
+}
+
+@utility glass-panel-hover {
+  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
+}
+.glass-panel-hover:hover {
+  border-color: hsl(var(--color-primary) / 0.5);
+  box-shadow: var(--shadow-glow-primary-sm);
+}
+
+/* =============================================================================
+   NEON BORDER — conic-gradient animated border for showcase/cta elements.
+   Wrap target content; relies on @property for smooth animation.
+   ============================================================================= */
+@property --neon-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@utility neon-border {
+  position: relative;
+  isolation: isolate;
+}
+.neon-border::before {
+  content: '';
+  position: absolute;
+  inset: -1px;
+  border-radius: inherit;
+  padding: 1px;
+  background: conic-gradient(from var(--neon-angle),
+    hsl(var(--color-primary) / 0.7),
+    hsl(var(--color-secondary) / 0.7),
+    hsl(var(--color-primary) / 0.7));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  animation: neon-spin 6s linear infinite;
+  pointer-events: none;
+  z-index: -1;
+}
+@keyframes neon-spin {
+  to { --neon-angle: 360deg; }
+}
+
+/* =============================================================================
+   GRID BG — subtle SVG grid with radial mask for depth on layout backgrounds.
+   ============================================================================= */
+@utility grid-bg {
+  background-image:
+    linear-gradient(to right, hsl(var(--color-neutral) / 0.12) 1px, transparent 1px),
+    linear-gradient(to bottom, hsl(var(--color-neutral) / 0.12) 1px, transparent 1px);
+  background-size: 48px 48px;
+  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
+          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 80%);
+}
+
+/* =============================================================================
+   NOISE OVERLAY — ~2% opacity grainy texture (data URI SVG feTurbulence).
+   Add to a ::before or dedicated layer for film-grain effect.
+   ============================================================================= */
+@utility noise-overlay {
+  position: relative;
+}
+.noise-overlay::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  opacity: 0.035;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.9'/></svg>");
+  z-index: 0;
+}
+
+/* =============================================================================
+   TEXT GRADIENT — primary → secondary clip fill for display headings.
+   ============================================================================= */
+@utility text-gradient-primary {
+  background-image: linear-gradient(90deg, hsl(var(--color-primary)), hsl(var(--color-secondary)));
+  -webkit-background-clip: text;
+          background-clip: text;
+  color: transparent;
+  -webkit-text-fill-color: transparent;
+}
+
+/* =============================================================================
+   DISPLAY SCALE — hero/marketing headline sizes.
+   ============================================================================= */
+@utility display-xl {
+  font-size: clamp(2.5rem, 6vw, 4.5rem);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: -0.035em;
+}
+@utility display-lg {
+  font-size: clamp(2rem, 4.5vw, 3.25rem);
+  line-height: 1.1;
+  font-weight: 700;
+  letter-spacing: -0.03em;
+}
+
+/* =============================================================================
+   TABULAR NUMS — for currency, counters, live metrics.
+   ============================================================================= */
+@utility tnum {
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum" 1;
+}
+
+/* =============================================================================
+   ELEVATION TOKENS — token-driven shadows preferred over raw rgba utilities.
+   ============================================================================= */
+@utility shadow-elevated {
+  box-shadow: var(--shadow-elevated);
+}
+@utility shadow-floating {
+  box-shadow: var(--shadow-floating);
+}
+
+/* =============================================================================
+   REDUCED MOTION — disable non-essential animations for accessibility.
+   ============================================================================= */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+  .neon-border::before {
+    animation: none !important;
+  }
+}
+
 /* Line clamp utilities - removed excessive containment */
 .line-clamp-2 {
    display: -webkit-box;
--- a/themes/lucentui/views/layouts/colors.blade.php
+++ b/themes/lucentui/views/layouts/colors.blade.php
@@ -27,6 +27,23 @@
        /* Background Colors (Light) — cooler, higher contrast */
        --color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background', '220 20% 97%'))) }};
        --color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('background-secondary', '0 0% 100%'))) }};
+        --color-background-tertiary: 220 16% 93%;
+
+        /* Glass-morphism tokens (Light) */
+        --color-glass: 0 0% 100% / 0.6;
+        --color-glass-border: 220 13% 88% / 0.6;
+
+        /* Neon glow accents (Light) */
+        --color-primary-glow: 265 85% 55% / 0.35;
+        --color-secondary-glow: 190 85% 42% / 0.35;
+
+        /* Text hierarchy (Light) */
+        --color-base-muted: 240 6% 35%;
+        --color-base-subtle: 240 5% 55%;
+
+        /* Elevation shadow tokens (Light) */
+        --shadow-elevated: 0 4px 16px -2px hsl(240 20% 20% / 0.08), 0 2px 4px -1px hsl(240 20% 20% / 0.04);
+        --shadow-floating: 0 12px 40px -8px hsl(240 20% 20% / 0.18), 0 4px 12px -2px hsl(240 20% 20% / 0.06);
    }

    .dark {
@@ -52,5 +69,22 @@
        /* Background Colors (Dark) — near-black OLED surfaces */
        --color-background: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background', '0 0% 4%'))) }};
        --color-background-secondary: {{ str_replace(',', '', preg_replace('/^hsl\((.+)\)$/', '$1', theme('dark-background-secondary', '240 6% 8%'))) }};
+        --color-background-tertiary: 240 7% 12%;
+
+        /* Glass-morphism tokens (Dark) */
+        --color-glass: 240 6% 10% / 0.55;
+        --color-glass-border: 240 5% 25% / 0.5;
+
+        /* Neon glow accents (Dark) */
+        --color-primary-glow: 265 90% 66% / 0.45;
+        --color-secondary-glow: 190 95% 55% / 0.45;
+
+        /* Text hierarchy (Dark) */
+        --color-base-muted: 240 5% 75%;
+        --color-base-subtle: 240 5% 55%;
+
+        /* Elevation shadow tokens (Dark) — neon-tinted */
+        --shadow-elevated: 0 4px 16px -2px hsl(0 0% 0% / 0.6), 0 0 0 1px hsl(240 5% 25% / 0.3);
+        --shadow-floating: 0 12px 40px -8px hsl(0 0% 0% / 0.7), 0 0 32px -8px hsl(265 90% 66% / 0.15), 0 0 0 1px hsl(240 5% 25% / 0.4);
    }
 </style>