[Woo POS][Design System] Update product card & image placeholder design (#15089)

Author: jaclync

WooCommerce/Classes/POS/Presentation/CartView.swift

@@ -7,7 +7,6 @@ struct CartView: View {
 
     @Environment(\.floatingControlAreaSize) var floatingControlAreaSize: CGSize
     @Environment(\.dynamicTypeSize) var dynamicTypeSize
-    @Environment(\.colorScheme) var colorScheme
 
     @State private var offSetPosition: CGFloat = 0.0
     private var coordinateSpace: CoordinateSpace = .named(Constants.scrollViewCoordinateSpaceIdentifier)
@@ -36,7 +35,7 @@ struct CartView: View {
                         if let itemsInCartLabel = viewHelper.itemsInCartLabel(for: posModel.cart.count) {
                             Text(itemsInCartLabel)
                                 .font(Constants.itemsFont)
-                                .foregroundColor(Color.posSecondaryText)
+                                .foregroundColor(Color.posOnSurfaceVariantLowest)
                         }
                     }
                     .accessibilityElement(children: .combine)
@@ -262,7 +261,7 @@ private extension CartView {
             } label: {
                 Image(systemName: Constants.backButtonSymbol)
                     .font(.posBodyEmphasized, maximumContentSizeCategory: .accessibilityLarge)
-                    .foregroundColor(.primary)
+                    .foregroundColor(.posOnSurface)
             }
         }
     }
@@ -309,4 +308,19 @@ private extension CartView {
     return CartView()
         .environment(posModel)
 }
+
+@available(iOS 17.0, *)
+#Preview("Cart with one item") {
+    let posModel = PointOfSaleAggregateModel(
+        itemsController: PointOfSalePreviewItemsController(),
+        cardPresentPaymentService: CardPresentPaymentPreviewService(),
+        orderController: PointOfSalePreviewOrderController())
+    posModel.addToCart(.simpleProduct(.init(id: UUID(),
+                                            name: "Sample Product",
+                                            formattedPrice: "$10.00",
+                                            productID: 6,
+                                            price: "10")))
+    return CartView()
+        .environment(posModel)
+}
 #endif

WooCommerce/Classes/POS/Presentation/Item Selector/ChildItemList.swift

@@ -51,7 +51,7 @@ private extension ChildItemList {
             } label: {
                 Image(systemName: "chevron.backward")
                     .font(.posBodyEmphasized, maximumContentSizeCategory: .accessibilityLarge)
-                    .foregroundColor(.primary)
+                    .foregroundColor(.posOnSurface)
             }
             POSHeaderTitleView(title: title)
             Spacer()

WooCommerce/Classes/POS/Presentation/Item Selector/ParentProductCardView.swift

@@ -28,12 +28,12 @@ struct ParentProductCardView: View {
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(name)
                     .lineLimit(2)
-                    .foregroundStyle(Color.posPrimaryText)
+                    .foregroundStyle(Constants.titleColor)
                     .multilineTextAlignment(.leading)
                     .font(Constants.itemTitleFont)
 
                 Text(detailText)
-                    .foregroundStyle(Color.posSecondaryText)
+                    .foregroundStyle(Constants.detailColor)
                     .font(Constants.itemDetailFont)
             }
             .padding(.horizontal, Constants.horizontalTextPadding * (1 / scale))

WooCommerce/Classes/POS/Presentation/Item Selector/PointOfSaleItemListCardConstants.swift

@@ -13,4 +13,6 @@ enum PointOfSaleItemListCardConstants {
     static let accessoryButtonMaxWidth: CGFloat = 136
     static let accessoryButtonPadding: CGFloat = 16
     static let backgroundColor: Color = .posSurfaceContainerLowest
+    static let titleColor: Color = .posOnSurface
+    static let detailColor: Color = .posOnSurfaceVariantHighest
 }

WooCommerce/Classes/POS/Presentation/Item Selector/SimpleProductCardView.swift

