Redesign macOS contextual SearchDone dialog for rebranding

SharedPackages/Onboarding/Sources/Onboarding/Rebranding/Shared/Styles/RebrandedOnboardingStyles+CTAButton.swift

@@ -0,0 +1,115 @@
+//
+//  RebrandedOnboardingStyles+CTAButton.swift
+//
+//  Copyright © 2026 DuckDuckGo. All rights reserved.
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//  http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+
+import SwiftUI
+
+public extension OnboardingRebranding.OnboardingStyles {
+
+    struct CTAButtonStyle: ButtonStyle {
+        private let backgroundColor: Color
+        private let pressedBackgroundColor: Color
+        private let foregroundColor: Color
+        private let font: Font
+        private let verticalPadding: CGFloat
+        private let horizontalPadding: CGFloat
+        private let cornerRadius: CGFloat
+        private let minWidth: CGFloat
+        private let minHeight: CGFloat
+
+        public init(
+            backgroundColor: Color,
+            pressedBackgroundColor: Color,
+            foregroundColor: Color,
+            font: Font,
+            verticalPadding: CGFloat = 8,
+            horizontalPadding: CGFloat = 24,
+            cornerRadius: CGFloat = 100,
+            minWidth: CGFloat = 174,
+            minHeight: CGFloat = 32
+        ) {
+            self.backgroundColor = backgroundColor
+            self.pressedBackgroundColor = pressedBackgroundColor
+            self.foregroundColor = foregroundColor
+            self.font = font
+            self.verticalPadding = verticalPadding
+            self.horizontalPadding = horizontalPadding
+            self.cornerRadius = cornerRadius
+            self.minWidth = minWidth
+            self.minHeight = minHeight
+        }
+
+        public func makeBody(configuration: Configuration) -> some View {
+            CTAButtonContent(
+                configuration: configuration,
+                backgroundColor: backgroundColor,
+                pressedBackgroundColor: pressedBackgroundColor,
+                foregroundColor: foregroundColor,
+                font: font,
+                verticalPadding: verticalPadding,
+                horizontalPadding: horizontalPadding,
+                cornerRadius: cornerRadius,
+                minWidth: minWidth,
+                minHeight: minHeight
+            )
+        }
+
+        private struct CTAButtonContent: View {
+            let configuration: ButtonStyle.Configuration
+            let backgroundColor: Color
+            let pressedBackgroundColor: Color
+            let foregroundColor: Color
+            let font: Font
+            let verticalPadding: CGFloat
+            let horizontalPadding: CGFloat
+            let cornerRadius: CGFloat
+            let minWidth: CGFloat
+            let minHeight: CGFloat
+
+            @State private var isHovered = false
+
+            var body: some View {
+                configuration.label
+                    .font(font)
+                    .foregroundColor(foregroundColor)
+                    .padding(.vertical, verticalPadding)
+                    .padding(.horizontal, horizontalPadding)
+                    .frame(minWidth: minWidth, minHeight: minHeight)
+                    .background(resolvedBackgroundColor)
+                    .cornerRadius(cornerRadius)
+                    .onHover { hovering in
+#if os(macOS)
+                        isHovered = hovering
+#endif
+                    }
+            }
+
+            private var resolvedBackgroundColor: Color {
+                if configuration.isPressed {
+                    return pressedBackgroundColor
+                }
+#if os(macOS)
+                if isHovered {
+                    return pressedBackgroundColor.opacity(0.85)
+                }
+#endif
+                return backgroundColor
+            }
+        }
+    }
+
+}

SharedPackages/Onboarding/Sources/Onboarding/Rebranding/Shared/Styles/RebrandedOnboardingStyles+ListButton.swift

