Merge pull request #2745 from Automattic/add/spearhead-products-list

Spearhead: improved styles for product list page

spearhead/assets/sass/_block-extends.scss

@@ -6,3 +6,4 @@
 @import "block-extends/related-posts";
 @import "block-extends/blog-posts";
 @import "block-extends/search";
+@import "block-extends/woocommerce";

spearhead/assets/sass/_woocommerce.scss

@@ -0,0 +1,33 @@
+#content .wc-block-grid .wc-block-grid__product-onsale {
+	font-family: var(--global--font-secondary);
+}
+
+body[class*="woocommerce"] #page {
+	span {
+		&.onsale {
+			background-color: var(--global--color-background);
+			border: 1px solid var(--global--color-foreground);
+			border-radius: 0;
+			font-family: var(--global--font-secondary);
+			line-height: 1.6;
+			min-width: 0;
+			min-height: 0;
+			padding: 1em;
+
+			@media ( prefers-color-scheme: dark ) {
+				background-color: var(--global--color-foreground);
+				border: 1px solid var(--global--color-background);
+			}
+		}
+	}
+}
+
+#woocommerce-wrapper {
+	ul.products {
+		li.product {
+			.price {
+				color: var(--global--color-foreground);
+			}
+		}
+	}
+}

spearhead/assets/sass/block-extends/_woocommerce.scss

@@ -0,0 +1,16 @@
+#content .wc-block-grid{
+	.wc-block-grid__product {
+		.wc-block-grid__product-onsale {
+			top: -0.5em;
+			right: -0.5em;
+		}
+	}
+
+	.wc-block-grid__product-title{
+		font-family: var(--global--font-secondary);
+	}
+
+	.wc-block-grid__product-price {
+		color: var(--global--color-foreground);
+	}
+}

spearhead/assets/sass/style.scss

@@ -27,3 +27,4 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 @import "block-extends";
 @import "search";
 @import "meta";
+@import "woocommerce";

spearhead/style-rtl.css

@@ -665,6 +665,19 @@ ul.wp-block-categories,
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
+#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
+	top: -0.5em;
+	left: -0.5em;
+}
+
+#content .wc-block-grid .wc-block-grid__product-title {
+	font-family: var(--global--font-secondary);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price {
+	color: var(--global--color-foreground);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;
@@ -773,4 +786,30 @@ ul.wp-block-categories,
 
 .widget ul {
 	padding: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product-onsale {
+	font-family: var(--global--font-secondary);
+}
+
+body[class*="woocommerce"] #page span.onsale {
+	background-color: var(--global--color-background);
+	border: 1px solid var(--global--color-foreground);
+	border-radius: 0;
+	font-family: var(--global--font-secondary);
+	line-height: 1.6;
+	min-width: 0;
+	min-height: 0;
+	padding: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+	body[class*="woocommerce"] #page span.onsale {
+		background-color: var(--global--color-foreground);
+		border: 1px solid var(--global--color-background);
+	}
+}
+
+#woocommerce-wrapper ul.products li.product .price {
+	color: var(--global--color-foreground);
 }

spearhead/style.css

@@ -665,6 +665,19 @@ ul.wp-block-categories,
 	border-bottom: var(--form--border-width) solid var(--form--border-color);
 }
 
+#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
+	top: -0.5em;
+	right: -0.5em;
+}
+
+#content .wc-block-grid .wc-block-grid__product-title {
+	font-family: var(--global--font-secondary);
+}
+
+#content .wc-block-grid .wc-block-grid__product-price {
+	color: var(--global--color-foreground);
+}
+
 .screen-reader-text, .search-form input[type="submit"] {
 	/* Text meant only for screen readers. */
 	border: 0;
@@ -775,4 +788,30 @@ ul.wp-block-categories,
 	padding: 0;
 }
 
+#content .wc-block-grid .wc-block-grid__product-onsale {
+	font-family: var(--global--font-secondary);
+}
+
+body[class*="woocommerce"] #page span.onsale {
+	background-color: var(--global--color-background);
+	border: 1px solid var(--global--color-foreground);
+	border-radius: 0;
+	font-family: var(--global--font-secondary);
+	line-height: 1.6;
+	min-width: 0;
+	min-height: 0;
+	padding: 1em;
+}
+
+@media (prefers-color-scheme: dark) {
+	body[class*="woocommerce"] #page span.onsale {
+		background-color: var(--global--color-foreground);
+		border: 1px solid var(--global--color-background);
+	}
+}
+
+#woocommerce-wrapper ul.products li.product .price {
+	color: var(--global--color-foreground);
+}
+
 /*# sourceMappingURL=style.css.map */

spearhead/template-parts/header/navigation.php

@@ -71,9 +71,9 @@
 			esc_html__( 'collapsed', 'spearhead' ),
 			is_cart() ? 'current-menu-item' : '',
 			esc_attr__( 'View your shopping cart', 'spearhead' ),
-			spearhead_cart_link(),
+			seedlet_cart_link(),
 			esc_attr__( 'View your shopping list', 'spearhead' ),
-			spearhead_cart_widget()
+			seedlet_cart_widget()
 		) );
 		?>
 	</nav><!-- .woo-navigation -->
@@ -86,4 +86,4 @@
 			<span class="hide-visually expanded-text"><?php esc_html__( 'expanded', 'spearhead' ); ?></span>
 		</button>
 	<?php endif; ?>
-</div>
+</div>