style: adopt Liquid Glass design for iOS app

Migrate entire iOS app to Apple's Liquid Glass design language: - System-adaptive colors (canvas, surfaces, text) for dark mode support - Translucent material backgrounds (.thinMaterial, .ultraThinMaterial) - Glass button styles (.glass, .glassProminent) on primary actions - Liquid Glass navigation bar on Fitness tab - Tab bar minimizes on scroll (.tabBarMinimizeBehavior) - Increased corner radii (20pt) matching iOS 26 conventions - Removed manual shadows (glass materials handle separation) No business logic changes — purely cosmetic. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 16:26:53 -05:00
parent c47db95938
commit 7569d1b505
15 changed files with 97 additions and 169 deletions
--- a/ios/Platform/Platform/ContentView.swift
+++ b/ios/Platform/Platform/ContentView.swift
@@ -9,7 +9,6 @@ struct ContentView: View {
            if auth.isCheckingAuth {
                ProgressView()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
-                    .background(Color.canvas)
            } else if auth.isLoggedIn {
                MainTabView()
            } else {
@@ -39,27 +38,26 @@ struct MainTabView: View {
                    .tag(1)
            }
            .tint(Color.accentWarm)
+            .tabBarMinimizeBehavior(.onScrollDown)

            // Floating buttons
            VStack {
                Spacer()
                HStack(alignment: .bottom) {
-                    // Feedback button (subtle, bottom-left)
                    FeedbackButton()
                        .padding(.leading, 20)

                    Spacer()

-                    // Add food button (prominent, bottom-right)
                    Button { showAssistant = true } label: {
                        Image(systemName: "plus")
                            .font(.title2.weight(.semibold))
                            .foregroundStyle(.white)
                            .frame(width: 56, height: 56)
-                            .background(Color.accentWarm)
-                            .clipShape(Circle())
-                            .shadow(color: .black.opacity(0.2), radius: 8, y: 4)
                    }
+                    .buttonStyle(.glassProminent)
+                    .tint(Color.accentWarm)
+                    .clipShape(Circle())
                    .padding(.trailing, 20)
                }
                .padding(.bottom, 70)
@@ -112,12 +110,11 @@ struct AssistantSheetView: View {
                    tabButton("Quick Add", icon: "magnifyingglass", index: 1)
                }
                .padding(4)
-                .background(Color.textTertiary.opacity(0.08))
+                .background(.ultraThinMaterial)
                .clipShape(Capsule())
                .padding(.horizontal, 40)
            }
            .padding(.bottom, 12)
-            .background(Color.canvas)

            if selectedMode == 0 {
                AssistantChatView(onFoodAdded: onFoodAdded)
@@ -125,7 +122,6 @@ struct AssistantSheetView: View {
                FoodSearchView(isSheet: true, onFoodAdded: onFoodAdded)
            }
        }
-        .background(Color.canvas)
        .presentationDetents([.large])
    }

@@ -140,7 +136,7 @@ struct AssistantSheetView: View {
            .foregroundStyle(selectedMode == index ? Color.textPrimary : Color.textTertiary)
            .padding(.horizontal, 16)
            .padding(.vertical, 8)
-            .background(selectedMode == index ? Color.surfaceCard : Color.clear)
+            .background(selectedMode == index ? .thinMaterial : .clear)
            .clipShape(Capsule())
        }
    }
