[Woo POS][Design System] Create loading button style & update spinner colors (#15108)

jaclync · web-flow · commit 4fadf3f4d301 · 2025-02-12T13:48:16.000+08:00
diff --git a/WooCommerce/Classes/POS/Colors/Color+POSColorPalette.swift b/WooCommerce/Classes/POS/Colors/Color+POSColorPalette.swift
@@ -8,6 +8,8 @@ extension Color {
     static var posOnPrimaryContainer: Color { Color(.posOnPrimaryContainer) }
 
     // MARK: - Secondary Container Colors
+    static var posSecondary: Color { Color(.posSecondary) }
+    static var posOnSecondary: Color { Color(.posOnSecondary) }
     static var posSecondaryContainer: Color { Color(.posSecondaryContainer) }
     static var posOnSecondaryContainer: Color { Color(.posOnSecondaryContainer) }
 
diff --git a/WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnSecondary.colorset/Contents.json b/WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posOnSecondary.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x17",
+          "green" : "0x15",
+          "red" : "0x10"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0x17",
+          "green" : "0x15",
+          "red" : "0x10"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+} 
diff --git a/WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posSecondary.colorset/Contents.json b/WooCommerce/Classes/POS/Colors/POSColorPalette.xcassets/posSecondary.colorset/Contents.json
@@ -0,0 +1,38 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xC1",
+          "red" : "0xD1"
+        }
+      },
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xFF",
+          "green" : "0xC1",
+          "red" : "0xD1"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+} 
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentBluetoothRequiredAlertView.swift
@@ -33,7 +33,7 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {
 
             Button(viewModel.openSettingsButtonViewModel.title,
                    action: viewModel.openSettingsButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView.swift
@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView.swift
@@ -20,7 +20,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView: View {
             if let primaryButtonViewModel = viewModel.primaryButtonViewModel {
                 Button(primaryButtonViewModel.title,
                        action: primaryButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
                 .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
             }
         }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView.swift
@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdatePostalCodeView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentConnectingFailedView.swift
@@ -35,7 +35,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift
@@ -36,7 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundMultipleReadersView: View {
             }) {
                 Text(Localization.cancel)
             }
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+            .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             .padding(Layout.buttonPadding)
         }
         .padding(Layout.padding)
@@ -53,7 +53,7 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView {
             Button(Localization.connect) {
                 connect(readerID)
             }
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .extraSmall))
+            .buttonStyle(POSOutlinedButtonStyle(size: .extraSmall))
         }
         .padding(.vertical, Layout.rowVerticalPadding)
     }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundReaderView.swift
