From db8ca2939a42c4cd0beb157bf879e3a62a738ed3 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 3 Aug 2020 09:01:04 +0300
Subject: [PATCH 01/25] Button Block: Use relative instead of absolute units

---
 packages/block-library/src/button/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 7589e44ab9352..0d9921e9e8c19 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -1,4 +1,4 @@
-$blocks-button__height: 56px;
+$blocks-button__height: 3.1em;
 
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
@@ -10,8 +10,8 @@ $blocks-button__height: 56px;
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
-	font-size: $big-font-size;
-	padding: 12px 24px;
+	font-size: 1.125em;
+	padding: 0.67em 1.33em;
 	text-align: center;
 	text-decoration: none;
 	overflow-wrap: break-word;

From 20e96a5222ccf631d2d0c877b11820fb16e3474d Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 3 Aug 2020 09:09:20 +0300
Subject: [PATCH 02/25] Use relative units for calendar paddings

---
 packages/block-library/src/calendar/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index 85f2c675cdfc2..8d6b65a5fa298 100644
--- a/packages/block-library/src/calendar/style.scss
+++ b/packages/block-library/src/calendar/style.scss
@@ -3,7 +3,7 @@
 
 	th,
 	tbody td {
-		padding: 4px;
+		padding: 0.25em;
 		border: 1px solid $gray-200;
 	}
 

From 47efef0d05ce01dec0d547dbd245c6ccd18a16e5 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Mon, 3 Aug 2020 16:41:42 +0300
Subject: [PATCH 03/25] Paragraph block: Use relative instead of absolute units