--- a/ios/Platform/Platform/Features/Assistant/AssistantChatView.swift
+++ b/ios/Platform/Platform/Features/Assistant/AssistantChatView.swift
@@ -11,7 +11,6 @@ struct AssistantChatView: View {
            ScrollViewReader { proxy in
                ScrollView {
                    LazyVStack(spacing: 8) {
-                        // Welcome state when no messages
                        if vm.messages.isEmpty {
                            VStack(spacing: 16) {
                                Spacer(minLength: 60)
@@ -37,12 +36,10 @@ struct AssistantChatView: View {
                                .id(message.id)
                        }

-                        // Draft card
                        if let draft = vm.currentDraft, !vm.applied {
                            draftCard(draft)
                        }

-                        // Multiple drafts
                        if vm.currentDrafts.count > 1 && !vm.applied {
                            multipleDraftsCard
                        }
@@ -113,9 +110,8 @@ struct AssistantChatView: View {
            }
            .padding(.horizontal, 16)
            .padding(.vertical, 10)
-            .background(Color.surfaceCard)
+            .background(.bar)
        }
-        .background(Color.canvas)
        .onChange(of: vm.selectedPhoto) {
            Task { await vm.handlePhotoSelection() }
        }
@@ -141,10 +137,10 @@ struct AssistantChatView: View {
                .padding(.vertical, 10)
                .background(
                    message.role == "user"
-                        ? Color.accentWarm
-                        : Color.surfaceSheet
+                        ? AnyShapeStyle(Color.accentWarm)
+                        : AnyShapeStyle(.thinMaterial)
                )
-                .clipShape(RoundedRectangle(cornerRadius: 16))
+                .clipShape(RoundedRectangle(cornerRadius: 18))

            if message.role == "assistant" { Spacer(minLength: 60) }
        }
@@ -189,14 +185,12 @@ struct AssistantChatView: View {
                    .foregroundStyle(.white)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 10)
-                    .background(Color.emerald)
-                    .clipShape(RoundedRectangle(cornerRadius: 10))
            }
+            .buttonStyle(.glassProminent)
+            .tint(Color.emerald)
        }
        .padding()
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 14))
-        .shadow(color: .black.opacity(0.06), radius: 6, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .padding(.horizontal, 12)
    }

@@ -235,14 +229,12 @@ struct AssistantChatView: View {
                    .foregroundStyle(.white)
                    .frame(maxWidth: .infinity)
                    .padding(.vertical, 10)
-                    .background(Color.emerald)
-                    .clipShape(RoundedRectangle(cornerRadius: 10))
            }
+            .buttonStyle(.glassProminent)
+            .tint(Color.emerald)
        }
        .padding()
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 14))
-        .shadow(color: .black.opacity(0.06), radius: 6, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .padding(.horizontal, 12)
    }

--- a/ios/Platform/Platform/Features/Auth/LoginView.swift
+++ b/ios/Platform/Platform/Features/Auth/LoginView.swift
@@ -57,9 +57,8 @@ struct LoginView: View {
                }
                .frame(maxWidth: .infinity)
                .frame(height: 48)
-                .background(Color.accentWarm)
                .foregroundStyle(.white)
-                .clipShape(RoundedRectangle(cornerRadius: 12))
+                .background(Color.accentWarm, in: RoundedRectangle(cornerRadius: 14))
                .disabled(username.isEmpty || password.isEmpty || isLoading)
                .opacity(username.isEmpty || password.isEmpty ? 0.6 : 1)
            }
@@ -68,6 +67,5 @@ struct LoginView: View {
            Spacer()
            Spacer()
        }
-        .background(Color.canvas)
    }
 }
--- a/ios/Platform/Platform/Features/Feedback/FeedbackView.swift
+++ b/ios/Platform/Platform/Features/Feedback/FeedbackView.swift
@@ -10,10 +10,9 @@ struct FeedbackButton: View {
                .font(.system(size: 14))
                .foregroundStyle(Color.textTertiary)
                .frame(width: 32, height: 32)
-                .background(Color.surfaceCard.opacity(0.8))
-                .clipShape(Circle())
-                .shadow(color: .black.opacity(0.08), radius: 4, y: 2)
        }
