[Woo POS] [Design System] Apply straightforward color updates (#15068)

woocommerce · Feb 10, 2025 · 01b89b7 · 01b89b7
2 parents 138f010 + 8d038e7
commit 01b89b7
Show file tree

Hide file tree

Showing 27 changed files with 57 additions and 139 deletions.
diff --git a/WooCommerce/Classes/POS/Colors/Color+POSColorPalette.swift b/WooCommerce/Classes/POS/Colors/Color+POSColorPalette.swift
@@ -45,9 +45,9 @@ extension Color {
     static var posOnAlert: Color { Color(.posOnAlert) }
 
     // MARK: - Text Colors
-    static var posTextPrimary: Color { Color(.posTextPrimary) }
-    static var posTextSecondary: Color { Color(.posTextSecondary) }
-    static var posTextTertiary: Color { Color(.posTextTertiary) }
+    static var posPrimaryText: Color { Color(.posPrimaryText) }
+    static var posSecondaryText: Color { Color(.posSecondaryText) }
+    static var posTertiaryText: Color { Color(.posTertiaryText) }
 
     // MARK: - Other
     static var posShadow: Color { Color(.posShadow) }

diff --git a/...ets/posTextPrimary.colorset/Contents.json → ...ets/posPrimaryText.colorset/Contents.json b/...ets/posTextPrimary.colorset/Contents.json → ...ets/posPrimaryText.colorset/Contents.json
diff --git a/...s/posTextSecondary.colorset/Contents.json → ...s/posSecondaryText.colorset/Contents.json b/...s/posTextSecondary.colorset/Contents.json → ...s/posSecondaryText.colorset/Contents.json
diff --git a/...ts/posTextTertiary.colorset/Contents.json → ...ts/posTertiaryText.colorset/Contents.json b/...ts/posTextTertiary.colorset/Contents.json → ...ts/posTertiaryText.colorset/Contents.json
diff --git a/...mmerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift b/...mmerce/Classes/POS/Presentation/CardReaderConnection/CardReaderConnectionStatusView.swift
@@ -28,7 +28,7 @@ struct CardReaderConnectionStatusView: View {
                     }
                 } label: {
                     HStack(spacing: Constants.buttonImageAndTextSpacing) {
-                        circleIcon(with: Color(.wooCommerceEmerald(.shade40)))
+                        circleIcon(with: Color.posSuccess)
                         Text(Localization.readerConnected)
                             .foregroundColor(connectedFontColor)
                     }
@@ -97,7 +97,7 @@ private extension CardReaderConnectionStatusView {
     var disconnectedFontColor: Color {
         switch backgroundAppearance {
         case .primary:
-            Color(.wooCommercePurple(.shade60))
+            .posPrimaryText
         case .secondary:
             POSFloatingControlView.secondaryFontColor
         }
@@ -163,8 +163,14 @@ private extension CardReaderConnectionStatusView {
 
 @available(iOS 17.0, *)
 #Preview {
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController()
+    )
     VStack {
         CardReaderConnectionStatusView()
+            .environment(posModel)
     }
 }
 

diff --git a/...n/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift b/...n/UI States/Connection Alerts/PointOfSaleCardPresentPaymentFoundMultipleReadersView.swift
@@ -27,7 +27,7 @@ struct PointOfSaleCardPresentPaymentFoundMultipleReadersView: View {
             List(readerIDs, id: \.self) { readerID in
                 readerRow(readerID: readerID)
                 .listRowSeparator(.hidden)
-                .listRowBackground(Color.posPrimaryBackground)
+                .listRowBackground(Color.posSurface)
             }
             .listStyle(.plain)
 

diff --git a/...ection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift b/...ection/UI States/Reader Messages/PointOfSaleCardPresentPaymentProcessingMessageView.swift
@@ -12,13 +12,13 @@ struct PointOfSaleCardPresentPaymentProcessingMessageView: View {
 
             VStack(alignment: .center, spacing: Layout.textSpacing) {
                 Text(viewModel.title)
-                    .foregroundStyle(.white)
+                    .foregroundStyle(Color.posOnPrimaryContainer)
                     .font(.posBodyRegular)
                     .matchedGeometryEffect(id: animation.titleTransitionId, in: animation.namespace, properties: .position)
 
                 Text(viewModel.message)
                     .font(.posTitleEmphasized)
-                    .foregroundStyle(Color.posDarkGray.opacity(0.16))
+                    .foregroundStyle(Color.posOnPrimaryContainer)
                     .accessibilityAddTraits(.isHeader)
                     .matchedGeometryEffect(id: animation.messageTransitionId, in: animation.namespace, properties: .position)
             }

diff --git a/...tation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift b/...tation/CardReaderConnection/UI States/Reader Messages/PointOfSalePaymentSuccessView.swift
@@ -75,7 +75,7 @@ struct PointOfSalePaymentSuccessView: View {
                 .frame(width: Constants.imageSize.width, height: Constants.imageSize.height)
                 .shadow(color: Color(.wooCommerceEmerald(.shade80)).opacity(Constants.shadowOpacity),
                         radius: Constants.shadowRadius, x: Constants.shadowSize.width, y: Constants.shadowSize.height)
-                .foregroundColor(.posSuccessColor)
+                .foregroundColor(.posSuccess)
             Image(PointOfSaleAssets.successCheck.imageName)
                 .renderingMode(.template)
                 .foregroundColor(checkmarkColor)
@@ -85,7 +85,7 @@ struct PointOfSalePaymentSuccessView: View {
     }
 
     private var checkmarkColor: Color {
-        Color.primary
+        .posOnSuccess
     }
 }
 

diff --git a/WooCommerce/Classes/POS/Presentation/CartView.swift b/WooCommerce/Classes/POS/Presentation/CartView.swift
@@ -152,12 +152,7 @@ private struct ScrollOffSetPreferenceKey: PreferenceKey {
 @available(iOS 17.0, *)
 private extension CartView {
     var backgroundColor: Color {
-        switch colorScheme {
-        case .dark:
-            return Color.posSecondaryBackground
-        default:
-            return posModel.cart.isEmpty ? Color.posTertiaryBackground : Color.posSecondaryBackground
-        }
+        .posSurfaceBright
     }
 
     var shouldPreventCartEditing: Bool {

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift
@@ -31,7 +31,7 @@ struct ChildItemList: View {
                 errorView(error: error)
             }
         }
-        .background(Color.posPrimaryBackground)
+        .background(Color.posSurface)
         .toolbar(.hidden, for: .navigationBar)
         .task {
             guard state.items.isEmpty else {

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ItemListErrorCardView.swift
@@ -39,7 +39,7 @@ struct ItemListErrorCardView: View {
             .padding(Constants.accessoryButtonPadding * (1 / scale))
         }
         .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
-        .background(Color.posSecondaryBackground)
+        .background(Constants.backgroundColor)
         .posItemCardBorderStyles()
     }
 }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift
@@ -41,7 +41,7 @@ struct ParentProductCardView: View {
             Spacer()
         }
         .frame(maxWidth: .infinity, idealHeight: dimension)
-        .background(Color.posSecondaryBackground)
+        .background(Constants.backgroundColor)
         .posItemCardBorderStyles()
     }
 }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift
@@ -1,4 +1,5 @@
 import Foundation
+import SwiftUI
 
 enum PointOfSaleItemListCardConstants {
     static let productCardSize: CGFloat = 112
@@ -11,4 +12,5 @@ enum PointOfSaleItemListCardConstants {
     static let itemDetailFont: POSFontStyle = .posLargeDetailRegular
     static let accessoryButtonMaxWidth: CGFloat = 136
     static let accessoryButtonPadding: CGFloat = 16
+    static let backgroundColor: Color = .posSurfaceContainerLowest
 }
diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift
@@ -38,7 +38,7 @@ struct SimpleProductCardView: View {
             Spacer()
         }
         .frame(maxWidth: .infinity, idealHeight: dimension)
-        .background(Color.posSecondaryBackground)
+        .background(Constants.backgroundColor)
         .posItemCardBorderStyles()
     }
 }

diff --git a/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift b/WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift
@@ -37,7 +37,7 @@ struct VariationCardView: View {
             Spacer()
         }
         .frame(maxWidth: .infinity, idealHeight: dimension)
-        .background(Color.posSecondaryBackground)
+        .background(Constants.backgroundColor)
         .posItemCardBorderStyles()
     }
 }

diff --git a/WooCommerce/Classes/POS/Presentation/ItemListView.swift b/WooCommerce/Classes/POS/Presentation/ItemListView.swift
@@ -34,7 +34,7 @@ struct ItemListView: View {
             .navigationDestination(for: POSItem.self, destination: { item in
                 childListView(parentItem: item)
             })
-            .background(Color.posPrimaryBackground)
+            .background(Color.posSurface)
         }
         .accessibilityElement(children: .contain)
         .posModal(isPresented: $showSimpleProductsModal) {
@@ -81,7 +81,7 @@ private extension ItemListView {
                     .aspectRatio(contentMode: .fit)
                     .frame(width: Constants.bannerInfoIconSize, height: Constants.bannerInfoIconSize)
                     .padding(Constants.iconPadding)
-                    .foregroundColor(Color(uiColor: .wooCommercePurple(.shade30)))
+                    .foregroundColor(Color.posOnSurface)
                     .accessibilityHidden(true)
                 Spacer()
             }
@@ -105,7 +105,7 @@ private extension ItemListView {
                 }, label: {
                     Image(systemName: "xmark")
                         .font(.posBodyRegular)
-                        .foregroundColor(Color.posTertiaryText)
+                        .foregroundColor(Color.posOnSurfaceVariantLowest)
                         .accessibilityLabel(Localization.dismissBannerAccessibilityLabel)
                 })
                 .padding(Constants.iconPadding)
@@ -114,7 +114,7 @@ private extension ItemListView {
         }
         .frame(maxWidth: .infinity)
         .fixedSize(horizontal: false, vertical: true)
-        .background(Color.posSecondaryBackground)
+        .background(Color.posSurfaceBright)
         .cornerRadius(Constants.bannerCornerRadius)
         .shadow(color: Color.black.opacity(0.08), radius: 4, y: 2)
         .accessibilityAddTraits(.isButton)

diff --git a/WooCommerce/Classes/POS/Presentation/ItemRowView.swift b/WooCommerce/Classes/POS/Presentation/ItemRowView.swift
@@ -44,11 +44,11 @@ struct ItemRowView: View {
                 })
                 .accessibilityLabel(Localization.removeFromCartAccessibilityLabel)
                 .padding(.trailing, Constants.cardContentHorizontalPadding)
-                .foregroundColor(Color.posTertiaryText)
+                .foregroundColor(Color.posOnSurfaceVariantLowest)
             }
         }
         .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
