From 11981947c59dfe1833ab1f19aa82f62271ac2149 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Thu, 14 May 2020 11:07:21 +0200
Subject: [PATCH] Add CSS resets for better theme compatibility
 (https://github.com/woocommerce/woocommerce-blocks/pull/2478)

---
 .../assets/css/abstracts/_mixins.scss         | 43 +++++++---
 .../cart-checkout/button/style.scss           |  2 +-
 .../cart-checkout/form-step/style.scss        | 14 ++--
 .../cart-checkout/policies/style.scss         |  6 +-
 .../return-to-cart-button/style.scss          |  3 +-
 .../shipping-rates-control/style.scss         |  1 +
 .../totals/totals-shipping-item/style.scss    | 58 +++++++-------
 .../components/checkbox-control/style.scss    |  1 +
 .../components/dropdown-selector/style.scss   |  4 +-
 .../components/payment-methods/style.scss     |  1 +
 .../base/components/product-list/style.scss   |  2 +-
 .../components/quantity-selector/style.scss   |  4 +-
 .../base/components/radio-control/_mixin.scss | 80 ++++++++++---------
 .../js/base/components/select/style.scss      |  7 +-
 .../base/components/sidebar-layout/style.scss | 22 ++---
 .../js/base/components/sort-select/style.scss |  4 +
 .../assets/js/base/components/tabs/style.scss |  3 +-
 .../js/base/components/text-input/style.scss  | 10 ++-
 .../blocks/cart-checkout/checkout/style.scss  |  1 +
 19 files changed, 158 insertions(+), 108 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
index f48d072567e..9531456c57d 100644
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
@@ -57,24 +57,43 @@
 	word-wrap: normal !important;
 }
 
