till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 20:01:09 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

40
packages/shared-tailwind/src/themes.css
View file

@ -33,6 +33,11 @@
--color-surface: var(--theme-surface);
--color-surface-hover: var(--theme-surface-hover);
--color-surface-elevated: var(--theme-surface-elevated);
/* Elevation system - progressively lighter surfaces for overlays */
--color-surface-elevated-1: var(--theme-surface-elevated-1);
--color-surface-elevated-2: var(--theme-surface-elevated-2);
--color-surface-elevated-3: var(--theme-surface-elevated-3);
--color-muted: var(--theme-muted);
--color-muted-foreground: var(--theme-muted-foreground);
--color-border: var(--theme-border);
@ -129,6 +134,10 @@
--theme-surface: hsl(0 0% 100%);
--theme-surface-hover: hsl(0 0% 96%);
--theme-surface-elevated: hsl(0 0% 100%);
/* Elevation system - progressively lighter surfaces for overlays */
--theme-surface-elevated-1: hsl(0 0% 100%);
--theme-surface-elevated-2: hsl(0 0% 100%);
--theme-surface-elevated-3: hsl(0 0% 100%);
--theme-muted: hsl(0 0% 90%);
--theme-muted-foreground: hsl(0 0% 40%);
--theme-border: hsl(0 0% 90%);
@ -192,6 +201,10 @@
--theme-surface: hsl(0 0% 12%);
--theme-surface-hover: hsl(0 0% 16%);
--theme-surface-elevated: hsl(0 0% 14%);
/* Elevation system - progressively lighter surfaces for overlays */
--theme-surface-elevated-1: hsl(0 0% 16%);
--theme-surface-elevated-2: hsl(0 0% 20%);
--theme-surface-elevated-3: hsl(0 0% 24%);
--theme-muted: hsl(0 0% 20%);
--theme-muted-foreground: hsl(0 0% 60%);
--theme-border: hsl(0 0% 26%);
@ -244,6 +257,9 @@
--theme-surface: hsl(0 0% 100%);
--theme-surface-hover: hsl(0 0% 96%);
--theme-surface-elevated: hsl(0 0% 100%);
--theme-surface-elevated-1: hsl(0 0% 100%);
--theme-surface-elevated-2: hsl(0 0% 100%);
--theme-surface-elevated-3: hsl(0 0% 100%);
--theme-muted: hsl(0 0% 90%);
--theme-muted-foreground: hsl(0 0% 40%);
--theme-border: hsl(0 0% 90%);
@ -275,6 +291,9 @@
--theme-surface: hsl(0 0% 12%);
--theme-surface-hover: hsl(0 0% 16%);
--theme-surface-elevated: hsl(0 0% 14%);
--theme-surface-elevated-1: hsl(0 0% 16%);
--theme-surface-elevated-2: hsl(0 0% 20%);
--theme-surface-elevated-3: hsl(0 0% 24%);
--theme-muted: hsl(0 0% 20%);
--theme-muted-foreground: hsl(0 0% 60%);
--theme-border: hsl(0 0% 26%);
@ -306,6 +325,9 @@
--theme-surface: hsl(0 0% 100%);
--theme-surface-hover: hsl(120 25% 95%);
--theme-surface-elevated: hsl(0 0% 100%);
--theme-surface-elevated-1: hsl(0 0% 100%);
--theme-surface-elevated-2: hsl(0 0% 100%);
--theme-surface-elevated-3: hsl(0 0% 100%);
--theme-muted: hsl(120 25% 95%);
--theme-muted-foreground: hsl(122 20% 40%);
--theme-border: hsl(120 25% 91%);
@ -337,6 +359,9 @@
--theme-surface: hsl(120 10% 12%);
--theme-surface-hover: hsl(120 10% 16%);
--theme-surface-elevated: hsl(120 10% 14%);
--theme-surface-elevated-1: hsl(120 10% 16%);
--theme-surface-elevated-2: hsl(120 10% 20%);
--theme-surface-elevated-3: hsl(120 10% 24%);
--theme-muted: hsl(120 10% 20%);
--theme-muted-foreground: hsl(120 10% 60%);
--theme-border: hsl(120 10% 25%);
@ -368,6 +393,9 @@
--theme-surface: hsl(0 0% 100%);
--theme-surface-hover: hsl(200 10% 94%);
--theme-surface-elevated: hsl(0 0% 100%);
--theme-surface-elevated-1: hsl(0 0% 100%);
--theme-surface-elevated-2: hsl(0 0% 100%);
--theme-surface-elevated-3: hsl(0 0% 100%);
--theme-muted: hsl(200 10% 94%);
--theme-muted-foreground: hsl(200 10% 45%);
--theme-border: hsl(200 10% 88%);
@ -399,6 +427,9 @@
--theme-surface: hsl(200 10% 12%);
--theme-surface-hover: hsl(200 10% 16%);
--theme-surface-elevated: hsl(200 10% 14%);
--theme-surface-elevated-1: hsl(200 10% 16%);
--theme-surface-elevated-2: hsl(200 10% 20%);
--theme-surface-elevated-3: hsl(200 10% 24%);
--theme-muted: hsl(200 10% 20%);
--theme-muted-foreground: hsl(200 10% 60%);
--theme-border: hsl(200 10% 25%);
@ -430,6 +461,9 @@
--theme-surface: hsl(0 0% 100%);
--theme-surface-hover: hsl(199 100% 94%);
--theme-surface-elevated: hsl(0 0% 100%);
--theme-surface-elevated-1: hsl(0 0% 100%);
--theme-surface-elevated-2: hsl(0 0% 100%);
--theme-surface-elevated-3: hsl(0 0% 100%);
--theme-muted: hsl(199 100% 94%);
--theme-muted-foreground: hsl(199 50% 40%);
--theme-border: hsl(199 71% 87%);
@ -461,6 +495,9 @@
--theme-surface: hsl(199 30% 12%);
--theme-surface-hover: hsl(199 30% 16%);
--theme-surface-elevated: hsl(199 30% 14%);
--theme-surface-elevated-1: hsl(199 30% 16%);
--theme-surface-elevated-2: hsl(199 30% 20%);
--theme-surface-elevated-3: hsl(199 30% 24%);
--theme-muted: hsl(199 20% 20%);
--theme-muted-foreground: hsl(199 20% 60%);
--theme-border: hsl(199 20% 25%);
@ -493,6 +530,9 @@
--theme-surface: hsl(0 0% 12%);
--theme-surface-hover: hsl(0 0% 16%);
--theme-surface-elevated: hsl(0 0% 14%);
--theme-surface-elevated-1: hsl(0 0% 16%);
--theme-surface-elevated-2: hsl(0 0% 20%);
--theme-surface-elevated-3: hsl(0 0% 24%);
--theme-muted: hsl(0 0% 20%);
--theme-muted-foreground: hsl(0 0% 60%);
--theme-border: hsl(0 0% 26%);