+        .buttonStyle(.glass)
+        .clipShape(Circle())
        .sheet(isPresented: $showSheet) {
            FeedbackSheet()
                .presentationDetents([.large, .medium])
@@ -61,12 +60,7 @@ struct FeedbackSheet: View {
                    .font(.body)
                    .scrollContentBackground(.hidden)
                    .padding(12)
-                    .background(Color.canvas)
-                    .clipShape(RoundedRectangle(cornerRadius: 12))
-                    .overlay(
-                        RoundedRectangle(cornerRadius: 12)
-                            .stroke(Color.textTertiary.opacity(0.2), lineWidth: 1)
-                    )
+                    .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 14))

                // Photo attachment
                HStack {
@@ -80,8 +74,7 @@ struct FeedbackSheet: View {
                        .foregroundStyle(Color.accentWarm)
                        .padding(.horizontal, 12)
                        .padding(.vertical, 8)
-                        .background(Color.accentWarm.opacity(0.1))
-                        .clipShape(Capsule())
+                        .background(Color.accentWarm.opacity(0.1), in: Capsule())
                    }

                    if let preview = photoPreview {
@@ -123,14 +116,15 @@ struct FeedbackSheet: View {
                }
                .frame(maxWidth: .infinity)
                .frame(height: 48)
-                .background(text.trimmingCharacters(in: .whitespaces).isEmpty ? Color.textTertiary : Color.accentWarm)
                .foregroundStyle(.white)
-                .clipShape(RoundedRectangle(cornerRadius: 12))
+                .background(
+                    text.trimmingCharacters(in: .whitespaces).isEmpty ? Color.textTertiary : Color.accentWarm,
+                    in: RoundedRectangle(cornerRadius: 14)
+                )
                .disabled(text.trimmingCharacters(in: .whitespaces).isEmpty || isSending)
            }
        }
        .padding()
-        .background(Color.surfaceCard)
        .onChange(of: selectedPhoto) {
            Task {
                if let item = selectedPhoto,
--- a/ios/Platform/Platform/Features/Fitness/Views/AddFoodSheet.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/AddFoodSheet.swift
@@ -80,7 +80,6 @@ struct AddFoodSheet: View {
                        }
                        .frame(maxWidth: .infinity)

-                        // Serving picker
                        if let servings = food.servings, !servings.isEmpty {
                            Picker("Serving", selection: $selectedServingId) {
                                Text("Base (\(food.baseUnit))").tag(nil as String?)
@@ -92,8 +91,7 @@ struct AddFoodSheet: View {
                        }
                    }
                    .padding()
-                    .background(Color.surfaceCard)
-                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                    .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 16))

                    // Meal picker
                    VStack(alignment: .leading, spacing: 8) {
@@ -116,15 +114,15 @@ struct AddFoodSheet: View {
                                    .padding(.vertical, 10)
                                    .background(selectedMeal == meal
                                        ? Color.mealColor(for: meal.rawValue).opacity(0.15)
-                                        : Color.surfaceCard
+                                        : .clear
                                    )
                                    .foregroundStyle(selectedMeal == meal
                                        ? Color.mealColor(for: meal.rawValue)
                                        : Color.textSecondary
                                    )
-                                    .clipShape(RoundedRectangle(cornerRadius: 10))
+                                    .clipShape(RoundedRectangle(cornerRadius: 12))
                                    .overlay(
-                                        RoundedRectangle(cornerRadius: 10)
+                                        RoundedRectangle(cornerRadius: 12)
                                            .stroke(selectedMeal == meal
                                                ? Color.mealColor(for: meal.rawValue).opacity(0.3)
                                                : Color.clear, lineWidth: 1
@@ -135,8 +133,7 @@ struct AddFoodSheet: View {
                        }
                    }
                    .padding()
-                    .background(Color.surfaceCard)
-                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                    .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 16))

                    // Nutrition preview
                    VStack(spacing: 8) {
@@ -157,8 +154,7 @@ struct AddFoodSheet: View {
                        }
                    }
                    .padding()
-                    .background(Color.surfaceCard)
-                    .clipShape(RoundedRectangle(cornerRadius: 12))
+                    .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 16))

                    if let error {
                        Text(error)
@@ -169,7 +165,6 @@ struct AddFoodSheet: View {
                .padding()
            }
            .scrollDismissesKeyboard(.immediately)
-            .background(Color.canvas)
            .safeAreaInset(edge: .bottom) {
                Button {
                    addEntry()
@@ -184,13 +179,12 @@ struct AddFoodSheet: View {
                }
                .frame(maxWidth: .infinity)
                .frame(height: 50)
-                .background(Color.accentWarm)
                .foregroundStyle(.white)
-                .clipShape(RoundedRectangle(cornerRadius: 12))
+                .background(Color.accentWarm, in: RoundedRectangle(cornerRadius: 16))
                .disabled(isAdding)
                .padding(.horizontal)
                .padding(.bottom, 8)
-                .background(Color.canvas)
+                .background(.bar)
            }
            .navigationTitle("Add Food")
            .navigationBarTitleDisplayMode(.inline)
--- a/ios/Platform/Platform/Features/Fitness/Views/EntryDetailView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/EntryDetailView.swift
@@ -48,7 +48,6 @@ struct EntryDetailView: View {
                        .foregroundStyle(Color.textPrimary)
                        .frame(maxWidth: .infinity, alignment: .leading)

-                    // Meal type picker
                    VStack(alignment: .leading, spacing: 8) {
                        Text("Meal")
                            .font(.subheadline.weight(.medium))
@@ -62,7 +61,6 @@ struct EntryDetailView: View {
                        .pickerStyle(.segmented)
                    }

-                    // Quantity field
                    VStack(alignment: .leading, spacing: 8) {
                        Text("Quantity (\(entry.unit))")
                            .font(.subheadline.weight(.medium))
@@ -85,8 +83,7 @@ struct EntryDetailView: View {
                                .keyboardType(.decimalPad)
                                .frame(width: 80)
                                .padding(.vertical, 8)
-                                .background(Color.canvas)
-                                .clipShape(RoundedRectangle(cornerRadius: 8))
+                                .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 10))

                            Button {
                                if let val = Double(editQuantity) {
@@ -133,15 +130,13 @@ struct EntryDetailView: View {
                        .foregroundStyle(.white)
                        .frame(maxWidth: .infinity)
                        .padding(.vertical, 12)
-                        .background(Color.emerald)
-                        .clipShape(RoundedRectangle(cornerRadius: 10))
                    }
+                    .buttonStyle(.glassProminent)
+                    .tint(Color.emerald)
                    .disabled(isSaving)
                }
                .padding()
-                .background(Color.surfaceCard)
-                .clipShape(RoundedRectangle(cornerRadius: 14))
-                .shadow(color: .black.opacity(0.04), radius: 6, y: 2)
+                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))

                // Nutrition grid
                LazyVGrid(columns: [
@@ -157,8 +152,7 @@ struct EntryDetailView: View {
                    nutritionCell("Fiber", value: entry.fiber, unit: "g", color: .green)
                }
                .padding()
-                .background(Color.surfaceCard)
-                .clipShape(RoundedRectangle(cornerRadius: 14))
+                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))

                // Metadata
                VStack(spacing: 8) {
@@ -170,8 +164,7 @@ struct EntryDetailView: View {
                    }
                }
                .padding()
-                .background(Color.surfaceCard)
-                .clipShape(RoundedRectangle(cornerRadius: 14))
+                .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))

                // Delete button
                Button(role: .destructive) {
@@ -182,12 +175,11 @@ struct EntryDetailView: View {
                        .frame(maxWidth: .infinity)
                        .frame(height: 48)
                }
-                .buttonStyle(.borderedProminent)
+                .buttonStyle(.glass)
                .tint(.red)
            }
            .padding()
        }
