Skip to content

Add design system constants and replace hardcoded values #25

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dadachi merged 4 commits into from
Mar 30, 2026
Merged

Add design system constants and replace hardcoded values #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
72573a2
Add design system constants (spacing, animation, glass, layout, corne…
dadachi Mar 29, 2026
51bb185
fix Design Constants
dadachi Mar 29, 2026
69d50a6
Replace hardcoded spacing and corner radius values with NativeAppTemp…
dadachi Mar 29, 2026
8d92dfb
Fix SwiftLint line length violations by wrapping long lines
dadachi Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 82 additions & 0 deletions NativeAppTemplate/Constants.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,95 @@
// NativeAppTemplate
//

import SwiftUI
import typealias Foundation.TimeInterval

extension Int {
static let minimumPasswordLength: Int = 8
static let invitationCodeLength: Int = 6
}

// MARK: - Design Constants

enum NativeAppTemplateConstants {
// MARK: - Spacing

enum Spacing {
/// 4pt - Micro spacing, tight padding
static let xxxs: CGFloat = 4

/// 8pt - Minimal spacing, compact layouts
static let xxs: CGFloat = 8

/// 12pt - Small spacing, close elements
static let xs: CGFloat = 12

/// 16pt - Base spacing unit, standard padding
static let sm: CGFloat = 16

/// 24pt - Medium spacing, section separation
static let md: CGFloat = 24

/// 32pt - Large spacing, major sections
static let lg: CGFloat = 32

/// 48pt - Extra large spacing, screen margins
static let xl: CGFloat = 48

/// 64pt - Very large spacing, major divisions
static let xxl: CGFloat = 64

/// 96pt - Dramatic spacing, large separations
static let xxxl: CGFloat = 96

/// 128pt - Massive spacing, hero sections
static let xxxxl: CGFloat = 128
}

// MARK: - Animation Durations

enum Animation {
/// 0.15s - Fast animations, micro-interactions
static let fast: Double = 0.15

/// 0.3s - Standard animations, most UI transitions
static let standard: Double = 0.3
}

// MARK: - Glass

enum Glass {
static let borderOpacity: Double = 0.2
static let shadowOpacity: Double = 0.15
}

// MARK: - Layout

enum Layout {
static let borderWidth: CGFloat = 1
static let shadowRadius: CGFloat = 8
}

// MARK: - Corner Radius

enum CornerRadius {
/// 4pt - Minimal rounding
static let xs: CGFloat = 4

/// 8pt - Small rounding, buttons
static let sm: CGFloat = 8

/// 12pt - Medium rounding, cards (default)
static let md: CGFloat = 12

/// 16pt - Large rounding, prominent cards
static let lg: CGFloat = 16

/// 24pt - Extra large rounding, hero elements
static let xl: CGFloat = 24
}
}

extension String {
#if DEBUG
// static let scheme: String = "http"
Expand Down
4 changes: 2 additions & 2 deletions NativeAppTemplate/UI/App Root/AcceptPrivacyView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ private extension AcceptPrivacyView {
VStack {
let agreement = "Please accept updated [\(String.privacyPolicy)](\(String.privacyPolicyUrl))."
Text(.init(agreement))
.padding(.top, 48)
.padding(.top, NativeAppTemplateConstants.Spacing.xl)

MainButtonView(title: String.accept, type: .primary(withArrow: false)) {
viewModel.updateConfirmedPrivacyVersion()
}
.padding(24)
.padding(NativeAppTemplateConstants.Spacing.md)

Spacer()
}
Expand Down
4 changes: 2 additions & 2 deletions NativeAppTemplate/UI/App Root/AcceptTermsView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,12 @@ private extension AcceptTermsView {
VStack {
let agreement = "Please accept updated [\(String.termsOfUse)](\(String.termsOfUseUrl))."
Text(.init(agreement))
.padding(.top, 48)
.padding(.top, NativeAppTemplateConstants.Spacing.xl)

MainButtonView(title: String.accept, type: .primary(withArrow: false)) {
viewModel.updateConfirmedTermsVersion()
}
.padding(24)
.padding(NativeAppTemplateConstants.Spacing.md)

Spacer()
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/App Root/OnboardingView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ private extension OnboardingView {
Image(image)
.resizable()
.aspectRatio(contentMode: .fit)
.padding(.top, 24)
.padding(.top, NativeAppTemplateConstants.Spacing.md)
.padding(.bottom, isPortraitImage ? 0 : 192)

ZStack(alignment: .top) {
Expand Down
14 changes: 7 additions & 7 deletions NativeAppTemplate/UI/App Root/SignUpOrSignInView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,8 @@ private extension SignUpOrSignInView {
"[\(String.termsOfUse)](\(String.termsOfUseUrl)) " +
"and [\(String.privacyPolicy)](\(String.privacyPolicyUrl))."
Text(.init(agreement))
.padding(.top, 16)
.padding(.horizontal, 24)
.padding(.top, NativeAppTemplateConstants.Spacing.sm)
.padding(.horizontal, NativeAppTemplateConstants.Spacing.md)

VStack {
NavigationLink(destination: SignUpView(
Expand All @@ -49,12 +49,12 @@ private extension SignUpOrSignInView {
)
)) {
MainButtonImageView(title: String.signUpForAnAccount, type: .primary(withArrow: false))
.padding(.top, 8)
.padding(.horizontal, 24)
.padding(.top, NativeAppTemplateConstants.Spacing.xxs)
.padding(.horizontal, NativeAppTemplateConstants.Spacing.md)
}

Text(verbatim: "or")
.padding(.top, 8)
.padding(.top, NativeAppTemplateConstants.Spacing.xxs)

NavigationLink(destination: SignInEmailAndPasswordView(
viewModel: SignInEmailAndPasswordViewModel(
Expand All @@ -65,9 +65,9 @@ private extension SignUpOrSignInView {
Text(String.signInToYourAccount)
.font(.uiLabel)
}
.padding(.top, 8)
.padding(.top, NativeAppTemplateConstants.Spacing.xxs)
}
.padding(.top, 4)
.padding(.top, NativeAppTemplateConstants.Spacing.xxxs)

Spacer()
}
Expand Down
6 changes: 3 additions & 3 deletions NativeAppTemplate/UI/App Root/SnackbarView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,12 +49,12 @@ struct SnackbarView: View {
} label: {
Image(systemName: "xmark")
.resizable()
.frame(width: 16, height: 16)
.frame(width: NativeAppTemplateConstants.Spacing.sm, height: NativeAppTemplateConstants.Spacing.sm)
}
.foregroundStyle(.snackText)
}
.padding(.vertical, 16.0)
.padding(.horizontal, 24.0)
.padding(.vertical, NativeAppTemplateConstants.Spacing.sm)
.padding(.horizontal, NativeAppTemplateConstants.Spacing.md)
.background(state.status.color)
.overlay(
Rectangle().frame(width: nil, height: 1, alignment: .top).foregroundColor(.lightestAccent),
Expand Down
6 changes: 3 additions & 3 deletions NativeAppTemplate/UI/Empty States/ErrorView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ extension ErrorView: View {
Image(systemName: "exclamationmark.triangle")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 96)
.frame(width: NativeAppTemplateConstants.Spacing.xxxl)
.padding()
.foregroundStyle(.titleText)

Expand All @@ -48,14 +48,14 @@ extension ErrorView: View {
.font(.uiLabel)
.foregroundStyle(.contentText)
.multilineTextAlignment(.center)
.padding(.top, 4)
.padding(.top, NativeAppTemplateConstants.Spacing.xxxs)

MainButtonView(
title: buttonTitle,
type: .primary(withArrow: false),
callback: buttonAction
)
.padding(32)
.padding(NativeAppTemplateConstants.Spacing.lg)

Spacer()
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Empty States/LoadingView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ struct LoadingView: View {
var body: some View {
VStack {
ProgressView().scaleEffect(1.0, anchor: .center)
.padding([.bottom], 12)
.padding([.bottom], NativeAppTemplateConstants.Spacing.xs)
Text(String.loading)
.font(.uiHeadline)
}
Expand Down
4 changes: 2 additions & 2 deletions NativeAppTemplate/UI/Empty States/NeedAppUpdatesView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ struct NeedAppUpdatesView: View {
Image(systemName: "exclamationmark.arrow.circlepath")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 96)
.frame(width: NativeAppTemplateConstants.Spacing.xxxl)
.foregroundStyle(.titleText)
.padding()
Text(String.updateApp)
Expand All @@ -22,7 +22,7 @@ struct NeedAppUpdatesView: View {
.padding(.top)
Text(String.installNewVersionApp)
.foregroundStyle(.contentText)
.padding(.top, 4)
.padding(.top, NativeAppTemplateConstants.Spacing.xxxs)
Button {
openURL(URL(string: String.appStoreUrl)!)
} label: {
Expand Down
8 changes: 4 additions & 4 deletions NativeAppTemplate/UI/Empty States/OfflineView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ struct OfflineView: View {
Image(systemName: "wifi.slash")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 96)
.frame(width: NativeAppTemplateConstants.Spacing.xxxl)
.padding()
.foregroundStyle(.titleText)

Expand All @@ -23,11 +23,11 @@ struct OfflineView: View {

Text(String.checkInternetConnection)
.font(.uiLabel)
.lineSpacing(8)
.lineSpacing(NativeAppTemplateConstants.Spacing.xxs)
.foregroundStyle(.contentText)
.multilineTextAlignment(.center)
.padding(.top, 4)
.padding(.horizontal, 32)
.padding(.top, NativeAppTemplateConstants.Spacing.xxxs)
.padding(.horizontal, NativeAppTemplateConstants.Spacing.lg)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.backgroundColor)
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Scan/CompleteScanResultView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ private extension CompleteScanResultView {
.font(.uiFootnote)
.foregroundStyle(.successSecondaryForeground)
}
.padding(.top, 8)
.padding(.top, NativeAppTemplateConstants.Spacing.xxs)
}
.backgroundStyle(.successBackground)
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Scan/ScanView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ private extension ScanView {

var scanView: some View {
ScrollView {
VStack(spacing: 64) {
VStack(spacing: NativeAppTemplateConstants.Spacing.xxl) {
switch viewModel.scanType {
case .completeScan:
if !viewModel.isShowingResetConfirmationDialog {
Expand Down
6 changes: 5 additions & 1 deletion NativeAppTemplate/UI/Scan/ShowTagInfoScanResultView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,11 @@ private extension ShowTagInfoScanResultView {
.foregroundStyle(.coloredSecondaryFootnoteText)
}

Grid(alignment: .leadingFirstTextBaseline, horizontalSpacing: 12, verticalSpacing: 8) {
Grid(
alignment: .leadingFirstTextBaseline,
horizontalSpacing: NativeAppTemplateConstants.Spacing.xs,
verticalSpacing: NativeAppTemplateConstants.Spacing.xxs
) {
GridRow {
Image(systemName: "storefront")
.frame(width: imageSize, height: imageSize)
Expand Down
20 changes: 10 additions & 10 deletions NativeAppTemplate/UI/Shared/MainButtonView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ struct MainButtonView: View {
Text(title)
.font(.uiButtonLabelLarge)
.foregroundStyle(type.color)
.padding(16)
.padding(NativeAppTemplateConstants.Spacing.sm)
// If commenting out below and select max large font size on settings accessibility, you will
// not be enable to tap Scan button on Scan tab.
// .background(GeometryReader { proxy in
Expand All @@ -92,15 +92,15 @@ struct MainButtonView: View {
.foregroundStyle(type.color)
.background(
Color.white
.cornerRadius(8)
.padding(12)
.cornerRadius(NativeAppTemplateConstants.CornerRadius.sm)
.padding(NativeAppTemplateConstants.Spacing.xs)
)
}
}
}
.frame(height: height)
.background(
RoundedRectangle(cornerRadius: 8)
RoundedRectangle(cornerRadius: NativeAppTemplateConstants.CornerRadius.sm)
.stroke(type.color, lineWidth: 2)
)
.onPreferenceChange(SizeKey.self) { size in
Expand Down Expand Up @@ -133,7 +133,7 @@ struct MainButtonImageView: View {
Text(title)
.font(.uiButtonLabelLarge)
.foregroundStyle(type.color)
.padding(16)
.padding(NativeAppTemplateConstants.Spacing.sm)
.background(GeometryReader { proxy in
Color.clear.preference(key: SizeKey.self, value: proxy.size)
})
Expand All @@ -151,15 +151,15 @@ struct MainButtonImageView: View {
.foregroundStyle(type.color)
.background(
Color.white
.cornerRadius(8)
.padding(12)
.cornerRadius(NativeAppTemplateConstants.CornerRadius.sm)
.padding(NativeAppTemplateConstants.Spacing.xs)
)
}
}
}
.frame(height: height)
.background(
RoundedRectangle(cornerRadius: 8)
RoundedRectangle(cornerRadius: NativeAppTemplateConstants.CornerRadius.sm)
.stroke(type.color, lineWidth: 2)
)
.onPreferenceChange(SizeKey.self) { size in
Expand All @@ -174,7 +174,7 @@ struct MainButtonImageView: View {
struct PrimaryButtonView_Previews: PreviewProvider {
static var previews: some View {
ScrollView {
VStack(spacing: 24) {
VStack(spacing: NativeAppTemplateConstants.Spacing.md) {
MainButtonView(title: "Got It!", type: .primary(withArrow: false), callback: {})
MainButtonView(title: "Got It!", type: .primary(withArrow: true), callback: {})
MainButtonView(title: "Got It!", type: .secondary(withArrow: false), callback: {})
Expand All @@ -189,7 +189,7 @@ struct PrimaryButtonView_Previews: PreviewProvider {
MainButtonImageView(title: "Got It!", type: .secondary(withArrow: false))
}
}
.padding(24)
.padding(NativeAppTemplateConstants.Spacing.md)
.background(Color.backgroundColor)
.inAllColorSchemes
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Shared/Tags/CompletedTag.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ struct CompletedTag: View {

struct CompletedTag_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: 12) {
VStack(spacing: NativeAppTemplateConstants.Spacing.xs) {
completedTag.colorScheme(.light)
completedTag.colorScheme(.dark)
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Shared/Tags/CustomerScannedTag.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ struct CustomerScannedTag: View {

struct CustomerScannedTag_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: 12) {
VStack(spacing: NativeAppTemplateConstants.Spacing.xs) {
customerScannedTag.colorScheme(.light)
customerScannedTag.colorScheme(.dark)
}
Expand Down
2 changes: 1 addition & 1 deletion NativeAppTemplate/UI/Shared/Tags/IdlingTagView.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ struct IdlingTag: View {

struct IdlingTag_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: 12) {
VStack(spacing: NativeAppTemplateConstants.Spacing.xs) {
idlingTag.colorScheme(.light)
idlingTag.colorScheme(.dark)
}
Expand Down
Loading
Loading