-
Notifications
You must be signed in to change notification settings - Fork 23
Open
Labels
Description
Adopt Apple’s new Liquid Glass visual language on iOS 26 to modernize Session’s look & feel while preserving performance and accessibility. Scope is visual-only (no auth/security changes). Use Apple’s updated design guidance and APIs introduced at WWDC25 for materials, controls, and transitions. ([Apple]1)
Scope
- Components: Navigation bar, tab bar, headers/toolbars, cards, sheets/modals, toasts, context panels.
- Tech: SwiftUI-first adoption of Liquid Glass materials & updated controls; UIKit wrappers where needed. Legacy fallback (< iOS 26) uses existing opaque/translucent styles (e.g.,
UIVisualEffectView
blur/vibrancy). ([The Verge]2) - Out of scope: Session isolation, encryption, snapshot redaction, auth flows.
Goals
- Consistent Liquid Glass visuals across targeted surfaces on iOS 26.
- 60/120 fps fluidity on supported devices; graceful degradation on lower tiers.
- Full Dark/Light support and Accessibility (Reduce Motion/Transparency; contrast).
Non-Goals
- New navigation patterns, server/API changes, or platform backports below iOS 26.
Design Tokens (proposed)
- Blur:
lg.blur.{xs,s,m,l}
(≈6/12/20/28). - Saturation:
lg.sat.{low,med,high}
(≈1.0/1.3/1.6). - Tint/Opacity:
lg.tint.{light,dark}
with adaptive alpha by backdrop luminance. - Stroke:
lg.stroke.hairline
(1 px) with dynamic alpha; optional inner highlight. - Radius/Elevation:
radius.2xl
default; elevation map per component. - Preset:
lg.preset.{full,lite,opaque}
(feature-flaggable).
Implementation (high-level)
-
Capability gating & flags
- Enable on iOS 26 via remote flag with kill-switch and “preset” override (
full|lite|opaque
).
- Enable on iOS 26 via remote flag with kill-switch and “preset” override (
-
Foundation
- Create
LiquidGlassView
wrapper (SwiftUI) composing blur + saturation + tint + stroke; expose presets. - Provide UIKit adapter for screens not yet SwiftUI.
- Create
-
Apply to components
- Nav/Tab bars → Liquid Glass materials & updated controls; responsive shrink/expand on scroll where appropriate.
- Cards/Sheets/Toasts → Liquid Glass presets with careful overdraw limits.
-
Accessibility
- Respect Reduce Transparency/Motion; auto-switch to
opaque
or toned-down animations. - Enforce WCAG AA contrast with dynamic foreground on complex backdrops. ([Nielsen Norman Group]5)
- Respect Reduce Transparency/Motion; auto-switch to
-
Performance guardrails
- Target P95 resume/transition smoothness; cap additional peak memory during transitions.
Performance Budgets
- FPS: Sustain 60/120 fps on Tier A devices during transitions/scroll.
- CPU (avg fg): ≤ +3% vs baseline on targeted screens.
- Peak memory: ≤ +20 MB during modal/sheet animations.
Testing Plan
- Visual regression: snapshots per component in Light/Dark + Increased Contrast.
- UI tests: bar transitions (shrink/expand), sheet presentations, theme switches.
- Perf: automated scroll benchmarks for long lists with glass cards; capture FPS/memory deltas.
- A11y manual: VoiceOver focus, Reduce Motion/Transparency toggles, readability over varied wallpapers.
Rollout
- Phase 1 (dogfood): NavBar + TabBar with
full
preset; metrics on FPS/memory. - Phase 2 (beta): Cards + Sheets; tune
lite
preset for mid-tier devices. - Phase 3 (GA): Toasts/overlays; finalize tokens & documentation.
Telemetry (optional)
ui.liquid_glass.enabled
ui.liquid_glass.preset (full|lite|opaque)
ui.fps.transition.avg/min
ui.mem.delta_mb.peak
Acceptance Criteria
- Nav/Tab bars, Cards, Sheets, Toasts use Liquid Glass presets on iOS 26 with FPS within budget.
- Dark/Light and contrast meet guidelines; Reduce Transparency/Motion respected.
- Fallbacks render correctly on < iOS 26 with no regressions.
- Visual QA sign-off on key screens (home, chat, settings).
References: Apple WWDC25 announcement & APIs for Liquid Glass (design & adoption guidance; updated controls/materials), plus accessibility best practices for glassmorphism. (Apple, [The Verge]2, [YouTube]4, [Nielsen Norman Group]5)
How I got there (step-by-step)
- Primary source: Confirmé en Apple Newsroom que “Liquid Glass” es material/lenguaje oficial, con descripción, plataformas y que hay APIs actualizadas para desarrolladores. ([Apple]1)
- Secondary coverage: Verifiqué en The Verge/TechCrunch el alcance, superficies afectadas y el carácter de mayor rediseño desde iOS 7. ([The Verge]2, [TechCrunch]3)
- Guidance for builders: Usé las sesiones/vídeos WWDC (“Meet Liquid Glass”) como soporte de implementación. ([YouTube]4)
- Best practices: Contrasté con Nielsen Norman Group para accesibilidad/contraste en interfaces translúcidas (glassmorphism). ([Nielsen Norman Group]5)
- UIKit fallback: Mantengo
UIVisualEffectView
para capas legacy. ([The Verge]2)
Alternatives you might consider
- Progressive adoption: Start with Nav/Tab bars only, then cards/sheets after perf tuning.
- Device tiering: Auto-switch
lite
preset on thermally constrained or older A-series devices. - Theme switch: Offer brand “opaque” theme for teams/markets que prefieran máximo contraste.
Practical action plan (apply now)
- Create
lg.*
design tokens +LiquidGlassView
wrapper (SwiftUI) and UIKit adapter. - Implement NavBar/TabBar with
full
preset; instrument FPS/memory. - Roll to Cards/Sheets, refine presets, run a11y audits; lock Acceptance Criteria.
- Launch phase rollout behind remote flag & kill-switch; document usage in the design system.
- [The Verge](https://www.theverge.com/news/682636/apple-liquid-glass-design-theme-wwdc-2025?utm_source=chatgpt.com)
- [The Verge](https://www.theverge.com/news/682636/apple-liquid-design-glass-theme-wwdc-2025?utm_source=chatgpt.com)
- [Laptop Mag](https://www.laptopmag.com/phones/live/wwdc-2025-live-updates?utm_source=chatgpt.com)
- [Indiatimes](https://indiatimes.com/technology/news/what-is-liquid-glass-a-new-material-launched-in-wwdc-2025-how-will-it-impact-on-ios-26-ipados-macos-660857.html?utm_source=chatgpt.com)
- [New York Post](https://nypost.com/2025/06/10/tech/apple-fans-rip-ios-26-liquid-glass-update/?utm_source=chatgpt.com)