Varia: Refactoring Sass structure to deal with multiple outputs for WC styles and theme styles

varia/inc/woocommerce.php

@@ -56,7 +56,7 @@ remove_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
 function varia_woocommerce_scripts() {
 
 	// WooCommerce styles
-	wp_enqueue_style( 'varia-woocommerce-style', get_template_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
+	wp_enqueue_style( 'varia-woocommerce-style', get_stylesheet_directory_uri() . '/style-woocommerce.css', array(), wp_get_theme()->get( 'Version' ) );
 
 }
 add_action( 'wp_enqueue_scripts', 'varia_woocommerce_scripts' );

varia/package.json

@@ -38,7 +38,7 @@
     "build:style-editor": "node-sass style-editor.scss style-editor.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-editor.css",
     "build:rtl": "rtlcss style.css style-rtl.css",
     "build:print": "node-sass print.scss print.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r print.css",
-    "build:woocommerce": "node-sass style-woocommerce.scss style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style.css",
+    "build:woocommerce": "node-sass style-woocommerce.scss style-woocommerce.css --output-style expanded --indent-type tab --indent-width 1 && postcss -r style-woocommerce.css",
     "build": "run-p \"build:*\"",
     "watch": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
     "child-theme": "sh ../theme-dev-utils/build-child-theme.sh"

varia/sass/abstracts/_extends.scss

@@ -24,3 +24,29 @@
 	}
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%onsale-style {
+	border-radius: 100%;
+	background-color: map-deep-get($config-global, "color", "alert", "warning");
+	color: map-deep-get($config-global, "color", "foreground", "dark");
+	font-size: map-deep-get($config-global, "font", "size", "sm");
+	font-weight: 700;
+	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}

varia/sass/base/_extends.scss

@@ -0,0 +1,52 @@
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%button-style {
+	@include crop-text(map-deep-get($config-button, "font", "line-height"));
+	color: #{map-deep-get($config-button, "color", "text")};
+	cursor: pointer;
+	font-weight: #{map-deep-get($config-button, "font", "weight")};
+	font-family: #{map-deep-get($config-button, "font", "family")};
+	font-size: #{map-deep-get($config-button, "font", "size")};
+	background-color: #{map-deep-get($config-button, "color", "background")};
+	border-radius: #{map-deep-get($config-button, "border-radius")};
+	border-width: 0;
+	padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+
+	&:hover,
+	&:focus,
+	&.has-focus {
+		color: #{map-deep-get($config-button, "color", "text-hover")};
+		background-color: #{map-deep-get($config-button, "color", "background-hover")};
+	}
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+%onsale-style {
+	border-radius: 100%;
+	background-color: map-deep-get($config-global, "color", "alert", "warning");
+	color: map-deep-get($config-global, "color", "foreground", "dark");
+	font-size: map-deep-get($config-global, "font", "size", "sm");
+	font-weight: 700;
+	font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}

varia/sass/base/_imports.scss

@@ -3,6 +3,7 @@
  * - Reset the browser
  */
 
+@import "extends";
 @import "normalize";
 @import "reset";
 @import "accessibility";

varia/sass/child-theme/style-woocommerce.scss

@@ -11,6 +11,13 @@
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
 @import "sass/abstracts/extends";
+// WooCommerce Abstracts
+@import "sass/vendors/woocommerce/abstracts/imports";
+
+/**
+ * Child Theme Deep
+ */
+@import "config-child-theme-deep";
 
 /**
  * WooCommerce

varia/sass/vendors/_woocommerce.scss

@@ -2,42 +2,6 @@
  * Main WooCommerce styles
  */
 
-// Fonts
-$font_family_primary: #{map-deep-get($config-global, "font", "family", "primary")};
-$font_family_secondary: #{map-deep-get($config-global, "font", "family", "secondary")};
-$fontsize_xs: map-deep-get($config-global, "font", "size", "xs");
-$fontsize_small: map-deep-get($config-global, "font", "size", "sm");
-$fontsize_base: map-deep-get($config-global, "font", "size", "base");
-$fontsize_medium: map-deep-get($config-global, "font", "size", "md");
-$fontsize_large: map-deep-get($config-global, "font", "size", "lg");
-$fontsize_xl: map-deep-get($config-global, "font", "size", "xl");
-$font_line_height: map-deep-get($config-global, "font", "line-height", "body");
-$font_line_height_heading: map-deep-get($config-global, "font", "line-height", "heading");
-// Colors
-$color_primary: map-deep-get($config-global, "color", "primary", "default");
-$color_secondary: map-deep-get($config-global, "color", "secondary", "default");
-$color_subtext: map-deep-get($config-global, "color", "foreground", "light");
-$color_background: map-deep-get($config-global, "color", "background", "default");
-$color_info: map-deep-get($config-global, "color", "alert", "info");
-$color_success: map-deep-get($config-global, "color", "alert", "success");
-$color_warning: map-deep-get($config-global, "color", "alert", "warning");
-$color_error: map-deep-get($config-global, "color", "alert", "error");
-$color_background: map-deep-get($config-global, "color", "background", "default");
-$color_background_light: map-deep-get($config-global, "color", "background", "light");
-$color_foreground: map-deep-get($config-global, "color", "foreground", "default");
-$color_foreground_dark: map-deep-get($config-global, "color", "foreground", "dark");
-$color_foreground_light: map-deep-get($config-global, "color", "foreground", "light");
-$color_border_default: map-deep-get($config-global, "color", "border", "default");
-$color_border_light: map-deep-get($config-global, "color", "border", "light");
-$color_border_dark: map-deep-get($config-global, "color", "border", "dark");
-$color_highlight: $color_warning;
-// Spacing
-$spacing_base: (0.5 * map-deep-get($config-global, "spacing", "unit"));
-$spacing_unit: map-deep-get($config-global, "spacing", "unit");
-$spacing_horizontal: map-deep-get($config-global, "spacing", "horizontal");
-$spacing_vertical: map-deep-get($config-global, "spacing", "vertical");
-$border_radius: map-deep-get($config-global, "border-radius", "sm");
-
 // Elements
 @import "woocommerce/elements/imports";
 

varia/sass/vendors/woocommerce/abstracts/_imports.scss

@@ -0,0 +1,5 @@
+/**
+ * Abstracts Imports
+ */
+
+@import "extends";

varia/sass/vendors/woocommerce/blocks/_imports.scss

@@ -3,3 +3,4 @@
  */
 
 @import "button/style";
+@import "block-grid/style";

varia/sass/vendors/woocommerce/blocks/block-grid/_style.scss

@@ -0,0 +1,66 @@
+/**
+ * WooCommerce Block Grid
+ * - Used by:
+ *   .wp-block-product-new
+ *   .wp-block-product-best-sellers
+ *   .wp-block-product-on-sale
+ *   .wp-block-product-top-rated
+ *   .wp-block-product-categroy
+ *   .wp-block-products-by-attribute
+ */
+
+#content .wc-block-grid {
+
+	.wc-block-grid__product,
+	.wc-block-grid__product-link {
+
+		& > *:not(:first-child) {
+			margin-top: map-deep-get($config-global, "spacing", "unit");
+		}
+
+		& > *:not(:last-child) {
+			margin-bottom: map-deep-get($config-global, "spacing", "unit");
+		}
+
+		& > *:not(img):empty + * {
+			margin-top: 0;
+		}
+
+		& > *:last-child {
+			margin-bottom: 0;
+		}
+
+		& > *:empty {
+			margin: 0;
+		}
+	}
+
+	.wc-block-grid__product-onsale {
+		@extend %onsale-style;
+	}
+
+	.wc-block-grid__product-title {
+		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		font-size: map-deep-get($config-global, "font", "size", "base")
+	}
+
+	.wc-block-grid__product-rating .star-rating span:before {
+		color: map-deep-get($config-global, "color", "secondary", "default");
+	}
+
+	.wc-block-grid__product-price {
+		color: map-deep-get($config-global, "color", "foreground", "dark");
+		font-size: map-deep-get($config-global, "font", "size", "md");
+		line-height: map-deep-get($config-global, "font", "line-height", "heading");
+
+		ins {
+			color: map-deep-get($config-global, "color", "alert", "success");
+			font-weight: bold;
+		}
+	}
+
+	.wc-block-grid__product .wc-block-grid__product-onsale {
+		right: calc(-0.5em + #{map-deep-get($config-global, "spacing", "unit")});
+		margin: 0
+	}
+}

varia/sass/vendors/woocommerce/blocks/button/_editor.scss

@@ -0,0 +1,3 @@
+/**
+ * Button
+ */

varia/sass/vendors/woocommerce/blocks/button/_style.scss

@@ -2,7 +2,7 @@
  * Button
  */
 
-body[class*="woocommerce"] #page { // adding #content here to override default wc styles without !important
+body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	#respond input#submit,
 	#respond input#submit.alt,
@@ -40,7 +40,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 		cursor: not-allowed;
 
 		&:hover {
-			background-color: $color_primary;
+			background-color: map-deep-get($config-global, "color", "primary", "default");
 		}
 	}
 }

