frontend/src/styles/variables/shadows.scss

22 lines
1006 B
SCSS

:root {
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
0 1px 2px hsla(var(--grey-500-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
0 2px 4px hsla(var(--grey-500-hsl), .10);
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
@media (prefers-color-scheme: dark) {
/* Even darker shadows for dark mode */
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
0 1px 2px hsla(var(--grey-100-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
0 2px 4px hsla(var(--grey-100-hsl), .10);
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
0 3px 6px hsla(var(--grey-100-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
0 5px 10px hsla(var(--grey-100-hsl), .05);
}
}