Add semantic colour tokens and dark mode support

.swiftlint.yml

@@ -3,3 +3,23 @@ excluded: # paths to ignore during linting. Takes precedence over `included`.
   - "*/*/GeneratedMocks.swift"
   - "*/*/*.generated.swift"
   - ".build/"
+
+custom_rules:
+  paystack_ui_no_literal_colour:
+    name: "PaystackUI literal colour"
+    regex: "(Color\\.(white|black|gray|red|blue|green)\\b|Color\\(red:\\s|UIColor\\(red:\\s)"
+    message: "Use a semantic token from Design/Colors.swift instead of a literal colour. Fixed exceptions (e.g. the QR quiet-zone plate) must carry a `// swiftlint:disable:next paystack_ui_no_literal_colour` comment explaining why."
+    included: "Sources/PaystackUI/.*\\.swift"
+    excluded:
+      - "Sources/PaystackUI/Design/Colors.swift"
+      - "Sources/PaystackUI/Design/DarkModePreviews.swift"
+    severity: warning
+  paystack_ui_no_hue_token:
+    name: "PaystackUI legacy hue token"
+    regex: "Color\\.(stackBlue|navy0[2-5]|stackGreen|green02|gray01|error0[12]|warning0[1245])\\b"
+    message: "Use the semantic token layer (contentPrimary, borderSubtle, accentPrimary, …) instead of the underlying hue token. Hue tokens are kept as internal primitives per Q8 in DARK_MODE_IMPLEMENTATION_PLAN.md and should not be called directly by view code."
+    included: "Sources/PaystackUI/.*\\.swift"
+    excluded:
+      - "Sources/PaystackUI/Design/Colors.swift"
+      - "Sources/PaystackUI/Design/DarkModePreviews.swift"
+    severity: warning

Sources/PaystackUI/Charge/BankTransfer/Views/BankPickerSheet.swift