@@ -29,11 +29,11 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.connectButton.title,
                        action: viewModel.connectButton.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
 
                 Button(viewModel.continueSearchButton.title,
                        action: viewModel.continueSearchButton.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+                .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentOptionalReaderUpdateInProgressView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentOptionalReaderUpdateInProgressView.swift
@@ -45,7 +45,7 @@ struct PointOfSaleCardPresentPaymentOptionalReaderUpdateInProgressView: View {
                     cancelReaderUpdate()
                 }
             })
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+            .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedLowBatteryView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedLowBatteryView.swift
@@ -37,10 +37,10 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedLowBatteryView: View {
             VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {
                 Button(viewModel.retrySearchButtonViewModel.title,
                        action: viewModel.retrySearchButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
                 Button(viewModel.cancelButtonViewModel.title,
                        action: viewModel.cancelButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+                .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             }
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedNonRetryableView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedNonRetryableView.swift
@@ -25,7 +25,7 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedNonRetryableView: View {
 
             Button(viewModel.cancelButtonViewModel.title,
                    action: viewModel.cancelButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+            .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentReaderUpdateFailedView.swift
@@ -27,7 +27,7 @@ struct PointOfSaleCardPresentPaymentReaderUpdateFailedView: View {
 
             Button(viewModel.retryButtonViewModel.title,
                    action: viewModel.retryButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentRequiredReaderUpdateInProgressView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Connection Alerts/PointOfSaleCardPresentPaymentRequiredReaderUpdateInProgressView.swift
@@ -45,7 +45,7 @@ struct PointOfSaleCardPresentPaymentRequiredReaderUpdateInProgressView: View {
                     cancelReaderUpdate()
                 }
             })
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+            .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             .matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)
         }
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/PointOfSaleItemListErrorView.swift
@@ -31,7 +31,7 @@ struct PointOfSaleItemListErrorView: View {
                 }, label: {
                     Text(error.buttonText)
                 })
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
                 .frame(maxWidth: PointOfSaleItemListErrorLayout.buttonWidth)
                 .padding([.leading, .trailing])
             }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentCaptureErrorMessageView.swift
@@ -33,12 +33,12 @@ struct PointOfSaleCardPresentPaymentCaptureErrorMessageView: View {
             VStack(spacing: PointOfSaleCardPresentPaymentLayout.buttonSpacing) {
                 Button(viewModel.tryAgainButtonViewModel.title,
                        action: viewModel.tryAgainButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
 
                 Button(action: viewModel.newOrderButtonViewModel.actionHandler) {
                     Label(viewModel.newOrderButtonViewModel.title, systemImage: "arrow.uturn.backward")
                 }
-                .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+                .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             }
         }
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentDisconnectedMessageView.swift
@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentReaderDisconnectedMessageView: View {
             } label: {
                 Text(viewModel.connectReaderButtonTitle)
             }
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
         }
         .padding(.horizontal, PointOfSaleCardPresentPaymentLayout.horizontalPadding)
         .multilineTextAlignment(.center)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentErrorMessageView.swift
@@ -25,12 +25,12 @@ struct PointOfSaleCardPresentPaymentErrorMessageView: View {
             VStack(spacing: PointOfSaleCardPresentPaymentLayout.buttonSpacing) {
                 Button(viewModel.tryAgainButtonViewModel.title,
                        action: viewModel.tryAgainButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
 
                 if let backToCheckoutButtonViewModel = viewModel.backToCheckoutButtonViewModel {
                     Button(backToCheckoutButtonViewModel.title,
                            action: backToCheckoutButtonViewModel.actionHandler)
-                    .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+                    .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
         }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentIntentCreationErrorMessageView.swift
@@ -25,12 +25,12 @@ struct PointOfSaleCardPresentPaymentIntentCreationErrorMessageView: View {
             VStack(spacing: PointOfSaleCardPresentPaymentLayout.buttonSpacing) {
                 Button(viewModel.tryAgainButtonViewModel.title,
                        action: viewModel.tryAgainButtonViewModel.actionHandler)
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal))
 
                 if let editOrderButtonViewModel = viewModel.editOrderButtonViewModel {
                     Button(editOrderButtonViewModel.title,
                            action: editOrderButtonViewModel.actionHandler)
-                    .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+                    .buttonStyle(POSOutlinedButtonStyle(size: .normal))
                 }
             }
         }
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentNonRetryableErrorMessageView.swift
@@ -27,7 +27,7 @@ struct PointOfSaleCardPresentPaymentNonRetryableErrorMessageView: View {
 
             Button(viewModel.tryAnotherPaymentMethodButtonViewModel.title,
                    action: viewModel.tryAnotherPaymentMethodButtonViewModel.actionHandler)
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
         }
         .multilineTextAlignment(.center)
         .frame(maxWidth: PointOfSaleCardPresentPaymentLayout.errorContentMaxWidth)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView.swift
@@ -24,7 +24,7 @@ struct PointOfSaleCardPresentPaymentValidatingOrderErrorMessageView: View {
 
             if let tryAgainButtonViewModel = viewModel.tryAgainButtonViewModel {
                 Button(tryAgainButtonViewModel.title, action: tryAgainButtonViewModel.actionHandler)
-                    .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                    .buttonStyle(POSFilledButtonStyle(size: .normal))
             }
         }
         .padding(.horizontal, PointOfSaleCardPresentPaymentLayout.horizontalPadding)
diff --git a/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift b/WooCommerce/Classes/POS/Presentation/CardReaderConnection/UI States/Reader Messages/Presented Views/PointOfSaleCardPresentPaymentCaptureFailedView.swift
@@ -25,7 +25,7 @@ struct PointOfSaleCardPresentPaymentCaptureFailedView: View {
                    action: {
                 isPresented = false
             })
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
         }
         .multilineTextAlignment(.center)
         .padding(Layout.contentPadding)
diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift
@@ -50,7 +50,7 @@ struct CartView: View {
                     } label: {
                         Text(Localization.clearButtonTitle)
                     }
-                    .buttonStyle(POSButtonStyle(variant: .outlined, size: .extraSmall))
+                    .buttonStyle(POSOutlinedButtonStyle(size: .extraSmall))
                     .renderedIf(shouldShowClearCartButton)
                 }
             }
