swiftui-style

SwiftUI Style Guide with Design System Integration for DuckDuckGo Browser

View Structure

View Organization

struct FeatureView: View {
    // MARK: - Environment and State
    @Environment(\.colorScheme) var colorScheme
    @EnvironmentObject var appSettings: AppSettings
    
    // MARK: - State and Binding
    @State private var localState = false
    @Binding var externalState: Bool
    
    // MARK: - View Model
    @StateObject private var viewModel: FeatureViewModel
    
    // MARK: - Body
    var body: some View {
        content
            .onAppear { viewModel.onAppear() }
    }
    
    // MARK: - Subviews
    @ViewBuilder
    private var content: some View {
        // Main content here
    }
}

Design System Integration

REQUIRED: Use DesignResourcesKit Colors

ALWAYS use semantic colors from DesignResourcesKit instead of hardcoded or system colors:

// ✅ CORRECT - DesignResourcesKit semantic colors
Text("Title")
    .foregroundColor(Color(designSystemColor: .textPrimary))
    .background(Color(designSystemColor: .surface))

VStack {
    Rectangle()
        .fill(Color(designSystemColor: .accent))
    
    Button("Action") { }
        .foregroundColor(Color(designSystemColor: .controlsFillPrimary))
}
.background(Color(designSystemColor: .background))

// ❌ INCORRECT - Hardcoded or system colors
Text("Title")
    .foregroundColor(.black) // Don't use hardcoded colors
    .background(.gray) // Don't use system colors

// ❌ INCORRECT - Manual dark mode handling
@Environment(\.colorScheme) var colorScheme
let textColor = colorScheme == .dark ? Color.white : Color.black // Use semantic colors instead

REQUIRED: Use DesignResourcesKit Icons

ALWAYS use icons from DesignResourcesKitIcons package:

// ✅ CORRECT - DesignResourcesKit icons
Button(action: addAction) {
    Image(uiImage: DesignSystemImages.Glyphs.Size16.add)
        .foregroundColor(Color(designSystemColor: .accent))
}

Image(uiImage: DesignSystemImages.Color.Size24.bookmark)
    .resizable()
    .frame(width: 24, height: 24)

// ❌ INCORRECT - System or custom icons
Button(action: addAction) {
    Image(systemName: "plus") // Use DesignResourcesKit icons
}

Image("custom_icon") // Use DesignResourcesKit icons instead