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

This commit is contained in:
2026-04-22 10:06:35 -04:00
parent 6440a24390
commit 9c0a1e4157
2 changed files with 182 additions and 0 deletions

View File

@@ -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>