@@ -244,7 +244,7 @@ private extension CartView {
         } label: {
             Text(Localization.checkoutButtonTitle)
         }
-        .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+        .buttonStyle(POSFilledButtonStyle(size: .normal))
     }
 
     @ViewBuilder
diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift
@@ -34,7 +34,7 @@ struct ItemListErrorCardView: View {
                 Text(errorState.buttonText)
                     .font(Constants.itemTitleFont)
             }
-            .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+            .buttonStyle(POSOutlinedButtonStyle(size: .normal))
             .frame(maxWidth: Constants.accessoryButtonMaxWidth * scale)
             .padding(Constants.accessoryButtonPadding * (1 / scale))
         }
diff --git a/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift b/WooCommerce/Classes/POS/Presentation/Order Messages/PointOfSaleOrderSyncErrorMessageView.swift
@@ -21,7 +21,7 @@ struct PointOfSaleOrderSyncErrorMessageView: View {
                 }
                 Spacer()
                 Button(viewModel.actionModel.title, action: viewModel.actionModel.handler)
-                    .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                    .buttonStyle(POSFilledButtonStyle(size: .normal))
                     .padding([.leading, .trailing], Constants.buttonSidePadding)
                     .padding([.bottom], Constants.buttonBottomPadding)
             }
diff --git a/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift b/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift
@@ -36,7 +36,7 @@ private extension PaymentsActionButtons {
                 Text(Localization.sendReceipt)
             }
         })
-        .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))
+        .buttonStyle(POSOutlinedButtonStyle(size: .normal))
     }
 
     var newOrderButton: some View {
@@ -48,7 +48,7 @@ private extension PaymentsActionButtons {
                 Text(Localization.newOrder)
             }
         })
-        .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+        .buttonStyle(POSFilledButtonStyle(size: .normal))
     }
 }
 
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift
@@ -73,15 +73,9 @@ struct PointOfSaleCollectCashView: View {
                         await submitCashAmount()
                     }
                 }, label: {
-                    if isLoading {
-                        ProgressView()
-                            .progressViewStyle(CircularProgressViewStyle())
-                            .tint(Color.posOnInverseSurface)
-                    } else {
-                        Text(Localization.markPaymentCompletedButtonTitle)
-                    }
+                    Text(Localization.markPaymentCompletedButtonTitle)
                 })
-                .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+                .buttonStyle(POSFilledButtonStyle(size: .normal, isLoading: isLoading))
                 .frame(maxWidth: .infinity)
                 .dynamicTypeSize(...DynamicTypeSize.accessibility1)
                 .disabled(isLoading)
diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleExitPosAlertView.swift
@@ -32,7 +32,7 @@ struct PointOfSaleExitPosAlertView: View {
             } label: {
                 Text(Localization.exitButton)
             }