varia/sass/vendors/woocommerce/components/_cart-collaterals.scss

@@ -12,45 +12,45 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 			tr td,
 			tr th {
-				border-top-color: $color_border_default;
+				border-top-color: map-deep-get($config-global, "color", "border", "default");
 			}
 
 			& > h2 {
-				font-size: $fontsize_large;
+				font-size: map-deep-get($config-global, "font", "size", "lg");
 			}
 		}
 
 		.cart_totals {
 
 			p small {
-				color: $color_subtext;
-				font-size: $fontsize_small;
+				color: map-deep-get($config-global, "color", "foreground", "light");
+				font-size: map-deep-get($config-global, "font", "size", "sm");
 			}
 
 			table {
-				margin: 0 0 $spacing_base;
+				margin: 0 0 (0.5 * map-deep-get($config-global, "spacing", "unit"));
 
 				td,
 				th {
-					line-height: $font_line_height;
+					line-height: map-deep-get($config-global, "font", "line-height", "body");
 				}
 
 				small {
-					color: $color_subtext;
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 			}
 
 			.discount td {
-				color: $color_highlight;
+				color: map-deep-get($config-global, "color", "alert", "warning");
 			}
 		}
 
 		.shipping-calculator-button {
-			margin-top: #{0.5 * $spacing_vertical};
+			margin-top: #{0.5 * map-deep-get($config-global, "spacing", "vertical")};
 		}
 
 		.shipping-calculator-form {
-			margin-top: $spacing_horizontal;
+			margin-top: map-deep-get($config-global, "spacing", "horizontal");
 		}
 	}
 }

varia/sass/vendors/woocommerce/components/_cart-sidebar.scss

@@ -13,20 +13,20 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		li {
 
 			a:not(.remove) {
-				font-family: $font_family_primary;
+				font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 			}
 
 			img {
 				margin-left: 4px;
-				width: #{2 * $spacing_vertical};
+				width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 			}
 
 			dl {
-				border-left-color: $color_border_default;
+				border-left-color: map-deep-get($config-global, "color", "border", "default");
 
 				dt,
 				dd {
-					margin-bottom: $spacing_vertical;
+					margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 				}
 			}
 		}
@@ -35,16 +35,16 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.widget_shopping_cart {
 
 		.total {
-			border-top: 1px solid $color_border_default;
-			padding-top: $spacing_unit;
+			border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+			padding-top: map-deep-get($config-global, "spacing", "unit");
 		}
 
 		.cart_list li {
-			border-top: 1px solid $color_border_default;
-			padding: $spacing_unit 0 $spacing_unit #{2 * $spacing_horizontal};
+			border-top: 1px solid map-deep-get($config-global, "color", "border", "default");
+			padding: map-deep-get($config-global, "spacing", "unit") 0 map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "horizontal")};
 
 			a.remove {
-				top: $spacing_unit;
+				top: map-deep-get($config-global, "spacing", "unit");
 			}
 		}
 	}

varia/sass/vendors/woocommerce/components/_product-loops.scss