-        .background(Color.canvas)
        .navigationTitle("Entry Detail")
        .navigationBarTitleDisplayMode(.inline)
        .alert("Delete Entry?", isPresented: $showDeleteConfirmation) {
--- a/ios/Platform/Platform/Features/Fitness/Views/FitnessTabView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/FitnessTabView.swift
@@ -5,46 +5,45 @@ struct FitnessTabView: View {

    var body: some View {
        NavigationStack {
-        VStack(spacing: 0) {
-            // Sub-tab selector
-            HStack(spacing: 0) {
-                ForEach(Array(fitnessSubTabs.enumerated()), id: \.offset) { index, tab in
-                    Button {
-                        withAnimation(.easeInOut(duration: 0.2)) {
-                            selectedSubTab = index
-                        }
-                    } label: {
-                        Text(tab)
-                            .font(.subheadline.weight(selectedSubTab == index ? .semibold : .regular))
-                            .foregroundStyle(selectedSubTab == index ? Color.accentWarm : Color.textSecondary)
-                            .padding(.vertical, 10)
-                            .padding(.horizontal, 16)
-                            .background {
-                                if selectedSubTab == index {
-                                    Capsule()
-                                        .fill(Color.accentWarm.opacity(0.12))
-                                }
+            VStack(spacing: 0) {
+                // Sub-tab selector
+                HStack(spacing: 0) {
+                    ForEach(Array(fitnessSubTabs.enumerated()), id: \.offset) { index, tab in
+                        Button {
+                            withAnimation(.easeInOut(duration: 0.2)) {
+                                selectedSubTab = index
                            }
+                        } label: {
+                            Text(tab)
+                                .font(.subheadline.weight(selectedSubTab == index ? .semibold : .regular))
+                                .foregroundStyle(selectedSubTab == index ? Color.accentWarm : Color.textSecondary)
+                                .padding(.vertical, 10)
+                                .padding(.horizontal, 16)
+                                .background {
+                                    if selectedSubTab == index {
+                                        Capsule()
+                                            .fill(.ultraThinMaterial)
+                                    }
+                                }
+                        }
                    }
                }
-            }
-            .padding(.horizontal)
-            .padding(.top, 8)
+                .padding(.horizontal)
+                .padding(.top, 8)

-            // Content — tap tabs to switch (no page swipe, preserves swipe-to-delete)
-            Group {
-                switch selectedSubTab {
-                case 0: TodayView()
-                case 1: TemplatesView()
-                case 2: GoalsView()
-                case 3: FoodLibraryView()
-                default: TodayView()
+                Group {
+                    switch selectedSubTab {
+                    case 0: TodayView()
+                    case 1: TemplatesView()
+                    case 2: GoalsView()
+                    case 3: FoodLibraryView()
+                    default: TodayView()
+                    }
                }
+                .animation(.easeInOut(duration: 0.2), value: selectedSubTab)
            }
-            .animation(.easeInOut(duration: 0.2), value: selectedSubTab)
-        }
-        .background(Color.canvas)
-        .navigationBarHidden(true)
+            .navigationTitle("Fitness")
+            .navigationBarTitleDisplayMode(.large)
        }
    }

--- a/ios/Platform/Platform/Features/Fitness/Views/FoodLibraryView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/FoodLibraryView.swift
@@ -24,8 +24,7 @@ struct FoodLibraryView: View {
                }
            }
            .padding(12)
-            .background(Color.surfaceCard)
-            .clipShape(RoundedRectangle(cornerRadius: 10))
+            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12))
            .padding(.horizontal)
            .padding(.top, 8)

@@ -82,7 +81,6 @@ struct FoodLibraryView: View {
                }
            }
        }
-        .background(Color.canvas)
        .task {
            await vm.loadInitial()
        }
--- a/ios/Platform/Platform/Features/Fitness/Views/FoodSearchView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/FoodSearchView.swift
@@ -26,22 +26,18 @@ struct FoodSearchView: View {
                }
            }
            .padding(12)
-            .background(Color.surfaceCard)
-            .clipShape(RoundedRectangle(cornerRadius: 10))
+            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 12))
            .padding(.horizontal)
            .padding(.top, 8)

            if vm.isLoadingInitial {
                LoadingView()
            } else if !vm.searchText.isEmpty {
-                // Search results
                searchResultsList
            } else {
-                // Recent + All
                defaultList
            }
        }
