refactor(ui): apply elevation system across todo, contacts, calendar, clock apps

Replace all hardcoded hex/rgba colors with CSS custom properties throughout
the todo web app and fix modal backgrounds in contacts, calendar, and clock.
Removes all redundant :global(.dark) overrides — CSS vars handle both modes.

- todo: TaskEditModal, SubtaskList, TagStrip, TagStripModal, SyncIndicator
- todo: FokusLayout, GridLayout, KanbanLayout, ViewColumn (drop targets, add-column cards)
- todo: ViewSelector, ViewColumnHeader, ViewEditorModal, TodoToolbarContent
- todo: QuickAddTask, TagSelector, KanbanTaskCard, +layout (FAB)
- todo: DurationPicker, StorypointsSelector, FunRatingPicker, PrioritySelector
- contacts: NewContactModal background + remove Schnelleingabe quick input
- calendar: EventDetailModal, VoiceRecordingModal backgrounds
- clock: AuthGateModal background

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-31 19:00:24 +02:00
parent e3355191d5
commit 838b4c13de
25 changed files with 245 additions and 755 deletions

View file

@ -470,9 +470,10 @@
}
.modal-container {
background: hsl(var(--color-surface));
background: var(--color-surface-elevated-2);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
width: 100%;
max-width: 500px;
max-height: 90vh;

View file

@ -146,11 +146,11 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 201;
background: hsl(var(--color-surface));
background: var(--color-surface-elevated-2);
border-radius: 1.5rem;
box-shadow:
0 25px 50px -12px rgba(0, 0, 0, 0.25),
0 0 0 1px hsl(var(--color-border));
0 25px 50px -12px rgba(0, 0, 0, 0.5),
0 0 0 1px var(--color-border-strong);
padding: 2rem;
min-width: 280px;
max-width: 90vw;