@@ -15,19 +15,22 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 
 	ul.products li.product {
 
+		text-align: center;
+
 		.onsale {
 		}
 
 		.star-rating {
-			font-size: $fontsize_small;
-			margin: inherit;
+			font-size: map-deep-get($config-global, "font", "size", "sm");
+			margin-left: auto;
+			margin-right: auto;
 		}
 
 		h3,
 		.woocommerce-loop-product__title,
 		.woocommerce-loop-category__title {
 			padding: inherit;
-			font-size: $fontsize_base;
+			font-size: map-deep-get($config-global, "font", "size", "base")
 		}
 
 		a img {
@@ -38,7 +41,7 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 		}
 
 		.woocommerce-placeholder {
-			border-color: $color_border_default;
+			border-color: map-deep-get($config-global, "color", "border", "default");
 		}
 
 		.button {
@@ -46,9 +49,9 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 		}
 
 		.price {
-			color: $color_foreground_dark;
-			font-size: $fontsize_medium;
-			line-height: $font_line_height_heading;
+			color: map-deep-get($config-global, "color", "foreground", "dark");
+			font-size: map-deep-get($config-global, "font", "size", "md");
+			line-height: map-deep-get($config-global, "font", "line-height", "heading");
 
 			del {
 				color: inherit;
@@ -63,22 +66,22 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 			}
 
 			.from {
-				font-size: $fontsize_xs;
-				color: $color_highlight;
+				font-size: map-deep-get($config-global, "font", "size", "xs");
+				color: map-deep-get($config-global, "color", "alert", "warning");
 			}
 		}
 
 		&.sale a > .price ins {
-			color: $color_success;
+			color: map-deep-get($config-global, "color", "alert", "success");
 		}
 	}
 
 	.woocommerce-result-count {
-		margin-bottom: $spacing_unit;
+		margin-bottom: map-deep-get($config-global, "spacing", "unit");
 	}
 
 	.woocommerce-ordering {
-		margin-bottom: $spacing_unit;
+		margin-bottom: map-deep-get($config-global, "spacing", "unit");
 
 		select {
 			vertical-align: top;
@@ -93,12 +96,12 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 			white-space: nowrap;
 			padding: 0;
 			clear: both;
-			border-color: $color_border_default;
+			border-color: map-deep-get($config-global, "color", "border", "default");
 			border-right: 0;
 			margin: 1px;
 
 			li {
-				border-color: $color_border_default;
+				border-color: map-deep-get($config-global, "color", "border", "default");
 				padding: 0;
 				margin: 0;
 				float: left;
@@ -121,8 +124,8 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells {
 				span.current,
 				a:hover,
 				a:focus {
-					background: $color_border_default;
-					color: $color_foreground_light;
+					background: map-deep-get($config-global, "color", "border", "default");
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 			}
 		}

varia/sass/vendors/woocommerce/components/_product-tabs.scss

@@ -10,71 +10,71 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 	.woocommerce-tabs {
 
 		ul.tabs {
-			padding-left: $spacing_horizontal;
-			margin-bottom: $spacing_vertical;
+			padding-left: map-deep-get($config-global, "spacing", "horizontal");
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			li {
-				border-color: $color_border_default;
-				background-color: $color_background_light;
-				border-radius: $border_radius $border_radius 0 0;
-				padding-left: $spacing_horizontal;
-				padding-right: $spacing_horizontal;
+				border-color: map-deep-get($config-global, "color", "border", "default");
+				background-color: map-deep-get($config-global, "color", "background", "light");
+				border-radius: map-deep-get($config-global, "border-radius", "sm") map-deep-get($config-global, "border-radius", "sm") 0 0;
+				padding-left: map-deep-get($config-global, "spacing", "horizontal");
+				padding-right: map-deep-get($config-global, "spacing", "horizontal");
 
 				a {
-					padding-top: (0.5 * $spacing_horizontal);
-					padding-bottom: (0.5 * $spacing_horizontal);
-					color: $color_foreground_light;
+					padding-top: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+					padding-bottom: #{0.5 * map-deep-get($config-global, "spacing", "horizontal")};
+					color: map-deep-get($config-global, "color", "foreground", "light");
 
 					&:hover {
-						color: $color_foreground_dark;
+						color: map-deep-get($config-global, "color", "foreground", "dark");
 					}
 				}
 
 				&.active {
-					background-color: $color_background;
-					border-color: $color_border_default;
-					border-bottom-color: $color_background;
+					background-color: map-deep-get($config-global, "color", "background", "default");
+					border-color: map-deep-get($config-global, "color", "border", "default");
+					border-bottom-color: map-deep-get($config-global, "color", "background", "default");
 
 					a {
-						color: $color_foreground_dark;
+						color: map-deep-get($config-global, "color", "foreground", "dark");
 						text-shadow: inherit;
 					}
 
 					&::before {
-						box-shadow: 2px 2px 0 $color_background;
+						box-shadow: 2px 2px 0 map-deep-get($config-global, "color", "background", "default");
 					}
 
 					&::after {
-						box-shadow: -2px 2px 0 $color_background;
+						box-shadow: -2px 2px 0 map-deep-get($config-global, "color", "background", "default");
 					}
 				}
 
 				&::before,
 				&::after {
-					border-color: $color_border_default;
+					border-color: map-deep-get($config-global, "color", "border", "default");
 				}
 
 				&::before {
-					box-shadow: 2px 2px 0 $color_background_light;
+					box-shadow: 2px 2px 0 map-deep-get($config-global, "color", "background", "light");
 				}
 
 				&::after {
-					box-shadow: -2px 2px 0 $color_background_light;
+					box-shadow: -2px 2px 0 map-deep-get($config-global, "color", "background", "light");
 				}
 			}
 
 			&::before {
-				border-bottom-color: $color_border_default;
+				border-bottom-color: map-deep-get($config-global, "color", "border", "default");
 			}
 		}
 
 		.panel {
-			margin-bottom: $spacing_vertical;
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			h2,
 			.comment-reply-title {
-				font-family: $font_family_primary;
-				font-size: $fontsize_large;
+				font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+				font-size: map-deep-get($config-global, "font", "size", "lg");
 				font-weight: bold;
 			}
 		}

varia/sass/vendors/woocommerce/components/_reviews.scss

@@ -10,8 +10,8 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 	#reviews {
 
 		h2 small {
-			color: $color_subtext;
-			font-size: $fontsize_small;
+			color: map-deep-get($config-global, "color", "foreground", "light");
+			font-size: map-deep-get($config-global, "font", "size", "sm");
 			margin: inherit;
 
 			a {
@@ -28,30 +28,30 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 			ol.commentlist {
 
 				li {
-					margin-bottom: $spacing_unit;
+					margin-bottom: map-deep-get($config-global, "spacing", "unit");
 
 					.meta {
-						color: $color_subtext;
-						font-size: $fontsize_small;
+						color: map-deep-get($config-global, "color", "foreground", "light");
+						font-size: map-deep-get($config-global, "font", "size", "sm");
 					}
 
 					img.avatar {
 						padding: 0;
-						width: $spacing_vertical;
+						width: map-deep-get($config-global, "spacing", "vertical");
 						height: auto;
 						background: transparent;
-						border-color: $color_border_default;
+						border-color: map-deep-get($config-global, "color", "border", "default");
 						margin: 0;
 						box-shadow: none;
 					}
 
 					.woocommerce-review__author {
-						font-family: $font_family_primary;
+						font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 					}
 
 					.comment-text {
-						margin-left: #{3 * $spacing_unit};
-						border: 1px solid $color_border_default;
+						margin-left: #{3 * map-deep-get($config-global, "spacing", "unit")};
+						border: 1px solid map-deep-get($config-global, "color", "border", "default");
 						border-radius: 4px;
 						padding: 1em 1em 0;
 
@@ -75,7 +75,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 				}
 
 				#respond {
-					border: 1px solid darken($color_secondary, 3%);
+					border: 1px solid map-deep-get($config-global, "color", "border", "default");
 					border-radius: 4px;
 					padding: 1em 1em 0;
 					margin: 20px 0 0 50px;

varia/sass/vendors/woocommerce/elements/_breadcrumbs.scss

@@ -6,10 +6,10 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 	.woocommerce-breadcrumb {
 
-		margin-bottom: $spacing_vertical;
-		font-size: $fontsize_base;
-		font-family: $font_family_primary;
-		color: $color_subtext;
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		font-size: map-deep-get($config-global, "font", "size", "base");
+		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		color: map-deep-get($config-global, "color", "foreground", "light");
 
 		a {
 			color: currentColor;

varia/sass/vendors/woocommerce/elements/_notices.scss

@@ -7,31 +7,31 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.woocommerce-message,
 	.woocommerce-error,
 	.woocommerce-info {
-		padding: $spacing_unit $spacing_vertical $spacing_unit #{2 * $spacing_vertical};
-		margin-bottom: $spacing_vertical;
-		background-color: $color_background_light;
-		color: $color_foreground_dark;
-		border-top-color: $color_primary;
+		padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "vertical") map-deep-get($config-global, "spacing", "unit") #{2 * map-deep-get($config-global, "spacing", "vertical")};
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+		background-color: map-deep-get($config-global, "color", "background", "light");
+		color: map-deep-get($config-global, "color", "foreground", "dark");
+		border-top-color: map-deep-get($config-global, "color", "primary", "default");
 	}
 
 	.woocommerce-message {
-		border-top-color: $color_success;
+		border-top-color: map-deep-get($config-global, "color", "alert", "success");
 		&:before {
-			color: $color_success;
+			color: map-deep-get($config-global, "color", "alert", "success");
 		}
 	}
 
 	.woocommerce-error {
-		border-top-color: $color_error;
+		border-top-color: map-deep-get($config-global, "color", "alert", "error");
 		&:before {
-			color: $color_error;
+			color: map-deep-get($config-global, "color", "alert", "error");
 		}
 	}
 
 	.woocommerce-info {
-		border-top-color: $color_primary;
+		border-top-color: map-deep-get($config-global, "color", "primary", "default");
 		&:before {
-			color: $color_primary;
+			color: map-deep-get($config-global, "color", "primary", "default");
 		}
 	}
 }

varia/sass/vendors/woocommerce/elements/_onsale.scss

@@ -5,22 +5,6 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	span.onsale {
-		border-radius: 100%;
-		background-color: $color_highlight;
-		color: $color_foreground_dark;
-		font-size: $fontsize_small;
-		font-weight: 700;
-		font-family: $font_family_primary;
-		min-height: 3.236rem;
-		min-width: 3.236rem;
-		padding: 0.202rem;
-		position: absolute;
-		text-align: center;
-		line-height: 3.236;
-		top: -0.5em;
-		right: -0.5em;
-		left: auto;
-		margin: 0;
-		z-index: 9;
+		@extend %onsale-style;
 	}
 }

varia/sass/vendors/woocommerce/elements/_password-strength-meter.scss

@@ -6,31 +6,31 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.woocommerce-password-strength {
 		text-align: center;
 		font-weight: 600;
-		padding: #{0.5 * $spacing_base};
-		font-size: $fontsize_small;
+		padding: #{0.5 * #{map-deep-get($config-global, "spacing", "base")}};
+		font-size: map-deep-get($config-global, "font", "size", "sm");
 
 		&.strong {
-			background-color: $color_success;
+			background-color: map-deep-get($config-global, "color", "alert", "success");
 			border-color: none;
 		}
 
 		&.good {
-			background-color: $color_warning;
+			background-color: map-deep-get($config-global, "color", "alert", "warning");
 			border-color: none;
 		}
 
 		&.short {
-			background-color: $color_error;
+			background-color: map-deep-get($config-global, "color", "alert", "error");
 			border-color: none;
 		}
 
 		&.bad {
-			background-color: $color_error;
+			background-color: map-deep-get($config-global, "color", "alert", "error");
 			border-color: none;
 		}
 	}
 
 	.woocommerce-password-hint {
-		font-size: $fontsize_xs;
+		font-size: map-deep-get($config-global, "font", "size", "xs");
 	}
 }

varia/sass/vendors/woocommerce/elements/_remove-icon.scss

@@ -5,13 +5,13 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	a.remove {
-		font-size: $fontsize_large;
-		height: $fontsize_large;
-		width: $fontsize_large;
+		font-size: map-deep-get($config-global, "font", "size", "lg");
+		height: map-deep-get($config-global, "font", "size", "lg");
+		width: map-deep-get($config-global, "font", "size", "lg");
 		color: red !important; // Required for default theme compatibility
 
 		&:hover {
-			color: $color_background !important; // Required for default theme compatibility
+			color: map-deep-get($config-global, "color", "background", "default") !important; // Required for default theme compatibility
 			background: red;
 		}
 	}

varia/sass/vendors/woocommerce/elements/_small-note.scss

@@ -5,8 +5,8 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	small.note {
-		color: $color_subtext;
-		font-size: $fontsize_small;
-		margin-top: $spacing_unit;
+		color: map-deep-get($config-global, "color", "foreground", "light");
+		font-size: map-deep-get($config-global, "font", "size", "sm");
+		margin-top: map-deep-get($config-global, "spacing", "unit");
 	}
 }

varia/sass/vendors/woocommerce/elements/_star-rating.scss

@@ -7,11 +7,13 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	.star-rating {
 
 		&::before {
-			color: $color_secondary;
+			color: map-deep-get($config-global, "color", "secondary", "default");
+			content: "\53\53\53\53\53";
+			opacity: 0.5;
 		}
 
 		span {
-			color: $color_secondary;
+			color: map-deep-get($config-global, "color", "secondary", "default");
 		}
 	}
 }

varia/sass/vendors/woocommerce/elements/_tables.scss

@@ -7,39 +7,39 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	table.shop_table {
 
 		border-collapse: collapse;
-		border: 1px solid $color_border_default;
-		margin-bottom: $spacing_vertical;
+		border: 1px solid map-deep-get($config-global, "color", "border", "default");
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 		td {
 			border-top: none;
 		}
 
 		tr {
-			border-bottom: 1px solid $color_border_default;
+			border-bottom: 1px solid map-deep-get($config-global, "color", "border", "default");
 		}
 	}
 
 	table.shop_attributes {
-		border-top-color: $color_border_default;
+		border-top-color: map-deep-get($config-global, "color", "border", "default");
 		border-top-style: solid;
-		margin-bottom: $spacing_vertical;
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 		th {
-			padding: $spacing_base;
-			border-bottom-color: $color_border_default;
+			padding: (0.5 * map-deep-get($config-global, "spacing", "unit"));
+			border-bottom-color: map-deep-get($config-global, "color", "border", "default");
 			border-bottom-style: solid;
-			line-height: $font_line_height;
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
 		}
 
 		td {
 			font-style: inherit;
-			border-bottom-color: $color_border_default;
+			border-bottom-color: map-deep-get($config-global, "color", "border", "default");
 			border-bottom-style: solid;
-			line-height: $font_line_height;
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
 
 			p {
 				margin: 0;
-				padding: $spacing_base 0;
+				padding: map-deep-get($config-global, "spacing", "base") 0;
 			}
 		}
 

varia/sass/vendors/woocommerce/layout/_structure.scss

@@ -14,11 +14,11 @@ body[class*="woocommerce"] #page .woocommerce-address-fields,
 .woocommerce-Reviews #comments {
 
 	& > *:not(:first-child) {
-		margin-top: $spacing_vertical;
+		margin-top: map-deep-get($config-global, "spacing", "vertical");
 	}
 
 	& > *:not(:last-child) {
-		margin-bottom: $spacing_vertical;
+		margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 	}
 
 	& > *:empty + *,
@@ -53,12 +53,12 @@ body[class*="woocommerce"] #page .woocommerce-checkout,
 body[class*="woocommerce"] #page .woocommerce-address-fields__field-wrapper {
 
 	& > *:not(:first-child) {
-		margin-top: $spacing_unit;
+		margin-top: map-deep-get($config-global, "spacing", "unit");
 	}
 
 	& > *:not(:last-child),
 	& > .price {
-		margin-bottom: $spacing_unit;
+		margin-bottom: map-deep-get($config-global, "spacing", "unit");
 	}
 
 	& > *:not(img):empty + *,

varia/sass/vendors/woocommerce/pages/_account.scss

@@ -9,14 +9,14 @@
 		}
 
 		fieldset {
-			border: 1px solid $color_border_default;
-			padding: $spacing_unit;
+			border: 1px solid map-deep-get($config-global, "color", "border", "default");
+			padding: map-deep-get($config-global, "spacing", "unit");
 			border-radius: 3px;
 		}
 	}
 
 	.addresses .title h3 {
-		font-size: $fontsize_base;
+		font-size: map-deep-get($config-global, "font", "size", "base")
 	}
 
 	.woocommerce {

varia/sass/vendors/woocommerce/pages/_cart.scss

@@ -4,38 +4,38 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	table.shop_table {
-		border-color: $color_border_default;
+		border-color: map-deep-get($config-global, "color", "border", "default");
 		border-radius: 3px;
 
 		th {
-			padding: $spacing_base $spacing_unit;
-			line-height: $font_line_height;
+			padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
 		}
 
 		td {
-			padding: $spacing_base $spacing_unit;
-			line-height: $font_line_height;
+			padding: map-deep-get($config-global, "spacing", "unit") map-deep-get($config-global, "spacing", "unit");
+			line-height: map-deep-get($config-global, "font", "line-height", "body");
 		}
 
 		tfoot td,
 		tfoot th,
 		tbody th {
-			border-top-color: $color_border_default;
+			border-top-color: map-deep-get($config-global, "color", "border", "default");
 		}
 	}
 
 	table.my_account_orders {
-		font-size: $fontsize_small;
+		font-size: map-deep-get($config-global, "font", "size", "sm");
 
 		th,
 		td {
-			padding: (0.5 * $spacing_base) $spacing_base;
+			padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")} #{0.5 * map-deep-get($config-global, "spacing", "unit")};
 		}
 	}
 
 	td.product-name {
 
-		font-family: $font_family_primary;
+		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
 		font-weight: 700;
 
 		dl.variation,
@@ -43,23 +43,23 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 			dt,
 			.wc-item-meta-label {
-				margin-right: $spacing_base;
+				margin-right: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
 			}
 		}
 
 		p.backorder_notification {
-			font-size: $fontsize_small;
+			font-size: map-deep-get($config-global, "font", "size", "sm");
 		}
 	}
 
 	td.product-quantity {
-		min-width: #{5 * $spacing_unit};
+		min-width: #{5 * map-deep-get($config-global, "spacing", "unit")};
 	}
 
 	table.cart td.actions .input-text {
 		width: inherit;
 		float: inherit;
-		padding: $spacing_unit;
+		padding: map-deep-get($config-global, "spacing", "unit");
 	}
 
 	#add_payment_method {
@@ -67,114 +67,114 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		table.cart {
 
 			.product-thumbnail {
-				min-width: $spacing_horizontal;
+				min-width: map-deep-get($config-global, "spacing", "horizontal");
 			}
 
 			img {
-				width: #{2 * $spacing_vertical};
+				width: #{2 * map-deep-get($config-global, "spacing", "vertical")};
 			}
 
 			td.actions .coupon .input-text {
-				border-color: $color_border_default;
-				padding: $spacing_base;
-				margin: 0 $spacing_base 0 0;
+				border-color: map-deep-get($config-global, "color", "border", "default");
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				margin: 0 map-deep-get($config-global, "spacing", "unit") 0 0;
 			}
 		}
 
 		.wc-proceed-to-checkout {
 
-			padding: $spacing_vertical 0;
+			padding: map-deep-get($config-global, "spacing", "vertical") 0;
 
 			a.checkout-button {
-				margin-bottom: $spacing_vertical;
-				font-size: $fontsize_medium;
-				padding: $spacing_unit;
+				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
+				font-size: map-deep-get($config-global, "font", "size", "md");
+				padding: map-deep-get($config-global, "spacing", "unit");
 			}
 		}
 
 		.checkout {
 
 			.create-account small {
-				font-size: $fontsize_xs;
-				color: $color_subtext;
+				font-size: map-deep-get($config-global, "font", "size", "xs");
+				color: map-deep-get($config-global, "color", "foreground", "light");
 			}
 		}
 
 		#payment {
-			background: $color_background_light;
+			background: map-deep-get($config-global, "color", "background", "light");
 			border-radius: 3px;
 
 			ul.payment_methods {
 
-				padding: $spacing_base;
-				border-bottom-color: $color_border_default;
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				border-bottom-color: map-deep-get($config-global, "color", "border", "default");
 
 				li {
-					line-height: $font_line_height;
+					line-height: map-deep-get($config-global, "font", "line-height", "body");
 
 					input {
-						margin-right: $font_line_height;
+						margin-right: map-deep-get($config-global, "font", "line-height", "body");
 					}
 				}
 			}
 
 			div.form-row {
-				padding: $spacing_base;
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
 			}
 
 			div.payment_box {
-				padding: $spacing_base;
-				margin-bottom: $spacing_base;
-				margin-top: $spacing_base;
-				font-size: $fontsize_small;
+				padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				margin-bottom: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				margin-top: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
+				font-size: map-deep-get($config-global, "font", "size", "sm");
 				border-radius: 3px;
-				line-height: $font_line_height;
-				background-color: $color_border_default;
-				color: $color_foreground;
+				line-height: map-deep-get($config-global, "font", "line-height", "body");
+				background-color: map-deep-get($config-global, "color", "border", "default");
+				color: map-deep-get($config-global, "color", "foreground", "default");
 
 				input.input-text,
 				textarea {
-					border-color: $color_border_default;
-					border-top-color: $color_border_default;
+					border-color: map-deep-get($config-global, "color", "border", "default");
+					border-top-color: map-deep-get($config-global, "color", "border", "default");
 				}
 
 				::-webkit-input-placeholder {
-					color: $color_foreground_light;
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 
 				:-moz-placeholder {
-					color: $color_foreground_light;
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 
 				:-ms-input-placeholder {
-					color: $color_foreground_light;
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 
 				.woocommerce-SavedPaymentMethods {
 
 					.woocommerce-SavedPaymentMethods-tokenInput {
-						margin-right: $spacing_unit;
+						margin-right: map-deep-get($config-global, "spacing", "unit");
 					}
 				}
 
 				.wc-credit-card-form {
-					margin-top: $spacing_unit;
+					margin-top: map-deep-get($config-global, "spacing", "unit");
 				}
 
 				.wc-credit-card-form-card-number,
 				.wc-credit-card-form-card-expiry,
 				.wc-credit-card-form-card-cvc {
-					font-size: $fontsize_large;
-					padding: $spacing_base;
+					font-size: map-deep-get($config-global, "font", "size", "lg");
+					padding: #{0.5 * map-deep-get($config-global, "spacing", "unit")};
 				}
 
 				span.help {
-					font-size: $fontsize_small;
-					color: $color_subtext;
+					font-size: map-deep-get($config-global, "font", "size", "sm");
+					color: map-deep-get($config-global, "color", "foreground", "light");
 				}
 
 				.form-row {
-					margin: 0 0 $spacing_vertical;
+					margin: 0 0 map-deep-get($config-global, "spacing", "vertical");
 				}
 
 				p:last-child {
@@ -182,7 +182,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				}
 
 				&::before {
-					border-bottom-color: $color_border_default; /* arrow size / color */
+					border-bottom-color: map-deep-get($config-global, "color", "border", "default"); /* arrow size / color */
 				}
 			}
 
@@ -191,7 +191,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 				.about_paypal {
 					float: right;
 					line-height: 52px;
-					font-size: $fontsize_small;
+					font-size: map-deep-get($config-global, "font", "size", "sm");
 				}
 
 				img {
@@ -203,12 +203,12 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	}
 
 	.woocommerce-terms-and-conditions {
-		border-color: $color_border_default;
+		border-color: map-deep-get($config-global, "color", "border", "default");
 	}
 
 	.woocommerce-invalid {
 		#terms {
-			outline-color: $color_error;
+			outline-color: map-deep-get($config-global, "color", "alert", "error");
 		}
 	}
 }

varia/sass/vendors/woocommerce/pages/_single-product.scss

@@ -11,49 +11,49 @@
 		}
 
 		div.images {
-			margin-bottom: $spacing_vertical;
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			div.thumbnails {
-				padding-top: $spacing_unit;
+				padding-top: map-deep-get($config-global, "spacing", "unit");
 			}
 
 			.woocommerce-product-gallery__wrapper .zoomImg {
-				background-color: $color_background;
+				background-color: map-deep-get($config-global, "color", "background", "default");
 			}
 
 			.woocommerce-product-gallery__image--placeholder {
-				border-color: $color_border_light;
+				border-color: map-deep-get($config-global, "color", "border", "light");
 			}
 
 			.woocommerce-product-gallery__trigger {
-				font-size: $fontsize_medium;
-				background: $color_background;
+				font-size: map-deep-get($config-global, "font", "size", "md");
+				background: map-deep-get($config-global, "color", "background", "default");
 
 				&::before {
-					border-color: $color_border_dark;
+					border-color: map-deep-get($config-global, "color", "border", "dark");
 				}
 
 				&::after {
-					background-color: $color_border_dark;
+					background-color: map-deep-get($config-global, "color", "border", "dark");
 				}
 			}
 		}
 
 		div.summary {
-			margin-bottom: $spacing_vertical;
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 
 			span.price,
 			p.price {
-				color: $color_foreground_dark;
-				font-size: $fontsize_xl;
+				color: map-deep-get($config-global, "color", "foreground", "dark");
+				font-size: map-deep-get($config-global, "font", "size", "xl");
 			}
 
 			p.stock {
-				font-size: $fontsize_base;
+				font-size: map-deep-get($config-global, "font", "size", "base")
 			}
 
 			.stock {
-				color: $color_primary;
+				color: map-deep-get($config-global, "color", "primary", "default");
 			}
 
 			.out-of-stock {
@@ -61,13 +61,13 @@
 			}
 
 			.woocommerce-product-rating {
-				margin-bottom: $spacing_vertical;
+				margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 			}
 
 		}
 
 		div.social {
-			margin-bottom: $spacing_vertical;
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 		}
 
 		.product_meta > * {
@@ -76,50 +76,50 @@
 
 		.up-sells {
 			& > h2 {
-				font-size: $fontsize_large;
+				font-size: map-deep-get($config-global, "font", "size", "lg");
 			}
 		}
 
 		p.cart {
-			margin-bottom: $spacing_vertical;
+			margin-bottom: map-deep-get($config-global, "spacing", "vertical");
 		}
 
 		form.cart {
 
 			.variations {
-				margin-bottom: $spacing_unit;
+				margin-bottom: map-deep-get($config-global, "spacing", "unit");
 
 				td,
 				th {
-					line-height: $font_line_height;
+					line-height: map-deep-get($config-global, "font", "line-height", "body");
 				}
 
 				select {
-					margin-right: $spacing_unit;
+					margin-right: map-deep-get($config-global, "spacing", "unit");
 				}
 
 				td.label {
-					padding-right: $spacing_unit;
+					padding-right: map-deep-get($config-global, "spacing", "unit");
 				}
 			}
 
 			.woocommerce-variation-description p {
-				margin-bottom: $spacing_unit;
+				margin-bottom: map-deep-get($config-global, "spacing", "unit");
 			}
 
 			.reset_variations {
-				font-size: $fontsize_small;
+				font-size: map-deep-get($config-global, "font", "size", "sm");
 			}
 
 			.group_table {
 
 				td.woocommerce-grouped-product-list-item__label {
-					padding-right: $spacing_unit;
-					padding-left: $spacing_unit;
+					padding-right: map-deep-get($config-global, "spacing", "unit");
+					padding-left: map-deep-get($config-global, "spacing", "unit");
 				}
 
 				td {
-					padding-bottom: $spacing_unit;
+					padding-bottom: map-deep-get($config-global, "spacing", "unit");
 				}
 			}
 

varia/style-editor.css

@@ -183,6 +183,12 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
 	background-color: indigo;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 /**
  * Base
  * - Reset the browser

varia/style-rtl.css

@@ -206,6 +206,12 @@ input.has-focus[type="submit"],
 	background-color: indigo;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 /**
  * Base
  * - Reset the browser
@@ -214,6 +220,83 @@ input.has-focus[type="submit"],
  * Base
  * - Reset the browser
  */
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: indigo;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */

varia/style-woocommerce.css

@@ -249,6 +249,36 @@ body[class*="woocommerce"] #page .woocommerce.widget_shopping_cart .buttons a.ha
 	background-color: indigo;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-grid__product-onsale {
+	border-radius: 100%;
+	background-color: gold;
+	color: #111111;
+	font-size: 0.83333rem;
+	font-weight: 700;
+	font-family: sans-serif;
+	min-height: 3.236rem;
+	min-width: 3.236rem;
+	padding: 0.202rem;
+	position: absolute;
+	text-align: center;
+	text-transform: none;
+	line-height: 3.236;
+	top: -0.5em;
+	right: -0.5em;
+	left: auto;
+	margin: 0;
+	z-index: 9;
+}
+
+/**
+ * Abstracts Imports
+ */
 /**
  * WooCommerce
  */
@@ -312,33 +342,13 @@ body[class*="woocommerce"] #page .woocommerce-info:before {
 /**
  * Star ratings
  */
-body[class*="woocommerce"] #page span.onsale {
-	border-radius: 100%;
-	background-color: gold;
-	color: #111111;
-	font-size: 0.83333rem;
-	font-weight: 700;
-	font-family: sans-serif;
-	min-height: 3.236rem;
-	min-width: 3.236rem;
-	padding: 0.202rem;
-	position: absolute;
-	text-align: center;
-	line-height: 3.236;
-	top: -0.5em;
-	right: -0.5em;
-	left: auto;
-	margin: 0;
-	z-index: 9;
-}
-
 /**
  * Password strength meter
  */
 body[class*="woocommerce"] #page .woocommerce-password-strength {
 	text-align: center;
 	font-weight: 600;
-	padding: 4px;
+	padding: 0.5 * ;
 	font-size: 0.83333rem;
 }
 
@@ -395,6 +405,8 @@ body[class*="woocommerce"] #page small.note {
  */
 body[class*="woocommerce"] #page .star-rating::before {
 	color: red;
+	content: "\53\53\53\53\53";
+	opacity: 0.5;
 }
 
 body[class*="woocommerce"] #page .star-rating span {
@@ -440,7 +452,7 @@ body[class*="woocommerce"] #page table.shop_attributes td {
 
 body[class*="woocommerce"] #page table.shop_attributes td p {
 	margin: 0;
-	padding: 8px 0;
+	padding: 0;
 }
 
 body[class*="woocommerce"] #page table.shop_attributes tr:nth-child(even) td,
@@ -489,6 +501,66 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 	background-color: blue;
 }
 
