feat: Phase 2 - Glass Modul-Komponenten

glass.css - Phase 2 Ergänzungen:

Form-Inputs:
- Glass-Border (--glass-border-subtle) + verbesserter Focus-Ring
  mit color-mix-basiertem Glow statt einfacher box-shadow
- Modal-Inputs: explizit --color-surface-2 als Hintergrund

Sticky Headers:
- backdrop-filter auf --blur-sm + saturate(160%) mit Glass-Tokens
- Hintergrund 80% opak statt 90% für mehr sichtbaren Blur-Effekt
- Glass-Border unten

Toasts:
- --radius-glass-card (20px) statt --radius-sm
- Standard-Toast: Dark-Glass mit backdrop-filter
- Farbige Toasts: specular inset-highlight

Filter-Chips:
- Inaktiv: --glass-border-subtle
- Aktiv: Glass backdrop-filter + Accent-Tint + specular highlight

Priority Badges:
- Capsule-Radius (--radius-glass-chip)
- 1px semi-transparente Farb-Border

Toggle Switch:
- Specular Highlight + Gegenlicht auf Thumb via inset box-shadow
- Animation verwendet --transition-glass Easing

Dashboard Widgets:
- Glass-Border + --glass-shadow-sm
- Specular ::before Highlight-Linie oben

FAB-Backdrop (Dashboard):
- blur(4px) + 18% Dimming statt 25%

contacts.css, notes.css, shopping.css:
- Search-Inputs direkt auf Glass-Tokens migriert
  (--radius-glass-button, --glass-border-subtle, Glass-Focus-Ring)
This commit is contained in:
Ulas
2026-04-13 17:05:19 +02:00
parent b63418b475
commit d27216203f
4 changed files with 234 additions and 11 deletions
+4 -3
View File
@@ -58,12 +58,12 @@
.contacts-toolbar__search-input {
width: 100%;
padding: var(--space-2) var(--space-3) var(--space-2) 36px;
border-radius: var(--radius-sm);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-glass-button);
border: 1.5px solid var(--glass-border-subtle);
background-color: var(--color-surface-2);
color: var(--color-text-primary);
font-size: var(--text-md);
transition: border-color var(--transition-fast);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
min-height: 36px;
}
@@ -71,6 +71,7 @@
outline: none;
border-color: var(--color-accent);
background-color: var(--color-surface);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}
@media (min-width: 1024px) {