Update Onboarding gradients (#985)

**Required**: Task/Issue URL: https://app.asana.com/0/1206329551987282/1208084960726981 iOS PR: duckduckgo/iOS#3350 macOS PR: duckduckgo/macos-browser#3248 What kind of version bump will this require?: Patch **Description**: Updates Onboarding gradients
duckduckgo · Sep 12, 2024 · c68e68a · c68e68a
1 parent e2545b6
commit c68e68a
Show file tree

Hide file tree

Showing 4 changed files with 159 additions and 27 deletions.
diff --git a/Sources/Onboarding/OnboardingGradient.swift b/Sources/Onboarding/OnboardingGradient.swift
@@ -24,52 +24,162 @@ public struct OnboardingGradient: View {
     public init() {}
 
     public var body: some View {
+        if #available(iOS 15, macOS 12, *) {
+            gradient
+        } else {
+            gradientImage
+        }
+    }
+
+    @available(iOS 15, macOS 12, *)
+    @ViewBuilder
+    private var gradient: some View {
         switch colorScheme {
         case .light:
-            lightGradient
+            LightGradient()
         case .dark:
-            darkGradient
+            DarkGradient()
         @unknown default:
-            lightGradient
+            LightGradient()
         }
     }
 
-    private var lightGradient: some View {
-        gradient(colorStops: [
-            .init(color: Color(red: 1, green: 0.9, blue: 0.87), location: 0.00),
-            .init(color: Color(red: 0.99, green: 0.89, blue: 0.87), location: 0.28),
-            .init(color: Color(red: 0.99, green: 0.89, blue: 0.87), location: 0.46),
-            .init(color: Color(red: 0.96, green: 0.87, blue: 0.87), location: 0.72),
-            .init(color: Color(red: 0.9, green: 0.84, blue: 0.92), location: 1.00),
-        ])
+    private var gradientImage: some View {
+        Image("OnboardingGradient", bundle: bundle)
     }
+}
 
-    private var darkGradient: some View {
-        gradient(colorStops: [
-            .init(color: Color(red: 0.29, green: 0.19, blue: 0.25), location: 0.00),
-            .init(color: Color(red: 0.35, green: 0.23, blue: 0.32), location: 0.28),
-            .init(color: Color(red: 0.37, green: 0.25, blue: 0.38), location: 0.46),
-            .init(color: Color(red: 0.2, green: 0.15, blue: 0.32), location: 0.72),
-            .init(color: Color(red: 0.16, green: 0.15, blue: 0.34), location: 1.00),
-        ])
-    }
+@available(iOS 15, macOS 12, *)
+extension OnboardingGradient {
+
+    struct LightGradient: View {
+
+        init() {}
+
+        var body: some View {
+            ZStack {
+                // 5th gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.97, green: 0.73, blue: 0.67).opacity(0.5), location: 0.00),
+                        Gradient.Stop(color: .clear, location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.2, y: 0.17),
+                    endRadiusFraction: 1
+                )
+
+                // 4th gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 1, green: 0.91, blue: 0.64).opacity(0.12), location: 0.00),
+                        Gradient.Stop(color: .clear, location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.16, y: 0.86),
+                    endRadiusFraction: 1
+                )
+
+                // 3rd gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.93, green: 0.9, blue: 1).opacity(0.8), location: 0.00),
+                        Gradient.Stop(color: .clear, location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.92, y: 0),
+                    endRadiusFraction: 1
+                )
+
+                // 2nd gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.93, green: 0.9, blue: 1).opacity(0.8), location: 0.00),
+                        Gradient.Stop(color: .clear, location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.89, y: 1.07),
+                    endRadiusFraction: 1
+                )
 
-    private func gradient(colorStops: [SwiftUI.Gradient.Stop]) -> some View {
-        LinearGradient(
-            stops: colorStops,
-            startPoint: UnitPoint(x: 0.5, y: 0),
-            endPoint: UnitPoint(x: 0.5, y: 1)
-        )
+                // 1st gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.8, green: 0.85, blue: 1).opacity(0.58), location: 0.15),
+                        Gradient.Stop(color: .clear, location: 1.00),
+                    ],
+                    center: UnitPoint(x: 1.02, y: 0.5),
+                    endRadiusFraction: 1
+                )
+            }
+            .background(.white)
+        }
     }
 
+    struct DarkGradient: View {
+
+        init() {}
+
+        var body: some View {
+            ZStack {
+                // 5th Gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0.5), location: 0.00),
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0), location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.2, y: 0.17),
+                    endRadiusFraction: 1
+                )
+
+                // 4th Gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 1, green: 1, blue: 0.54).opacity(0), location: 0.00),
+                        Gradient.Stop(color: Color(red: 1, green: 0.91, blue: 0.64).opacity(0), location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.16, y: 0.86),
+                    endRadiusFraction: 1
+                )
+
+                // 3rd Gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0.8), location: 0.00),
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0), location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.92, y: 0),
+                    endRadiusFraction: 1
+                )
+
+                // 2nd Gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0.8), location: 0.00),
+                        Gradient.Stop(color: Color(red: 0.17, green: 0.08, blue: 0.44).opacity(0), location: 1.00),
+                    ],
+                    center: UnitPoint(x: 0.89, y: 1.07),
+                    endRadiusFraction: 1
+                )
+
+                // 1st Gradient
+                EllipticalGradient(
+                    stops: [
+                        Gradient.Stop(color: Color(red: 0.89, green: 0.44, blue: 0.31).opacity(0.32), location: 0.15),
+                        Gradient.Stop(color: Color(red: 0.89, green: 0.44, blue: 0.31).opacity(0), location: 1.00),
+                    ],
+                    center: UnitPoint(x: 1.0, y: 0.5),
+                    endRadiusFraction: 1
+                )
+
+            }
+            .background(Color(red: 0.07, green: 0.07, blue: 0.07))
+        }
+    }
 }
 
 #Preview("Light Mode") {
     OnboardingGradient()
         .preferredColorScheme(.light)
 }
 
-#Preview("Dark Mode") {
+#Preview("Dark Mode - Elliptical") {
     OnboardingGradient()
         .preferredColorScheme(.dark)
 }
diff --git a/.../Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/Contents.json b/.../Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/Contents.json
@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "filename" : "OnboardingGradient.pdf",
+      "idiom" : "mac"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "OnboardingGradientDark.pdf",
+      "idiom" : "mac"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
diff --git a/...ng/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradient.pdf b/...ng/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradient.pdf
diff --git a/...esources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradientDark.pdf b/...esources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradientDark.pdf