Skip to content

Commit 81deef7

Browse files
Sudhanshu96Sudhanshu96
committed
Refactored colors and made changes according to design
1 parent 56844f9 commit 81deef7

File tree

81 files changed

+1439
-1731
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

81 files changed

+1439
-1731
lines changed

‎Auth0UIComponents/AuthMethodsHome/Presentation/EmptyFactorsView.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,14 @@ struct EmptyFactorsView: View {
1515
.frame(width: theme.sizes.iconSmall, height: theme.sizes.iconSmall)
1616

1717
Text("No factors configured")
18-
.foregroundStyle(theme.colors.onError)
18+
.foregroundStyle(theme.colors.text.onError)
1919
.auth0TextStyle(theme.typography.label)
2020
Spacer()
2121
}
2222
.padding(.all, theme.spacing.md)
2323
.overlay {
2424
RoundedRectangle(cornerRadius: theme.radius.button)
25-
.stroke(theme.colors.border, lineWidth: 1)
25+
.stroke(theme.colors.border.regular, lineWidth: 1)
2626
}
2727
}
2828
}

‎Auth0UIComponents/AuthMethodsHome/Presentation/EnrollPasskeyView.swift‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,17 @@ struct EnrollPasskeyView: View {
2020
VStack {
2121
Text("With Passkey, you don't have to remember complex passwords.")
2222
.auth0TextStyle(theme.typography.label)
23-
.foregroundStyle(theme.colors.textPrimary)
23+
.foregroundStyle(theme.colors.text.bold)
2424

2525
HStack {
2626
VStack(alignment: .leading, spacing: theme.spacing.xs) {
2727
Text("What are passkeys?")
2828
.auth0TextStyle(theme.typography.label)
2929
.fontWeight(.bold)
30-
.foregroundStyle(theme.colors.textPrimary)
30+
.foregroundStyle(theme.colors.text.bold)
3131
Text("Passkeys are encrypted digital keys you create using your fingerprint, face, or screen lock.")
3232
.auth0TextStyle(theme.typography.helper)
33-
.foregroundStyle(theme.colors.textPrimary)
33+
.foregroundStyle(theme.colors.text.bold)
3434
}
3535
Spacer()
3636
}.padding(.top, theme.spacing.xl)
@@ -40,10 +40,10 @@ struct EnrollPasskeyView: View {
4040
Text("Where are passkeys saved?")
4141
.auth0TextStyle(theme.typography.label)
4242
.fontWeight(.bold)
43-
.foregroundStyle(theme.colors.textPrimary)
43+
.foregroundStyle(theme.colors.text.bold)
4444
Text("Passkeys are saved in your credential manager, so you can sign in on other devices.")
4545
.auth0TextStyle(theme.typography.helper)
46-
.foregroundStyle(theme.colors.textPrimary)
46+
.foregroundStyle(theme.colors.text.bold)
4747
}
4848
Spacer()
4949
}.padding(.top, theme.spacing.xl)
@@ -56,7 +56,7 @@ struct EnrollPasskeyView: View {
5656
Label {
5757
Text("Add a Passkey")
5858
.auth0TextStyle(theme.typography.label)
59-
.foregroundStyle(theme.colors.primary)
59+
.foregroundStyle(theme.colors.background.primary)
6060
} icon: {
6161
Image("passkey", bundle: ResourceBundle.default)
6262
.resizable()
@@ -67,8 +67,8 @@ struct EnrollPasskeyView: View {
6767
.background(
6868
LinearGradient(
6969
stops: [
70-
Gradient.Stop(color: theme.colors.primary.opacity(0), location: 0.00),
71-
Gradient.Stop(color: theme.colors.primary.opacity(0.05), location: 1.00),
70+
Gradient.Stop(color: theme.colors.background.primary.opacity(0), location: 0.00),
71+
Gradient.Stop(color: theme.colors.background.primary.opacity(0.05), location: 1.00),
7272
],
7373
startPoint: UnitPoint(x: 0.5, y: 0),
7474
endPoint: UnitPoint(x: 0.5, y: 1)
@@ -79,7 +79,7 @@ struct EnrollPasskeyView: View {
7979
.overlay(
8080
RoundedRectangle(cornerRadius: theme.radius.button)
8181
.inset(by: 0.5)
82-
.stroke(theme.colors.primary.opacity(0.35), lineWidth: 1)
82+
.stroke(theme.colors.background.primary.opacity(0.35), lineWidth: 1)
8383
)
8484
.shadow(color: Color.black.opacity(0.20), radius: 2, x: 0, y: 1)
8585
.padding(.top, theme.spacing.base)
@@ -91,7 +91,7 @@ struct EnrollPasskeyView: View {
9191
} label: {
9292
Text("Remind me later")
9393
.auth0TextStyle(theme.typography.label)
94-
.foregroundStyle(theme.colors.primary)
94+
.foregroundStyle(theme.colors.background.primary)
9595
}
9696
.frame(height: theme.sizes.buttonHeight)
9797
.clipShape(RoundedRectangle(cornerRadius: theme.radius.button))
@@ -100,7 +100,6 @@ struct EnrollPasskeyView: View {
100100
}
101101
.padding(.all, theme.spacing.lg)
102102
.background(Color("Muted", bundle: ResourceBundle.default))
103-
// .background(theme.colors.surface.opacity(0.90))
104103
.clipShape(RoundedRectangle(cornerRadius: theme.radius.medium))
105104
}
106105
}

‎Auth0UIComponents/AuthMethodsHome/Presentation/MyAccountAuthMethodView.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ struct MyAccountAuthMethodView: View {
2424

2525
Text(viewModel.title())
2626
.auth0TextStyle(theme.typography.label)
27-
.foregroundStyle(theme.colors.cardForeground)
27+
.foregroundStyle(theme.colors.text.bold)
2828
.padding(.trailing, theme.spacing.base)
2929

3030
Spacer()
@@ -42,7 +42,7 @@ struct MyAccountAuthMethodView: View {
4242
.padding(.all, theme.spacing.lg)
4343
.overlay {
4444
RoundedRectangle(cornerRadius: theme.radius.button)
45-
.stroke(theme.colors.border, lineWidth: 1)
45+
.stroke(theme.colors.border.regular, lineWidth: 1)
4646
}
4747
.onTapGesture {
4848
viewModel.handleNavigation()

‎Auth0UIComponents/AuthMethodsHome/Presentation/MyAccountAuthMethodsView.swift‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -127,12 +127,12 @@ public struct MyAccountAuthMethodsView: View {
127127
.padding(.bottom, theme.spacing.`3xl`)
128128
case .title(let text):
129129
Text(text)
130-
.foregroundStyle(theme.colors.textPrimary)
130+
.foregroundStyle(theme.colors.text.bold)
131131
.auth0TextStyle(theme.typography.titleLarge)
132132

133133
case .subtitle(let text):
134134
Text(text)
135-
.foregroundStyle(theme.colors.textSecondary)
135+
.foregroundStyle(theme.colors.text.regular)
136136
.auth0TextStyle(theme.typography.helper)
137137
.padding(.bottom, theme.spacing.base)
138138
case .additionalVerificationMethods(let viewModel):

‎Auth0UIComponents/Core/Theme/Auth0BackgroundColorTokens.swift‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import SwiftUI
2+
3+
// MARK: - Protocol
4+
5+
/// A contract that defines all background colour tokens used by Auth0 UI Components.
6+
///
7+
/// Background tokens are divided into three sub-groups that mirror the Mobile Design System
8+
/// dot-notation (`color.background.*`):
9+
///
10+
/// ```
11+
/// Background
12+
/// ├── Primary primary · primarySubtle · inverse · accent
13+
/// ├── Layers layerTop · layerMedium · layerBase
14+
/// └── Feedback error · errorSubtle · success · successSubtle
15+
/// ```
16+
///
17+
/// Conform to this protocol to supply custom background colours from your app's asset catalog:
18+
///
19+
/// ```swift
20+
/// struct BrandBackground: Auth0BackgroundColorTokens {
21+
/// var primary: Color { Color("Background/Primary", bundle: .main) }
22+
/// var primarySubtle: Color { Color("Background/Primary", bundle: .main).opacity(0.35) }
23+
/// var inverse: Color { Color("Background/Inverse", bundle: .main) }
24+
/// var accent: Color { Color("Background/Accent", bundle: .main) }
25+
/// var layerTop: Color { Color("Background/LayerTop", bundle: .main) }
26+
/// var layerMedium: Color { Color("Background/LayerMedium", bundle: .main) }
27+
/// var layerBase: Color { Color("Background/LayerBase", bundle: .main) }
28+
/// var error: Color { Color("Background/Error", bundle: .main) }
29+
/// var errorSubtle: Color { Color("Background/ErrorSubtle", bundle: .main) }
30+
/// var success: Color { Color("Background/Success", bundle: .main) }
31+
/// var successSubtle: Color { Color("Background/SuccessSubtle", bundle: .main) }
32+
/// }
33+
/// MyAccountAuthMethodsView()
34+
/// .auth0Theme(Auth0Theme(colors: DefaultAuth0ColorTokens(background: BrandBackground())))
35+
/// ```
36+
public protocol Auth0BackgroundColorTokens: Sendable {
37+
38+
// MARK: - Primary
39+
40+
/// Default background colour for CTA buttons and primary surfaces.
41+
/// Mobile Design System: `color.background.primary`
42+
var primary: Color { get }
43+
44+
/// Softer variant of the primary background for low-emphasis areas.
45+
/// Mobile Design System: `color.background.primary.subtle`
46+
var primarySubtle: Color { get }
47+
48+
/// Background that flips contrast, used against the primary background.
49+
/// Mobile Design System: `color.background.inverse`
50+
var inverse: Color { get }
51+
52+
/// Background used to highlight branded or featured UI elements.
53+
/// Mobile Design System: `color.background.accent`
54+
var accent: Color { get }
55+
56+
// MARK: - Layers
57+
58+
/// Top-most layer background — overlays, modals, and popovers.
59+
/// Mobile Design System: `color.background.layer.top`
60+
var layerTop: Color { get }
61+
62+
/// Mid-level layer background — cards and raised containers.
63+
/// Mobile Design System: `color.background.layer.medium`
64+
var layerMedium: Color { get }
65+
66+
/// Foundational layer background — sits beneath all other layers.
67+
/// Mobile Design System: `color.background.layer.base`
68+
var layerBase: Color { get }
69+
70+
// MARK: - Feedback
71+
72+
/// Background for error states, alerts, and destructive messaging.
73+
/// Mobile Design System: `color.background.error`
74+
var error: Color { get }
75+
76+
/// Muted error background for low-severity or inline error hints.
77+
/// Mobile Design System: `color.background.error.subtle`
78+
var errorSubtle: Color { get }
79+
80+
/// Background for success states and positive confirmations.
81+
/// Mobile Design System: `color.background.success`
82+
var success: Color { get }
83+
84+
/// Muted success background for subtle positive feedback.
85+
/// Mobile Design System: `color.background.success.subtle`
86+
var successSubtle: Color { get }
87+
}
88+
89+
// MARK: - Default Implementation
90+
91+
/// The built-in Auth0 background colour tokens.
92+
///
93+
/// Defaults are sourced from the `Background/` namespace in `Colors.xcassets`.
94+
/// Every colorset is adaptive — it carries both a light-mode and a dark-mode swatch.
95+
///
96+
/// Pass values to the initialiser for any tokens you need to customise:
97+
///
98+
/// ```swift
99+
/// let bg = DefaultAuth0BackgroundColorTokens(
100+
/// primary: Color("Background/Primary", bundle: .main),
101+
/// accent: Color("Background/Accent", bundle: .main)
102+
/// )
103+
/// MyAccountAuthMethodsView()
104+
/// .auth0Theme(Auth0Theme(colors: DefaultAuth0ColorTokens(background: bg)))
105+
/// ```
106+
public struct DefaultAuth0BackgroundColorTokens: Auth0BackgroundColorTokens {
107+
108+
// MARK: - Primary
109+
110+
public var primary: Color
111+
public var primarySubtle: Color
112+
public var inverse: Color
113+
public var accent: Color
114+
115+
// MARK: - Layers
116+
117+
public var layerTop: Color
118+
public var layerMedium: Color
119+
public var layerBase: Color
120+
121+
// MARK: - Feedback
122+
123+
public var error: Color
124+
public var errorSubtle: Color
125+
public var success: Color
126+
public var successSubtle: Color
127+
128+
// MARK: - Init
129+
130+
public init(
131+
// Primary
132+
primary: Color = Color("Background/Primary", bundle: ResourceBundle.default),
133+
primarySubtle: Color = Color("Background/PrimarySubtle", bundle: ResourceBundle.default),
134+
inverse: Color = Color("Background/Inverse", bundle: ResourceBundle.default),
135+
accent: Color = Color("Background/Accent", bundle: ResourceBundle.default),
136+
// Layers
137+
layerTop: Color = Color("Background/LayerTop", bundle: ResourceBundle.default),
138+
layerMedium: Color = Color("Background/LayerMedium", bundle: ResourceBundle.default),
139+
layerBase: Color = Color("Background/LayerBase", bundle: ResourceBundle.default),
140+
// Feedback
141+
error: Color = Color("Background/Error", bundle: ResourceBundle.default),
142+
errorSubtle: Color = Color("Background/ErrorSubtle", bundle: ResourceBundle.default),
143+
success: Color = Color("Background/Success", bundle: ResourceBundle.default),
144+
successSubtle: Color = Color("Background/SuccessSubtle", bundle: ResourceBundle.default)
145+
) {
146+
// Primary
147+
self.primary = primary
148+
self.primarySubtle = primarySubtle
149+
self.inverse = inverse
150+
self.accent = accent
151+
// Layers
152+
self.layerTop = layerTop
153+
self.layerMedium = layerMedium
154+
self.layerBase = layerBase
155+
// Feedback
156+
self.error = error
157+
self.errorSubtle = errorSubtle
158+
self.success = success
159+
self.successSubtle = successSubtle
160+
}
161+
}

‎Auth0UIComponents/Core/Theme/Auth0BorderColorTokens.swift‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import SwiftUI
2+
3+
// MARK: - Protocol
4+
5+
/// A contract that defines all border colour tokens used by Auth0 UI Components.
6+
///
7+
/// Border tokens are divided into two sub-groups that mirror the Mobile Design System
8+
/// dot-notation (`color.border.*`):
9+
///
10+
/// ```
11+
/// Border
12+
/// ├── Emphasis bold · regular · subtle
13+
/// └── Elevation shadow
14+
/// ```
15+
///
16+
/// > **Note on naming:** Mobile Design System uses `color.border.default` for the standard border
17+
/// > colour. Because `default` is a reserved keyword in Swift, this token
18+
/// > is named `regular` here.
19+
///
20+
/// Conform to this protocol to supply custom border colours from your app's asset catalog:
21+
///
22+
/// ```swift
23+
/// struct BrandBorder: Auth0BorderColorTokens {
24+
/// var bold: Color { Color("Border/Bold", bundle: .main) }
25+
/// var regular: Color { Color("Border/Default", bundle: .main) }
26+
/// var subtle: Color { Color("Border/Subtle", bundle: .main) }
27+
/// var shadow: Color { Color("Border/Shadow", bundle: .main) }
28+
/// }
29+
/// MyAccountAuthMethodsView()
30+
/// .auth0Theme(Auth0Theme(colors: DefaultAuth0ColorTokens(border: BrandBorder())))
31+
/// ```
32+
public protocol Auth0BorderColorTokens: Sendable {
33+
34+
// MARK: - Emphasis
35+
36+
/// High-contrast border for emphasis, strong separation, or selected elements.
37+
/// Mobile Design System: `color.border.bold`
38+
var bold: Color { get }
39+
40+
/// Standard border colour for most UI elements and containers.
41+
/// Mobile Design System: `color.border.default`
42+
var regular: Color { get }
43+
44+
/// Low-contrast border for delicate dividers and understated boundaries.
45+
/// Mobile Design System: `color.border.subtle`
46+
var subtle: Color { get }
47+
48+
// MARK: - Elevation
49+
50+
/// Border-like shadow colour for depth and elevation cues.
51+
/// Mobile Design System: `color.border.shadow`
52+
var shadow: Color { get }
53+
}
54+
55+
// MARK: - Default Implementation
56+
57+
/// The built-in Auth0 border colour tokens.
58+
///
59+
/// Defaults are sourced from the `Border/` namespace in `Colors.xcassets`.
60+
/// Every colorset is adaptive — it carries both a light-mode and a dark-mode swatch.
61+
///
62+
/// Pass values to the initialiser for any tokens you need to customise:
63+
///
64+
/// ```swift
65+
/// let border = DefaultAuth0BorderColorTokens(regular: Color("Border/Default", bundle: .main))
66+
/// MyAccountAuthMethodsView()
67+
/// .auth0Theme(Auth0Theme(colors: DefaultAuth0ColorTokens(border: border)))
68+
/// ```
69+
public struct DefaultAuth0BorderColorTokens: Auth0BorderColorTokens {
70+
71+
// MARK: - Emphasis
72+
73+
public var bold: Color
74+
public var regular: Color
75+
public var subtle: Color
76+
77+
// MARK: - Elevation
78+
79+
public var shadow: Color
80+
81+
// MARK: - Init
82+
83+
public init(
84+
// Emphasis
85+
bold: Color = Color("Border/Bold", bundle: ResourceBundle.default),
86+
regular: Color = Color("Border/Default", bundle: ResourceBundle.default),
87+
subtle: Color = Color("Border/Subtle", bundle: ResourceBundle.default),
88+
// Elevation
89+
shadow: Color = Color("Border/Shadow", bundle: ResourceBundle.default)
90+
) {
91+
// Emphasis
92+
self.bold = bold
93+
self.regular = regular
94+
self.subtle = subtle
95+
// Elevation
96+
self.shadow = shadow
97+
}
98+
}

0 commit comments

Comments
 (0)