@@ -59,8 +59,8 @@ public extension OnboardingRebranding.OnboardingStyles {
                     .multilineTextAlignment(.leading)
                     .lineLimit(nil)
                     .foregroundColor(foregroundColor(isPressed: configuration.isPressed, isHovered: isHovered))
-                    .padding(.vertical, 12)
-                    .padding(.horizontal)
+                    .padding(.vertical, optionsListMetrics.verticalPadding)
+                    .padding(.horizontal, optionsListMetrics.horizontalPadding)
                     .frame(minWidth: 0, maxWidth: optionsListMetrics.itemMaxWidth, minHeight: optionsListMetrics.itemMinHeight)
                     .background(backgroundColor(isPressed: configuration.isPressed, isHovered: isHovered))
                     .cornerRadius(optionsListMetrics.cornerRadius)
@@ -78,11 +78,7 @@ public extension OnboardingRebranding.OnboardingStyles {
             }
 
             private func foregroundColor(isPressed: Bool, isHovered: Bool) -> Color {
-#if os(iOS)
                 return colorPalette.optionsListIconColor
-#else
-                return Color(designSystemColor: .accentTextPrimary)
-#endif
             }
 
             private func backgroundColor(isPressed: Bool, isHovered: Bool) -> Color {

SharedPackages/Onboarding/Sources/Onboarding/Rebranding/Shared/Theme/OnboardingTheme+ContextualFlow.swift

@@ -112,6 +112,10 @@ public extension OnboardingTheme.ContextualOnboardingMetrics {
         public let interItemSpacing: CGFloat?
         /// Horizontal spacing between icon and text within a row.
         public let innerContentHorizontalSpacing: CGFloat?
+        /// Vertical padding inside each option list row.
+        public let verticalPadding: CGFloat
+        /// Horizontal padding inside each option list row.
+        public let horizontalPadding: CGFloat
 
         public init(
             cornerRadius: CGFloat,
@@ -121,7 +125,9 @@ public extension OnboardingTheme.ContextualOnboardingMetrics {
             itemMinHeight: CGFloat,
             itemMaxWidth: CGFloat? = .infinity,
             interItemSpacing: CGFloat? = nil,
-            innerContentHorizontalSpacing: CGFloat? = nil
+            innerContentHorizontalSpacing: CGFloat? = nil,
+            verticalPadding: CGFloat = 12,
+            horizontalPadding: CGFloat = 16
         ) {
             self.cornerRadius = cornerRadius
             self.borderWidth = borderWidth
@@ -131,6 +137,8 @@ public extension OnboardingTheme.ContextualOnboardingMetrics {
             self.itemMaxWidth = itemMaxWidth
             self.interItemSpacing = interItemSpacing
             self.innerContentHorizontalSpacing = innerContentHorizontalSpacing
+            self.verticalPadding = verticalPadding
+            self.horizontalPadding = horizontalPadding
         }
     }
 

SharedPackages/Onboarding/Sources/Onboarding/Rebranding/macOS/Theme/OnboardingTheme-macOS.swift

@@ -27,21 +27,35 @@ public extension OnboardingTheme {
         let bubbleCornerRadius = 36.0
         let borderWidth = 1.5
 
-        let typography = Typography.system
+        let typography = Typography(
+            contextualTitle: .system(size: 20, weight: .bold),
+            contextualBody: .system(size: 16, weight: .regular),
+            contextualControlSmall: .system(size: 13, weight: .regular)
+        )
+
+        let accentPrimary = Color(0x2F95EE)
+        let bubbleBorder = Color(0xCBEAFF)
+
+        let ctaButtonBackground = Color(0xDE5833)
+        let ctaButtonPressed = Color(0xBC4726)
 
         let colorPalette = ColorPalette(
-            background: Color(designSystemColor: .surfaceBackdrop),
-            bubbleBorder: Color(designSystemColor: .accentAltPrimary),
-            bubbleBackground: Color(designSystemColor: .surfaceTertiary),
+            background: .white,
+            bubbleBorder: bubbleBorder,
+            bubbleBackground: .white,
             bubbleShadow: Color.shade(0.03),
             textPrimary: Color(designSystemColor: .textPrimary),
             textSecondary: Color(designSystemColor: .textSecondary),
-            optionsListBorderColor: Color(designSystemColor: .accentPrimary),
-            optionsListIconColor: Color(designSystemColor: .accentPrimary),
-            optionsListTextColor: Color(designSystemColor: .textLink),
-            primaryButtonBackgroundColor: Color(designSystemColor: .buttonsPrimaryDefault),
-            primaryButtonTextColor: Color(designSystemColor: .buttonsPrimaryText),
-            backgroundAccent: Color(designSystemColor: .accentPrimary)
+            optionsListBorderColor: accentPrimary,
+            optionsListIconColor: accentPrimary,
+            optionsListTextColor: accentPrimary,
+            primaryButtonBackgroundColor: ctaButtonBackground,
+            primaryButtonPressedColor: ctaButtonPressed,
+            primaryButtonTextColor: .white,
+            secondaryButtonBackgroundColor: Color(designSystemColor: .buttonsPrimaryDefault),
+            secondaryButtonPressedColor: Color(designSystemColor: .buttonsPrimaryPressed),
+            secondaryButtonTextColor: Color(designSystemColor: .buttonsPrimaryText),
+            backgroundAccent: accentPrimary
         )
 
         let dismissButtonMetrics = DismissButtonMetrics(
@@ -51,18 +65,20 @@ public extension OnboardingTheme {
         )
 
         let contextualOptionsListMetrics = ContextualOnboardingMetrics.OptionsListMetrics(
-            cornerRadius: 32,
+            cornerRadius: 999,
             borderWidth: 1,
             borderInset: 0.5,
             iconSize: CGSize(width: 16, height: 16),
-            itemMinHeight: 40
+            itemMinHeight: 28,
+            verticalPadding: 6,
+            horizontalPadding: 12
         )
 
         return OnboardingTheme(
-            typography: .system,
+            typography: typography,
             colorPalette: colorPalette,
             bubbleMetrics: BubbleMetrics(
-                contentInsets: EdgeInsets(top: 32, leading: 20, bottom: 20, trailing: 20),
+                contentInsets: EdgeInsets(top: 24, leading: 32, bottom: 24, trailing: 32),
                 cornerRadius: bubbleCornerRadius,
                 borderWidth: borderWidth,
                 shadowRadius: 6.0,
@@ -76,9 +92,9 @@ public extension OnboardingTheme {
             dismissButtonMetrics: dismissButtonMetrics,
             contextualOnboardingMetrics: OnboardingTheme.ContextualOnboardingMetrics(
                 containerPadding: EdgeInsets(top: 16, leading: 16, bottom: 58, trailing: 16),
-                contentSpacing: 20,
-                titleBodyVerticalSpacingVerticalLayout: 10,
-                titleBodyVerticalSpacingHorizontalLayout: 10,
+                contentSpacing: 12,
+                titleBodyVerticalSpacingVerticalLayout: 8,
+                titleBodyVerticalSpacingHorizontalLayout: 8,
                 titleBodyInset: EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0),
                 contextualTitleTextAlignment: .leading,
                 contextualBodyTextAlignment: .leading,
@@ -112,7 +128,14 @@ public extension OnboardingTheme {
             linearBodyTextAlignment: .center,
             primaryButtonStyle: OnboardingButtonStyle(
                 id: .primary,
-                style: AnyButtonStyle(OnboardingPrimaryButtonStyle())
+                style: AnyButtonStyle(
+                    OnboardingRebranding.OnboardingStyles.CTAButtonStyle(
+                        backgroundColor: ctaButtonBackground,
+                        pressedBackgroundColor: ctaButtonPressed,
+                        foregroundColor: .white,
+                        font: typography.contextual.body
+                    )
+                )
             ),
             dismissButtonStyle: OnboardingButtonStyle(
                 id: .dismiss,