From c68e68a0036796628ffdea8d449e5df39ceceb4d Mon Sep 17 00:00:00 2001 From: Alessandro Boron Date: Thu, 12 Sep 2024 10:10:18 +1000 Subject: [PATCH] Update Onboarding gradients (#985) **Required**: Task/Issue URL: https://app.asana.com/0/1206329551987282/1208084960726981 iOS PR: https://github.com/duckduckgo/iOS/pull/3350 macOS PR: https://github.com/duckduckgo/macos-browser/pull/3248 What kind of version bump will this require?: Patch **Description**: Updates Onboarding gradients --- Sources/Onboarding/OnboardingGradient.swift | 164 +++++++++++++++--- .../OnboardingGradient.imageset/Contents.json | 22 +++ .../OnboardingGradient.pdf | Bin 0 -> 16687 bytes .../OnboardingGradientDark.pdf | Bin 0 -> 15863 bytes 4 files changed, 159 insertions(+), 27 deletions(-) create mode 100644 Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/Contents.json create mode 100644 Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradient.pdf create mode 100644 Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradientDark.pdf diff --git a/Sources/Onboarding/OnboardingGradient.swift b/Sources/Onboarding/OnboardingGradient.swift index 3ad81f026..0d6a2c40c 100644 --- a/Sources/Onboarding/OnboardingGradient.swift +++ b/Sources/Onboarding/OnboardingGradient.swift @@ -24,44 +24,154 @@ 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") { @@ -69,7 +179,7 @@ public struct OnboardingGradient: View { .preferredColorScheme(.light) } -#Preview("Dark Mode") { +#Preview("Dark Mode - Elliptical") { OnboardingGradient() .preferredColorScheme(.dark) } diff --git a/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/Contents.json b/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/Contents.json new file mode 100644 index 000000000..e67518ae9 --- /dev/null +++ b/Sources/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/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradient.pdf b/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradient.pdf new file mode 100644 index 0000000000000000000000000000000000000000..2dad86b22229ff5353c1e70220e36d25d415d478 GIT binary patch literal 16687 zcmeHOO^75#7G}_kImo&wDzY*m%jnFZDl;N8@@J8ro#{Vy9BsNhtT+qiROR%PR%bR< zSxe6jqN0e-L4>*JP4pzmMy`XVADDkCeqEBmK|2ypt4ITIwzD?l9iGNO}W=UHAuPK?+gkJTP=}zq`s(DMSWFq zrT+wKpGK?@^=VWKs&@>}n{~qzMijTQu7xKy{019xVF$MDvhQ4KD{0O;oQZXytIRss zkPll2RnnYwxVzCheBrt>-{CVyLe};jm@;)VYUT-FkSUk=j;v5Mw@2!WYE{%%4npZ~ z#&=Zhn00*z8}ec6@RT%X9scgK4%LwgSpwg3gmqYT*A57FOPqf->)>{0p&{!~g{sjT zjV!!cmG!fVEB%dIhpOYqj#<|_*pLrfN1&uR>%i9TGY`O5kF7kUL3lR%$v2n%ylpoR zRj3-iQRb0VtFnGpaiza;^H6on%wz42S=T)Hm=D_rE?t=7YAaK@q}+~GXAU_u2d>Y5 z?Gu~ru)4OW?-N@t6+}Lj`&%updGD^@gM+mjb^^6_!}{Xw*s)|azy4MQVB)K14^z3i zmwmVx^^$(K8TB|pSP0WJ>c-+3^M5D8wA ztd#OuQjO1UBdlP;`eh^^)ewi%6|0^l6|j=MjDxQ5P7%PIhZUj|zVX9K&2|MoSSawt zBQTH}_AIAvyOvD}s=0RE53ujJ2wNVhyS{}z7u9U)*D19FU@}$LwQ^B?MKKm;^b=^2 z5VCinh2+C36KJ_i(85Pyn6W?zNd{1Jp;D43nQQOSZX>kp0mi~Rr36}Z&bI^50`SQ= z33ed7gzrx6#O z`i&o5L=cPuY6MgTXtC>%ItBq8kpePfc{cdZ8g)S-@TlzofpHnP7#F!Z2xpHEo`>Xxqll8r#NW2=DKF)TLx+cyaz%al=o}KJCBSGeWHM zs=27G@BPXy;&JY3yS?V-_IKBbk5mk{XM3obHI;X2St;g%t=k-IAB~%!$$s6rfZw*5 z9t$>1Oi!Da{AKf|M|IOv8?fUzC9_A3uKE_`#NQQ7v)tbi-RQ=>*Re24bi8g_=g(HFEq^f(==Bn?RO?+L^GKYMf6tETPd?O9hi2J=+fw_$nVefG+5cbSo z%NLD>g3NiuPtR8L4RAQ`{{C`1PI~Qh=wkRj z5AVJG<8}AlbKucyZu|LvQy;zX+WuRf{_Kb2zrAwDf4{xt9%&wU=YoG^->09i9yaszj*iBV$T z-)za*UfzOipO+5K_Cl09A9Okz$4LtJ0^}aJT+}Sd{x}h}+ToV3MetBp<~4wV$8hu= zO11MxDi+wW?i9gg2i5Uv@btau<86MEfwyE)ZvR5AeMpY8VH~uh2a>!Y47PZfAuNPT zaBD*qIsljHFbzA&lAd_A8=W>RWP65)B(lHAg;P!xfjs-M%R20bVkx3509X*g$thjL z4o?k<0vIhVA$HlB?SjaLHfbUPhkS=baM7fo zmSe+_u!6{i&HkduE!K+$LkVf%7OM)IG{uB235r$q;F?XLL=Q46iu|BhFAt8i6|@3k z74r&Uo3N-wNina0I)%L8=t40eh~NU9);SmqXGlb0Q>&mwy~1!n*aS{=7qtAG6{g*= z-HEyen*#UFz$KJJy<|B$j1IM1hsBIC7n1~LBeYJiKeN&PXT&U@JH)V?^0|O19Q`v6 J9-Mt}?swhU0pb7v literal 0 HcmV?d00001 diff --git a/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradientDark.pdf b/Sources/Onboarding/Resources/OnboardingAssets.xcassets/OnboardingGradient.imageset/OnboardingGradientDark.pdf new file mode 100644 index 0000000000000000000000000000000000000000..0e0a1aba357587c373f6543cea96783415dc69ae GIT binary patch literal 15863 zcmeHOO^hQ)6@~*K^Z-P9++*)p zJB)p>tE=nxy;t?#_uliF_2tzDZu*9Sk%iLDrwoM7pGW4EIN8d#5rN7LsDh8V5hYtO zdIDKZi+vClg*r7~1xqdj`oU1JL%4tg4TF2+$^`*ANI;gqfV#j zJgGfjR_*qD;j;a+sCy03NhFmg?Vvtk*w~Z|&l+*k;iQEUWxqjLUdVxMd-Of4wPmd$ z9nPI79oQ$X6AF2-{J^oXcv5AhU?3OeNwn1(kC6^OspQ_I_Iz2j+gGJ&8tJG@m;(Zecn6QDc<3ibUi5Q9m zQ1*hr@qN@Fmfs}Uw?X?hY#*rPI6moJ$oUYfObqIQhT<@lT3cD$BF*9(hQZ8))P3fmS@ zvFDcc#9nFxbF!?f%_o)xZJDucPqU?!-5jh$U`U<~Z>KnKMg#iXs_W=_F~xteBuUdIsN7#qAtsC?S&46)m+4^|3uLB$|*{0bF4G)QrB9uiAY> zmX*7sZ|rla^t2bUYp)z-T%9s<&)7Bu!w{_7T*qk8PK;|tVvGSTj0?rpNJxoVunt?Q zL<8mupo>*3Gdmk4pT~r6FrrA1iJHLZ)ZE2X5L3P5T+t_ z=!wN8zW<)&8*Uj$`qf*fVvNXlgSa8COYmA9%I!W z+TUf&EyOxUQ<%*1NUNu@H2xLjHrC}^AUFPsBR4k)i0yJ5&H=(vAU9GvRaN9hbn|2y zE&~5e&7P1(6SYFYXrez7xykz;yT08F!!YmzKx#hr;la0jilwN&a9u<^&xOjs1^P4s zJ7o19KGB$sN&KNN2g;(!8b~?TlZy+`HjYO1K^wWf);{I%0<>A^kf4omVHC6x-I^DA zMYY`LqF1IW0bWASZ-Oh(4?xYaS}-ZG>xE5X zhZX?t2C)m*Ay|8LJx1c@V|wlX#1+T{exX*xm0sJJ7N!m}3`sphT6pHT8?jEOL#P!M ziO!DQ7HWlExQA9NWt>U%1ri;CbG2ftaC=Bi3^Y=~p(3=9*9RZVwX5;kO4#L(6eH?ZgFC6d9P1XHYO3#^8TR+x_4l zzW?y4-=Vu6`uD(S{^;KK1}}Qa6Q8|t`ahRH^Sz(E_5P)sr=0xD_q_V%li&Hl^&2m| z_Rq%O-pM}w)BD$-zURK*{PtgedFk`s?@yh3?(}z`-}~gZK4w_Iy!P62f4}>4zxdF5 zDzWK*DmcDZ4uh!dty8o5!y-%%$XaD<;m*QK) z-762g@YM&O|Jlt4|9o!q^?Pp(zwq;KcTd0i?sn_Nt#@zkKJel0efgUo`QbAk{RG{7 zipa*k|q^i+=OVa12LEDhggfmsp2gHeaj9dq86`xrotI#%hVr~9Wng@uSo z;RfQj&r*~}y>v_Oyqm?>3=7$zQTT$GzV%$1ssi==L;o$oUO)zG@o}kNyHe$XZ%wPh zmOokr|1Yhy@@T@a-qE9!(5eVTJ4dP@8-cST+lz>Q#YN?dTAi!=trw zNC<#eukzjMA{;*eSB%~&g#UL`t2|(l*2?v~>QW)ZTOG>{!CS9)^emcTsEy^5uu6O1 zrm28>t5Mqf9u*y}RS=GJ3_`oQ?U0Og42f4+Dz@BeN2r2aC~ZdUI5ZruE&@AVP$3R> ze44ASw+gD;hG4!|E;Y}hZZFOZdQdJe!yhfq4$^*n4xR0G&K2j*+(=V6v(Tk*Y?!U? aGci3M>@JP6oShiReIuc9=FG|?tN#O(Urd$& literal 0 HcmV?d00001