@@ -14,7 +14,7 @@ struct BankPickerSheet: View {
             header
 
             Divider()
-                .background(Color.navy05)
+                .background(Color.borderPrimary)
 
             ScrollView {
                 LazyVStack(spacing: 0) {
@@ -24,24 +24,26 @@ struct BankPickerSheet: View {
                             isSelected: slug == currentSlug,
                             onTap: { onSelect(slug) })
                         Divider()
-                            .background(Color.navy05)
+                            .background(Color.borderPrimary)
                     }
                 }
             }
 
             Spacer(minLength: 0)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(Color.surfacePrimary.ignoresSafeArea())
     }
 
     private var header: some View {
         HStack {
             Text("Change bank")
                 .font(.heading3)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
             Spacer()
             Button(action: onCancel) {
                 Image(systemName: "xmark")
-                    .foregroundColor(.navy02)
+                    .foregroundColor(.contentSecondary)
             }
         }
         .padding(.doublePadding)
@@ -60,11 +62,11 @@ private struct BankPickerRow: View {
             HStack {
                 Text(displayName)
                     .font(.body16M)
-                    .foregroundColor(.stackBlue)
+                    .foregroundColor(.contentPrimary)
                 Spacer()
                 if isSelected {
                     Image(systemName: "checkmark")
-                        .foregroundColor(.stackGreen)
+                        .foregroundColor(.accentPrimary)
                 }
             }
             .padding(.doublePadding)

Sources/PaystackUI/Charge/BankTransfer/Views/BankTransferAccountDetailsView.swift

@@ -31,7 +31,7 @@ struct BankTransferAccountDetailsView: View {
 
             Text("Transfer exactly \(amount.description) to")
                 .font(.heading3)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             accountCard
@@ -42,7 +42,7 @@ struct BankTransferAccountDetailsView: View {
                 .buttonStyle(PrimaryButtonStyle(showLoading: false))
 
             Button("Change payment method", action: onChangePaymentMethod)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
                 .padding(.top, .singlePadding)
         }
@@ -74,29 +74,29 @@ struct BankTransferAccountDetailsView: View {
         }
         .overlay(
             RoundedRectangle(cornerRadius: .cornerRadius)
-                .stroke(Color.navy05, lineWidth: 1)
+                .stroke(Color.borderPrimary, lineWidth: 1)
         )
     }
 
     private var divider: some View {
         Rectangle()
-            .fill(Color.navy05)
+            .fill(Color.surfaceSecondary)
             .frame(height: 1)
     }
 
     private var expiryFooter: some View {
         VStack(spacing: .singlePadding) {
                 Text("This account is for one-time use only and expires in")
                     .font(.body14R)
-                    .foregroundColor(.navy03)
+                    .foregroundColor(.contentTertiary)
                     .multilineTextAlignment(.center)
                 Text(formattedRemaining)
                     .font(.body14M)
-                    .foregroundColor(.stackGreen)
+                    .foregroundColor(.accentPrimary)
 
             ProgressView(value: progress)
                 .progressViewStyle(.linear)
-                .accentColor(.stackGreen)
+                .accentColor(.accentPrimary)
         }
     }
 

Sources/PaystackUI/Charge/BankTransfer/Views/BankTransferConfirmingView.swift

@@ -43,7 +43,7 @@ struct BankTransferConfirmingView: View {
 
             Text(bodyCopy)
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
                 .animation(.easeInOut(duration: 0.25), value: phase)
 
@@ -54,11 +54,11 @@ struct BankTransferConfirmingView: View {
                 .disabled(true)
 
             Button("Back to account number", action: onBackToAccountNumber)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
 
             Button("Change payment method", action: onChangePaymentMethod)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
         }
         .padding(.doublePadding)
@@ -92,10 +92,10 @@ struct BankTransferConfirmingView: View {
         GeometryReader { geo in
             ZStack(alignment: .leading) {
                 Rectangle()
-                    .fill(Color.gray01)
+                    .fill(Color.trackInactive)
                     .frame(height: 1)
                 Rectangle()
-                    .fill(Color.stackGreen)
+                    .fill(Color.accentPrimary)
                     .frame(width: receivedByBackend ? geo.size.width : 0,
                            height: 1)
                     .animation(.easeInOut(duration: 0.45), value: receivedByBackend)

Sources/PaystackUI/Charge/BankTransfer/Views/BankTransferDelayedConfirmationView.swift

@@ -12,12 +12,12 @@ struct BankTransferDelayedConfirmationView: View {
 
             Text("We'll complete this transaction automatically once we confirm your transfer.")
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             Text("If you have any issues with this transfer, please contact us via \(supportEmail) with the following details:")
                 .font(.body14R)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             VStack(alignment: .leading, spacing: .singlePadding) {
@@ -33,7 +33,7 @@ struct BankTransferDelayedConfirmationView: View {
                 .buttonStyle(SecondaryButtonStyle())
 
             Button("Keep waiting", action: onKeepWaiting)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
         }
         .padding(.doublePadding)
@@ -49,10 +49,10 @@ private struct NumberedListRow: View {
         HStack(spacing: .singlePadding) {
             Text("\(index).")
                 .font(.body14R)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
             Text(text)
                 .font(.body14R)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
         }
     }
 }

Sources/PaystackUI/Charge/BankTransfer/Views/BankTransferRefundInitiatedView.swift

@@ -17,12 +17,12 @@ struct BankTransferRefundInitiatedView: View {
 
             Text("Refund initiated")
                 .font(.heading2)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             Text(message)
                 .font(.body14R)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .multilineTextAlignment(.center)
                 .padding(.horizontal, .singlePadding)
 
@@ -31,7 +31,7 @@ struct BankTransferRefundInitiatedView: View {
                 .buttonStyle(PrimaryButtonStyle(showLoading: false))
 
             Button("Close", action: dismissWithError)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
         }
         .padding(.doublePadding)

Sources/PaystackUI/Charge/BankTransfer/Views/BankTransferTakingLongerView.swift

@@ -14,7 +14,7 @@ struct BankTransferTakingLongerView: View {
             Text("It's taking longer than expected to confirm your transfer. "
                  + "You don't have to wait here till we confirm it.")
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             timeline
@@ -23,11 +23,11 @@ struct BankTransferTakingLongerView: View {
                 .buttonStyle(PrimaryButtonStyle(showLoading: false))
 
             Button("Back to account number", action: onBackToAccountNumber)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
 
             Button("Change payment method", action: onChangePaymentMethod)
-                .foregroundColor(.navy02)
+                .foregroundColor(.contentSecondary)
                 .font(.body14M)
         }
         .padding(.doublePadding)
@@ -37,7 +37,7 @@ struct BankTransferTakingLongerView: View {
         HStack(spacing: 0) {
             TimelineNode(label: "Sent", state: .complete)
             Rectangle()
-                .fill(Color.gray01)
+                .fill(Color.trackInactive)
                 .frame(height: 1)
                 .padding(.horizontal, .singlePadding)
             TimelineNode(label: "Received", state: .pending)

Sources/PaystackUI/Charge/ChargeCard/Address/CardAddressView.swift

@@ -24,7 +24,7 @@ struct CardAddressView: View {
 
                 Text(displayMessage)
                     .font(.body16M)
-                    .foregroundColor(.stackBlue)
+                    .foregroundColor(.contentPrimary)
                     .multilineTextAlignment(.center)
 
                 FormInput(title: "Complete Payment",

Sources/PaystackUI/Charge/ChargeCard/Birthday/CardBirthdayView.swift

@@ -31,7 +31,7 @@ struct CardBirthdayView: View {
 
             Text(displayMessage)
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             FormInput(title: "Authorize",

Sources/PaystackUI/Charge/ChargeCard/OTP/CardOTPVIew.swift

@@ -23,7 +23,7 @@ struct CardOTPVIew: View {
 
                 Text(displayMessage)
                     .font(.body16M)
-                    .foregroundColor(.stackBlue)
+                    .foregroundColor(.contentPrimary)
                     .multilineTextAlignment(.center)
 
                 FormInput(title: "Authorize",

Sources/PaystackUI/Charge/ChargeCard/Phone/CardPhoneView.swift

@@ -26,7 +26,7 @@ struct CardPhoneView: View {
 
             Text(displayMessage)
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .multilineTextAlignment(.center)
 
             FormInput(title: "Send OTP",

Sources/PaystackUI/Charge/ChargeCard/Pin/CardPinView.swift

@@ -24,7 +24,7 @@ struct CardPinView: View {
                             onCommit: viewModel.submitPin)
 
                 Button("Cancel", action: viewModel.cancelTransaction)
-                    .foregroundColor(.navy02)
+                    .foregroundColor(.contentSecondary)
                     .font(.body14M)
             }
             #endif
@@ -36,12 +36,12 @@ struct CardPinView: View {
     var titleText: some View {
         Text("Please enter your 4-digit card pin to authorize this payment")
             .font(.body16M)
-            .foregroundColor(.stackBlue)
+            .foregroundColor(.contentPrimary)
             .multilineTextAlignment(.center)
     }
 
     var loadingView: some View {
-        LoadingIndicator(tintColor: .navy04)
+        LoadingIndicator(tintColor: .spinnerTint)
             .scaleEffect(2)
             .padding(.doublePadding)
     }

Sources/PaystackUI/Charge/ChargeCard/Redirect/CardRedirectView.swift

@@ -33,7 +33,7 @@ struct CardRedirectView: View {
                     isLoading: $webviewLoading)
 
             if webviewLoading {
-                LoadingIndicator(tintColor: .navy04)
+                LoadingIndicator(tintColor: .spinnerTint)
                     .scaleEffect(2)
             }
         }
@@ -52,7 +52,7 @@ struct CardRedirectView: View {
     var titleText: some View {
         Text("Please click the button below to authenticate with your bank")
             .font(.body16M)
-            .foregroundColor(.stackBlue)
+            .foregroundColor(.contentPrimary)
             .multilineTextAlignment(.center)
     }
 
@@ -65,7 +65,7 @@ struct CardRedirectView: View {
 
     var cancelButton: some View {
         Button("Cancel", action: viewModel.cancelTransaction)
-            .foregroundColor(.navy02)
+            .foregroundColor(.contentSecondary)
             .font(.body14M)
     }
 

Sources/PaystackUI/Charge/ChargeCard/TestMode/TestModeCardSelectionView.swift

@@ -21,7 +21,7 @@ struct TestModeCardSelectionView: View {
             VStack(spacing: .triplePadding) {
                 Text("Use any of the options below to test the payment flow")
                     .font(.body16M)
-                    .foregroundColor(.stackBlue)
+                    .foregroundColor(.contentPrimary)
                     .multilineTextAlignment(.center)
 
                 FormInput(title: viewModel.buttonTitle,
@@ -42,7 +42,7 @@ struct TestModeCardSelectionView: View {
             selectedItem: $viewModel.testCard) { item in
                 HStack {
                     Text(item.description)
-                        .foregroundColor(.stackBlue)
+                        .foregroundColor(.contentPrimary)
                         .font(.body14R)
 
                     Spacer()

Sources/PaystackUI/Charge/ChargeView.swift

@@ -47,6 +47,8 @@ struct ChargeView: View {
                 .aspectRatio(contentMode: .fit)
                 .frame(width: 140)
         }
+        .frame(maxWidth: .infinity, maxHeight: .infinity)
+        .background(Color.surfacePrimary.ignoresSafeArea())
         .task(viewModel.verifyAccessCodeAndProceed)
         .modalCancelButton(showConfirmation: viewModel.displayCloseButtonConfirmation,
                            onCancelled: chargeCancelled)

Sources/PaystackUI/Charge/MobileMoney/Views/ChannelSelectionView.swift

@@ -23,7 +23,7 @@ struct ChannelSelectionView: View {
 
                 Text("Choose a payment method to continue")
                     .font(.body16M)
-                    .foregroundColor(.stackBlue)
+                    .foregroundColor(.contentPrimary)
                     .multilineTextAlignment(.center)
 
                 VStack(spacing: .singlePadding) {
@@ -84,7 +84,7 @@ struct ChannelView: View {
 
             Text(channelTitle)
                 .font(.body16M)
-                .foregroundColor(.stackBlue)
+                .foregroundColor(.contentPrimary)
                 .lineLimit(1)
                 .minimumScaleFactor(0.85)
 
@@ -96,7 +96,7 @@ struct ChannelView: View {
         .cornerRadius(.cornerRadius)
         .overlay(
             RoundedRectangle(cornerRadius: .cornerRadius)
-                .stroke(Color.navy05, lineWidth: 1)
+                .stroke(Color.borderPrimary, lineWidth: 1)
         )
     }
 }