+/**
+ * WooCommerce Block Grid
+ * - Used by:
+ *   .wp-block-product-new
+ *   .wp-block-product-best-sellers
+ *   .wp-block-product-on-sale
+ *   .wp-block-product-top-rated
+ *   .wp-block-product-categroy
+ *   .wp-block-products-by-attribute
+ */
+#content .wc-block-grid .wc-block-grid__product > *:not(:first-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:first-child) {
+	margin-top: 16px;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(:last-child),
+#content .wc-block-grid .wc-block-grid__product-link > *:not(:last-child) {
+	margin-bottom: 16px;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:not(img):empty + *,
+#content .wc-block-grid .wc-block-grid__product-link > *:not(img):empty + * {
+	margin-top: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:last-child,
+#content .wc-block-grid .wc-block-grid__product-link > *:last-child {
+	margin-bottom: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product > *:empty,
+#content .wc-block-grid .wc-block-grid__product-link > *:empty {
+	margin: 0;
+}
+
+#content .wc-block-grid .wc-block-grid__product-title {
+	font-family: sans-serif;
+	font-size: 1rem;
+}
+
+#content .wc-block-grid .wc-block-grid__product-rating .star-rating span:before {
+	color: red;
+}
+
+#content .wc-block-grid .wc-block-grid__product-price {
+	color: #111111;
+	font-size: 1.2rem;
+	line-height: 1.125;
+}
+
+#content .wc-block-grid .wc-block-grid__product-price ins {
+	color: yellowgreen;
+	font-weight: bold;
+}
+
+#content .wc-block-grid .wc-block-grid__product .wc-block-grid__product-onsale {
+	right: calc(-0.5em + 16px);
+	margin: 0;
+}
+
 /**
  * Components Imports
  */