-            .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))
+            .buttonStyle(POSFilledButtonStyle(size: .normal))
         }
         .padding(Constants.padding)
     }
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonProgressViewStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonProgressViewStyle.swift
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/Buttons/POSButtonStyle.swift
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSProgressViewStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSProgressViewStyle.swift
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift
diff --git a/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift b/WooCommerce/Classes/POS/Presentation/SimpleProductsOnlyInformation.swift
diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift
diff --git a/WooCommerce/WooCommerce.xcodeproj/project.pbxproj b/WooCommerce/WooCommerce.xcodeproj/project.pbxproj

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ struct PointOfSaleCardPresentPaymentBluetoothRequiredAlertView: View {`
`33`	`33`
`34`	`34`	`Button(viewModel.openSettingsButtonViewModel.title,`
`35`	`35`	`action: viewModel.openSettingsButtonViewModel.actionHandler)`
`36`		`- .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))`
	`36`	`+ .buttonStyle(POSFilledButtonStyle(size: .normal))`
`37`	`37`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`38`	`38`	`}`
`39`	`39`	`.posModalCloseButton(action: viewModel.dismissButtonViewModel.actionHandler,`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedChargeReaderView: View {`
`28`	`28`
`29`	`29`	`Button(viewModel.retryButtonViewModel.title,`
`30`	`30`	`action: viewModel.retryButtonViewModel.actionHandler)`
`31`		`- .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))`
	`31`	`+ .buttonStyle(POSFilledButtonStyle(size: .normal))`
`32`	`32`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`33`	`33`	`}`
`34`	`34`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedUpdateAddressView: View {`
`20`	`20`	`if let primaryButtonViewModel = viewModel.primaryButtonViewModel {`
`21`	`21`	`Button(primaryButtonViewModel.title,`
`22`	`22`	`action: primaryButtonViewModel.actionHandler)`
`23`		`- .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))`
	`23`	`+ .buttonStyle(POSFilledButtonStyle(size: .normal))`
`24`	`24`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`25`	`25`	`}`
`26`	`26`	`}`
Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ struct PointOfSaleCardPresentPaymentConnectingFailedView: View {`
`35`	`35`
`36`	`36`	`Button(viewModel.retryButtonViewModel.title,`
`37`	`37`	`action: viewModel.retryButtonViewModel.actionHandler)`
`38`		`- .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))`
	`38`	`+ .buttonStyle(POSFilledButtonStyle(size: .normal))`
`39`	`39`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`40`	`40`	`}`
`41`	`41`	`.posModalCloseButton(action: viewModel.cancelButtonViewModel.actionHandler,`
Original file line number	Diff line number	Diff line change
`@@ -36,7 +36,7 @@ struct PointOfSaleCardPresentPaymentFoundMultipleReadersView: View {`
`36`	`36`	`}) {`
`37`	`37`	`Text(Localization.cancel)`
`38`	`38`	`}`
`39`		`- .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))`
	`39`	`+ .buttonStyle(POSOutlinedButtonStyle(size: .normal))`
`40`	`40`	`.padding(Layout.buttonPadding)`
`41`	`41`	`}`
`42`	`42`	`.padding(Layout.padding)`
`@@ -53,7 +53,7 @@ private extension PointOfSaleCardPresentPaymentFoundMultipleReadersView {`
`53`	`53`	`Button(Localization.connect) {`
`54`	`54`	`connect(readerID)`
`55`	`55`	`}`
`56`		`- .buttonStyle(POSButtonStyle(variant: .outlined, size: .extraSmall))`
	`56`	`+ .buttonStyle(POSOutlinedButtonStyle(size: .extraSmall))`
`57`	`57`	`}`
`58`	`58`	`.padding(.vertical, Layout.rowVerticalPadding)`
`59`	`59`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,11 +29,11 @@ struct PointOfSaleCardPresentPaymentFoundReaderView: View {`
`29`	`29`	`VStack(spacing: PointOfSaleReaderConnectionModalLayout.buttonSpacing) {`
`30`	`30`	`Button(viewModel.connectButton.title,`
`31`	`31`	`action: viewModel.connectButton.actionHandler)`
`32`		`- .buttonStyle(POSButtonStyle(variant: .filled, size: .normal))`
	`32`	`+ .buttonStyle(POSFilledButtonStyle(size: .normal))`
`33`	`33`
`34`	`34`	`Button(viewModel.continueSearchButton.title,`
`35`	`35`	`action: viewModel.continueSearchButton.actionHandler)`
`36`		`- .buttonStyle(POSButtonStyle(variant: .outlined, size: .normal))`
	`36`	`+ .buttonStyle(POSOutlinedButtonStyle(size: .normal))`
`37`	`37`	`}`
`38`	`38`	`.matchedGeometryEffect(id: animation.buttonsTransitionId, in: animation.namespace, properties: .position)`
`39`	`39`	`}`