Skip to content

Commit 2c101c3

Browse files
amirsaamamirsaam
committed
Dynamic B&W as Default Color
1 parent b411b78 commit 2c101c3

17 files changed

+499
-358
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,15 +40,15 @@ Text("RadixUI-Swift")
4040
```
4141
or
4242
```swift
43-
@State private var color: RadixAutoColor = .crimson
43+
private var color: RadixAutoColor = .crimson
4444

4545
Text("RadixUI-Swift")
4646
.foregroundColor(color.solid9) // From RadixAutoColor Enum
4747
```
4848

4949
In order to use your own custom color pallete head to [Radix Pallete Generator](https://www.radix-ui.com/colors/custom) and create your pallete and add them to your Asset Catalogue in 12 level named in this way for example: MyColor1, MyColor2, MyColor3, MyColor4, MyColor5, ... MyColor12 then using RadixAutoColor's `.custom` property:
5050
```swift
51-
@State private var color: RadixAutoColor = .custom("myColor")
51+
private var color: RadixAutoColor = .custom("myColor")
5252
// Reads all 12 levels of your custom pallete using the color's child variables.
5353
// It will automatically capitalize the first letter for you.
5454

‎Sources/RadixUI/DemoViews/BadgeDemoView.swift‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -16,46 +16,46 @@ struct BadgeDemoView: View {
1616
HStack(spacing: 20) {
1717
Text(new)
1818
.font(.footnote)
19-
.radixBadge(variant: .outline, radius: .none, color: .grass)
19+
.radixBadge(variant: .outline, radius: .none, color: .blue)
2020
Text(new)
2121
.font(.footnote)
22-
.radixBadge(variant: .outline, radius: .large, color: .grass)
22+
.radixBadge(variant: .outline, radius: .large)
2323
Text(new)
2424
.font(.footnote)
25-
.radixBadge(variant: .outline, radius: .full, color: .grass)
25+
.radixBadge(variant: .outline, radius: .full, color: .orange)
2626
}
2727
HStack(spacing: 20) {
2828
Text(new)
2929
.font(.footnote)
30-
.radixBadge(variant: .soft, radius: .none, color: .grass)
30+
.radixBadge(variant: .soft, radius: .none, color: .blue)
3131
Text(new)
3232
.font(.footnote)
33-
.radixBadge(variant: .soft, radius: .large, color: .grass)
33+
.radixBadge(variant: .soft, radius: .large)
3434
Text(new)
3535
.font(.footnote)
36-
.radixBadge(variant: .soft, radius: .full, color: .grass)
36+
.radixBadge(variant: .soft, radius: .full, color: .orange)
3737
}
3838
HStack(spacing: 20) {
3939
Text(new)
4040
.font(.footnote)
41-
.radixBadge(variant: .solid, radius: .none, color: .grass)
41+
.radixBadge(variant: .solid, radius: .none, color: .blue)
4242
Text(new)
4343
.font(.footnote)
44-
.radixBadge(variant: .solid, radius: .large, color: .grass)
44+
.radixBadge(variant: .solid, radius: .large)
4545
Text(new)
4646
.font(.footnote)
47-
.radixBadge(variant: .solid, radius: .full, color: .grass)
47+
.radixBadge(variant: .solid, radius: .full, color: .orange)
4848
}
4949
HStack(spacing: 20) {
5050
Text(new)
5151
.font(.footnote)
52-
.radixBadge(variant: .surface, radius: .none, color: .grass)
52+
.radixBadge(variant: .surface, radius: .none, color: .blue)
5353
Text(new)
5454
.font(.footnote)
55-
.radixBadge(variant: .surface, radius: .large, color: .grass)
55+
.radixBadge(variant: .surface, radius: .large)
5656
Text(new)
5757
.font(.footnote)
58-
.radixBadge(variant: .surface, radius: .full, color: .grass)
58+
.radixBadge(variant: .surface, radius: .full, color: .orange)
5959
}
6060
}
6161
}

‎Sources/RadixUI/DemoViews/ToastDemoView.swift‎