-        .background(Color.canvas)
        .task {
            await vm.loadInitial()
        }
@@ -132,14 +128,11 @@ struct FoodSearchView: View {

    private func recentFoodRow(_ recent: RecentFood) -> some View {
        Button {
-            // Navigate to add sheet by loading the full food
            Task {
                do {
                    let food = try await FitnessAPI().getFood(id: recent.foodId)
                    selectedFood = food
-                } catch {
-                    // Silently fail
-                }
+                } catch {}
            }
        } label: {
            HStack {
--- a/ios/Platform/Platform/Features/Fitness/Views/GoalsView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/GoalsView.swift
@@ -23,7 +23,6 @@ struct GoalsView: View {
            .padding(.horizontal)
            .padding(.top, 8)
        }
-        .background(Color.canvas)
        .task {
            await vm.load()
        }
@@ -92,15 +91,13 @@ struct GoalsView: View {
                .foregroundStyle(.white)
                .frame(maxWidth: .infinity)
                .padding(.vertical, 12)
-                .background(Color.emerald)
-                .clipShape(RoundedRectangle(cornerRadius: 10))
            }
+            .buttonStyle(.glassProminent)
+            .tint(Color.emerald)
            .disabled(vm.isSaving)
        }
        .padding()
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 14))
-        .shadow(color: .black.opacity(0.04), radius: 6, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
    }

    private func goalField(_ label: String, text: Binding<String>, unit: String, color: Color) -> some View {
@@ -120,6 +117,6 @@ struct GoalsView: View {
        .frame(maxWidth: .infinity)
        .padding(.vertical, 12)
        .background(color.opacity(0.06))
-        .clipShape(RoundedRectangle(cornerRadius: 10))
+        .clipShape(RoundedRectangle(cornerRadius: 12))
    }
 }
