gravitational/teleport
1
0
Fork 0
mirror of https://github.com/gravitational/teleport.git synced 2026-10-11 22:49:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

iOS: Add color design tokens (#68317)

Browse Source 
* Add Color assets

* Update Icon.swift and LandingView.swift to use the new color tokens

* Add non-default foreground colors

* Remove unused primaryBackgroundPressed color

* Update LandingView to use new foreground color tokens

* Update EnrollDeviceView to use new color tokens
This commit is contained in:
Gustavo Medori
2026-07-06 21:09:29 +00:00
committed by GitHub
parent 17f6eb039a
commit ab6da07259
23 changed files with 503 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
mobile/Verify/Verify/App Lifecycle/LandingView.swift
+10 -4
View File
@@ -40,6 +40,7 @@ struct LandingView: View {
.scrollBounceBehavior(.basedOnSize)
}
.padding(.horizontal)
.background(Color.Background.depth3)
// MARK: Navigation
@@ -72,11 +73,11 @@ extension LandingView {
private var titleBlock: some View {
VStack(spacing: .small) {
Text("Scan QR code")
.font(.title)
.font(.title2)
.fontWeight(.semibold)
Text("Enroll this device for your cluster by scanning the QR code in your web browser")
.font(.callout)
.multilineTextAlignment(.center)
.foregroundStyle(.secondary)
.foregroundStyle(Color.Foreground.slightlyMuted)
}
}
@@ -114,13 +115,18 @@ extension LandingView {
private func instructionStep(stepNumber: UInt, @ViewBuilder label: () -> some View) -> some View {
Label {
label()
.font(.callout)
.foregroundStyle(Color.Foreground.slightlyMuted)
} icon: {
Image(systemName: "\(stepNumber).circle.fill")
.foregroundStyle(.tint.opacity(0.8))
}
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
.background(RoundedRectangle(cornerRadius: .small).fill(.background).strokeBorder(.separator))
.background(
RoundedRectangle(cornerRadius: .small)
.fill(Color.Background.depth2),
)
}
private var rightArrow: Image {
mobile/Verify/Verify/App Lifecycle/VerifyApp.swift
+1
View File
@@ -69,6 +69,7 @@ struct VerifyApp: App {
var body: some Scene {
WindowGroup {
LandingView(viewModel: appModel.landingViewModel)
.tint(.teleport)
.onOpenURL { url in
appModel.openDeepLink(url)
}
mobile/Verify/Verify/Components/Icon.swift
+2 -2
View File
@@ -40,8 +40,8 @@ struct Icon: View {
systemName: String,
iconScale: CGFloat = 0.45,
foreground: some ShapeStyle = .foreground,
fillStyle: some ShapeStyle = .background,
strokeStyle: some ShapeStyle = .separator,
fillStyle: some ShapeStyle = Color.Background.depth2,
strokeStyle: some ShapeStyle = Color.neutral1,
maxWidth: CGFloat? = .xlarge * 2,
) {
self.systemName = systemName
mobile/Verify/Verify/Design/Color.xcassets/Background/Contents.json
+9
View File
@@ -0,0 +1,9 @@
{
"info" : {
"author" : "xcode",
"version" : 1
},
"properties" : {
"provides-namespace" : true
}
}
mobile/Verify/Verify/Design/Color.xcassets/Button/primaryBackgroundPressed.colorset/Contents.json → mobile/Verify/Verify/Design/Color.xcassets/Background/depth1.colorset/Contents.json
+6 -6
View File
@@ -5,9 +5,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.475",
"green" : "0.110",
"red" : "0.192"
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
@@ -23,9 +23,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "1.000",
"green" : "0.714",
"red" : "0.773"
"blue" : "0.475",
"green" : "0.255",
"red" : "0.204"
}
},
"idiom" : "universal"
mobile/Verify/Verify/Design/Color.xcassets/Background/depth2.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.988",
"green" : "0.984",
"red" : "0.984"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.349",
"green" : "0.173",
"red" : "0.133"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Background/depth3.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.957",
"green" : "0.949",
"red" : "0.945"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.239",
"green" : "0.078",
"red" : "0.047"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Background/depth4.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.918",
"green" : "0.914",
"red" : "0.902"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Button/primayForeground.colorset/Contents.json → mobile/Verify/Verify/Design/Color.xcassets/Button/primaryForeground.colorset/Contents.json
View File
mobile/Verify/Verify/Design/Color.xcassets/Foreground/Contents.json
+9
View File
@@ -0,0 +1,9 @@
{
"info" : {
"author" : "xcode",
"version" : 1
},
"properties" : {
"provides-namespace" : true
}
}
mobile/Verify/Verify/Design/Color.xcassets/Foreground/disabled.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.360",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.360",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Foreground/muted.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.540",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.540",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Foreground/slightlyMuted.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.720",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.720",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/accent.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.729",
"green" : "0.451",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "1.000",
"green" : "0.620",
"red" : "0.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/alert.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.000",
"green" : "0.671",
"red" : "1.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.000",
"green" : "0.671",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/danger.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.176",
"green" : "0.216",
"red" : "0.800"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.341",
"green" : "0.384",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/neutral1.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.060",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.070",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/neutral2.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.130",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.130",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/neutral3.colorset/Contents.json
+38
View File
@@ -0,0 +1,38 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.180",
"blue" : "0.000",
"green" : "0.000",
"red" : "0.000"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "0.180",
"blue" : "1.000",
"green" : "1.000",
"red" : "1.000"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}
mobile/Verify/Verify/Design/Color.xcassets/Button/primaryBackground.colorset/Contents.json → mobile/Verify/Verify/Design/Color.xcassets/success.colorset/Contents.json
+6 -6
View File
@@ -5,9 +5,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0.788",
"green" : "0.184",
"red" : "0.318"
"blue" : "0.447",
"green" : "0.522",
"red" : "0.000"
}
},
"idiom" : "universal"
@@ -23,9 +23,9 @@
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "1.000",
"green" : "0.522",
"red" : "0.624"
"blue" : "0.651",
"green" : "0.749",
"red" : "0.000"
}
},
"idiom" : "universal"
mobile/Verify/Verify/Assets.xcassets/AccentColor.colorset/Contents.json → mobile/Verify/Verify/Design/Color.xcassets/teleport.colorset/Contents.json
View File
mobile/Verify/Verify/Design/PrimaryButtonStyle.swift
+2 -2
View File
@@ -21,10 +21,10 @@ struct PrimaryButtonStyle: PrimitiveButtonStyle {
func makeBody(configuration: Configuration) -> some View {
Button(action: configuration.trigger) {
configuration.label
.foregroundStyle(Color.Button.primayForeground)
.foregroundStyle(Color.Button.primaryForeground)
}
.buttonStyle(.borderedProminent)
.tint(Color.Button.primaryBackground)
.tint(.teleport)
}
}
mobile/Verify/Verify/Enrollment/EnrollDeviceView.swift
+2 -2
View File
@@ -40,7 +40,7 @@ struct EnrollDeviceView: View {
}
.padding()
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color(.systemGroupedBackground))
.background(Color.Background.depth3)
// MARK: Navigation
@@ -61,7 +61,7 @@ extension EnrollDeviceView {
.font(.title2)
.fontWeight(.semibold)
Text("To finish enrolling this device, approve the request from your account settings on another device.")
.foregroundStyle(.secondary)
.foregroundStyle(Color.Foreground.slightlyMuted)
}
var requestNowButton: some View {