refactor: Implement design tokens and pixel-perfect input UI #1393

OnurVar · 2025-10-29T22:13:10Z

Description

Summary

Refactor CheckoutComponents to use a design token system and consolidate input field components for
pixel-perfect Figma implementation.

Changes

Design Token System

JSON-based token definitions (base + dark mode)
Type-safe Swift code generation from tokens
Light/dark mode support with automatic switching
Consistent spacing, sizing, and color values

Component Refactoring

PrimerInputFieldContainer - Unified container for all inputs
CardNetworkBadge - Extracted reusable component
UITextField Extensions - Shared styling utilities
Pixel-perfect heights matching Figma designs

Font System

InterVariable font integration
Optimized loading with caching
DEBUG conditionals for SwiftUI previews

Benefits

Eliminates hardcoded values throughout codebase
Single source of truth for design specifications
Easy theme customization via token overrides
Consistent UI across all input components

Technical Implementation

Token system in DesignTokens/ with JSON source files
Generated Swift code in Internal/Tokens/
Reusable input container in Presentation/Components/Containers/
Shared styling utilities in Presentation/Components/Utilities/

Testing

All existing tests pass
Verified light/dark mode switching
Validated pixel-perfect dimensions against Figma
Tested font loading and fallback behavior

github-actions · 2025-10-29T23:28:12Z

	Warnings
⚠️	> Pull Request size seems relatively large. If this Pull Request contains multiple changes, please split each into separate PR will helps faster, easier review.

Generated by 🚫 Danger Swift against 935ec59

github-actions · 2025-10-29T23:50:01Z

Appetize link: https://appetize.io/app/xr7cjgvybkyhiuxfg7f773qeou

borisprimer

Amazing work! Few minor things to look at...

borisprimer · 2025-10-31T11:40:10Z

...PrimerSDK/Classes/CheckoutComponents/Internal/Presentation/Components/CardNetworkBadge.swift

+
+#if DEBUG
+@available(iOS 15.0, *)
+struct CardNetworkBadge_Previews: PreviewProvider {


Amazing job adding all these previews!

borisprimer · 2025-10-31T11:43:07Z

...s/Internal/Presentation/Components/Infrastructure/Containers/PrimerInputFieldContainer.swift

+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: iconSize, height: iconSize)
+                    .foregroundColor(PrimerCheckoutColors.iconNegative(tokens: tokens))
+                    .offset(x: hasError ? 0 : -10)


Magic numbers

borisprimer · 2025-10-31T11:44:40Z

...s/Internal/Presentation/Components/Infrastructure/Containers/PrimerInputFieldContainer.swift

+            .offset(y: hasError ? 0 : -10)
+            .opacity(hasError ? 1.0 : 0.0)
+            .padding(.top, hasError ? PrimerSpacing.xsmall(tokens: tokens) : 0)
+            .animation(.spring(response: 0.3, dampingFraction: 0.7), value: hasError)


Magic numbers... can we somehow centralize this animation for future reuse?

borisprimer · 2025-10-31T11:45:55Z

Sources/PrimerSDK/Classes/CheckoutComponents/Internal/Tokens/FontRegistration.swift

