feat(ui): add elevation system for overlays and modals

- Add 3-level elevation CSS variables to themes.css for all theme variants
- elevation-1: dropdowns, pills (16% in dark mode)
- elevation-2: modals, overlays (20% in dark mode)
- elevation-3: context menus, tooltips (24% in dark mode)
- Update ContextMenu to use elevation-3
- Update Modal to use elevation-2 with theme-aware borders
- Update QuickEventOverlay to use elevation-2 with matching footer
- Update PillTimeRangeSelector dropdown to use elevation-1
- Update ConfirmationModal and FormModal to use theme variables
- Remove shadows from overlay components for cleaner look

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Till-JS 2025-12-13 15:00:33 +01:00
parent 8eb295d491
commit bd89871f8b
7 changed files with 104 additions and 27 deletions

View file

@ -389,13 +389,10 @@
}
.glass-dropdown {
background: hsl(var(--color-surface) / 0.95);
background: color-mix(in srgb, var(--color-surface-elevated-1) 95%, transparent);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid hsl(var(--color-border));
box-shadow:
0 20px 25px -5px hsl(var(--color-foreground) / 0.1),
0 10px 10px -5px hsl(var(--color-foreground) / 0.04);
}
.dropdown-header {