Dark appearance
Tweaks for the dark version of the onboarding UI
This commit is contained in:
Lukas Korba
parent
54d9dd2fd9
commit
bbf5498fe2
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0.820",
|
||||
"green" : "0.722",
|
||||
"red" : "0.631"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "0.150",
|
||||
"blue" : "1.000",
|
||||
"green" : "1.000",
|
||||
"red" : "1.000"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0.992",
|
||||
"green" : "0.980",
|
||||
"red" : "0.969"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "0.150",
|
||||
"blue" : "1.000",
|
||||
"green" : "1.000",
|
||||
"red" : "1.000"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
|
|
@ -22,10 +22,10 @@
|
|||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "0.150",
|
||||
"blue" : "0xFF",
|
||||
"green" : "0xFF",
|
||||
"red" : "0xFF"
|
||||
"alpha" : "1.000",
|
||||
"blue" : "69",
|
||||
"green" : "32",
|
||||
"red" : "19"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@
|
|||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "0.150",
|
||||
"blue" : "0xFF",
|
||||
"green" : "0xFF",
|
||||
"red" : "0xFF"
|
||||
"alpha" : "1.000",
|
||||
"blue" : "88",
|
||||
"green" : "50",
|
||||
"red" : "40"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0xD9",
|
||||
"green" : "0xC0",
|
||||
"red" : "0xA7"
|
||||
"blue" : "217",
|
||||
"green" : "192",
|
||||
"red" : "167"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0.851",
|
||||
"green" : "0.753",
|
||||
"red" : "0.655"
|
||||
"blue" : "217",
|
||||
"green" : "192",
|
||||
"red" : "167"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "1.000",
|
||||
"green" : "1.000",
|
||||
"red" : "1.000"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "69",
|
||||
"green" : "32",
|
||||
"red" : "19"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "1.000",
|
||||
"green" : "1.000",
|
||||
"red" : "1.000"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "66",
|
||||
"green" : "30",
|
||||
"red" : "21"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
{
|
||||
"colors" : [
|
||||
{
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "1.000",
|
||||
"green" : "1.000",
|
||||
"red" : "1.000"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
},
|
||||
{
|
||||
"appearances" : [
|
||||
{
|
||||
"appearance" : "luminosity",
|
||||
"value" : "dark"
|
||||
}
|
||||
],
|
||||
"color" : {
|
||||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "117",
|
||||
"green" : "80",
|
||||
"red" : "69"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
}
|
||||
],
|
||||
"info" : {
|
||||
"author" : "xcode",
|
||||
"version" : 1
|
||||
}
|
||||
}
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0.514",
|
||||
"green" : "0.486",
|
||||
"red" : "0.443"
|
||||
"blue" : "106",
|
||||
"green" : "63",
|
||||
"red" : "44"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
"color-space" : "srgb",
|
||||
"components" : {
|
||||
"alpha" : "1.000",
|
||||
"blue" : "0.514",
|
||||
"green" : "0.486",
|
||||
"red" : "0.443"
|
||||
"blue" : "0x62",
|
||||
"green" : "0x33",
|
||||
"red" : "0x22"
|
||||
}
|
||||
},
|
||||
"idiom" : "universal"
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@ internal enum Asset {
|
|||
internal static let createButton = ColorAsset(name: "CreateButton")
|
||||
internal static let createButtonDisabled = ColorAsset(name: "CreateButtonDisabled")
|
||||
internal static let createButtonPressed = ColorAsset(name: "CreateButtonPressed")
|
||||
internal static let neumorphicButtonDarkSide = ColorAsset(name: "NeumorphicButtonDarkSide")
|
||||
internal static let neumorphicButtonLightSide = ColorAsset(name: "NeumorphicButtonLightSide")
|
||||
internal static let neumorphicDarkSide = ColorAsset(name: "NeumorphicDarkSide")
|
||||
internal static let neumorphicLightSide = ColorAsset(name: "NeumorphicLightSide")
|
||||
internal static let onboardingNavigation = ColorAsset(name: "OnboardingNavigation")
|
||||
|
|
@ -59,6 +61,9 @@ internal enum Asset {
|
|||
internal static let secondaryButtonPressed = ColorAsset(name: "SecondaryButtonPressed")
|
||||
}
|
||||
internal enum Onboarding {
|
||||
internal static let badgeShadow = ColorAsset(name: "BadgeShadow")
|
||||
internal static let circularFrameDarkOutlineGradientEnd = ColorAsset(name: "CircularFrameDarkOutlineGradientEnd")
|
||||
internal static let circularFrameDarkOutlineGradientStart = ColorAsset(name: "CircularFrameDarkOutlineGradientStart")
|
||||
internal static let circularFrameGradientEnd = ColorAsset(name: "CircularFrameGradientEnd")
|
||||
internal static let circularFrameGradientStart = ColorAsset(name: "CircularFrameGradientStart")
|
||||
internal static let navigationButtonDisabled = ColorAsset(name: "NavigationButtonDisabled")
|
||||
|
|
|
|||
|
|
@ -77,5 +77,35 @@ struct OnboardingScreen_Previews: PreviewProvider {
|
|||
)
|
||||
.preferredColorScheme(.light)
|
||||
.previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
|
||||
|
||||
OnboardingScreen(
|
||||
store: Store(
|
||||
initialState: OnboardingState(),
|
||||
reducer: OnboardingReducer.default,
|
||||
environment: ()
|
||||
)
|
||||
)
|
||||
.preferredColorScheme(.dark)
|
||||
.previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
|
||||
|
||||
OnboardingScreen(
|
||||
store: Store(
|
||||
initialState: OnboardingState(),
|
||||
reducer: OnboardingReducer.default,
|
||||
environment: ()
|
||||
)
|
||||
)
|
||||
.preferredColorScheme(.dark)
|
||||
.previewDevice(PreviewDevice(rawValue: "iPhone 8"))
|
||||
|
||||
OnboardingScreen(
|
||||
store: Store(
|
||||
initialState: OnboardingState(),
|
||||
reducer: OnboardingReducer.default,
|
||||
environment: ()
|
||||
)
|
||||
)
|
||||
.preferredColorScheme(.dark)
|
||||
.previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro"))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ struct NavigationButtonStyle: ButtonStyle {
|
|||
Asset.Colors.Buttons.onboardingNavigation.color
|
||||
)
|
||||
.cornerRadius(.infinity)
|
||||
.neumorphicDesign(configuration.isPressed)
|
||||
.neumorphicButtonDesign(configuration.isPressed)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import SwiftUI
|
||||
|
||||
/// Neumorphic design is charasterictical with two shadows (light & dark) around the button
|
||||
/// Neumorphic design is charasterictical with two shadows (light & dark) around the view
|
||||
/// Appereance in our case is influenced by two parameters:
|
||||
/// - Parameters:
|
||||
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
||||
|
|
@ -25,20 +25,53 @@ struct NeumorphicDesign: ViewModifier {
|
|||
.shadow(
|
||||
color: Asset.Colors.Buttons.neumorphicDarkSide.color,
|
||||
radius: 15,
|
||||
x: colorScheme == .light && !isPressed ? 10 : -10,
|
||||
y: colorScheme == .light && !isPressed ? 10 : 10
|
||||
)
|
||||
.shadow(
|
||||
color: Asset.Colors.Buttons.neumorphicLightSide.color,
|
||||
radius: 10,
|
||||
x: colorScheme == .light && !isPressed ? -12 : 12,
|
||||
y: colorScheme == .light && !isPressed ? -12 : -12
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
/// Neumorphic design is charasterictical with two shadows (light & dark) around the button
|
||||
/// Appereance in our case is influenced by two parameters:
|
||||
/// - Parameters:
|
||||
/// - colorScheme: The light is using full neumorphic design while dark is limited to soft shadow only
|
||||
/// - isPressed: When the button is pressed, there are different behaviours for light vs. dark colorScheme
|
||||
struct NeumorphicButtonDesign: ViewModifier {
|
||||
@Environment(\.colorScheme) var colorScheme
|
||||
let isPressed: Bool
|
||||
|
||||
init(_ isPressed: Bool) {
|
||||
self.isPressed = isPressed
|
||||
}
|
||||
|
||||
func body(content: Content) -> some View {
|
||||
content
|
||||
.shadow(
|
||||
color: Asset.Colors.Buttons.neumorphicButtonDarkSide.color,
|
||||
radius: 15,
|
||||
x: colorScheme == .light && !isPressed ? 10 : 0,
|
||||
y: colorScheme == .light && !isPressed ? 10 : 0
|
||||
)
|
||||
.shadow(
|
||||
color: Asset.Colors.Buttons.neumorphicLightSide.color,
|
||||
color: Asset.Colors.Buttons.neumorphicButtonLightSide.color,
|
||||
radius: 10,
|
||||
x: colorScheme == .light && !isPressed ? -12 : 0,
|
||||
y: colorScheme == .light && !isPressed ? -12 : 0
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
extension View {
|
||||
func neumorphicDesign(_ isPressed: Bool = false) -> some View {
|
||||
self.modifier(NeumorphicDesign(isPressed))
|
||||
}
|
||||
|
||||
func neumorphicButtonDesign(_ isPressed: Bool = false) -> some View {
|
||||
self.modifier(NeumorphicButtonDesign(isPressed))
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ struct StandardButtonStyle: ButtonStyle {
|
|||
: .red
|
||||
)
|
||||
.cornerRadius(12)
|
||||
.neumorphicDesign(configuration.isPressed)
|
||||
.neumorphicButtonDesign(configuration.isPressed)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,21 +8,44 @@
|
|||
import SwiftUI
|
||||
|
||||
struct CircularFrame: View {
|
||||
private let gradient = LinearGradient(
|
||||
colors: [
|
||||
Asset.Colors.Onboarding.circularFrameGradientStart.color,
|
||||
Asset.Colors.Onboarding.circularFrameGradientEnd.color
|
||||
],
|
||||
startPoint: .topLeading,
|
||||
endPoint: .bottomTrailing
|
||||
)
|
||||
@Environment(\.colorScheme) var colorScheme
|
||||
|
||||
var body: some View {
|
||||
GeometryReader { proxy in
|
||||
let lineWidth = proxy.size.width * 0.06
|
||||
|
||||
Circle()
|
||||
.stroke(gradient, style: StrokeStyle(lineWidth: lineWidth))
|
||||
.stroke(
|
||||
LinearGradient(
|
||||
colors: [
|
||||
Asset.Colors.Onboarding.circularFrameGradientStart.color,
|
||||
Asset.Colors.Onboarding.circularFrameGradientEnd.color
|
||||
],
|
||||
startPoint: colorScheme == .light ? .topLeading : .top,
|
||||
endPoint: colorScheme == .light ? .bottomTrailing : .bottom
|
||||
),
|
||||
style: StrokeStyle(
|
||||
lineWidth: lineWidth
|
||||
)
|
||||
)
|
||||
.padding(colorScheme == .light ? 0 : 10)
|
||||
|
||||
if colorScheme == .dark {
|
||||
Circle()
|
||||
.stroke(
|
||||
LinearGradient(
|
||||
colors: [
|
||||
Asset.Colors.Onboarding.circularFrameDarkOutlineGradientStart.color,
|
||||
Asset.Colors.Onboarding.circularFrameDarkOutlineGradientEnd.color
|
||||
],
|
||||
startPoint: .top,
|
||||
endPoint: .bottom
|
||||
),
|
||||
style: StrokeStyle(
|
||||
lineWidth: lineWidth * 0.15
|
||||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -113,7 +136,7 @@ struct CircularFramePreviewHelper: View {
|
|||
struct CircularFrame_Previews: PreviewProvider {
|
||||
static var previews: some View {
|
||||
CircularFramePreviewHelper()
|
||||
.preferredColorScheme(.light)
|
||||
.preferredColorScheme(.dark)
|
||||
.previewLayout(.device)
|
||||
.applyScreenBackground()
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,10 +74,10 @@ struct BadgesOverlay: Animatable, ViewModifier {
|
|||
)
|
||||
.offset(
|
||||
x: 4.0,
|
||||
y: proxy.size.height * 0.18
|
||||
y: proxy.size.height * 0.15
|
||||
)
|
||||
.opacity(badgeIndex == viewStore.index ? 1 : 0)
|
||||
.shadow(color: .white, radius: 10, x: 0, y: 0)
|
||||
.shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -111,11 +111,11 @@ struct BadgeOverlay: Animatable, ViewModifier {
|
|||
)
|
||||
.offset(
|
||||
x: 4.0,
|
||||
y: proxy.size.height * 0.18
|
||||
y: proxy.size.height * 0.15
|
||||
)
|
||||
.transition(.scale(scale: 2))
|
||||
.transition(.opacity)
|
||||
.shadow(color: .white, radius: 10, x: 0, y: 0)
|
||||
.shadow(color: Asset.Colors.Onboarding.badgeShadow.color, radius: 10, x: 0, y: 0)
|
||||
Spacer()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue