Page MenuHomePhabricator

Prepare iOS Asset & Design System Infrastructure for Liquid Glass Adoption
Open, LowPublic8 Estimated Story Points

Description

Description

This task focuses on engineering groundwork required to support adoption of Apple’s Liquid Glass design language in the Wikipedia iOS app. The work here is intentionally design-agnostic and prepares the codebase, asset pipeline, and system abstractions so Liquid Glass updates can be integrated incrementally once designs are finalized.

Scope intentionally excludes visual decisions, final asset values, and design validation at this stage. Design input will be included Feb 2.

User Story

As an iOS engineer, I want a flexible, well-documented asset and design system pipeline that supports Liquid Glass materials, translucency, motion, and OS-based fallbacks, so that new designs can be integrated incrementally without large refactors or regressions across supported iOS versions.

As a Wikipedia reader using the iOS app, I experience a more modern, platform-native interface that adapts gracefully to my device, OS version, and accessibility settings.

Must Haves

Design system infrastructure
  • Establish or extend a centralized design system layer to support:
    • Semantic color roles
    • Typography tokens
    • Motion tokens (durations, curves)
  • Ensure tokens can be resolved dynamically based on:
    • OS version
    • Accessibility settings (Dark Mode, Increase Contrast, Reduce Transparency, Reduce Motion)
OS version gating & fallbacks
  • Implement availability-based abstractions (e.g., ''if #available'') for:
    • Materials / blur styles
    • Translucency behaviors
  • Define clear fallback paths for older OS versions (values may be placeholders until you receive design file).
Asset pipeline readiness
  • Define and document:
    • Asset catalog structure and naming conventions
    • Strategy for template (tintable) vs. non-template assets
    • Support for Light/Dark and accessibility variants
  • Audit existing assets to identify:
    • Candidates for templating
    • Assets requiring multiple appearance variants
Material & blur plumbing
  • Create reusable wrappers or helpers for:
    • System materials (UIKit / SwiftUI)
    • Visual effect views or material backgrounds
  • Ensure reuse and performance safety (avoid per-cell instantiation in scroll-heavy views).
Motion & interaction foundations
  • Centralize animation timing and curves into reusable tokens
  • Wire Reduce Motion fallbacks into the animation layer

Nice to Haves

  • Initial performance profiling for blur-heavy or translucent surfaces in scrollable contexts
  • Snapshot or visual regression testing scaffolding for:
    • Light / Dark Mode
    • Dynamic Type sizes
    • Reduce Transparency / Increase Contrast

F[] eature flags or build-time switches to support incremental rollout

Out of Scope for this task

  • Final visual styling (colors, typography, motion values)
  • Design validation or “on-style” reviews
  • Feature-specific UI redesigns

Deliverables

  • Engineering documentation describing:
    • Design system abstractions
    • Asset pipeline conventions
    • OS gating and fallback strategy
  • Code scaffolding that enables Liquid Glass integration without major refactors
  • Identified risks or technical constraints to share with Design and Product

Due by Feb 2

Event Timeline

Mazevedo set the point value for this task to 8.Jan 6 2026, 6:27 PM

Moving this task along the board.

  • Engineering documentation describing:
  • Design system abstractions:

Not needed. Our current reusable components made in SwiftUI and UIKit in WMFComponents already leverage the native components in a way that adapts to Liquid Glass correctly.

  • Asset pipeline conventions.

Icons: not needed. Illustrations: by design's discretion.

  • OS gating and fallback strategy

Will be needed in some places, but the system has a handy way to check for OS versions.

  • Code scaffolding that enables Liquid Glass integration without major refactors.

Not possible in large scale. All OS changes rely on adopting native components. Unfortunately, custom components will have to go through a refactor, not to adapt to the Glass material if needed (which is a simple change), but to adapt to Liquid Glass design language.

  • Identified risks or technical constraints to share with Design and Product:

Our risk is time. We'll need to understand what will be more important in this update and prioritize. Also, work in a very intense collaboration between design and engineering to make the Design feedback more organic.
Good news is that we can have several features being worked on at the same time, independently by more than one engineer (or the same engineer, not blocking code or design review).
Another good news in not working on Explore feed and the Loging/Create account flows, which have their focused work coming.

I've been focusing on tech debt that will allow us to work faster: I already have a new reusable list component for settings I had worked on in a tech debt window.
When I'm back, I'll probably need a day to complete.
Those are the tasks being worked on simultaneously:

Moving to blocked or waiting, as I'm not sure where to leave it.

Seddon lowered the priority of this task from High to Low.Tue, Jan 27, 6:28 PM