Liquid Glass Design Redesign
Full redesign of the oikos UI with a Liquid Glass aesthetic layer, accessibility improvements, and spring-based motion.
Added
public/styles/glass.css- New additive CSS layer (~430 lines): translucent surfaces,backdrop-filterblur, capsule shapes, specular highlights, spring animations. All blur effects gated behind@supports (backdrop-filter: blur(1px)).- Glass token system - Section 16 in
tokens.css: ~50 new custom properties (--glass-bg*,--blur-xs/sm/md/lg/xl,--radius-glass-button,--ease-glass, etc.) with full dark mode overrides. - Nav auto-hide - Bottom bar hides on scroll-down, reappears on scroll-up (mobile only, 4 px hysteresis).
- Spring animations - Modal entrance, page transitions, and list stagger all use
cubic-bezier(0.34, 1.56, 0.64, 1)spring easing. - Accessibility guards -
prefers-reduced-transparency,prefers-reduced-motion,prefers-contrast: moredeactivate glass effects with solid fallbacks.
Changed
- Buttons, FAB, and search inputs use capsule shape (
--radius-glass-button) - Bottom nav and sidebar have glass blur surface with specular highlight
- Modal uses spring entrance and glass overlay
- FAB has specular inner highlight and attention ring pulse
- Skeleton shimmer upgraded to glass highlight colors
- PWA viewport
maximum-scaleraised from1to5(WCAG 1.4.4)
Fixed
--color-text-tertiarycorrected to#6B6B68(WCAG AA)--color-infocorrected to#0969DA(WCAG AA on white)- Modal overlay has
aria-label+role="presentation"for screen readers - Stale token references in settings.css, notes.css, dashboard.css, meals.css