@@ -610,11 +682,18 @@ body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products {
 	padding: 0;
 }
 
+#woocommerce-wrapper ul.products li.product,
+body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product,
+body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product {
+	text-align: center;
+}
+
 #woocommerce-wrapper ul.products li.product .star-rating,
 body[class*="woocommerce"] #page #add_payment_method .cart-collaterals .cross-sells ul.products li.product .star-rating,
 body[class*="woocommerce"] #page .cart-collaterals .cross-sells ul.products li.product .star-rating {
 	font-size: 0.83333rem;
-	margin: inherit;
+	margin-left: auto;
+	margin-right: auto;
 }
 
 #woocommerce-wrapper ul.products li.product h3,
@@ -829,7 +908,7 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist ul.children .
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist #respond {
-	border: 1px solid #f00000;
+	border: 1px solid #DDDDDD;
 	border-radius: 4px;
 	padding: 1em 1em 0;
 	margin: 20px 0 0 50px;
@@ -1116,12 +1195,12 @@ body[class*="woocommerce"] #page table.shop_table {
 }
 
 body[class*="woocommerce"] #page table.shop_table th {
-	padding: 8px 16px;
+	padding: 16px 16px;
 	line-height: 1.78;
 }
 
 body[class*="woocommerce"] #page table.shop_table td {
