feat(colors): enhance light and dark mode color schemes with new glow accents and shadow tokens
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user