Skip to content

v0.18.0 - Liquid Glass Phase 4: Vibrancy & Tint

Choose a tag to compare

View all tags
@ulsklyc ulsklyc released this 14 Apr 05:36
· 1246 commits to main since this release
v0.18.0
6f532e4

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

Assets 2
Loading