--- a/ios/Platform/Platform/Features/Fitness/Views/MealSectionView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/MealSectionView.swift
@@ -20,13 +20,11 @@ struct MealSectionView: View {
                }
            } label: {
                HStack(spacing: 0) {
-                    // Colored accent bar
                    RoundedRectangle(cornerRadius: 2)
                        .fill(Color.mealColor(for: mealType.rawValue))
                        .frame(width: 4, height: 40)
                        .padding(.trailing, 12)

-                    // Meal icon in tinted circle
                    Image(systemName: mealType.icon)
                        .font(.title3.weight(.semibold))
                        .foregroundStyle(Color.mealColor(for: mealType.rawValue))
@@ -63,14 +61,14 @@ struct MealSectionView: View {
                .padding(.horizontal, 16)
                .padding(.vertical, 14)
                .background(Color.mealColor(for: mealType.rawValue).opacity(0.04))
-                .clipShape(RoundedRectangle(cornerRadius: 14))
+                .clipShape(RoundedRectangle(cornerRadius: 16))
            }

            if isExpanded {
                ForEach(entries) { entry in
                    SwipeToDeleteRow(
                        onDelete: { onDelete(entry) },
-                        onTap: { /* handled by NavigationLink */ },
+                        onTap: { },
                        destination: { EntryDetailView(entry: entry, onDelete: { onDelete(entry) }) }
                    ) {
                        entryRow(entry)
@@ -78,9 +76,7 @@ struct MealSectionView: View {
                }
            }
        }
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 14))
-        .shadow(color: .black.opacity(0.04), radius: 6, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .padding(.horizontal)
    }

@@ -112,7 +108,6 @@ struct MealSectionView: View {
        }
        .padding(.horizontal, 16)
        .padding(.vertical, 10)
-        .background(Color.surfaceCard)
    }
 }