-// Reset <button> style so we can use link style for action buttons.
-@mixin link-button() {
-	margin: 0;
-	padding: 0;
+@mixin reset-box() {
 	border: 0;
 	border-radius: 0;
+	margin: 0;
+	padding: 0;
+	vertical-align: baseline;
+}
 
-	box-shadow: none;
-	display: inline;
+@mixin reset-typography() {
+	color: inherit;
 	font-family: inherit;
 	font-size: inherit;
 	font-weight: inherit;
 	letter-spacing: inherit;
-	text-decoration: underline;
-	text-transform: none;
-	vertical-align: baseline;
+	line-height: inherit;
+	text-decoration: inherit;
+	text-transform: inherit;
+}
+
+// Reset <h1>, <h2>, etc. styles as if they were text. Useful for elements that must be headings for a11y but don't need those styles.
+@mixin text-heading() {
+	@include reset-box();
+	@include reset-typography();
+	box-shadow: none;
+	display: inline;
 
 	background: transparent;
+}
+
+// Reset <button> style as if it was text. Useful for elements that must be `<button>` for a11y but don't need those styles.
+@mixin text-button() {
+	@include reset-box();
+	@include reset-typography();
+	background: transparent;
+	box-shadow: none;
+	display: inline;
+
 	&:hover,
 	&:focus,
 	&:active {
@@ -82,6 +101,12 @@
 	}
 }
 
+// Reset <button> style so we can use link style for action buttons.
+@mixin link-button() {
+	@include text-button();
+	text-decoration: underline;
+}
+
 // Makes sure long words are broken if they overflow the container.
 @mixin wrap-break-word() {
 	// This is the current standard, works in most browsers.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
index d1045c63158..da9b952745e 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/button/style.scss
@@ -5,7 +5,7 @@
 	display: flex;
 	font-size: inherit;
 	font-weight: bold;
-	height: 3em; // 16px * 3em = 48px, same height as text-input
+	min-height: rem(48px); // 16px * 3 = 48px, same height as text-input
 	justify-content: center;
 	line-height: 1;
 	padding: 0 $gap-small;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
index 9e23ce5fb2b..94bc98507e8 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/form-step/style.scss
@@ -27,14 +27,14 @@ $line-offset-from-circle-size: 8px;
 	align-content: center;
 	flex-wrap: wrap;
 	margin-bottom: $gap-smaller;
-}
 
-.wc-block-checkout-step__title {
-	@include font-size(16px);
-	line-height: 1.5;
-	color: $gray-80;
-	font-weight: 400;
-	margin: 0 $gap-small 0 0;
+	.wc-block-checkout-step__title {
+		@include font-size(16px);
+		line-height: 1.5;
+		color: $gray-80;
+		font-weight: 400;
+		margin: 0 $gap-small 0 0;
+	}
 }
 
 .wc-block-checkout-step__heading-content {
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss
index 263ba2c6880..1fdd9f994af 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/policies/style.scss
@@ -6,6 +6,7 @@
 	line-height: 1;
 	margin: $gap-large 0;
 }
+
 .wc-block-components-checkout-policies__item {
 	list-style: none outside;
 	display: inline-block;
@@ -16,9 +17,8 @@
 		border-left: 1px solid $gray-10;
 	}
 
-	a {
+	> a {
+		color: inherit;
 		padding: 0 0.25em;
-		text-decoration: underline;
-		color: $black;
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
index 31d0ee1630c..92decc5a143 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/return-to-cart-button/style.scss
@@ -1,8 +1,9 @@
 .wc-block-components-checkout-return-to-cart-button {
+	box-shadow: none;
 	color: $gray-60;
 	padding-left: calc(24px + 0.25em);
 	position: relative;
-	text-decoration: none !important;
+	text-decoration: none;
 
 	svg {
 		left: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss
index ba82b5c37fd..080a13e52ea 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/shipping-rates-control/style.scss
@@ -12,6 +12,7 @@
 }
 
 .wc-block-shipping-rates-control__package-item {
+	@include wrap-break-word();
 	display: inline-block;
 	margin: 0;
 	padding: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss
index f92945ed5be..bf05e336cf0 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/cart-checkout/totals/totals-shipping-item/style.scss
@@ -1,33 +1,35 @@
-// Added extra class and label for specificity.
-.wc-block-shipping-totals fieldset.wc-block-shipping-totals__fieldset {
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: 0;
-}
-
-.wc-block-shipping-totals__options {
-	.wc-block-radio-control__label,
-	.wc-block-radio-control__description,
-	.wc-block-radio-control__secondary-label,
-	.wc-block-radio-control__secondary-description {
-		flex-basis: 100%;
-		text-align: left;
+.wc-block-shipping-totals {
+	// Added extra label for specificity.
+	fieldset.wc-block-shipping-totals__fieldset {
+		background-color: transparent;
+		margin: 0;
+		padding: 0;
+		border: 0;
 	}
 
-	.wc-block-radio-control__option {
-		&:last-child {
-			border-bottom: none;
+	.wc-block-shipping-totals__options {
+		.wc-block-radio-control__label,
+		.wc-block-radio-control__description,
+		.wc-block-radio-control__secondary-label,
+		.wc-block-radio-control__secondary-description {
+			flex-basis: 100%;
+			text-align: left;
+		}
+
+		.wc-block-radio-control__option {
+			&:last-child {
+				border-bottom: none;
+			}
+		}
+	}
+
+	.wc-block-shipping-totals__change-address-button {
+		@include link-button();
+
+		&:hover,
+		&:focus,
+		&:active {
+			opacity: 0.8;
 		}
 	}
 }
-
-.wc-block-shipping-totals__change-address-button {
-	@include link-button();
-
-	&:hover,
-	&:focus,
-	&:active {
-		opacity: 0.8;
-	}
-}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
index 83bec568885..5cef334d042 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/checkbox-control/style.scss
@@ -1,4 +1,5 @@
 .wc-block-checkbox {
+	@include reset-typography();
 	display: block;
 	position: relative;
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
index eb14b133233..c5d61ae3246 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/dropdown-selector/style.scss
@@ -143,7 +143,7 @@
 }
 
 .wc-block-dropdown-selector__list {
-	list-style: none;
+	background-color: #fff;
 	margin: -1px 0 0;
 	padding: 0;
 	position: absolute;
@@ -160,10 +160,10 @@
 }
 
 .wc-block-dropdown-selector__list-item {
-	background-color: #fff;
 	color: $core-grey-dark-600;
 	cursor: default;
 	font-size: 0.8em;
+	list-style: none;
 	margin: 0;
 	padding: 0 $gap-smallest;
 
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
index 33aca132441..03ab65d0c09 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/style.scss
@@ -91,6 +91,7 @@
 	}
 
 	label {
+		@include reset-typography();
 		@include font-size(16px, 22px);
 		position: absolute;
 		transform: translateY(0.75em);
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
index faba1bf1ce0..ca148a969af 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/product-list/style.scss
@@ -36,7 +36,6 @@
 .wc-block-grid__products {
 	display: flex;
 	flex-wrap: wrap;
-	list-style: none;
 	padding: 0;
 	margin: 0 (-$gap/2) $gap;
 	background-clip: padding-box;
@@ -53,6 +52,7 @@
 	border-left: $gap/2 solid transparent;
 	border-right: $gap/2 solid transparent;
 	border-bottom: $gap solid transparent;
+	list-style: none;
 }
 
 // Extra specificity to avoid editor styles on linked images.
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
index b5d812dffff..a7eca4a36e9 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/quantity-selector/style.scss
@@ -3,6 +3,7 @@
 	padding: 0;
 	margin: 0;
 	background: none transparent;
+	box-shadow: none;
 
 	&:focus {
 		outline: 2px solid $core-grey-light-600;
@@ -18,6 +19,7 @@
 
 	// Extra label for specificity needed in the editor.
 	input.wc-block-quantity-selector__input {
+		@include font-size(16px);
 		order: 2;
 		min-width: 40px;
 		flex: 1 1 auto;
@@ -47,11 +49,11 @@
 	}
 	.wc-block-quantity-selector__button {
 		@include reset-button;
+		@include font-size(16px);
 		min-width: 30px;
 		cursor: pointer;
 		color: $core-grey-dark-700;
 		font-style: normal;
-		font-size: 1em;
 		text-align: center;
 
 		&:hover,
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
index 6bb40106d82..7bde4929f08 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/radio-control/_mixin.scss
@@ -1,5 +1,6 @@
 @mixin radio-control-styles {
 	.wc-block-radio-control__option {
+		@include reset-typography();
 		border-bottom: 1px solid $core-grey-light-600;
 		display: block;
 		padding: $gap-small $gap-small 0 #{$gap-larger * 2};
@@ -56,47 +57,50 @@
 }
 
 @mixin radio-control-input-styles {
-	.wc-block-radio-control__input {
-		appearance: none;
-		background: #fff;
-		border: 2px solid currentColor;
-		border-radius: 50%;
-		display: inline-block;
-		height: 1.25rem;
-		min-height: 20px;
-		min-width: 20px;
-		width: 1.25rem;
-
-		&:checked::before {
-			background: currentColor;
-			border-radius: 50%;
-			content: "";
-			display: block;
-			height: 0.625em;
-			left: 50%;
-			margin: 0;
-			min-height: 10px;
-			min-width: 10px;
-			position: absolute;
-			top: 50%;
-			transform: translate(-50%, -50%);
-			width: 0.625em;
-		}
-	}
-
-	@include breakpoint( ">782px" ) {
+	// Extra class for specificity.
+	.wc-block-radio-control {
 		.wc-block-radio-control__input {
-			height: 1rem;
-			margin-top: 2px;
-			min-height: 16px;
-			min-width: 16px;
-			width: 1rem;
+			appearance: none;
+			background: #fff;
+			border: 2px solid currentColor;
+			border-radius: 50%;
+			display: inline-block;
+			height: 1.25rem;
+			min-height: 20px;
+			min-width: 20px;
+			width: 1.25rem;
 
 			&:checked::before {
-				height: 0.5em;
-				min-height: 8px;
-				min-width: 8px;
-				width: 0.5em;
+				background: currentColor;
+				border-radius: 50%;
+				content: "";
+				display: block;
+				height: 0.625em;
+				left: 50%;
+				margin: 0;
+				min-height: 10px;
+				min-width: 10px;
+				position: absolute;
+				top: 50%;
+				transform: translate(-50%, -50%);
+				width: 0.625em;
+			}
+		}
+
+		@include breakpoint( ">782px" ) {
+			.wc-block-radio-control__input {
+				height: 1rem;
+				margin-top: 2px;
+				min-height: 16px;
+				min-width: 16px;
+				width: 1rem;
+
+				&:checked::before {
+					height: 0.5em;
+					min-height: 8px;
+					min-width: 8px;
+					width: 0.5em;
+				}
 			}
 		}
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
index 8d2ffb3850f..ddaab7e166c 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
@@ -1,9 +1,10 @@
 .wc-block-select {
-	height: 3em;
+	height: rem(48px);
 	position: relative;
-	margin-bottom: $gap-large;
+	margin-bottom: rem($gap-large);
 
 	label {
+		@include reset-typography();
 		@include font-size(16px, 22px);
 		position: absolute;
 		transform: translateY(0.75em);
@@ -43,7 +44,7 @@
 		color: $input-text-active;
 		font-family: inherit;
 		font-weight: normal;
-		height: 3em;
+		height: rem(48px);
 		letter-spacing: inherit;
 		line-height: 1;
 		overflow: hidden;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
index 4f4e1afd334..5b961b0fbc1 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sidebar-layout/style.scss
@@ -24,6 +24,7 @@
 		&.is-opened {
 			padding-left: 0;
 			padding-right: 0;
+			padding-top: 0;
 
 			> .components-panel__body-title {
 				margin-bottom: 0;
@@ -33,26 +34,29 @@
 		}
 	}
 
-	.components-panel__body-title,
-	.components-panel__body-toggle {
-		&,
+	.components-panel__body-title {
+		@include text-heading();
+		background: transparent;
+
 		&:hover,
 		&:focus,
 		&:active {
-			background-color: transparent;
-			color: inherit;
+			background: transparent;
 		}
 	}
 
 	.components-panel__body-toggle {
+		@include reset-typography();
+		background: transparent;
 		font-weight: normal;
 		font-size: inherit;
 		padding-left: 0;
 		padding-right: 36px;
 
-		&.components-button,
-		&.components-button:focus:not(:disabled):not([aria-disabled="true"]) {
-			color: inherit;
+		&:hover,
+		&:focus,
+		&:active {
+			background: transparent;
 		}
 
 		.components-panel__arrow {
@@ -66,7 +70,7 @@
 .is-mobile {
 	&.wc-block-sidebar-layout {
 		flex-direction: column;
-		margin: 0 0 $gap;
+		margin: 0 auto $gap;
 
 		.wc-block-main {
 			padding: 0;
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/sort-select/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/sort-select/style.scss
index 901dfd9a66b..673b721ec68 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/sort-select/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/sort-select/style.scss
@@ -7,3 +7,7 @@
 	display: inline-block;
 	font-weight: normal;
 }
+
+.wc-block-sort-select__select {
+	width: max-content;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
index e9f50c5526d..92c54885fd9 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/tabs/style.scss
@@ -25,10 +25,10 @@
 				outline: 1px dotted $gray-60;
 			}
 			.wc-block-components-tabs__item-content {
+				@include font-size(16px, 16px);
 				width: fit-content;
 				display: inline-block;
 				font-weight: bold;
-				line-height: 1em;
 
 				> img,
 				> svg {
@@ -50,5 +50,6 @@
 	}
 	.wc-block-components-tabs__content {
 		padding: $gap 0;
+		text-transform: none;
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
index 8afe5da3ae2..ee4a08d1601 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/text-input/style.scss
@@ -1,9 +1,10 @@
 .wc-block-text-input {
 	position: relative;
-	margin-bottom: $gap-large;
+	margin-bottom: rem($gap-large);
 	white-space: nowrap;
 
 	label {
+		@include reset-typography();
 		@include font-size(16px);
 		position: absolute;
 		transform: translateY(0.75em);
@@ -37,7 +38,7 @@
 	input[type="email"] {
 		@include font-size(16px);
 		background-color: #fff;
-		padding: $gap-small $gap;
+		padding: rem($gap-small) $gap;
 		border-radius: 4px;
 		border: 1px solid $input-border-gray;
 		width: 100%;
@@ -45,7 +46,8 @@
 		font-family: inherit;
 		margin: 0;
 		box-sizing: border-box;
-		height: 3em;
+		height: rem(48px);
+		min-height: 0;
 		color: $input-text-active;
 
 		&:focus {
@@ -57,7 +59,7 @@
 	&.is-active input[type="url"],
 	&.is-active input[type="text"],
 	&.is-active input[type="email"] {
-		padding: rem($gap-large) $gap rem($gap-smallest);
+		padding: rem($gap-large) 0 rem($gap-smallest) $gap;
 	}
 
 	&.has-error input {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
index 306cd5a8c60..3693f9c1dc7 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/style.scss
@@ -93,6 +93,7 @@
 		// This distinguishes it from the product image.
 		box-shadow: 0 0 0 2px #fff;
 		display: flex;
+		line-height: 1;
 		min-height: 22px;
 		position: absolute;
 		justify-content: center;