+            forResource: fontNameWithoutExt,
+            withExtension: "ttf"
+        ) else {
+            return


Font loading failures are silently ignored.

other places as well

borisprimer · 2025-10-31T11:48:56Z

...s/Internal/Presentation/Components/Infrastructure/Containers/PrimerInputFieldContainer.swift

+
+/// Generic container for Primer input fields that provides consistent styling, layout, and error handling
+@available(iOS 15.0, *)
+struct PrimerInputFieldContainer<Content: View, RightContent: View>: View {


Observation: Good use of generics, but the RightContent type is optional. Consider using a different pattern:

// Alternative approach
struct PrimerInputFieldContainer<Content: View>: View {
let rightComponent: (() -> AnyView)?
}

This would simplify the type signature when RightContent isn't needed.

semirp · 2025-10-31T11:54:37Z

...PrimerSDK/Classes/CheckoutComponents/Internal/Presentation/Components/CardNetworkBadge.swift

+//
+//  CardNetworkBadge.swift
+//  PrimerSDK - CheckoutComponents
+//
+//  Created by Boris on 16.7.25.
+//
+


@henry-cooper-primer is there a way to standardize these headers for all team members?

That's just AI, marking everything as 'Created by Boris' 😂 I will remove those in the next commit.

I am referring to this

Yep should be a swift format rule - added

This file was created long before the Swift Format. It's a good point, Semir. Can we add the ticket to unify these in CheckoutComponents @OnurVar?

I’ve created the task and will handle these headers separately.

Replace hardcoded values with token-based design system and consolidate input components for pixel-perfect Figma implementation. Design System: - Add DesignTokens with light/dark mode JSON configurations - Implement token generator and processor for type-safe access - Add InterVariable font with optimized loading - Support dynamic appearance mode switching Component Refactoring: - Create PrimerInputFieldContainer for consistent input styling - Extract CardNetworkBadge as reusable component - Add UITextField styling extensions for shared behavior - Consolidate all input fields to use container pattern - Apply pixel-perfect height constraints matching Figma Technical Details: - Token system generates Swift code from JSON definitions - Container provides unified error handling and layout - Font registration uses DEBUG conditionals for preview support - All input components share consistent padding and spacing - Design tokens support theme overrides and customization This establishes the foundation for scalable, design-driven UI development with consistent styling across all components.

Font loading failures were previously silently ignored. Added error logging for all failure points and fixed memory leak in error handling.

Split container into focused files for better maintainability: - Core struct and convenience initializer in main file - View rendering logic in +Rendering extension - Styling properties in +Styling extension - Preview helpers in +PreviewHelpers extension Updated preview format to use #Preview macro and changed access control to internal to support multi-file organization.

Simplifies color system naming by removing redundant Primer prefix. Updates all references across CheckoutComponents module.

Replace custom headers with standard Primer SDK copyright format in 5 internal CheckoutComponents files to pass CI linting checks. Files updated: - PrimerLayout.swift - MockCardFormScope.swift - MockDIContainer.swift - MockDesignTokens.swift - MockValidationService.swift

henry-cooper-primer · 2025-11-06T09:33:36Z

...PrimerSDK/Classes/CheckoutComponents/Internal/Presentation/Components/CardNetworkBadge.swift

+
+    // MARK: - Body
+
+    @ViewBuilder


I think this is view builder by default

henry-cooper-primer · 2025-11-06T09:34:06Z

...PrimerSDK/Classes/CheckoutComponents/Internal/Presentation/Components/CardNetworkBadge.swift

+
+#if DEBUG
+    @available(iOS 15.0, *)
+    struct CardNetworkBadge_Previews: PreviewProvider {


can we use modern preview macros?

henry-cooper-primer · 2025-11-06T09:35:58Z

...entation/Components/Infrastructure/Containers/PrimerInputFieldContainer+PreviewHelpers.swift

+#if DEBUG
+@available(iOS 15.0, *)
+struct PreviewContainer: View {
+    let label: String?


these can be private

henry-cooper-primer · 2025-11-06T09:40:22Z

...entation/Components/Infrastructure/Containers/PrimerInputFieldContainer+PreviewHelpers.swift

+        self.label = label
+        self.text = text
+        self.errorMessage = errorMessage
+        self._currentText = State(initialValue: text)


Better to use wrappedValue (they do the same thing but initialValue is technically legacy. Same elsewhere

henry-cooper-primer · 2025-11-06T09:42:58Z

...nts/Internal/Presentation/Components/Infrastructure/Utilities/PrimerTextFieldExtension.swift

+        isSecureTextEntry: false
+    )
+
+    /// Configuration for email input


Please can we avoid these types of comments?

henry-cooper-primer · 2025-11-06T09:44:06Z

...nts/Internal/Presentation/Components/Infrastructure/Utilities/PrimerTextFieldExtension.swift

+        autocorrectionType: .no,
+        textContentType: .emailAddress,
+        returnKeyType: .done,
+        isSecureTextEntry: false


since there are default values in the initialiser, can we make use of them here and elsewhere so we can slim down these properties

henry-cooper-primer · 2025-11-06T09:45:04Z

...nts/Internal/Presentation/Components/Infrastructure/Utilities/PrimerTextFieldExtension.swift

+@available(iOS 15.0, *)
+extension UITextField {
+    /// Configures the text field with Primer design tokens and standard settings
+    func configurePrimerStyle(


Probably slightly too long, I might consider breaking this up into two or three methods

henry-cooper-primer · 2025-11-06T09:50:50Z

...nts/Internal/Presentation/Components/Infrastructure/Utilities/PrimerTextFieldExtension.swift

+        let doneButton = UIButton(type: .system)
+        doneButton.setTitle("Done", for: .normal)
+        doneButton.titleLabel?.font = UIFont.systemFont(ofSize: 17, weight: .medium)
+        if let target = doneButtonTarget {


we can use shorthand syntax here

OnurVar · 2025-11-06T23:04:25Z

@henry-cooper-primer All review comments have been addressed.

- Use modern #Preview macros instead of PreviewProvider - Make preview helper properties private - Use wrappedValue instead of initialValue for State - Remove redundant comments - Simplify configuration properties with default values - Refactor configurePrimerStyle into focused helper methods - Use Swift shorthand syntax for optional binding (if let x)

sonarqubecloud · 2025-11-06T23:24:40Z

Quality Gate failed

Failed conditions
1.5% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

OnurVar force-pushed the ov/feat/pixel-perfect-checkout-components branch from a1598dc to 16f1972 Compare October 29, 2025 23:27

OnurVar force-pushed the ov/feat/pixel-perfect-checkout-components branch from 3797385 to 990551b Compare October 30, 2025 12:57

OnurVar changed the title ~~Ov/feat/pixel perfect checkout components~~ refactor: Implement design tokens and pixel-perfect input UI Oct 30, 2025

OnurVar self-assigned this Oct 30, 2025

OnurVar force-pushed the ov/feat/pixel-perfect-checkout-components branch from 990551b to f08ddd3 Compare October 30, 2025 13:05

OnurVar marked this pull request as ready for review October 30, 2025 13:06

OnurVar requested review from a team as code owners October 30, 2025 13:06

borisprimer reviewed Oct 31, 2025

View reviewed changes

semirp reviewed Oct 31, 2025

View reviewed changes

henry-cooper-primer force-pushed the ov/feat/pixel-perfect-checkout-components branch from e4587de to d4c9da6 Compare November 5, 2025 11:46

OnurVar and others added 6 commits November 5, 2025 19:32

chore: Add standard header as SwiftFormat rule (#1396)

c5838b0

refactor: Reorganize input fields into subfolders

836e000

refactor: Extract error animations into reusable modifier

ca0b508

fix: Add error logging to font registration

03c8baf

Font loading failures were previously silently ignored. Added error logging for all failure points and fixed memory leak in error handling.

OnurVar force-pushed the ov/feat/pixel-perfect-checkout-components branch from d4c9da6 to a0b503d Compare November 5, 2025 16:35

OnurVar added 2 commits November 5, 2025 19:53

refactor: Rename PrimerCheckoutColors to CheckoutColors

d92af3e

Simplifies color system naming by removing redundant Primer prefix. Updates all references across CheckoutComponents module.

henry-cooper-primer reviewed Nov 6, 2025

View reviewed changes

OnurVar force-pushed the ov/feat/pixel-perfect-checkout-components branch from f739563 to 935ec59 Compare November 6, 2025 23:12

refactor: Implement design tokens and pixel-perfect input UI #1393

Are you sure you want to change the base?

refactor: Implement design tokens and pixel-perfect input UI #1393

Uh oh!

Conversation

OnurVar commented Oct 29, 2025 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Summary

Changes

Design Token System

Component Refactoring

Font System

Benefits

Technical Implementation

Testing

Uh oh!

github-actions bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

borisprimer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

OnurVar commented Nov 6, 2025

Uh oh!

sonarqubecloud bot commented Nov 6, 2025

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

5 participants

OnurVar commented Oct 29, 2025 •

edited by atlassian bot

Loading

github-actions bot commented Oct 29, 2025 •

edited

Loading

github-actions bot commented Oct 29, 2025 •

edited

Loading