-        .background(backgroundColor)
+        .background(Color.posSurfaceContainerLowest)
         .overlay {
             RoundedRectangle(cornerRadius: Constants.productCardCornerRadius)
                 .stroke(Color.posCartItemOutline, lineWidth: cardOutlineWidth)
@@ -88,15 +88,6 @@ private extension ItemRowView {
             return Constants.cardOutlineWidth
         }
     }
-
-    var backgroundColor: Color {
-        switch colorScheme {
-        case .dark:
-            return Color.posTertiaryBackground
-        default:
-            return Color.posSecondaryBackground
-        }
-    }
 }
 
 private extension ItemRowView {

diff --git a/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift b/WooCommerce/Classes/POS/Presentation/POSFloatingControlView.swift
@@ -67,19 +67,14 @@ private extension POSFloatingControlView {
     var backgroundColor: Color {
         switch backgroundAppearance {
         case .primary:
-            colorScheme == .light ? .posSecondaryBackground : .posTertiaryBackground
+            .posSurfaceContainerLow
         case .secondary:
             colorScheme == .light ? Color(.wooCommercePurple(.shade80)) : Color(.wooCommercePurple(.shade20))
         }
     }
 
     var fontColor: Color {
-        switch backgroundAppearance {
-        case .primary:
-            .posPrimaryText
-        case .secondary:
-            Self.secondaryFontColor
-        }
+        .posOnSurface
     }
 }
 

diff --git a/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift b/WooCommerce/Classes/POS/Presentation/POSReceiptEligibilityBanner.swift
@@ -15,7 +15,7 @@ struct POSReceiptEligibilityBanner: View {
                 .foregroundColor(Color.posPrimaryText)
         }
         .padding()
-        .background(Color.posPrimaryBackground)
+        .background(Color.posSurface)
         .cornerRadius(Constants.cornerRadius)
         .padding(.horizontal, Constants.bannerPadding)
         .onTapGesture {

diff --git a/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift b/WooCommerce/Classes/POS/Presentation/PaymentButtons.swift
@@ -59,7 +59,7 @@ private extension PaymentsActionButtons {
             .frame(minWidth: UIScreen.main.bounds.width / 2)
         })
         .padding(Constants.buttonPadding)
-        .foregroundColor(Color.posPrimaryTextInverted)
+        .foregroundColor(Color.posOnInverseSurface)
         .background(Color.posPrimaryButtonBackground)
         .cornerRadius(Constants.buttonCornerRadius)
     }

diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleCollectCashView.swift
@@ -77,7 +77,7 @@ struct PointOfSaleCollectCashView: View {
                         if isLoading {
                             ProgressView()
                                 .progressViewStyle(CircularProgressViewStyle())
-                                .tint(Color.posPrimaryTextInverted)
+                                .tint(Color.posOnInverseSurface)
                         } else {
                             Text(Localization.markPaymentCompletedButtonTitle)
                                 .font(Constants.buttonFont)
@@ -185,12 +185,7 @@ private extension PointOfSaleCollectCashView {
     }
 
     private var backgroundColor: Color {
-        switch colorScheme {
-        case .dark:
-            return Color.posSecondaryBackground
-        default:
-            return .clear
-        }
+        .posSurface
     }
 
     private var navigationForegroundColor: Color {

diff --git a/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift b/WooCommerce/Classes/POS/Presentation/PointOfSaleDashboardView.swift
@@ -55,7 +55,7 @@ struct PointOfSaleDashboardView: View {
                                  floatingSize.height + Constants.floatingControlVerticalOffset))
         .environment(\.posBackgroundAppearance, posModel.paymentState != .card(.processingPayment) ? .primary : .secondary)
         .animation(.easeInOut, value: posModel.itemsViewState.containerState == .loading)
-        .background(Color.posPrimaryBackground)
+        .background(Color.posSurface)
         .navigationBarBackButtonHidden(true)
         .posModal(item: $posModel.cardPresentPaymentOnboardingViewModel, onDismiss: {
             posModel.cancelCardPaymentsOnboarding()
@@ -178,8 +178,14 @@ private extension PointOfSaleDashboardView {
 #if DEBUG
 @available(iOS 17.0, *)
 #Preview {
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController())
     return NavigationStack {
         PointOfSaleDashboardView()
+            .environment(posModel)
+            .environmentObject(POSModalManager())
     }
 }
 #endif
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSModalViewModifier.swift
@@ -9,12 +9,12 @@ struct POSRootModalViewModifier: ViewModifier {
     func body(content: Content) -> some View {
         ZStack {
             content
-                .blur(radius: modalManager.isPresented ? 3 : 0)
+                .blur(radius: modalManager.isPresented ? 8 : 0)
                 .disabled(modalManager.isPresented)
                 .accessibilityElement(children: modalManager.isPresented ? .ignore : .contain)
 
             if modalManager.isPresented {
-                Color.posOverlayFill
+                Color.posSurfaceContainerLowest.opacity(0.8)
                     .edgesIgnoringSafeArea(.all)
                     .onTapGesture {
                         if modalManager.allowsInteractiveDismissal {
@@ -25,9 +25,12 @@ struct POSRootModalViewModifier: ViewModifier {
                     .animation(nil, value: modalManager.isPresented)
                 ZStack {
                     modalManager.getContent()
-                        .background(Color.posPrimaryBackground)
+                        .background(Color.posSurfaceBright)
                         .cornerRadius(24)
-                        .shadow(color: Color.black.opacity(0.08), radius: 24, x: 0, y: 8)
+                        .shadow(color: Color.posShadow.opacity(0.02), radius: 43, x: 0, y: 50) // 0px 50px 43px 0px #00000005
+                        .shadow(color: Color.posShadow.opacity(0.04), radius: 36, x: 0, y: 30) // 0px 30px 36px 0px #0000000A
+                        .shadow(color: Color.posShadow.opacity(0.07), radius: 27, x: 0, y: 15) // 0px 15px 27px 0px #00000012
+                        .shadow(color: Color.posShadow.opacity(0.08), radius: 15, x: 0, y: 5)  // 0px 5px 15px 0px #00000014
                         .padding()
                 }
                 .zIndex(1)

diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSecondaryButtonStyle.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSecondaryButtonStyle.swift
@@ -13,7 +13,7 @@ struct POSSecondaryButtonStyle: ButtonStyle {
             RoundedRectangle(cornerRadius: POSButtonStyleConstants.framedButtonCornerRadius)
                 .stroke(Color.posSecondaryButtonForeground,
                         lineWidth: POSButtonStyleConstants.secondaryButtonBorderStrokeWidth)
-                .background(Color.posPrimaryBackground))
+                .background(Color.posSurface))
         .foregroundColor(.posSecondaryButtonForeground)
     }
 }
diff --git a/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift b/WooCommerce/Classes/POS/Presentation/Reusable Views/POSSendReceiptView.swift
@@ -78,7 +78,7 @@ struct POSSendReceiptView: View {
             .dynamicTypeSize(...DynamicTypeSize.accessibility3)
             .padding(conditionalPadding(Constants.buttonPadding))
             .frame(maxWidth: .infinity)
-            .foregroundColor(Color.posPrimaryTextInverted)
+            .foregroundColor(Color.posOnInverseSurface)
             .background(isEmailValid ? Color.posPrimaryButtonBackground : Color.posBackgroundButtonDisabled)
             .cornerRadius(Constants.buttonCornerRadius)
             .contentShape(Rectangle())

diff --git a/WooCommerce/Classes/POS/Presentation/TotalsView.swift b/WooCommerce/Classes/POS/Presentation/TotalsView.swift
@@ -94,11 +94,11 @@ struct TotalsView: View {
     private var backgroundColor: Color {
         switch posModel.paymentState {
         case .card(.cardPaymentSuccessful), .cash(.paymentSuccess):
-            .posSecondaryBackground
+            .posSurfaceContainerLowest
         case .card(.processingPayment):
-            colorScheme == .light ? Color(.wooCommercePurple(.shade70)) : Color(.wooCommercePurple(.shade10))
+            .posPrimary
         case .cash(.collectingCash):
-            colorScheme == .light ? .clear : Color.posSecondaryBackground
+            .posSurface
         default:
             .clear
         }
@@ -357,7 +357,7 @@ private extension TotalsView {
         static let subtotalAmountFont: POSFontStyle = .posBodyRegular
         static let totalTitleFont: POSFontStyle = .posTitleRegular
         static let totalAmountFont: POSFontStyle = .posTitleEmphasized
-        static let separatorColor: Color = Color(.systemGray3)
+        static let separatorColor: Color = Color.posOutlineVariant
 
         static let shimmeringCornerRadius: CGFloat = 4
         static let shimmeringWidth: CGFloat = 334