From 9e7623567e83f996885d157f54196bf300b1dc41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Juh=C3=A9=20Lluveras?= <contact@albertjuhe.com>
Date: Thu, 30 Apr 2020 12:18:12 +0200
Subject: [PATCH] Make all font sizes accessible + add docs about font-size()
 mixin (https://github.com/woocommerce/woocommerce-blocks/pull/2291)

* Switch all font-sizes to use the mixin

* Add notice in coding-guidelines to use accessible font sizes

* Fix label alignment in forms with big font-sizes

* Fix Stripe input boxes font-size not being responsive

* Fix select overflowing in small font sizes

* Add rem function from woocommerce/woocommerce-blocks#2320

* Make the font-size() mixin set relative line-height values

* Convert several magic numbers to use the new mixins

* Update docs

* Update input/select paddings to use the rem mixin

* Add lineHeight comment

* Interpolate rem() mixin inside calc

* Make input padding use only relative units
---
 .../assets/css/abstracts/_mixins.scss         |  8 +++++--
 .../no-payment-methods/style.scss             |  2 +-
 .../components/payment-methods/style.scss     | 12 ++++------
 .../js/base/components/select/style.scss      |  9 ++++---
 .../js/base/components/text-input/style.scss  |  4 ++--
 .../js/blocks/attribute-filter/editor.scss    |  5 ++--
 .../blocks/cart-checkout/checkout/editor.scss |  2 +-
 .../no-shipping-placeholder/style.scss        |  2 +-
 .../assets/js/blocks/price-filter/editor.scss |  5 ++--
 .../js/blocks/product-categories/style.scss   |  6 ++---
 .../js/blocks/product-search/style.scss       |  2 +-
 .../assets/js/blocks/products/editor.scss     |  5 ++--
 .../stripe/credit-card/use-element-options.js | 24 ++++++++++++++++++-
 .../docs/contributors/coding-guidelines.md    |  8 +++++++
 14 files changed, 61 insertions(+), 33 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
index 4d035497397..54048c1f1d6 100644
--- a/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce-blocks/assets/css/abstracts/_mixins.scss
@@ -1,9 +1,9 @@
-// Rem output with px fallback
+// Converts a font-size in px to rem and optionally sets a relative line-height.
 @mixin font-size($sizeValue: 16, $lineHeight: false ) {
 	font-size: $sizeValue + px;
 	font-size: ($sizeValue / 16) + rem;
 	@if ($lineHeight) {
-		line-height: $lineHeight;
+		line-height: $lineHeight / $sizeValue;
 	}
 }
 
@@ -118,3 +118,7 @@
 	// IE11 doesn't support overflow-wrap neither word-break: break-word, so we fallback to -ms-work-break: break-all.
 	-ms-word-break: break-all;
 }