---
 packages/block-library/src/paragraph/style.scss | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index ddea388de29ba..4f6d2752a6d3f 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -1,17 +1,17 @@
 .is-small-text {
-	font-size: 14px;
+	font-size: 0.875rem;
 }
 
 .is-regular-text {
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 .is-large-text {
-	font-size: 36px;
+	font-size: 2.25rem;
 }
 
 .is-larger-text {
-	font-size: 48px;
+	font-size: 3rem;
 }
 
 // Don't show the drop cap when editing the paragraph's content. It causes a
@@ -29,7 +29,7 @@
 }
 
 p.has-background {
-	padding: $block-bg-padding--v $block-bg-padding--h;
+	padding: 1.25em 2.375em;
 }
 
 p.has-text-color a {

From 3eb326ab1fbc1a9782cf5ed84efb4ea092aa14b4 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 14:33:49 +0300
Subject: [PATCH 04/25] Text Columns: Prefer relative units

---
 packages/block-library/src/text-columns/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/text-columns/style.scss b/packages/block-library/src/text-columns/style.scss
index 63f0ac4e6f669..f6133012431bd 100644
--- a/packages/block-library/src/text-columns/style.scss
+++ b/packages/block-library/src/text-columns/style.scss
@@ -6,7 +6,7 @@
 	}
 
 	.wp-block-column {
-		margin: 0 16px;
+		margin: 0 1rem;
 		padding: 0;
 
 		&:first-child {

From b204bf8f109824c4b51ba56986e310626b2d30c5 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 14:42:19 +0300
Subject: [PATCH 05/25] Quote block: Prefer relative units

---
 packages/block-library/src/quote/style.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss
index c1206d68958f7..45411208169c5 100644
--- a/packages/block-library/src/quote/style.scss
+++ b/packages/block-library/src/quote/style.scss
@@ -1,18 +1,18 @@
 .wp-block-quote {
 	&.is-style-large,
 	&.is-large {
-		margin: 0 0 16px;
+		margin: 0 0 1rem;
 		padding: 0 1em;
 
 		p {
-			font-size: 24px;
+			font-size: 1.5rem;
 			font-style: italic;
 			line-height: 1.6;
 		}
 
 		cite,
 		footer {
-			font-size: 18px;
+			font-size: 1.125rem;
 			text-align: right;
 		}
 	}

From 7ae267a77df11fe6fa5e0b40a1e098111cda9fc7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 14:51:26 +0300
Subject: [PATCH 06/25] Pullquote block: Prefer relative units

---
 packages/block-library/src/pullquote/figure.native.scss | 2 +-
 packages/block-library/src/pullquote/style.scss         | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/block-library/src/pullquote/figure.native.scss b/packages/block-library/src/pullquote/figure.native.scss
index e4f12c8c415fd..adb922580b100 100644
--- a/packages/block-library/src/pullquote/figure.native.scss
+++ b/packages/block-library/src/pullquote/figure.native.scss
@@ -1,6 +1,6 @@
 %shared {
 	border-width: 3px 0;
-	padding: 21px 16px;
+	padding: 1.3125rem 1rem;
 }
 
 .light {
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index 4394548bfd2af..d0277810d1833 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -9,12 +9,12 @@
 		max-width: $content-width / 2;
 
 		p {
-			font-size: 20px;
+			font-size: 1.25rem;
 		}
 	}
 
 	p {
-		font-size: 28px;
+		font-size: 1.75rem;
 		line-height: 1.6;
 	}
 
@@ -43,7 +43,7 @@
 		p {
 			margin-top: 0;
 			margin-bottom: 0;
-			font-size: 32px;
+			font-size: 2rem;
 		}
 
 		cite {

From 519dae7f9f751e01577c3701ce5637ef8a9fc32a Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 14:56:40 +0300
Subject: [PATCH 07/25] also apply changes to native

---
 packages/block-library/src/pullquote/blockquote.native.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/pullquote/blockquote.native.scss b/packages/block-library/src/pullquote/blockquote.native.scss
index e8022091e99c6..985bcb07360bb 100644
--- a/packages/block-library/src/pullquote/blockquote.native.scss
+++ b/packages/block-library/src/pullquote/blockquote.native.scss
@@ -1,8 +1,8 @@
 .quote {
-	font-size: 18px;
+	font-size: 1.125rem;
 }
 
 .citation {
-	font-size: 14px;
-	margin-top: 12px;
+	font-size: 0.875rem;
+	margin-top: 0.75rem;
 }

From 8ee37dd34d30176f5ff04147f1990b6d7146a499 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 15:12:39 +0300
Subject: [PATCH 08/25] Latest Comments Block: Prefer relative units

---
 .../src/latest-comments/style.scss            | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
index 81ebe5dbf5937..d5188a89059dc 100644
--- a/packages/block-library/src/latest-comments/style.scss
+++ b/packages/block-library/src/latest-comments/style.scss
@@ -1,16 +1,16 @@
 .wp-block-latest-comments__comment {
-	font-size: 15px;
+	font-size: 1rem;
 	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
 	.has-avatars & {
-		min-height: 36px;
+		min-height: 2.25rem;
 		list-style: none;
 
 		.wp-block-latest-comments__comment-meta,
 		.wp-block-latest-comments__comment-excerpt {
-			margin-left: 52px;
+			margin-left: 3.25rem;
 		}
 	}
 
@@ -21,23 +21,23 @@
 }
 
 .wp-block-latest-comments__comment-excerpt p {
-	font-size: 14px;
+	font-size: 0.875rem;
 	line-height: 1.8;
-	margin: 5px 0 20px;
+	margin: 0.3125rem 0 1.25rem;
 }
 
 .wp-block-latest-comments__comment-date {
 	color: $dark-gray-100;
 	display: block;
-	font-size: 12px;
+	font-size: 0.75rem;
 }
 
 .wp-block-latest-comments .avatar,
 .wp-block-latest-comments__comment-avatar {
-	border-radius: 24px;
+	border-radius: 1.5rem;
 	display: block;
 	float: left;
-	height: 40px;
-	margin-right: 12px;
-	width: 40px;
+	height: 2.5rem;
+	margin-right: 0.75rem;
+	width: 2.5rem;
 }

From d6ba20fefc8571b7a5541f922b1ffbc2204104a2 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 6 Aug 2020 16:04:15 +0300
Subject: [PATCH 09/25] Use relative units for social-icons block

---
 .../block-library/src/social-links/style.scss | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index b1ed31069b141..a359d27b3c11c 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -17,18 +17,23 @@
 
 .wp-social-link {
 	display: block;
-	width: 36px;
-	height: 36px;
-	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	margin-right: 8px;
+	width: 2.25rem;
+	height: 2.25rem;
+	border-radius: 2.25rem; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	margin-right: 0.5rem;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
 
 	a {
-		padding: 6px;
+		padding: 0.375rem;
 		display: block;
 		line-height: 0;
 		transition: transform 0.1s ease;
+
+		svg {
+			width: 1.5rem;
+			height: 1.5rem;
+		}
 	}
 
 	a,
@@ -65,10 +70,10 @@
 		background: none;
 
 		// Make these bigger.
-		padding: 4px;
+		padding: 0.25rem;
 		svg {
-			width: 28px;
-			height: 28px;
+			width: 1.75rem;
+			height: 1.75rem;
 		}
 	}
 

From 992c777d63d10f8b6bd775d7519a9c3ad3adf0b7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 7 Aug 2020 09:28:52 +0300
Subject: [PATCH 10/25] Don't use $grid-unit-* vars for front-facing styles

---
 packages/block-library/src/buttons/style.scss         | 8 ++++----
 packages/block-library/src/columns/style.scss         | 6 +++---
 packages/block-library/src/cover/style.scss           | 2 +-
 packages/block-library/src/gallery/style.scss         | 8 ++++----
 packages/block-library/src/latest-posts/style.scss    | 4 ++--
 packages/block-library/src/navigation-link/style.scss | 9 ++++-----
 packages/block-library/src/post-author/style.scss     | 4 ++--
 7 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 68f8626a1672d..59ae8a1eb38b1 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -1,8 +1,8 @@
 // Increased specificity to override blocks default margin.
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin-right: $grid-unit-10;
-	margin-bottom: $grid-unit-10;
+	margin-right: 0.5rem;
+	margin-bottom: 0.5rem;
 
 	&:last-child {
 		margin-right: 0;
@@ -13,7 +13,7 @@
 	/*rtl:ignore*/
 	margin-right: 0;
 	/*rtl:ignore*/
-	margin-left: $grid-unit-10;
+	margin-left: 0.5rem;
 
 	&:first-child {
 		margin-left: 0;
@@ -24,7 +24,7 @@
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
-	margin-right: $grid-unit-10;
+	margin-right: 0.5rem;
 
 	&:last-child {
 		margin-right: 0;
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 5b2f44dcf1702..b8c880f95a7fa 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -35,13 +35,13 @@
 		// As with mobile styles, this must be important since the Column
 		// assigns its own width as an inline style, which should take effect
 		// starting at `break-medium`.
-		flex-basis: calc(50% - #{$grid-unit-20}) !important;
+		flex-basis: calc(50% - 1rem) !important;
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2rem;
 		}
 	}
 
@@ -65,7 +65,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: $grid-unit-20 * 2;
+			margin-left: 2rem;
 		}
 	}
 }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 298a821aa089b..f57c8339876cd 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -9,7 +9,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: $grid-unit-20;
+	padding: 1rem;
 
 	&.has-parallax {
 		background-attachment: fixed;
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index fc1a7c7c8b76b..ce4e1f8d0fec4 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -10,7 +10,7 @@
 	.blocks-gallery-image,
 	.blocks-gallery-item {
 		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 $grid-unit-20 $grid-unit-20 0;
+		margin: 0 1rem 1rem 0;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -84,7 +84,7 @@
 	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc(50% - #{ $grid-unit-20 });
+		width: calc(50% - 1rem);
 
 		&:nth-of-type(even) {
 			margin-right: 0;
@@ -102,8 +102,8 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ 100% / $i } - #{ $grid-unit-20 * ( $i - 1 ) / $i });
-				margin-right: $grid-unit-20;
+				width: calc(#{ 100% / $i } - #{ 1rem * ( $i - 1 ) / $i });
+				margin-right: 1rem;
 			}
 		}
 
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index a70c8615617c2..496786e352fed 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -42,8 +42,8 @@
 }
 
 .wp-block-latest-posts__post-excerpt {
-	margin-top: $grid-unit-10;
-	margin-bottom: $grid-unit-20;
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
 }
 
 .wp-block-latest-posts__featured-image {
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index a0ae5d6e82b83..993d7a0ef476a 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -28,7 +28,6 @@
 
 // Styles for submenu flyout
 .has-child {
-	$navigation-vertical-padding: $grid-unit-10 * 0.75;
 	.wp-block-navigation__container {
 		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
@@ -47,7 +46,7 @@
 				flex-grow: 1;
 			}
 			> .wp-block-navigation-link__submenu-icon {
-				padding-right: $grid-unit-10;
+				padding-right: 0.5rem;
 			}
 		}
 
@@ -66,7 +65,7 @@
 					right: 100%;
 					height: 100%;
 					display: block;
-					width: $grid-unit-10;
+					width: 0.5rem;
 					background: transparent;
 				}
 			}
@@ -105,7 +104,7 @@
 .wp-block-navigation-link__content {
 	color: inherit;
 	text-decoration: none;
-	padding: $grid-unit-10 $grid-unit-10 * 2;
+	padding: 0.5rem 1rem;
 
 	+ .wp-block-navigation-link__content {
 		padding-top: 0;
@@ -124,7 +123,7 @@
 
 .wp-block-navigation-link__submenu-icon {
 	height: inherit;
-	padding: $grid-unit-10 * 0.75 $grid-unit-10 * 2;
+	padding: 0.375rem 1rem;
 
 	svg {
 		fill: currentColor;
diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
index 2f26818dec02a..10bb6ba691fc5 100644
--- a/packages/block-library/src/post-author/style.scss
+++ b/packages/block-library/src/post-author/style.scss
@@ -10,11 +10,11 @@
 	}
 
 	&__avatar {
-		margin-right: $grid-unit-20;
+		margin-right: 1rem;
 	}
 
 	&__bio {
-		margin-bottom: $grid-unit-10;
+		margin-bottom: 0.5rem;
 		font-size: 0.7em;
 	}
 

From 8ac774fa36ef5e754c739296a09025ceece7f480 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 7 Aug 2020 09:48:23 +0300
Subject: [PATCH 11/25] Avoid using $default-block-margin for front-facing
 styles

---
 packages/block-library/src/columns/style.scss   | 2 +-
 packages/block-library/src/pullquote/theme.scss | 2 +-
 packages/block-library/src/quote/theme.scss     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 5b2f44dcf1702..c8445c2db6d03 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,6 @@
 .wp-block-columns {
 	display: flex;
-	margin-bottom: $default-block-margin;
+	margin-bottom: 1.75rem;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 46bb986758629..5a1384b916b14 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,7 +1,7 @@
 .wp-block-pullquote {
 	border-top: 4px solid $dark-gray-500;
 	border-bottom: 4px solid $dark-gray-500;
-	margin-bottom: $default-block-margin;
+	margin-bottom: 1.75rem;
 	color: $dark-gray-600;
 
 	cite,
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index 49cf56bfdb924..c55ecb989ca06 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,6 +1,6 @@
 .wp-block-quote {
 	border-left: 4px solid $black;
-	margin: 0 0 $default-block-margin 0;
+	margin: 0 0 1.75rem 0;
 	padding-left: 1em;
 
 	cite,

From 5479bc05a17a48a1cdcdcc956d3ff07ad0271143 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 12 Aug 2020 17:00:04 +0300
Subject: [PATCH 12/25] Convert all remaining pixel values to rem

---
 packages/base-styles/_variables.scss                  |  5 ++---
 packages/block-library/src/cover/style.scss           |  4 ++--
 packages/block-library/src/file/style.scss            |  2 +-
 packages/block-library/src/gallery/style.scss         |  4 ++--
 packages/block-library/src/latest-posts/style.scss    |  6 +++---
 packages/block-library/src/navigation-link/style.scss |  2 +-
 packages/block-library/src/rss/style.scss             |  6 +++---
 packages/block-library/src/search/style.scss          |  4 ++--
 packages/block-library/src/social-links/style.scss    |  4 ++--
 packages/block-library/src/style.scss                 | 10 +++++-----
 10 files changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index f8516cba05d62..8ecfda29392e2 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -81,9 +81,8 @@ $block-padding: 14px; // Space between block footprint and focus boundaries. The
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
-$block-container-side-padding: $block-side-ui-width + $block-padding + 2 * $block-side-ui-clearance; // Total space left and right of the block footprint.
-$block-bg-padding--v: $block-padding + $block-spacing + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
-$block-bg-padding--h: $block-side-ui-width + $block-side-ui-clearance; // padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--v: 1.25rem; // padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--h: 2.375rem; // padding for Blocks with a background color (eg: paragraph or group)
 $dimmed-opacity: 1;
 
 $block-edge-to-content: 16px;
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index f57c8339876cd..ab4230317582e 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -92,7 +92,7 @@
 	}
 
 	.wp-block-cover__inner-container {
-		width: calc(100% - 70px);
+		width: calc(100% - 4.375rem);
 		z-index: z-index(".wp-block-cover__inner-container");
 		color: $white;
 	}
@@ -218,6 +218,6 @@ section.wp-block-cover-image > h2,
 	z-index: 1;
 	margin-bottom: 0;
 	max-width: $content-width;
-	padding: $block-padding;
+	padding: 0.875rem;
 	text-align: center;
 }
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index 61cf2ad25ec1b..7c3413e0496b6 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -14,7 +14,7 @@
 		background: $dark-gray-700;
 		border-radius: 2em;
 		color: $white;
-		font-size: $default-font-size;
+		font-size: 0.8125rem;
 		padding: 0.5em 1em;
 	}
 
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index ce4e1f8d0fec4..7102e5aa1cc7f 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -51,10 +51,10 @@
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;
-			padding: 40px 10px 9px;
+			padding: 2.5rem 0.625rem 0.5625rem;
 			color: $white;
 			text-align: center;
-			font-size: $default-font-size;
+			font-size: 0.8125rem;
 			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
 
 			img {
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index dc2be12931e87..a656de6d88eff 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -20,7 +20,7 @@
 		padding: 0;
 
 		li {
-			margin: 0 20px 20px 0;
+			margin: 0 1.25rem 1.25rem 0;
 			width: 100%;
 		}
 	}
@@ -28,7 +28,7 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 20px);
+				width: calc((100% / #{ $i }) - 1.25rem);
 			}
 		}
 	}
@@ -38,7 +38,7 @@
 .wp-block-latest-posts__post-author {
 	display: block;
 	color: $dark-gray-300;
-	font-size: $default-font-size;
+	font-size: 0.8125rem;
 }
 
 .wp-block-latest-posts__post-excerpt {
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 993d7a0ef476a..2b75bc9a7576d 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -51,7 +51,7 @@
 		}
 
 		@include break-medium {
-			left: $grid-unit-30;
+			left: 1.5rem;
 
 			// Nested submenus sit to the left on large breakpoints
 			.wp-block-navigation__container {
diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss
index 14bae6e85bde3..7ff89fe1050b0 100644
--- a/packages/block-library/src/rss/style.scss
+++ b/packages/block-library/src/rss/style.scss
@@ -14,7 +14,7 @@
 		list-style: none;
 
 		li {
-			margin: 0 16px 16px 0;
+			margin: 0 1rem 1rem 0;
 			width: 100%;
 		}
 	}
@@ -22,7 +22,7 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc(( 100% / #{ $i } ) - 16px);
+				width: calc(( 100% / #{ $i } ) - 1rem);
 			}
 		}
 	}
@@ -32,5 +32,5 @@
 .wp-block-rss__item-author {
 	display: block;
 	color: $dark-gray-300;
-	font-size: $default-font-size;
+	font-size: 0.8125rem;
 }
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 0a0a512c570ba..b2874c7bf3dc2 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -8,10 +8,10 @@
 
 	.wp-block-search__input {
 		flex-grow: 1;
-		max-width: 360px;
+		max-width: 22.5rem;
 	}
 
 	.wp-block-search__button {
-		margin-left: 10px;
+		margin-left: 0.625rem;
 	}
 }
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index a359d27b3c11c..0ed6f852f42a6 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -87,7 +87,7 @@
 	}
 
 	.wp-social-link a {
-		padding-left: 16px;
-		padding-right: 16px;
+		padding-left: 1rem;
+		padding-right: 1rem;
 	}
 }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index 0b2f0339131f7..e6bbe90ee1056 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -56,25 +56,25 @@
 
 // Font sizes.
 .has-small-font-size {
-	font-size: 13px;
+	font-size: 0.8125rem;
 }
 
 .has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 .has-medium-font-size {
-	font-size: 20px;
+	font-size: 1.25rem;
 }
 
 .has-large-font-size {
-	font-size: 36px;
+	font-size: 2.25rem;
 }
 
 .has-larger-font-size, // Not used now, kept because of backward compatibility.
 .has-huge-font-size {
-	font-size: 42px;
+	font-size: 2.625rem;
 }
 
 // Text alignments.

From 3a2b095d4c3906fcd2fc6247986452d367dece20 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 13 Aug 2020 14:26:49 +0300
Subject: [PATCH 13/25] Use em instead of rem

---
 packages/base-styles/_variables.scss          |  4 ++--
 packages/block-library/src/button/style.scss  |  2 +-
 packages/block-library/src/buttons/style.scss |  8 +++----
 packages/block-library/src/code/theme.scss    |  4 ++--
 packages/block-library/src/columns/style.scss |  8 +++----
 packages/block-library/src/cover/style.scss   |  6 ++---
 packages/block-library/src/file/style.scss    |  4 ++--
 packages/block-library/src/gallery/style.scss | 13 +++++-----
 .../src/latest-comments/style.scss            | 19 +++++++--------
 .../block-library/src/latest-posts/style.scss | 10 ++++----
 .../src/navigation-link/style.scss            | 10 ++++----
 .../block-library/src/paragraph/style.scss    |  8 +++----
 .../block-library/src/post-author/style.scss  |  4 ++--
 .../src/pullquote/blockquote.native.scss      |  6 ++---
 .../src/pullquote/figure.native.scss          |  2 +-
 .../block-library/src/pullquote/style.scss    |  6 ++---
 .../block-library/src/pullquote/theme.scss    |  4 ++--
 packages/block-library/src/quote/style.scss   |  6 ++---
 packages/block-library/src/quote/theme.scss   |  8 +++----
 packages/block-library/src/rss/style.scss     |  6 ++---
 packages/block-library/src/search/style.scss  |  4 ++--
 .../block-library/src/social-links/style.scss | 24 +++++++++----------
 packages/block-library/src/style.scss         | 10 ++++----
 .../block-library/src/text-columns/style.scss |  2 +-
 24 files changed, 89 insertions(+), 89 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 8ecfda29392e2..5ca81ba759cca 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -81,8 +81,8 @@ $block-padding: 14px; // Space between block footprint and focus boundaries. The
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
-$block-bg-padding--v: 1.25rem; // padding for Blocks with a background color (eg: paragraph or group)
-$block-bg-padding--h: 2.375rem; // padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--v: 1.25em; // padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--h: 2.375em; // padding for Blocks with a background color (eg: paragraph or group)
 $dimmed-opacity: 1;
 
 $block-edge-to-content: 16px;
diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 0d9921e9e8c19..c2c9fd5a04fee 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -11,7 +11,7 @@ $blocks-button__height: 3.1em;
 	cursor: pointer;
 	display: inline-block;
 	font-size: 1.125em;
-	padding: 0.67em 1.33em;
+	padding: 0.6em 1.1em;
 	text-align: center;
 	text-decoration: none;
 	overflow-wrap: break-word;
diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss
index 59ae8a1eb38b1..45a0d6aed21b1 100644
--- a/packages/block-library/src/buttons/style.scss
+++ b/packages/block-library/src/buttons/style.scss
@@ -1,8 +1,8 @@
 // Increased specificity to override blocks default margin.
 .wp-block-buttons .wp-block-button {
 	display: inline-block;
-	margin-right: 0.5rem;
-	margin-bottom: 0.5rem;
+	margin-right: 0.5em;
+	margin-bottom: 0.5em;
 
 	&:last-child {
 		margin-right: 0;
@@ -13,7 +13,7 @@
 	/*rtl:ignore*/
 	margin-right: 0;
 	/*rtl:ignore*/
-	margin-left: 0.5rem;
+	margin-left: 0.5em;
 
 	&:first-child {
 		margin-left: 0;
@@ -24,7 +24,7 @@
 	/*rtl:ignore*/
 	margin-left: 0;
 	/*rtl:ignore*/
-	margin-right: 0.5rem;
+	margin-right: 0.5em;
 
 	&:last-child {
 		margin-right: 0;
diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
index 6ba170d3ab2ac..8ce58637285e7 100644
--- a/packages/block-library/src/code/theme.scss
+++ b/packages/block-library/src/code/theme.scss
@@ -1,8 +1,8 @@
 .wp-block-code {
 	font-family: $editor-html-font;
-	font-size: $text-editor-font-size;
+	font-size: 0.9em;
 	color: $gray-900;
-	padding: 0.8em 1em;
+	padding: 0.9em 1.1em;
 	border: 1px solid $gray-200;
 	border-radius: 4px;
 }
diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss
index 0a200256fb7a8..b5dd882eff471 100644
--- a/packages/block-library/src/columns/style.scss
+++ b/packages/block-library/src/columns/style.scss
@@ -1,6 +1,6 @@
 .wp-block-columns {
 	display: flex;
-	margin-bottom: 1.75rem;
+	margin-bottom: 1.75em;
 
 	// Responsiveness: Allow wrapping on mobile.
 	flex-wrap: wrap;
@@ -35,13 +35,13 @@
 		// As with mobile styles, this must be important since the Column
 		// assigns its own width as an inline style, which should take effect
 		// starting at `break-medium`.
-		flex-basis: calc(50% - 1rem) !important;
+		flex-basis: calc(50% - 1em) !important;
 		flex-grow: 0;
 
 		// Add space between the multiple columns. Themes can customize this if they wish to work differently.
 		// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
 		&:nth-child(even) {
-			margin-left: 2rem;
+			margin-left: 2em;
 		}
 	}
 
@@ -65,7 +65,7 @@
 
 		// When columns are in a single row, add space before all except the first.
 		&:not(:first-child) {
-			margin-left: 2rem;
+			margin-left: 2em;
 		}
 	}
 }
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index ab4230317582e..7bb15200cbd96 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -9,7 +9,7 @@
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 1rem;
+	padding: 1em;
 
 	&.has-parallax {
 		background-attachment: fixed;
@@ -92,7 +92,7 @@
 	}
 
 	.wp-block-cover__inner-container {
-		width: calc(100% - 4.375rem);
+		width: calc(100% - 4.375em);
 		z-index: z-index(".wp-block-cover__inner-container");
 		color: $white;
 	}
@@ -218,6 +218,6 @@ section.wp-block-cover-image > h2,
 	z-index: 1;
 	margin-bottom: 0;
 	max-width: $content-width;
-	padding: 0.875rem;
+	padding: 0.45em;
 	text-align: center;
 }
diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index 7c3413e0496b6..0c0fda69d471e 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -14,8 +14,8 @@
 		background: $dark-gray-700;
 		border-radius: 2em;
 		color: $white;
-		font-size: 0.8125rem;
-		padding: 0.5em 1em;
+		font-size: 0.8em;
+		padding: 0.625em 1.25em;
 	}
 
 	a.wp-block-file__button {
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 7102e5aa1cc7f..441797f954532 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -10,7 +10,7 @@
 	.blocks-gallery-image,
 	.blocks-gallery-item {
 		// Add space between thumbnails, and unset right most thumbnails later.
-		margin: 0 1rem 1rem 0;
+		margin: 0 1em 1em 0;
 		display: flex;
 		flex-grow: 1;
 		flex-direction: column;
@@ -51,11 +51,12 @@
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;
-			padding: 2.5rem 0.625rem 0.5625rem;
+			padding: 3.125em 0.8em 0.7em;
 			color: $white;
 			text-align: center;
-			font-size: 0.8125rem;
+			font-size: 0.8em;
 			background: linear-gradient(0deg, rgba($color: $black, $alpha: 0.7) 0, rgba($color: $black, $alpha: 0.3) 70%, transparent);
+			box-sizing: border-box;
 
 			img {
 				display: inline;
@@ -84,7 +85,7 @@
 	// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
 	& .blocks-gallery-image,
 	& .blocks-gallery-item {
-		width: calc(50% - 1rem);
+		width: calc(50% - 1em);
 
 		&:nth-of-type(even) {
 			margin-right: 0;
@@ -102,8 +103,8 @@
 		@for $i from 3 through 8 {
 			&.columns-#{ $i } .blocks-gallery-image,
 			&.columns-#{ $i } .blocks-gallery-item {
-				width: calc(#{ 100% / $i } - #{ 1rem * ( $i - 1 ) / $i });
-				margin-right: 1rem;
+				width: calc(#{ 100% / $i } - #{ 1em * ( $i - 1 ) / $i });
+				margin-right: 1em;
 			}
 		}
 
diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
index f8a7fb1841275..59914e6a03145 100644
--- a/packages/block-library/src/latest-comments/style.scss
+++ b/packages/block-library/src/latest-comments/style.scss
@@ -1,16 +1,15 @@
 .wp-block-latest-comments__comment {
-	font-size: 1rem;
 	line-height: 1.1;
 	list-style: none;
 	margin-bottom: 1em;
 
 	.has-avatars & {
-		min-height: 2.25rem;
+		min-height: 2.25em;
 		list-style: none;
 
 		.wp-block-latest-comments__comment-meta,
 		.wp-block-latest-comments__comment-excerpt {
-			margin-left: 3.25rem;
+			margin-left: 3.25em;
 		}
 	}
 
@@ -21,22 +20,22 @@
 }
 
 .wp-block-latest-comments__comment-excerpt p {
-	font-size: 0.875rem;
+	font-size: 0.875em;
 	line-height: 1.8;
-	margin: 0.3125rem 0 1.25rem;
+	margin: 0.35em 0 1.4em;
 }
 
 .wp-block-latest-comments__comment-date {
 	display: block;
-	font-size: 0.75rem;
+	font-size: 0.75em;
 }
 
 .wp-block-latest-comments .avatar,
 .wp-block-latest-comments__comment-avatar {
-	border-radius: 1.5rem;
+	border-radius: 1.5em;
 	display: block;
 	float: left;
-	height: 2.5rem;
-	margin-right: 0.75rem;
-	width: 2.5rem;
+	height: 2.5em;
+	margin-right: 0.75em;
+	width: 2.5em;
 }
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index a656de6d88eff..49e0eb83a74c0 100644
--- a/packages/block-library/src/latest-posts/style.scss
+++ b/packages/block-library/src/latest-posts/style.scss
@@ -20,7 +20,7 @@
 		padding: 0;
 
 		li {
-			margin: 0 1.25rem 1.25rem 0;
+			margin: 0 1.25em 1.25em 0;
 			width: 100%;
 		}
 	}
@@ -28,7 +28,7 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc((100% / #{ $i }) - 1.25rem);
+				width: calc((100% / #{ $i }) - 1.25em);
 			}
 		}
 	}
@@ -38,12 +38,12 @@
 .wp-block-latest-posts__post-author {
 	display: block;
 	color: $dark-gray-300;
-	font-size: 0.8125rem;
+	font-size: 0.8125em;
 }
 
 .wp-block-latest-posts__post-excerpt {
-	margin-top: 0.5rem;
-	margin-bottom: 1rem;
+	margin-top: 0.5em;
+	margin-bottom: 1em;
 }
 
 .wp-block-latest-posts__featured-image {
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 2b75bc9a7576d..8c3bbc4e99b39 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -46,12 +46,12 @@
 				flex-grow: 1;
 			}
 			> .wp-block-navigation-link__submenu-icon {
-				padding-right: 0.5rem;
+				padding-right: 0.5em;
 			}
 		}
 
 		@include break-medium {
-			left: 1.5rem;
+			left: 1.5em;
 
 			// Nested submenus sit to the left on large breakpoints
 			.wp-block-navigation__container {
@@ -65,7 +65,7 @@
 					right: 100%;
 					height: 100%;
 					display: block;
-					width: 0.5rem;
+					width: 0.5em;
 					background: transparent;
 				}
 			}
@@ -104,7 +104,7 @@
 .wp-block-navigation-link__content {
 	color: inherit;
 	text-decoration: none;
-	padding: 0.5rem 1rem;
+	padding: 0.5em 1em;
 
 	+ .wp-block-navigation-link__content {
 		padding-top: 0;
@@ -123,7 +123,7 @@
 
 .wp-block-navigation-link__submenu-icon {
 	height: inherit;
-	padding: 0.375rem 1rem;
+	padding: 0.375em 1em;
 
 	svg {
 		fill: currentColor;
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index 4f6d2752a6d3f..ac6d36e6d9ba9 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -1,17 +1,17 @@
 .is-small-text {
-	font-size: 0.875rem;
+	font-size: 0.875em;
 }
 
 .is-regular-text {
-	font-size: 1rem;
+	font-size: 1em;
 }
 
 .is-large-text {
-	font-size: 2.25rem;
+	font-size: 2.25em;
 }
 
 .is-larger-text {
-	font-size: 3rem;
+	font-size: 3em;
 }
 
 // Don't show the drop cap when editing the paragraph's content. It causes a
diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
index 10bb6ba691fc5..470edecad207b 100644
--- a/packages/block-library/src/post-author/style.scss
+++ b/packages/block-library/src/post-author/style.scss
@@ -10,11 +10,11 @@
 	}
 
 	&__avatar {
-		margin-right: 1rem;
+		margin-right: 1em;
 	}
 
 	&__bio {
-		margin-bottom: 0.5rem;
+		margin-bottom: 0.5em;
 		font-size: 0.7em;
 	}
 
diff --git a/packages/block-library/src/pullquote/blockquote.native.scss b/packages/block-library/src/pullquote/blockquote.native.scss
index 985bcb07360bb..acdfc280c9756 100644
--- a/packages/block-library/src/pullquote/blockquote.native.scss
+++ b/packages/block-library/src/pullquote/blockquote.native.scss
@@ -1,8 +1,8 @@
 .quote {
-	font-size: 1.125rem;
+	font-size: 1.125em;
 }
 
 .citation {
-	font-size: 0.875rem;
-	margin-top: 0.75rem;
+	font-size: 0.875em;
+	margin-top: 0.85em;
 }
diff --git a/packages/block-library/src/pullquote/figure.native.scss b/packages/block-library/src/pullquote/figure.native.scss
index adb922580b100..16b8e8f65572c 100644
--- a/packages/block-library/src/pullquote/figure.native.scss
+++ b/packages/block-library/src/pullquote/figure.native.scss
@@ -1,6 +1,6 @@
 %shared {
 	border-width: 3px 0;
-	padding: 1.3125rem 1rem;
+	padding: 1.3125em 1em;
 }
 
 .light {
diff --git a/packages/block-library/src/pullquote/style.scss b/packages/block-library/src/pullquote/style.scss
index d0277810d1833..61b9ce061c7b3 100644
--- a/packages/block-library/src/pullquote/style.scss
+++ b/packages/block-library/src/pullquote/style.scss
@@ -9,12 +9,12 @@
 		max-width: $content-width / 2;
 
 		p {
-			font-size: 1.25rem;
+			font-size: 1.25em;
 		}
 	}
 
 	p {
-		font-size: 1.75rem;
+		font-size: 1.75em;
 		line-height: 1.6;
 	}
 
@@ -43,7 +43,7 @@
 		p {
 			margin-top: 0;
 			margin-bottom: 0;
-			font-size: 2rem;
+			font-size: 2em;
 		}
 
 		cite {
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 5a1384b916b14..b29f225402127 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,7 +1,7 @@
 .wp-block-pullquote {
 	border-top: 4px solid $dark-gray-500;
 	border-bottom: 4px solid $dark-gray-500;
-	margin-bottom: 1.75rem;
+	margin-bottom: 1.75em;
 	color: $dark-gray-600;
 
 	cite,
@@ -9,7 +9,7 @@
 	&__citation {
 		color: $dark-gray-600;
 		text-transform: uppercase;
-		font-size: $default-font-size;
+		font-size: 0.8125em;
 		font-style: normal;
 	}
 }
diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss
index 45411208169c5..cb44be58f8209 100644
--- a/packages/block-library/src/quote/style.scss
+++ b/packages/block-library/src/quote/style.scss
@@ -1,18 +1,18 @@
 .wp-block-quote {
 	&.is-style-large,
 	&.is-large {
-		margin: 0 0 1rem;
+		margin: 0 0 1em;
 		padding: 0 1em;
 
 		p {
-			font-size: 1.5rem;
+			font-size: 1.5em;
 			font-style: italic;
 			line-height: 1.6;
 		}
 
 		cite,
 		footer {
-			font-size: 1.125rem;
+			font-size: 1.125em;
 			text-align: right;
 		}
 	}
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index c55ecb989ca06..dc13aaf48546f 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,13 +1,13 @@
 .wp-block-quote {
-	border-left: 4px solid $black;
-	margin: 0 0 1.75rem 0;
+	border-left: 0.25em solid $black;
+	margin: 0 0 1.75em 0;
 	padding-left: 1em;
 
 	cite,
 	footer,
 	&__citation {
 		color: $dark-gray-300;
-		font-size: $default-font-size;
+		font-size: 0.8125em;
 		margin-top: 1em;
 		position: relative;
 		font-style: normal;
@@ -15,7 +15,7 @@
 
 	&.has-text-align-right {
 		border-left: none;
-		border-right: 4px solid $black;
+		border-right: 0.25em solid $black;
 		padding-left: 0;
 		padding-right: 1em;
 	}
diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss
index 7ff89fe1050b0..79822d92f108f 100644
--- a/packages/block-library/src/rss/style.scss
+++ b/packages/block-library/src/rss/style.scss
@@ -14,7 +14,7 @@
 		list-style: none;
 
 		li {
-			margin: 0 1rem 1rem 0;
+			margin: 0 1em 1em 0;
 			width: 100%;
 		}
 	}
@@ -22,7 +22,7 @@
 	@include break-small {
 		@for $i from 2 through 6 {
 			&.columns-#{ $i } li {
-				width: calc(( 100% / #{ $i } ) - 1rem);
+				width: calc(( 100% / #{ $i } ) - 1em);
 			}
 		}
 	}
@@ -32,5 +32,5 @@
 .wp-block-rss__item-author {
 	display: block;
 	color: $dark-gray-300;
-	font-size: 0.8125rem;
+	font-size: 0.8125em;
 }
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index b2874c7bf3dc2..aaa4724ac3192 100644
--- a/packages/block-library/src/search/style.scss
+++ b/packages/block-library/src/search/style.scss
@@ -8,10 +8,10 @@
 
 	.wp-block-search__input {
 		flex-grow: 1;
-		max-width: 22.5rem;
+		max-width: 22.5em;
 	}
 
 	.wp-block-search__button {
-		margin-left: 0.625rem;
+		margin-left: 0.625em;
 	}
 }
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 0ed6f852f42a6..37d5193bc7275 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -17,22 +17,22 @@
 
 .wp-social-link {
 	display: block;
-	width: 2.25rem;
-	height: 2.25rem;
-	border-radius: 2.25rem; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	margin-right: 0.5rem;
+	width: 2.25em;
+	height: 2.25em;
+	border-radius: 2.25em; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	margin-right: 0.5em;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
 
 	a {
-		padding: 0.375rem;
+		padding: 0.375em;
 		display: block;
 		line-height: 0;
 		transition: transform 0.1s ease;
 
 		svg {
-			width: 1.5rem;
-			height: 1.5rem;
+			width: 1.5em;
+			height: 1.5em;
 		}
 	}
 
@@ -70,10 +70,10 @@
 		background: none;
 
 		// Make these bigger.
-		padding: 0.25rem;
+		padding: 0.25em;
 		svg {
-			width: 1.75rem;
-			height: 1.75rem;
+			width: 1.75em;
+			height: 1.75em;
 		}
 	}
 
@@ -87,7 +87,7 @@
 	}
 
 	.wp-social-link a {
-		padding-left: 1rem;
-		padding-right: 1rem;
+		padding-left: 1em;
+		padding-right: 1em;
 	}
 }
diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss
index e6bbe90ee1056..9c922b71c6e32 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -56,25 +56,25 @@
 
 // Font sizes.
 .has-small-font-size {
-	font-size: 0.8125rem;
+	font-size: 0.8125em;
 }
 
 .has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
-	font-size: 1rem;
+	font-size: 1em;
 }
 
 .has-medium-font-size {
-	font-size: 1.25rem;
+	font-size: 1.25em;
 }
 
 .has-large-font-size {
-	font-size: 2.25rem;
+	font-size: 2.25em;
 }
 
 .has-larger-font-size, // Not used now, kept because of backward compatibility.
 .has-huge-font-size {
-	font-size: 2.625rem;
+	font-size: 2.625em;
 }
 
 // Text alignments.
diff --git a/packages/block-library/src/text-columns/style.scss b/packages/block-library/src/text-columns/style.scss
index f6133012431bd..e2e6beb6ff36a 100644
--- a/packages/block-library/src/text-columns/style.scss
+++ b/packages/block-library/src/text-columns/style.scss
@@ -6,7 +6,7 @@
 	}
 
 	.wp-block-column {
-		margin: 0 1rem;
+		margin: 0 1em;
 		padding: 0;
 
 		&:first-child {

From ae64ed0b02ab8899d520a41cf8239c02cec5a4c7 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Thu, 13 Aug 2020 17:07:41 +0300
Subject: [PATCH 14/25] Use the vars

---
 packages/block-library/src/paragraph/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index ac6d36e6d9ba9..87761b95ee122 100644
--- a/packages/block-library/src/paragraph/style.scss
+++ b/packages/block-library/src/paragraph/style.scss
@@ -29,7 +29,7 @@
 }
 
 p.has-background {
-	padding: 1.25em 2.375em;
+	padding: $block-bg-padding--v $block-bg-padding--h;
 }
 
 p.has-text-color a {

From 31c5f91e07276a6b002918b0f21dccdc297a7a0c Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 07:38:45 +0300
Subject: [PATCH 15/25] restore original code block padding

---
 packages/block-library/src/code/theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
index 8ce58637285e7..6e6be765d0fa5 100644
--- a/packages/block-library/src/code/theme.scss
+++ b/packages/block-library/src/code/theme.scss
@@ -2,7 +2,7 @@
 	font-family: $editor-html-font;
 	font-size: 0.9em;
 	color: $gray-900;
-	padding: 0.9em 1.1em;
+	padding: 0.8em 1em;
 	border: 1px solid $gray-200;
 	border-radius: 4px;
 }

From 4afbe33024032aef92ca3cb75df8a88a362328d0 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 07:40:27 +0300
Subject: [PATCH 16/25] Update packages/block-library/src/button/style.scss

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
---
 packages/block-library/src/button/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index c2c9fd5a04fee..9f072326371c5 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -11,7 +11,7 @@ $blocks-button__height: 3.1em;
 	cursor: pointer;
 	display: inline-block;
 	font-size: 1.125em;
-	padding: 0.6em 1.1em;
+	padding: 0.667em 1.333em;
 	text-align: center;
 	text-decoration: none;
 	overflow-wrap: break-word;

From 0e71afe1e79374ba3270114d1d157d9d373d5fb1 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 07:46:57 +0300
Subject: [PATCH 17/25] Update
 packages/block-library/src/latest-comments/style.scss

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
---
 packages/block-library/src/latest-comments/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/latest-comments/style.scss b/packages/block-library/src/latest-comments/style.scss
index 59914e6a03145..1013298870033 100644
--- a/packages/block-library/src/latest-comments/style.scss
+++ b/packages/block-library/src/latest-comments/style.scss
@@ -22,7 +22,7 @@
 .wp-block-latest-comments__comment-excerpt p {
 	font-size: 0.875em;
 	line-height: 1.8;
-	margin: 0.35em 0 1.4em;
+	margin: 0.36em 0 1.4em;
 }
 
 .wp-block-latest-comments__comment-date {

From 2b503a23b54a5073ac46b14d78326b9b5a9815da Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 08:13:50 +0300
Subject: [PATCH 18/25] Move vars to separate "group" and fix comments
 capitalization

---
 packages/base-styles/_variables.scss | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 5ca81ba759cca..447df18161e79 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -81,8 +81,6 @@ $block-padding: 14px; // Space between block footprint and focus boundaries. The
 $block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
 $block-side-ui-clearance: 2px; // Space between movers/drag handle UI, and block.
-$block-bg-padding--v: 1.25em; // padding for Blocks with a background color (eg: paragraph or group)
-$block-bg-padding--h: 2.375em; // padding for Blocks with a background color (eg: paragraph or group)
 $dimmed-opacity: 1;
 
 $block-edge-to-content: 16px;
@@ -100,3 +98,9 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
 
 $radius-round: 50%;
 $radius-block-ui: 2px;
+
+/**
+ * Block Paddings.
+ */
+$block-bg-padding--v: 1.25em; // Padding for Blocks with a background color (eg: paragraph or group)
+$block-bg-padding--h: 2.375em; // Padding for Blocks with a background color (eg: paragraph or group)

From f7cdac19f22cfe13a1802e8dece698c1aa186548 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 11:00:39 +0300
Subject: [PATCH 19/25] this value is closer to the legacy one

---
 packages/block-library/src/cover/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 7bb15200cbd96..6df35090c4240 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -218,6 +218,6 @@ section.wp-block-cover-image > h2,
 	z-index: 1;
 	margin-bottom: 0;
 	max-width: $content-width;
-	padding: 0.45em;
+	padding: 0.44em;
 	text-align: center;
 }

From 9da60ffd5046c2071fbcad7038c810f1365c3553 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 16:37:19 +0300
Subject: [PATCH 20/25] no reason for the padding to change here since it was
 already using em

---
 packages/block-library/src/file/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/file/style.scss b/packages/block-library/src/file/style.scss
index 0c0fda69d471e..de0801c1d0106 100644
--- a/packages/block-library/src/file/style.scss
+++ b/packages/block-library/src/file/style.scss
@@ -15,7 +15,7 @@
 		border-radius: 2em;
 		color: $white;
 		font-size: 0.8em;
-		padding: 0.625em 1.25em;
+		padding: 0.5em 1em;
 	}
 
 	a.wp-block-file__button {

From b61eec545fab1c28238febbefccf15037aba2363 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 16:38:16 +0300
Subject: [PATCH 21/25] Update packages/base-styles/_variables.scss

Co-authored-by: Zebulan Stanphill <zebulanstanphill@protonmail.com>
---
 packages/base-styles/_variables.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 447df18161e79..4f81cf05b2b66 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -100,7 +100,8 @@ $radius-round: 50%;
 $radius-block-ui: 2px;
 
 /**
- * Block Paddings.
+ * Block paddings.
  */
-$block-bg-padding--v: 1.25em; // Padding for Blocks with a background color (eg: paragraph or group)
-$block-bg-padding--h: 2.375em; // Padding for Blocks with a background color (eg: paragraph or group)
+// Padding for blocks with a background color (e.g. paragraph or group).
+$block-bg-padding--v: 1.25em;
+$block-bg-padding--h: 2.375em;

From 38282472df55918ab368ee806049aabd91ff2f61 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 16:43:49 +0300
Subject: [PATCH 22/25] Value needs to change since it's now relative to the
 font-size

---
 packages/block-library/src/post-author/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/post-author/style.scss b/packages/block-library/src/post-author/style.scss
index 470edecad207b..18d9447da1dd6 100644
--- a/packages/block-library/src/post-author/style.scss
+++ b/packages/block-library/src/post-author/style.scss
@@ -14,7 +14,7 @@
 	}
 
 	&__bio {
-		margin-bottom: 0.5em;
+		margin-bottom: 0.7em;
 		font-size: 0.7em;
 	}
 

From def9b978dc361f423ba544fa074cfdd76a4845b8 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Fri, 14 Aug 2020 16:55:50 +0300
Subject: [PATCH 23/25] Fix calculations for relative units in the gallery
 block

---
 packages/block-library/src/gallery/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index 441797f954532..b7da214c990d8 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -51,7 +51,7 @@
 			width: 100%;
 			max-height: 100%;
 			overflow: auto;
-			padding: 3.125em 0.8em 0.7em;
+			padding: 3em 0.77em 0.7em;
 			color: $white;
 			text-align: center;
 			font-size: 0.8em;

From 9f7228bed60cb55620b27639e564ad9f021391e0 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Sat, 15 Aug 2020 14:01:06 +0300
Subject: [PATCH 24/25] Fix social links editor styles

---
 .../block-library/src/social-links/editor.scss   | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index cb38701728f1e..61f22e3419404 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -11,7 +11,19 @@
 // When that happens, leverage that instead of the following overrides.
 .editor-styles-wrapper .wp-block-social-link {
 	margin: 0;
-	margin-right: 8px;
+	margin-right: 0.5em;
+
+	> button {
+		padding: 0.375em;
+		line-height: 0;
+		font-size: 1em;
+		display: block;
+
+		svg {
+			width: 1.5em;
+			height: 1.5em;
+		}
+	}
 }
 
 .editor-styles-wrapper .wp-block-social-links {
@@ -39,7 +51,7 @@
 // Selected/unselected states.
 // Unselected block is preview, selected has additional options.
 [data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-block-social-links {
-	min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
+	min-height: 2.25em; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
 }
 
 // Disappear but show on hover or nav mode focus.

From fe5c2f62a04757d50ea3dcb6d8056bf1e2a4913b Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Sat, 15 Aug 2020 16:56:17 +0300
Subject: [PATCH 25/25] Revert social-icons style mods

---
 .../src/social-links/editor.scss              | 16 ++----------
 .../block-library/src/social-links/style.scss | 25 ++++++++-----------
 2 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss
index 61f22e3419404..cb38701728f1e 100644
--- a/packages/block-library/src/social-links/editor.scss
+++ b/packages/block-library/src/social-links/editor.scss
@@ -11,19 +11,7 @@
 // When that happens, leverage that instead of the following overrides.
 .editor-styles-wrapper .wp-block-social-link {
 	margin: 0;
-	margin-right: 0.5em;
-
-	> button {
-		padding: 0.375em;
-		line-height: 0;
-		font-size: 1em;
-		display: block;
-
-		svg {
-			width: 1.5em;
-			height: 1.5em;
-		}
-	}
+	margin-right: 8px;
 }
 
 .editor-styles-wrapper .wp-block-social-links {
@@ -51,7 +39,7 @@
 // Selected/unselected states.
 // Unselected block is preview, selected has additional options.
 [data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-block-social-links {
-	min-height: 2.25em; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
+	min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse.
 }
 
 // Disappear but show on hover or nav mode focus.
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 37d5193bc7275..b1ed31069b141 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -17,23 +17,18 @@
 
 .wp-social-link {
 	display: block;
-	width: 2.25em;
-	height: 2.25em;
-	border-radius: 2.25em; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	margin-right: 0.5em;
+	width: 36px;
+	height: 36px;
+	border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
+	margin-right: 8px;
 	transition: transform 0.1s ease;
 	@include reduce-motion("transition");
 
 	a {
-		padding: 0.375em;
+		padding: 6px;
 		display: block;
 		line-height: 0;
 		transition: transform 0.1s ease;
-
-		svg {
-			width: 1.5em;
-			height: 1.5em;
-		}
 	}
 
 	a,
@@ -70,10 +65,10 @@
 		background: none;
 
 		// Make these bigger.
-		padding: 0.25em;
+		padding: 4px;
 		svg {
-			width: 1.75em;
-			height: 1.75em;
+			width: 28px;
+			height: 28px;
 		}
 	}
 
@@ -87,7 +82,7 @@
 	}
 
 	.wp-social-link a {
-		padding-left: 1em;
-		padding-right: 1em;
+		padding-left: 16px;
+		padding-right: 16px;
 	}
 }