Liquid Glass Phase 4: Vibrancy, Module Tint & Deeper Glass Penetration
This release extends the Liquid Glass design system with three major visual improvements:
Deeper Glass Penetration
Dashboard widgets, task cards, note items, meal slots, form inputs, page toolbars, group toggles, and FAB speed-dial actions now use semi-transparent glass backgrounds with backdrop-filter: blur() saturate(). Content beneath glass surfaces shines through for a more dynamic, layered appearance.
Module Color Tint
Every glass surface receives a subtle accent color gradient overlay from its parent module. Dashboard cards carry a hint of their module's color (green for tasks, orange for meals, violet for calendar, etc.). The tint strength is configurable via --glass-tint-strength (6% light, 8% dark).
Background Vibrancy
The app content area uses a radial gradient with the active module's accent color at 3% opacity, providing an ambient color base that glass elements refract.
New Design Tokens
--glass-bg-card(52% opacity) - transparent card backgrounds--glass-bg-card-hover,--glass-bg-input,--glass-bg-toolbar--glass-tint-strength- module accent tint intensity- Full dark mode and accessibility overrides for all new tokens
Accessibility
All effects are progressive enhancement (@supports backdrop-filter) and respect prefers-reduced-transparency and prefers-reduced-motion.
Full Changelog: v0.17.4...v0.18.0