Lines changed: 11 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,29 +15,28 @@ struct ToastDemoView: View {
1515
var body: some View {
1616
VStack(spacing: 25) {
1717
Button {
18-
presentInfoToast = true
18+
presentActionToast = true
1919
} label: {
2020
Label(
21-
"Present Bot Toast",
22-
imageName: "vercel-logo",
21+
"Present Top Toast",
22+
imageName: "arrow-up",
2323
imageSize: 20,
2424
bundle: .module
2525
)
2626
}
2727
.buttonStyle(
2828
.radixSolid(
2929
layout: .leading,
30-
radius: .full,
31-
color: .grass
30+
radius: .large
3231
),
3332
isLoading: .constant(false)
3433
)
3534
Button {
36-
presentActionToast = true
35+
presentInfoToast = true
3736
} label: {
3837
Label(
39-
"Present Top Toast",
40-
imageName: "vercel-logo",
38+
"Present Bot Toast",
39+
imageName: "arrow-down",
4140
imageSize: 20,
4241
bundle: .module
4342
)
@@ -60,16 +59,15 @@ struct ToastDemoView: View {
6059
) {
6160
Label(
6261
"This is a Radix Info Toast",
63-
imageName: "vercel-logo",
64-
imageSize: 20,
62+
imageName: "calendar",
63+
imageSize: 25,
6564
bundle: .module
6665
)
6766
}
6867
.radixActionToast(
6968
$presentActionToast,
7069
variant: .soft,
7170
position: .top,
72-
color: .grass,
7371
duration: 0
7472
) {
7573
presentInfoToast = true
@@ -83,8 +81,8 @@ struct ToastDemoView: View {
8381
} toastLabel: {
8482
Label(
8583
"Button Presents Info Toast",
86-
imageName: "vercel-logo",
87-
imageSize: 20,
84+
imageName: "calendar",
85+
imageSize: 25,
8886
bundle: .module
8987
)
9088
}

‎Sources/RadixUI/DemoViews/ToggleDemoView.swift‎

Lines changed: 3 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ struct Option: Identifiable, Equatable {
1616
struct ToggleDemoView: View {
1717

1818
@State private var checkbox = false
19-
@State private var switchSurface = false
20-
@State private var switchSoft = false
19+
@State private var switchToggle = false
2120
@State private var toggle = false
2221

2322
private var radixColor = RadixAutoColor.self
@@ -57,7 +56,7 @@ struct ToggleDemoView: View {
5756
)
5857
)
5958
}
60-
Toggle(isOn: $switchSurface) {
59+
Toggle(isOn: $switchToggle) {
6160
Text("Label Text")
6261
.foregroundStyle(radixColor.grass.text2)
6362
}
@@ -68,17 +67,6 @@ struct ToggleDemoView: View {
6867
color: .grass
6968
)
7069
)
71-
Toggle(isOn: $switchSoft) {
72-
Text("Label Text")
73-
.foregroundStyle(radixColor.grass.text2)
74-
}
75-
.toggleStyle(
76-
.radixSwitch(
77-
variant: .soft,
78-
radius: .full,
79-
color: .grass
80-
)
81-
)
8270
HStack {
8371
Text("Label Text")
8472
.foregroundStyle(radixColor.grass.text2)
@@ -92,9 +80,7 @@ struct ToggleDemoView: View {
9280
)
9381
}
9482
.toggleStyle(
95-
.radixToggle(
96-
color: .grass
97-
)
83+
.radixToggle(color: .grass)
9884
)
9985
}
10086
}

‎Sources/RadixUI/Helpers/Extensions/View+Extenstions.swift‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ extension View {
2828
_ isPresented: Binding<Bool>,
2929
variant: RadixToastVariant,
3030
position: RadixToastPosition,
31-
color: RadixAutoColor?,
31+
color: RadixAutoColor? = nil,
3232
duration: Int,
3333
toastLabel: @escaping () -> ToastLabel
3434
) -> some View {
@@ -50,7 +50,7 @@ extension View {
5050
_ isPresented: Binding<Bool>,
5151
variant: RadixToastVariant,
5252
position: RadixToastPosition,
53-
color: RadixAutoColor?,
53+
color: RadixAutoColor? = nil,
5454
duration: Int,
5555
buttonAction: @escaping () -> Void,
5656
buttonLabel: @escaping () -> ButtonLabel,
@@ -79,7 +79,7 @@ extension View where Self == Text {
7979
public func radixBadge(
8080
variant: RadixBadgeVariant,
8181
radius: RadixElementShapeRadius,
82-
color: RadixAutoColor
82+
color: RadixAutoColor? = nil
8383
) -> some View {
8484
self
8585
.modifier(
@@ -94,7 +94,7 @@ extension View where Self == Text {
9494
/// Modifies a Text View to become an Info Callout with Customizable Color
9595
public func radixInfoCallout(
9696
variant: RadixCalloutVariant,
97-
color: RadixAutoColor
97+
color: RadixAutoColor? = nil
9898
) -> some View {
9999
self
100100
.modifier(

‎Sources/RadixUI/RadixDesign/Badge/RadixBadge.swift‎

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,35 +13,44 @@ public struct RadixBadge: ViewModifier {
1313

1414
private var variant: RadixBadgeVariant
1515
private var radius: RadixElementShapeRadius
16-
private var color: RadixAutoColor
16+
private var color: RadixAutoColor?
1717

1818
init(
1919
variant: RadixBadgeVariant,
2020
radius: RadixElementShapeRadius,
21-
color: RadixAutoColor
21+
color: RadixAutoColor?
2222
) {
2323
self.variant = variant
2424
self.radius = radius
2525
self.color = color
2626
}
2727

28+
private var unwrappedColor: RadixAutoColor {
29+
guard let color else {
30+
return colorScheme == .light ? .blackA : .whiteA
31+
}
32+
return color
33+
}
34+
2835
private var badgeColor: [Color] {
2936
switch variant {
3037
// 1st Entry is Fill and 2nd is Stroke Colors
31-
case .outline: [ .clear, color.solid1 ]
32-
case .soft: [ color.component2, .clear ]
33-
case .solid: [ color.border3, .clear ]
34-
case .surface: [ color.background2, color.solid1 ]
38+
case .outline: [ .clear, unwrappedColor.solid1 ]
39+
case .soft: [ unwrappedColor.component2, .clear ]
40+
case .solid: [ unwrappedColor.solid1, .clear ]
41+
case .surface: [ unwrappedColor.background2, unwrappedColor.solid1 ]
3542
}
3643
}
3744

3845
private var fgColor: Color {
39-
guard color != .blackA else { return .whiteA11 }
40-
guard color != .whiteA else { return .blackA11 }
4146
guard variant != .solid else {
42-
return colorScheme == .light ? color.background2 : color.text2
47+
if unwrappedColor == .blackA { return .whiteA11 }
48+
if unwrappedColor == .whiteA { return .blackA11 }
49+
return colorScheme == .light
50+
? unwrappedColor.background2
51+
: unwrappedColor.text2
4352
}
44-
return color.text1
53+
return unwrappedColor.text1
4554
}
4655

4756
public func body(content: Content) -> some View {

‎Sources/RadixUI/RadixDesign/Button/RadixButtonLabelStyle.swift‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -137,11 +137,19 @@ extension RadixButtonLabelStyle {
137137
return 0.6
138138
}
139139

140+
private var isBlackOrWhite: Bool {
141+
let isBlack = color == .blackA
142+
let isWhite = color == .whiteA
143+
return isBlack || isWhite
144+
}
145+
140146
private var fgColor: Color {
141-
guard color != .blackA else { return .whiteA11 }
142-
guard color != .whiteA else { return .blackA11 }
143147
guard variant != .solid else {
144-
return colorScheme == .light ? color.background2 : color.text2
148+
if color == .blackA { return .whiteA11 }
149+
if color == .whiteA { return .blackA11 }
150+
return colorScheme == .light
151+
? color.background2
152+
: color.text2
145153
}
146154
return color.text1
147155
}
@@ -166,7 +174,9 @@ extension RadixButtonLabelStyle {
166174
]
167175
case .solid:
168176
[
169-
isPressed ? color.solid1 : color.border3,
177+
isPressed
178+
? (isBlackOrWhite ? color.text2 : color.solid2)
179+
: (isBlackOrWhite ? color.text1 : color.solid1),
170180
.clear
171181
]
172182
case .surface:

‎Sources/RadixUI/RadixDesign/Button/RadixButtonStyle.swift‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import SwiftUI
99

1010
public struct RadixButtonStyle: ButtonStyle {
1111

12+
@Environment(\.colorScheme) private var colorScheme
1213
@Environment(\.isEnabled) private var isEnabled
1314
@Environment(\.isLoading) private var isLoading
1415

@@ -30,7 +31,9 @@ public struct RadixButtonStyle: ButtonStyle {
3031
}
3132

3233
private var unwrappedColor: RadixAutoColor {
33-
guard let color else { return .blue }
34+
guard let color else {
35+
return colorScheme == .light ? .blackA : .whiteA
36+
}
3437
return color
3538
}
3639

‎Sources/RadixUI/RadixDesign/Callout/RadixCallout.swift‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,35 @@ import SwiftUI
99

1010
public struct RadixCallout: ViewModifier {
1111

12+
@Environment(\.colorScheme) private var colorScheme
13+
1214
private var variant: RadixCalloutVariant
1315
private var role: RadixCalloutRole
14-
private var color: RadixAutoColor
16+
private var color: RadixAutoColor?
1517

1618
init(
1719
variant: RadixCalloutVariant,
1820
role: RadixCalloutRole,
19-
color: RadixAutoColor
21+
color: RadixAutoColor?
2022
) {
2123
self.variant = variant
2224
self.role = role
2325
self.color = color
2426
}
2527

28+
private var unwrappedColor: RadixAutoColor {
29+
guard let color else {
30+
return colorScheme == .light ? .blackA : .whiteA
31+
}
32+
return color
33+
}
34+
2635
private var calloutColor: [Color] {
2736
switch variant {
2837
// 1st Entry is Fill and 2nd is Stroke Colors
29-
case .outline: [ .clear, color.solid1 ]
30-
case .soft: [ color.component2, .clear ]
31-
case .surface: [ color.background2, color.solid1 ]
38+
case .outline: [ .clear, unwrappedColor.solid1 ]
39+
case .soft: [ unwrappedColor.component2, .clear ]
40+
case .surface: [ unwrappedColor.background2, unwrappedColor.solid1 ]
3241
}
3342
}
3443

@@ -58,7 +67,7 @@ public struct RadixCallout: ViewModifier {
5867
)
5968
}
6069
)
61-
.foregroundStyle(color.solid2)
70+
.foregroundStyle(unwrappedColor.solid2)
6271
}
6372

6473
}

0 commit comments

Comments
 (0)