Brand Identity on iOS with Liquid Glass Design Language

import SwiftUI

// MARK: - Brand Color Content Layer Demo
// iOS 27 recommended approach: put brand color in the scroll view,
// let Liquid Glass controls tint themselves automatically.

struct BrandedRecipeListView: View {
    // App's brand accent — used as tint, NOT as a toolbar background
    private let brandColor = Color(red: 0.95, green: 0.45, blue: 0.25)

    let recipes = ["Chocolate Chip", "Snickerdoodle", "Lemon Poppy", "Brown Butter", "Matcha", "Espresso Walnut"]

    var body: some View {
        NavigationStack {
            ScrollView {
                // Brand gradient lives here — in the content layer, scrolls away
                LinearGradient(
                    colors: [brandColor.opacity(0.25), Color(.systemBackground)],
                    startPoint: .top,
                    endPoint: .center
                )
                .frame(height: 200)
                .ignoresSafeArea(edges: .top)

                LazyVStack(alignment: .leading, spacing: 12) {
                    ForEach(recipes, id: \.self) { recipe in
                        RecipeRow(title: recipe, accentColor: brandColor)
                    }
                }
                .padding(.horizontal)
            }
            .navigationTitle("This Week's Flavors")
            .navigationBarTitleDisplayMode(.large)
            // ✅ No .toolbarBackground() call — let Liquid Glass do its thing
            .toolbar {
                ToolbarItem(placement: .primaryAction) {
                    Button("Order", systemImage: "cart.badge.plus") {}
                        .tint(brandColor) // accent only, not background
                }
            }
        }
        .tint(brandColor) // Sets accent color for all interactive elements
    }
}

struct RecipeRow: View {
    let title: String
    let accentColor: Color

    var body: some View {
        HStack {
            RoundedRectangle(cornerRadius: 8)
                .fill(accentColor.opacity(0.15))
                .frame(width: 56, height: 56)
                .overlay {
                    Image(systemName: "birthday.cake")
                        .foregroundStyle(accentColor)
                        .font(.title2)
                }

            VStack(alignment: .leading, spacing: 4) {
                Text(title)
                    .font(.headline)
                Text("Limited weekly flavor")
                    .font(.subheadline)
                    .foregroundStyle(.secondary)
            }
            Spacer()
            Image(systemName: "chevron.right")
                .foregroundStyle(.tertiary)
        }
        .padding()
        .background(.regularMaterial, in: RoundedRectangle(cornerRadius: 16))
        .contextMenu {
            Button("Add to Favorites", systemImage: "heart") {}
            Button("Share", systemImage: "square.and.arrow.up") {}
            Divider()
            Button("Order Now", systemImage: "cart") {}
        }
    }
}

#Preview {
    BrandedRecipeListView()
}