mirror of https://github.com/openclaw/openclaw.git synced 2026-07-05 13:43:33 +00:00

Files

Peter Steinberger 8502ef6c59 feat(ios): modernize the app with iOS 26 Liquid Glass (#98452 )

* feat(ios): adopt iOS 26 Liquid Glass design

* refactor(ios): refine Liquid Glass hierarchy

* docs(ios): require Xcode 26

* refactor(ios): remove obsolete design helpers

* fix(ios): keep agent tab navigation hidden

* fix(ios): compact chat composer at rest

* refactor(ios): reduce interface density

* fix(ios): keep native string inventory current

2026-07-01 19:06:04 +01:00

3.4 KiB

Raw Blame History

iOS design system

OpenClaw follows the native iOS 26 design language while keeping an iOS 18 deployment target. Use SwiftUI system structure first, Liquid Glass for interactive chrome, and quiet opaque surfaces for content.

Principles

Prefer NavigationStack, TabView, List, Form, toolbars, sheets, and system controls. They adopt the current platform appearance automatically.
Reserve Liquid Glass for navigation and interactive controls. Do not apply glass to every card, row, or status surface.
Keep content hierarchy clear with typography, spacing, and grouping before adding backgrounds.
Use semantic colors. Red means destructive or stopped; orange means attention; green means healthy. Neutral actions use the app accent.
Preserve Dynamic Type, VoiceOver labels, Reduce Motion, increased contrast, and 44-point touch targets.
Use continuous corners and concentric geometry. Nested controls should visually follow their container shape.

Apple references: Adopting Liquid Glass, Applying Liquid Glass to custom views, and Build a SwiftUI app with the new design.

Tokens

OpenClawProMetric in Sources/Design/OpenClawProComponents.swift is the source of truth for shared geometry:

pagePadding: standard page gutter
cardRadius: content group radius
controlRadius: inset control radius
compactControlSize: compact circular control size
bottomScrollInset: clearance above persistent navigation

Feature-local layout enums may define row heights and grid dimensions, but should reference the shared radius instead of introducing a new card shape.

Components

OpenClawProBackground: grouped page background
ProCard: quiet content grouping; never Liquid Glass
ProIconBadge, ProValuePill: compact semantic indicators
OpenClawNoticeBanner: shared connection and runtime notices
OpenClawAdaptiveHeaderRow: responsive destination heading
OpenClawGlassControlGroup: performance and morphing boundary for nearby glass controls
openClawGlassButton(prominent:tint:): iOS 26 glass button with an iOS 18 bordered fallback
openClawTabBarBehavior(): iOS 26 tab-bar minimization with an earlier-system no-op

Liquid Glass rules

Use openClawGlassButton for primary actions, compact header controls, and navigation-adjacent controls. Use the prominent style for one primary action per region. Wrap nearby controls in OpenClawGlassControlGroup.

Do not place Liquid Glass behind reading content, forms, metrics, or every card in a scroll view. Excess glass weakens hierarchy, increases rendering cost, and competes with the system tab bar and navigation chrome.

Keep new iOS APIs behind #available(iOS 26.0, *). The fallback must preserve the same label, action, tint meaning, accessibility, and approximate hit target.

Review checklist

Uses a native container or control where one exists.
Uses shared spacing and corner tokens.
Has one obvious primary action.
Keeps semantic color independent from decoration.
Works in light and dark mode, Dynamic Type, and compact phone layouts.
Verifies iOS 26 appearance in the simulator and preserves the iOS 18 fallback path.
Adds matched before/after evidence for a visual change.

3.4 KiB Raw Blame History