@@ -25,12 +25,12 @@ struct SimpleProductCardView: View {
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(product.name)
                     .lineLimit(2)
-                    .foregroundStyle(Color.posPrimaryText)
+                    .foregroundStyle(Constants.titleColor)
                     .multilineTextAlignment(.leading)
                     .font(Constants.itemTitleFont)
 
                 Text(product.formattedPrice)
-                    .foregroundStyle(Color.posSecondaryText)
+                    .foregroundStyle(Constants.detailColor)
                     .font(Constants.itemDetailFont)
             }
             .padding(.horizontal, Constants.horizontalTextPadding * (1 / scale))

WooCommerce/Classes/POS/Presentation/Item Selector/VariationCardView.swift

@@ -24,12 +24,12 @@ struct VariationCardView: View {
             VStack(alignment: .leading, spacing: Constants.textSpacing) {
                 Text(variation.name)
                     .lineLimit(2)
-                    .foregroundStyle(Color.posPrimaryText)
+                    .foregroundStyle(Constants.titleColor)
                     .multilineTextAlignment(.leading)
                     .font(Constants.itemTitleFont)
 
                 Text(variation.formattedPrice)
-                    .foregroundStyle(Color.posSecondaryText)
+                    .foregroundStyle(Constants.detailColor)
                     .font(Constants.itemDetailFont)
             }
             .padding(.horizontal, Constants.horizontalTextPadding * (1 / scale))

WooCommerce/Classes/POS/Presentation/ItemRowView.swift

@@ -5,9 +5,12 @@ struct ItemRowView: View {
     private let onItemRemoveTapped: (() -> Void)?
 
     @ScaledMetric private var scale: CGFloat = 1.0
-    @Environment(\.colorScheme) var colorScheme
     @Binding private var showProductImage: Bool
 
+    private var dimension: CGFloat {
+        min(Constants.productCardSize * scale, Constants.maximumProductCardSize)
+    }
+
     init(cartItem: CartItem, showImage: Binding<Bool> = .constant(true), onItemRemoveTapped: (() -> Void)? = nil) {
         self.cartItem = cartItem
         self._showProductImage = showImage
@@ -20,15 +23,15 @@ struct ItemRowView: View {
 
             VStack(alignment: .leading, spacing: Constants.itemTitleAndPriceSpacing * (1 / scale)) {
                 Text(cartItem.title)
-                    .foregroundColor(Color.posPrimaryText)
+                    .foregroundColor(PointOfSaleItemListCardConstants.titleColor)
                     .font(Constants.itemTitleFont)
                 if let subtitle = cartItem.subtitle {
                     Text(subtitle)
-                        .foregroundColor(Color.posSecondaryText)
+                        .foregroundColor(PointOfSaleItemListCardConstants.detailColor)
                         .font(Constants.itemSubtitleFont)
                 }
                 Text(cartItem.item.formattedPrice)
-                    .foregroundColor(Color.posSecondaryText)
+                    .foregroundColor(PointOfSaleItemListCardConstants.detailColor)
                     .font(Constants.itemPriceFont)
             }
             .frame(maxWidth: .infinity, alignment: .leading)
@@ -49,43 +52,19 @@ struct ItemRowView: View {
         }
         .frame(maxWidth: .infinity, idealHeight: Constants.productCardSize * scale)
         .background(Color.posSurfaceContainerLowest)
-        .overlay {
-            RoundedRectangle(cornerRadius: Constants.productCardCornerRadius)
-                .stroke(Color.posCartItemOutline, lineWidth: cardOutlineWidth)
-        }
-        .clipShape(RoundedRectangle(cornerRadius: Constants.productCardCornerRadius))
+        .posItemCardBorderStyles()
         .padding(.horizontal, Constants.horizontalPadding)
     }
 
     @ViewBuilder
     private var productImage: some View {
         if !showProductImage {
             EmptyView()
-        } else if let imageSource = cartItem.item.productImageSource {
-            ProductImageThumbnail(productImageURL: URL(string: imageSource),
-                                  productImageSize: Constants.productCardSize,
-                                  scale: scale,
-                                  foregroundColor: .clear,
-                                  cachesOriginalImage: true)
-            .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                   height: Constants.productCardSize * scale)
-            .clipped()
         } else {
-            Rectangle()
-                .frame(width: min(Constants.productCardSize * scale, Constants.maximumProductCardSize),
-                       height: Constants.productCardSize * scale)
-                .foregroundColor(Color(.secondarySystemFill))
-        }
-    }
-}
-
-private extension ItemRowView {
-    var cardOutlineWidth: CGFloat {
-        switch colorScheme {
-        case .dark:
-            return 0
-        default:
-            return Constants.cardOutlineWidth
+            POSItemImageView(imageSource: cartItem.item.productImageSource,
+                             imageSize: dimension,
+                             scale: 1)
+            .frame(width: dimension, height: dimension)
         }
     }
 }
@@ -94,8 +73,6 @@ private extension ItemRowView {
     enum Constants {
         static let productCardSize: CGFloat = 96
         static let maximumProductCardSize: CGFloat = Self.productCardSize * 1.5
-        static let productCardCornerRadius: CGFloat = 8
-        static let cardOutlineWidth: CGFloat = 1
         static let horizontalPadding: CGFloat = 16
         static let horizontalElementSpacing: CGFloat = 16
         static let cardContentHorizontalPadding: CGFloat = 16

WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemCardBorderStylesModifier.swift

@@ -5,9 +5,11 @@ struct POSItemCardBorderStylesModifier: ViewModifier {
         content
             .overlay {
                 RoundedRectangle(cornerRadius: Constants.cardCornerRadius)
-                    .stroke(Color.black, lineWidth: Constants.nilOutline)
+                    .stroke(Color.posShadow, lineWidth: Constants.nilOutline)
             }
             .clipShape(RoundedRectangle(cornerRadius: Constants.cardCornerRadius))
+            .shadow(color: Color.posShadow.opacity(0.04), radius: 12, x: 0, y: 8)
+            .shadow(color: Color.posShadow.opacity(0.08), radius: 4, x: 0, y: 2)
     }
 }
 

WooCommerce/Classes/POS/Presentation/Reusable Views/POSItemImageView.swift

@@ -6,20 +6,39 @@ struct POSItemImageView: View {
     let imageSize: CGFloat
     let scale: CGFloat
 
+    private var placeholderView: some View {
+        Rectangle()
+            .foregroundColor(Constants.placeholderBackgroundColor)
+            .overlay {
+                Text(Image(systemName: "archivebox"))
+                    .font(.posButtonSymbol)
+                    .foregroundColor(Constants.placeholderIconColor)
+            }
+    }
+
     var body: some View {
-        if let imageSource = imageSource {
+        if let imageSource {
             ProductImageThumbnail(productImageURL: URL(string: imageSource),
                                   productImageSize: imageSize,
                                   scale: scale,
-                                  foregroundColor: .clear,
-                                  cachesOriginalImage: true)
+                                  foregroundColor: Constants.placeholderIconColor,
+                                  cachesOriginalImage: true) {
+                placeholderView
+            }
         } else {
-            Rectangle()
-                .foregroundColor(Color(.secondarySystemFill))
+            placeholderView
         }
     }
 }
 
+private extension POSItemImageView {
+    enum Constants {
+        static let placeholderIconDimension: CGFloat = 38
+        static let placeholderIconColor: Color = .posOnSurfaceVariantLowest
+        static let placeholderBackgroundColor: Color = .posSurfaceDim
+    }
+}
+
 #Preview("Placeholder") {
     POSItemImageView(imageSource: nil,
                      imageSize: 112,

WooCommerce/Classes/POS/Utils/Color+WooCommercePOS.swift

@@ -11,22 +11,6 @@ extension Color {
         )
     }
 
-    // MARK: - Background
-
-    /* POS Background colors are defined in a similar philosophy as system background colors:
-     *
-     * The first color is intended to be the main background, farthest back.
-     * Secondary and tertiary colors are layered on top of the main background, when needed.
-     */
-
-    // An ugly duckling; intended for use for borders where the bordered view has
-    // `.posSecondaryBackground` in light mode, even though it's on another `.posSecondaryBackground` view. Does not adapt
-    static var posCartItemOutline: Color {
-        Color(
-            UIColor(red: 220.0/255.0, green: 220.0/255.0, blue: 222.0/255.0, alpha: 1.0)
-        )
-    }
-
     // MARK: - Text
 
     private static var posGray: Color {