Varia: Updating WC support to work with Global Styles

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

@@ -40,7 +40,7 @@
 	}
 
 	.wc-block-grid__product-title {
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: map-deep-get($config-global, "font", "size", "base")
 	}
 

varia/sass/vendors/woocommerce/components/_mini-cart.scss

@@ -106,7 +106,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		ul.cart_list li a:not(.remove),
 		ul.product_list_widget li a:not(.remove),
 		.woocommerce-mini-cart__total {
-			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
+			@include font-family( map-deep-get($config-header, "main-nav", "font", "family") );
 			font-size: #{map-deep-get($config-global, "font", "size", "base")};
 		}
 	}

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

@@ -15,7 +15,7 @@ body[class*="woocommerce"] #page .woocommerce-pagination {
 
 		li > * {
 			display: block;
-			font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+			@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 			font-size: #{map-deep-get($config-global, "font", "size", "md")};
 			font-weight: 600;
 			padding-left: calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")};

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

@@ -78,7 +78,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 
 			h2,
 			.comment-reply-title {
-				font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+				@include 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

@@ -48,7 +48,7 @@ body[class*="woocommerce"] #page { // adding #content here to override default w
 					}
 
 					.woocommerce-review__author {
-						font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+						@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 					}
 
 					.comment-text {

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

@@ -8,7 +8,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 		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")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		color: map-deep-get($config-global, "color", "foreground", "light");
 
 		a {

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

@@ -22,7 +22,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 	td.product-name {
 
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-weight: 700;
 
 		a {

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

@@ -4,7 +4,7 @@
 body[class*="woocommerce"] #page { // adding #page here to override default wc styles without !important
 
 	.woocommerce-order h2 {
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 		font-size: map-deep-get($config-global, "font", "size", "lg");
 		font-weight: bold;
 	}
@@ -18,7 +18,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 
 		li {
 			border: none;
-			font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+			@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 			font-size: map-deep-get($config-global, "font", "size", "sm");
 			margin-right: 0;
 			padding: map-deep-get($config-woocommerce, "table", "padding");
@@ -33,7 +33,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 			}
 
 			strong {
-				font-family: #{map-deep-get($config-global, "font", "family", "secondary")};
+				@include font-family( map-deep-get($config-global, "font", "family", "secondary") );
 				font-size: map-deep-get($config-global, "font", "size", "md");
 				line-height: map-deep-get($config-global, "font", "line-height", "heading");
 			}
@@ -220,7 +220,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 	}
 
 	.checkout h3 {
-		font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+		@include 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/widgets/_cart-widget.scss

@@ -13,7 +13,7 @@ body[class*="woocommerce"] #page { // adding #page here to override default wc s
 		li {
 
 			a:not(.remove) {
-				font-family: #{map-deep-get($config-global, "font", "family", "primary")};
+				@include font-family( map-deep-get($config-global, "font", "family", "primary") );
 				line-height: #{map-deep-get($config-global, "font", "line-height", "heading")};
 			}
 

varia/style-rtl.css

@@ -136,7 +136,10 @@ $grid-configuration: map-extend($grid-configuration-default, $grid-configuration
  * - Sets a fixed-width on content within alignwide and alignfull blocks
  */
 /**
-<<<<<<< HEAD
+ * Add font-family using CSS variables.
+ * It also adds the proper fallback for browsers without support.
+ */
+/**
  * Extends
  */
 /**
@@ -155,6 +158,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	background-color: blue;
 	border-radius: 9px;
@@ -215,10 +219,6 @@ input.has-focus[type="submit"],
  * - Since buttons appear in various blocks,
  *   let’s use a placeholder to keep them all
  *   in-sync
-=======
- * Add font-family using CSS variables.
- * It also adds the proper fallback for browsers without support.
->>>>>>> master
  */
 /**
  * Base
@@ -244,6 +244,7 @@ input[type="submit"],
 	cursor: pointer;
 	font-weight: bold;
 	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	background-color: blue;
 	border-radius: 9px;
@@ -1193,75 +1194,6 @@ object {
 /**
  * Button
  */
-<<<<<<< HEAD
-=======
-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-family: var(--font-headings, 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;
-}
-
->>>>>>> master
 /**
  * Block Options
  */

varia/style-woocommerce.css

@@ -315,7 +315,8 @@ body[class*="woocommerce"] #page span.onsale, #content .wc-block-grid .wc-block-
 body[class*="woocommerce"] #page .woocommerce-breadcrumb {
 	margin-bottom: 32px;
 	font-size: 1rem;
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	color: #767676;
 }
 
@@ -618,7 +619,8 @@ body[class*="woocommerce"] #page .woocommerce input.button:disabled[disabled]:ho
 }
 
 #content .wc-block-grid .wc-block-grid__product-title {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1rem;
 }
 
@@ -825,7 +827,8 @@ body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li .qua
 body[class*="woocommerce"] #page .main-navigation ul.cart_list li a:not(.remove),
 body[class*="woocommerce"] #page .main-navigation ul.product_list_widget li a:not(.remove),
 body[class*="woocommerce"] #page .main-navigation .woocommerce-mini-cart__total {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1rem;
 }
 
@@ -850,7 +853,8 @@ body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers {
 
 body[class*="woocommerce"] #page .woocommerce-pagination .page-numbers li > * {
 	display: block;
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.2rem;
 	font-weight: 600;
 	padding-left: calc(0.66 * 16px);
@@ -1059,7 +1063,8 @@ body[class*="woocommerce"] #page .woocommerce-tabs .panel {
 
 body[class*="woocommerce"] #page .woocommerce-tabs .panel h2,
 body[class*="woocommerce"] #page .woocommerce-tabs .panel .comment-reply-title {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 }
@@ -1107,7 +1112,8 @@ body[class*="woocommerce"] #page #reviews #comments ol.commentlist li img.avatar
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .woocommerce-review__author {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 }
 
 body[class*="woocommerce"] #page #reviews #comments ol.commentlist li .comment-text {
@@ -1390,7 +1396,8 @@ body[class*="woocommerce"] #page td.product-thumbnail img {
 }
 
 body[class*="woocommerce"] #page td.product-name {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-weight: 700;
 }
 
@@ -1423,7 +1430,8 @@ body[class*="woocommerce"] #page table.cart td.actions .input-text {
  * Checkout page
  */
 body[class*="woocommerce"] #page .woocommerce-order h2 {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 }
@@ -1438,7 +1446,8 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details {
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li {
 	border: none;
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 0.83333rem;
 	margin-right: 0;
 	padding: 16px;
@@ -1454,7 +1463,8 @@ body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li:no
 }
 
 body[class*="woocommerce"] #page .woocommerce-order-overview.order_details li strong {
-	font-family: ("fallback": "serif", "css-var": "--font-base");
+	font-family: serif;
+	font-family: var(--font-base, serif);
 	font-size: 1.2rem;
 	line-height: 1.125;
 }
@@ -1630,7 +1640,8 @@ body[class*="woocommerce"] #page .woocommerce-invalid #terms {
 }
 
 body[class*="woocommerce"] #page .checkout h3 {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	font-size: 1.44rem;
 	font-weight: bold;
 }
@@ -1853,7 +1864,8 @@ body[class*="woocommerce"] #page {
 
 body[class*="woocommerce"] #page ul.cart_list li a:not(.remove),
 body[class*="woocommerce"] #page ul.product_list_widget li a:not(.remove) {
-	font-family: ("fallback": "sans-serif", "css-var": "--font-headings");
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
 	line-height: 1.125;
 }