@@ -130,7 +125,6 @@ struct SwipeToDeleteRow<Content: View, Destination: View>: View {

    var body: some View {
        ZStack(alignment: .trailing) {
-            // Delete button background
            HStack {
                Spacer()
                Button {
@@ -148,7 +142,6 @@ struct SwipeToDeleteRow<Content: View, Destination: View>: View {
                .background(Color.red)
            }

-            // Content row
            content()
                .offset(x: offset)
                .navigationDestination(isPresented: $showDetail) {
@@ -158,7 +151,6 @@ struct SwipeToDeleteRow<Content: View, Destination: View>: View {
                    if !isSwiping {
                        showDetail = true
                    } else {
-                        // Close swipe
                        withAnimation(.easeOut(duration: 0.2)) {
                            offset = 0
                            isSwiping = false
--- a/ios/Platform/Platform/Features/Fitness/Views/TemplatesView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/TemplatesView.swift
@@ -39,7 +39,6 @@ struct TemplatesView: View {
            .padding(.horizontal)
            .padding(.top, 8)
        }
-        .background(Color.canvas)
        .task {
            await vm.load()
        }
@@ -118,8 +117,6 @@ struct TemplatesView: View {
            }
        }
        .padding()
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 12))
-        .shadow(color: .black.opacity(0.04), radius: 4, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 16))
    }
 }
--- a/ios/Platform/Platform/Features/Fitness/Views/TodayView.swift
+++ b/ios/Platform/Platform/Features/Fitness/Views/TodayView.swift
@@ -6,13 +6,9 @@ struct TodayView: View {
    var body: some View {
        ScrollView {
            VStack(spacing: 16) {
-                // Date selector
                dateSelector
-
-                // Macro summary
                macroSummary

-                // Meal sections
                if vm.entries.isEmpty && !vm.isLoading {
                    EmptyStateView(
                        icon: "fork.knife",
@@ -38,7 +34,6 @@ struct TodayView: View {
        .refreshable {
            await vm.load()
        }
-        .background(Color.canvas)
        .task {
            await vm.load()
        }
@@ -128,9 +123,7 @@ struct TodayView: View {
            }
        }
        .padding(16)
-        .background(Color.surfaceCard)
-        .clipShape(RoundedRectangle(cornerRadius: 14))
-        .shadow(color: .black.opacity(0.04), radius: 6, y: 2)
+        .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 20))
        .padding(.horizontal)
    }
 }
--- a/ios/Platform/Platform/Features/Home/HomeView.swift
+++ b/ios/Platform/Platform/Features/Home/HomeView.swift
@@ -64,7 +64,7 @@ struct HomeView: View {
                    .padding(.horizontal)
                    .padding(.top, 16)

-                    // Widget grid — half width, tap to go to fitness
+                    // Widget grid
                    HStack(spacing: 12) {
                        Button { selectedTab = 1 } label: {
                            calorieWidget
@@ -99,7 +99,6 @@ struct HomeView: View {
                .textCase(.uppercase)
                .tracking(0.5)

-            // Animated ring
            ZStack {
                Circle()
                    .stroke(Color.emerald.opacity(0.15), lineWidth: 9)
@@ -130,14 +129,8 @@ struct HomeView: View {
        .frame(maxWidth: .infinity)
        .aspectRatio(1, contentMode: .fit)
        .background {
-            if vm.hasBackground {
-                RoundedRectangle(cornerRadius: 16)
-                    .fill(.ultraThinMaterial)
-            } else {
-                RoundedRectangle(cornerRadius: 16)
-                    .fill(Color.surfaceCard)
-                    .shadow(color: .black.opacity(0.05), radius: 8, y: 2)
-            }
+            RoundedRectangle(cornerRadius: 20)
+                .fill(.ultraThinMaterial)
        }
    }
 }
--- a/ios/Platform/Platform/Shared/Extensions/Color+Extensions.swift
+++ b/ios/Platform/Platform/Shared/Extensions/Color+Extensions.swift
@@ -1,21 +1,21 @@
 import SwiftUI

 extension Color {
-    // MARK: - Canvas / Background
-    static let canvas = Color(red: 0.96, green: 0.94, blue: 0.90) // #F5EFE6
+    // MARK: - Canvas / Background (system-adaptive for Liquid Glass)
+    static let canvas = Color(.systemBackground)

    // MARK: - Accent
    static let accentWarm = Color(red: 0.545, green: 0.412, blue: 0.078) // #8B6914
    static let emerald = Color(red: 0.020, green: 0.588, blue: 0.412) // #059669

-    // MARK: - Surfaces
-    static let surfaceCard = Color(red: 255/255, green: 252/255, blue: 248/255) // warm white
-    static let surfaceSheet = Color(red: 0.98, green: 0.97, blue: 0.95)
+    // MARK: - Surfaces (system-adaptive)
+    static let surfaceCard = Color(.secondarySystemGroupedBackground)
+    static let surfaceSheet = Color(.systemGroupedBackground)

-    // MARK: - Text
-    static let textPrimary = Color(red: 0.12, green: 0.12, blue: 0.12)
-    static let textSecondary = Color(red: 0.45, green: 0.45, blue: 0.45)
-    static let textTertiary = Color(red: 0.65, green: 0.65, blue: 0.65)
+    // MARK: - Text (system-adaptive for Liquid Glass + dark mode)
+    static let textPrimary = Color(.label)
+    static let textSecondary = Color(.secondaryLabel)
+    static let textTertiary = Color(.tertiaryLabel)

    // MARK: - Meal Colors
    static let mealBreakfast = Color(red: 1.0, green: 0.72, blue: 0.27)   // warm orange