+
+@function rem($size, $base: 16px ) {
+	@return $size / $base * 1rem;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
index 71713e6648d..29bb9b2241c 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/payment-methods/no-payment-methods/style.scss
@@ -14,9 +14,9 @@
 		}
 
 		.wc-block-checkout__no-payment-methods-placeholder-description {
+			@include font-size(13);
 			display: block;
 			margin: 0.25em 0 1em 0;
-			font-size: 13px;
 		}
 	}
 }
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 4fa138d2aa8..7b3596bc278 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
@@ -69,17 +69,16 @@
 	}
 
 	.wc-block-gateway-input {
+		@include font-size(16, 22);
 		background-color: #fff;
 		padding: $gap-small $gap;
 		border-radius: 4px;
 		border: 1px solid $input-border-gray;
 		width: 100%;
-		font-size: 16px;
-		line-height: 22px;
 		font-family: inherit;
 		margin: 0;
 		box-sizing: border-box;
-		height: 48px;
+		height: 3em;
 		color: $input-text-active;
 
 		&:focus {
@@ -92,13 +91,12 @@
 	}
 
 	label {
+		@include font-size(16, 22);
 		position: absolute;
-		transform: translateY(#{$gap-small});
+		transform: translateY(0.75em);
 		left: 0;
 		top: 0;
 		transform-origin: top left;
-		font-size: 16px;
-		line-height: 22px;
 		color: $gray-50;
 		transition: transform 200ms ease;
 		margin: 0 $gap;
@@ -130,7 +128,7 @@
 
 	.wc-block-gateway-input.focused.empty,
 	.wc-block-gateway-input:not(.empty) {
-		padding: $gap-large $gap $gap-smallest;
+		padding: rem($gap-large) $gap rem($gap-smallest);
 		& + label {
 			transform: translateY(#{$gap-smallest}) scale(0.75);
 		}
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 5392f9cb6f3..8a7cd6f89a2 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/base/components/select/style.scss
@@ -1,15 +1,14 @@
 .wc-block-select {
-	height: 48px;
+	height: 3em;
 	position: relative;
 	margin-bottom: $gap-large;
 
 	label {
-		@include font-size(16);
+		@include font-size(16, 22);
 		position: absolute;
-		transform: translateY(#{$gap-small});
+		transform: translateY(0.75em);
 		transform-origin: top left;
 		transition: all 200ms ease;
-		line-height: 22px;
 		color: $gray-50;
 		z-index: 1;
 		margin: 0 $gap;
@@ -48,7 +47,7 @@
 		letter-spacing: inherit;
 		line-height: 1;
 		overflow: hidden;
-		padding: $gap-large $gap $gap-smallest;
+		padding: rem($gap-large) $gap rem($gap-smallest);
 		text-overflow: ellipsis;
 		text-transform: none;
 		white-space: nowrap;
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 33592e8033b..393762e305d 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
@@ -6,7 +6,7 @@
 	label {
 		@include font-size(16);
 		position: absolute;
-		transform: translateY(#{$gap-small});
+		transform: translateY(0.75em);
 		left: 0;
 		top: 0;
 		transform-origin: top left;
@@ -57,7 +57,7 @@
 	&.is-active input[type="url"],
 	&.is-active input[type="text"],
 	&.is-active input[type="email"] {
-		padding: $gap-large $gap $gap-smallest;
+		padding: rem($gap-large) $gap rem($gap-smallest);
 	}
 
 	&.has-error input {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/editor.scss
index c6d2bc48b40..253d5cb9202 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/attribute-filter/editor.scss
@@ -13,7 +13,7 @@
 		display: block; /* Disable flex box */
 
 		p {
-			font-size: 14px;
+			@include font-size(14);
 		}
 	}
 	.woocommerce-search-list__search {
@@ -22,11 +22,10 @@
 		padding-top: 0;
 	}
 	.wc-block-attribute-filter__add_attribute_button {
+		@include font-size(14, 24);
 		margin: 0 0 1em;
-		line-height: 24px;
 		vertical-align: middle;
 		height: auto;
-		font-size: 14px;
 		padding: 0.5em 1em;
 
 		svg {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
index b75322ea154..919dd030bcf 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/editor.scss
@@ -1,6 +1,6 @@
 .editor-styles-wrapper {
 	.wp-block h4.wc-block-checkout-step__title {
-		font-size: 16px;
+		@include font-size(16);
 		line-height: 24px;
 		margin: 0 $gap-small 0 0;
 	}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss
index 4e96852a889..83a1f376f4f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/cart-checkout/checkout/no-shipping-placeholder/style.scss
@@ -14,9 +14,9 @@
 		}
 
 		.wc-block-checkout__no-shipping-placeholder-description {
+			@include font-size(13);
 			display: block;
 			margin: 0.25em 0 1em 0;
-			font-size: 13px;
 		}
 	}
 }
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/editor.scss
index a0cf35103e3..ed249a55b97 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/price-filter/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/price-filter/editor.scss
@@ -24,15 +24,14 @@
 		display: block; /* Disable flex box */
 
 		p {
-			font-size: 14px;
+			@include font-size(14);
 		}
 	}
 	.wc-block-price-slider__add_product_button {
+		@include font-size(14, 24);
 		margin: 0 0 1em;
-		line-height: 24px;
 		vertical-align: middle;
 		height: auto;
-		font-size: 14px;
 		padding: 0.5em 1em;
 
 		svg {
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
index 91191c605cf..652537f2edc 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-categories/style.scss
@@ -63,16 +63,16 @@
 	display: flex;
 	align-items: center;
 	text-decoration: none;
-	font-size: 13px;
+	@include font-size(13);
 	margin: 0;
 	border: none;
 	cursor: pointer;
 	background: none;
-	padding: 8px;
+	padding: rem(8, 13);
 	color: #555d66;
 	position: relative;
 	overflow: hidden;
-	border-radius: 4px;
+	border-radius: rem(4, 13);
 	svg {
 		fill: currentColor;
 		outline: none;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss b/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss
index ad91da25a31..72ff45c40b2 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/product-search/style.scss
@@ -8,10 +8,10 @@
 		flex-grow: 1;
 	}
 	.wc-block-product-search__button {
+		@include font-size(13);
 		display: flex;
 		align-items: center;
 		text-decoration: none;
-		font-size: 13px;
 		margin: 0 0 0 6px;
 		border: none;
 		cursor: pointer;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss
index 76863c53c35..ca36758e39f 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/products/editor.scss
@@ -13,15 +13,14 @@
 		display: block; /* Disable flex box */
 
 		p {
-			font-size: 14px;
+			@include font-size(14);
 		}
 	}
 	.wc-block-products__add_product_button {
+		@include font-size(14, 24);
 		margin: 0 0 1em;
-		line-height: 24px;
 		vertical-align: middle;
 		height: auto;
-		font-size: 14px;
 		padding: 0.5em 1em;
 
 		svg {
diff --git a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/use-element-options.js b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/use-element-options.js
index 5f73fc2afdb..22d096d2f24 100644
--- a/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/use-element-options.js
+++ b/plugins/woocommerce-blocks/assets/js/payment-method-extensions/payment-methods/stripe/credit-card/use-element-options.js
@@ -7,6 +7,27 @@ import { useState, useEffect, useCallback } from '@wordpress/element';
  * @typedef {import('../stripe-utils/type-defs').StripeElementOptions} StripeElementOptions
  */
 
+/**
+ * Returns the CSS value of the specified property in the document element.
+ *
+ * @param {string} property     Name of the property to retrieve the style
+ *                              value from.
+ * @param {string} defaultValue Fallback value if the value for the property
+ *                              could not be retrieved.
+ *
+ * @return {string} The style value of that property in the document element.
+ */
+const getDocumentStyle = ( property, defaultValue ) => {
+	let documentStyle = {};
+	if (
+		typeof window === 'object' &&
+		typeof window.getComputedStyle === 'function'
+	) {
+		documentStyle = window.getComputedStyle( document.documentElement );
+	}
+	return documentStyle[ property ] || defaultValue;
+};
+
 /**
  * Default options for the stripe elements.
  */
@@ -15,7 +36,8 @@ const elementOptions = {
 		base: {
 			iconColor: '#666EE8',
 			color: '#31325F',
-			fontSize: '15px',
+			fontSize: getDocumentStyle( 'fontSize', '16px' ),
+			lineHeight: 1.375, // With a font-size of 16px, line-height will be 22px.
 			'::placeholder': {
 				color: '#fff',
 			},
diff --git a/plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md b/plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md
index 6816d1295ee..709804b2e8a 100644
--- a/plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md
+++ b/plugins/woocommerce-blocks/docs/contributors/coding-guidelines.md
@@ -82,3 +82,11 @@ Or exclude blocks of CSS:
 The build process will split SCSS from within the blocks library directory into two separate CSS files when Webpack runs.
 
 Styles placed in a `style.scss` file will be built into `build/style.css`, to load on the front end theme as well as in the editor. If you need additional styles specific to the block's display in the editor, add them to an `editor.scss`.
+
+### Accessible font sizes
+
+We want our font sizes to be declared with rem or em units instead of hardcoded px. That's important for accessibility because it allows users to make the text bigger and easier to read.
+
+We have a mixin named `font-size()` that given a number of the font size in px, it converts it to rem. It accepts a second parameter which is the line height, it will be divided by the font-size and the result will be the relative units for the `line-height` CSS property.
+
+In parallel to that, consider whether other size/distance units in your CSS need to be rem/em instead of px. In general, rem/em should be preferred if it doesn't break the design with big font sizes. There is another mixin named `rem()` that helps converting px units to rem (given a px size and optionally a base size).