-	padding: 8px 16px;
+	padding: 16px 16px;
 	line-height: 1.78;
 }
 
@@ -1137,7 +1216,7 @@ body[class*="woocommerce"] #page table.my_account_orders {
 
 body[class*="woocommerce"] #page table.my_account_orders th,
 body[class*="woocommerce"] #page table.my_account_orders td {
-	padding: 4px 8px;
+	padding: 8px 8px;
 }
 
 body[class*="woocommerce"] #page td.product-name {
@@ -1177,7 +1256,7 @@ body[class*="woocommerce"] #page #add_payment_method table.cart img {
 body[class*="woocommerce"] #page #add_payment_method table.cart td.actions .coupon .input-text {
 	border-color: #DDDDDD;
 	padding: 8px;
-	margin: 0 8px 0 0;
+	margin: 0 16px 0 0;
 }
 
 body[class*="woocommerce"] #page #add_payment_method .wc-proceed-to-checkout {

varia/style-woocommerce.scss

@@ -11,6 +11,8 @@
 @import "sass/abstracts/config-global";
 @import "sass/abstracts/mixins";
 @import "sass/abstracts/extends";
+// WooCommerce Abstracts
+@import "sass/vendors/woocommerce/abstracts/imports";
 
 /**
  * WooCommerce

varia/style.css

@@ -206,6 +206,12 @@ input.has-focus[type="submit"],
 	background-color: indigo;
 }
 
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 /**
  * Base
  * - Reset the browser
@@ -214,6 +220,83 @@ input.has-focus[type="submit"],
  * Base
  * - Reset the browser
  */
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+button,
+.button,
+input[type="submit"],
+.wp-block-button__link,
+.wp-block-file__button, .a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before, button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+button:before,
+.button:before,
+input[type="submit"]:before,
+.wp-block-button__link:before,
+.wp-block-file__button:before, .a8c-posts-list__view-all:before, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:before {
+	margin-bottom: -0.12em;
+}
+
+button:after,
+.button:after,
+input[type="submit"]:after,
+.wp-block-button__link:after,
+.wp-block-file__button:after, .a8c-posts-list__view-all:after, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:after {
+	margin-top: -0.11em;
+}
+
+button:hover,
+.button:hover,
+input:hover[type="submit"],
+.wp-block-button__link:hover,
+.wp-block-file__button:hover, .a8c-posts-list__view-all:hover, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:hover, button:focus,
+.button:focus,
+input:focus[type="submit"],
+.wp-block-button__link:focus,
+.wp-block-file__button:focus, .a8c-posts-list__view-all:focus, body .widget_eu_cookie_law_widget #eu-cookie-law input.accept:focus, button.has-focus,
+.has-focus.button,
+input.has-focus[type="submit"],
+.has-focus.wp-block-button__link,
+.has-focus.wp-block-file__button, .has-focus.a8c-posts-list__view-all, body .widget_eu_cookie_law_widget #eu-cookie-law input.has-focus.accept {
+	color: white;
+	background-color: indigo;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -2420,11 +2503,6 @@ table th,
 	z-index: 99999;
 }
 
-.main-navigation > div > ul li:hover, .main-navigation > div > ul li[focus-within] {
-	cursor: pointer;
-	z-index: 99999;
-}
-
 .main-navigation > div > ul li:hover, .main-navigation > div > ul li:focus-within {
 	cursor: pointer;
 	z-index: 99999;
@@ -2445,14 +2523,6 @@ table th,
 		display: block;
 	}
 	.main-navigation > div > ul li:hover > ul,
-	.main-navigation > div > ul li[focus-within] > ul,
-	.main-navigation > div > ul li ul:hover,
-	.main-navigation > div > ul li ul:focus {
-		visibility: visible;
-		opacity: 1;
-		display: block;
-	}
-	.main-navigation > div > ul li:hover > ul,
 	.main-navigation > div > ul li:focus-within > ul,
 	.main-navigation > div > ul li ul:hover,
 	.main-navigation > div > ul li ul:focus {