From 0fc5463c50b1699a2a3d8ee507169223f8ae309f Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:16:19 +0300
Subject: [PATCH 1/6] go over style.scss files in blocks

---
 packages/block-library/src/button/style.scss  |  4 ++--
 .../block-library/src/calendar/style.scss     |  2 +-
 packages/block-library/src/cover/style.scss   |  4 ++--
 packages/block-library/src/gallery/style.scss |  2 +-
 .../src/latest-comments/style.scss            | 20 +++++++++----------
 .../block-library/src/latest-posts/style.scss |  6 +++---
 .../block-library/src/media-text/style.scss   |  2 +-
 .../block-library/src/navigation/style.scss   |  4 ++--
 .../block-library/src/paragraph/style.scss    |  8 ++++----
 .../block-library/src/pullquote/style.scss    |  6 +++---
 packages/block-library/src/quote/style.scss   |  6 +++---
 packages/block-library/src/rss/style.scss     |  4 ++--
 packages/block-library/src/search/style.scss  |  4 ++--
 .../block-library/src/separator/style.scss    |  2 +-
 .../block-library/src/social-links/style.scss | 20 +++++++++----------
 packages/block-library/src/style.scss         | 10 +++++-----
 .../block-library/src/text-columns/style.scss |  2 +-
 17 files changed, 53 insertions(+), 53 deletions(-)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index 7589e44ab9352..4743381039bfc 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.5rem;
 
 // Prefer the link selector instead of the regular button classname
 // to support the previous markup in addition to the new one.
@@ -11,7 +11,7 @@ $blocks-button__height: 56px;
 	cursor: pointer;
 	display: inline-block;
 	font-size: $big-font-size;
-	padding: 12px 24px;
+	padding: 0.75rem 1.5rem;
 	text-align: center;
 	text-decoration: none;
 	overflow-wrap: break-word;
diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss
index fb38516c38fbf..a58215bac342c 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.25rem;
 		border: 1px solid $light-gray-500;
 	}
 
diff --git a/packages/block-library/src/cover/style.scss b/packages/block-library/src/cover/style.scss
index 86813acf7f7c4..fcc046cf11214 100644
--- a/packages/block-library/src/cover/style.scss
+++ b/packages/block-library/src/cover/style.scss
@@ -3,7 +3,7 @@
 	position: relative;
 	background-size: cover;
 	background-position: center center;
-	min-height: 430px;
+	min-height: 26.875rem;
 	height: 100%;
 	width: 100%;
 	display: flex;
@@ -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: $light-gray-100;
 	}
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index fc1a7c7c8b76b..a12ba43cbe8d1 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: 40px 10px 9px;
+			padding: 2.5rem 0.625rem 0.56rem;
 			color: $white;
 			text-align: center;
 			font-size: $default-font-size;
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;
 }
diff --git a/packages/block-library/src/latest-posts/style.scss b/packages/block-library/src/latest-posts/style.scss
index c16e80c221ef4..3ff227df08c61 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);
 			}
 		}
 	}
@@ -65,5 +65,5 @@
 }
 
 .edit-post-visual-editor .wp-block-latest-posts.is-grid li {
-	margin-bottom: 20px;
+	margin-bottom: 1.25rem;
 }
diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss
index 76549eac20269..e60ebb2481371 100644
--- a/packages/block-library/src/media-text/style.scss
+++ b/packages/block-library/src/media-text/style.scss
@@ -74,7 +74,7 @@
 
 .wp-block-media-text.is-image-fill figure.wp-block-media-text__media {
 	height: 100%;
-	min-height: 250px;
+	min-height: 15.625rem;
 	background-size: cover;
 }
 
diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
index c01d12d90e437..4bf12eed9149d 100644
--- a/packages/block-library/src/navigation/style.scss
+++ b/packages/block-library/src/navigation/style.scss
@@ -45,7 +45,7 @@
 		visibility: hidden;
 
 		> .wp-block-navigation-link {
-			font-size: 15px;
+			font-size: 0.9375rem;
 
 			> .wp-block-navigation-link__content {
 				flex-grow: 1;
@@ -116,7 +116,7 @@
 }
 
 .wp-block-navigation-link__label {
-	font-size: 17px;
+	font-size: 1.0625rem;
 	font-family: $default-font;
 
 	word-break: normal;
diff --git a/packages/block-library/src/paragraph/style.scss b/packages/block-library/src/paragraph/style.scss
index ddea388de29ba..096df5d5125fd 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
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 {
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;
 		}
 	}
diff --git a/packages/block-library/src/rss/style.scss b/packages/block-library/src/rss/style.scss
index 14bae6e85bde3..06fcfbfbe9049 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);
 			}
 		}
 	}
diff --git a/packages/block-library/src/search/style.scss b/packages/block-library/src/search/style.scss
index 0a0a512c570ba..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: 360px;
+		max-width: 22.5em;
 	}
 
 	.wp-block-search__button {
-		margin-left: 10px;
+		margin-left: 0.625em;
 	}
 }
diff --git a/packages/block-library/src/separator/style.scss b/packages/block-library/src/separator/style.scss
index 8decc9d0ba52d..f99b53acea746 100644
--- a/packages/block-library/src/separator/style.scss
+++ b/packages/block-library/src/separator/style.scss
@@ -20,7 +20,7 @@
 		&::before {
 			content: "\00b7 \00b7 \00b7";
 			color: currentColor;
-			font-size: 20px;
+			font-size: 1.25rem;
 			letter-spacing: 2em;
 			/*rtl:ignore*/
 			padding-left: 2em;
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 9a6f2adabea13..dbcc8934729d3 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -17,15 +17,15 @@
 
 .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;
@@ -249,10 +249,10 @@
 		background: none;
 
 		// Make these bigger.
-		padding: 4px;
+		padding: 0.25rem;
 		svg {
-			width: 28px;
-			height: 28px;
+			width: 1.75rem;
+			height: 1.75rem;
 		}
 	}
 
@@ -410,7 +410,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 99e14349d99e0..e13a5e18fbdeb 100644
--- a/packages/block-library/src/style.scss
+++ b/packages/block-library/src/style.scss
@@ -241,31 +241,31 @@
 // to avoid enqueing the classes twice: here and in ./editor.scss
 .editor-styles-wrapper .has-small-font-size,
 .has-small-font-size {
-	font-size: 13px;
+	font-size: 0.8125rem;
 }
 
 .editor-styles-wrapper .has-regular-font-size,
 .editor-styles-wrapper .has-normal-font-size,
 .has-regular-font-size, // Not used now, kept because of backward compatibility.
 .has-normal-font-size {
-	font-size: 16px;
+	font-size: 1rem;
 }
 
 .editor-styles-wrapper .has-medium-font-size,
 .has-medium-font-size {
-	font-size: 20px;
+	font-size: 1.25rem;
 }
 
 .editor-styles-wrapper .has-large-font-size,
 .has-large-font-size {
-	font-size: 36px;
+	font-size: 2.25rem;
 }
 
 .editor-styles-wrapper .has-larger-font-size,
 .editor-styles-wrapper .has-huge-font-size,
 .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.
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 a4a347b23e2db20e9d98c278f5afce5257d329ce Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:16:33 +0300
Subject: [PATCH 2/6] go over theme.scss files in blocks

---
 packages/block-library/src/code/theme.scss      | 2 +-
 packages/block-library/src/group/theme.scss     | 2 +-
 packages/block-library/src/pullquote/theme.scss | 4 ++--
 packages/block-library/src/quote/theme.scss     | 4 ++--
 packages/block-library/src/separator/theme.scss | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/block-library/src/code/theme.scss b/packages/block-library/src/code/theme.scss
index 3a0760f29dd79..ef0b4d204776b 100644
--- a/packages/block-library/src/code/theme.scss
+++ b/packages/block-library/src/code/theme.scss
@@ -4,5 +4,5 @@
 	color: $dark-gray-800;
 	padding: 0.8em 1em;
 	border: 1px solid $light-gray-500;
-	border-radius: 4px;
+	border-radius: 0.25rem;
 }
diff --git a/packages/block-library/src/group/theme.scss b/packages/block-library/src/group/theme.scss
index 61e711c3aaa2f..b5b105fd4dcf3 100644
--- a/packages/block-library/src/group/theme.scss
+++ b/packages/block-library/src/group/theme.scss
@@ -2,7 +2,7 @@
 	&.has-background {
 		// Matches paragraph Block padding
 		// Todo: normalise with variables
-		padding: 20px 30px;
+		padding: 1.25rem 1.875rem;
 		margin-top: 0;
 		margin-bottom: 0;
 	}
diff --git a/packages/block-library/src/pullquote/theme.scss b/packages/block-library/src/pullquote/theme.scss
index 46bb986758629..4c2bffb8674aa 100644
--- a/packages/block-library/src/pullquote/theme.scss
+++ b/packages/block-library/src/pullquote/theme.scss
@@ -1,6 +1,6 @@
 .wp-block-pullquote {
-	border-top: 4px solid $dark-gray-500;
-	border-bottom: 4px solid $dark-gray-500;
+	border-top: 0.25rem solid $dark-gray-500;
+	border-bottom: 0.25rem solid $dark-gray-500;
 	margin-bottom: $default-block-margin;
 	color: $dark-gray-600;
 
diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
index fe3d90cd6a256..f5dde4cd8ffd7 100644
--- a/packages/block-library/src/quote/theme.scss
+++ b/packages/block-library/src/quote/theme.scss
@@ -1,5 +1,5 @@
 .wp-block-quote {
-	border-left: 4px solid $black;
+	border-left: 0.25rem solid $black;
 	margin: 0 0 $default-block-margin 0;
 	padding-left: 1em;
 
@@ -16,7 +16,7 @@
 	&.has-text-align-right,
 	&.has-text-align-right {
 		border-left: none;
-		border-right: 4px solid $black;
+		border-right: 0.25rem solid $black;
 		padding-left: 0;
 		padding-right: 1em;
 	}
diff --git a/packages/block-library/src/separator/theme.scss b/packages/block-library/src/separator/theme.scss
index f0673d7bb6f5d..47f83fd0c3566 100644
--- a/packages/block-library/src/separator/theme.scss
+++ b/packages/block-library/src/separator/theme.scss
@@ -6,7 +6,7 @@
 
 	// Default, thin style
 	&:not(.is-style-wide):not(.is-style-dots) {
-		max-width: 100px;
+		max-width: 6.25rem;
 	}
 
 	&.has-background:not(.is-style-dots) {

From 0a986d10d18d2b65e89a396f034e1226903e06f0 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:37:36 +0300
Subject: [PATCH 3/6] editor.scss - 1st pass

---
 packages/block-library/src/group/editor.scss           | 10 +++++-----
 packages/block-library/src/latest-comments/editor.scss |  8 ++++----
 packages/block-library/src/navigation/editor.scss      |  4 ++--
 packages/block-library/src/pullquote/editor.scss       |  6 +++---
 packages/block-library/src/social-link/editor.scss     |  4 ++--
 packages/block-library/src/tag-cloud/editor.scss       |  4 ++--
 6 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index b52c2472a6d9f..27eef0210e93e 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -32,14 +32,14 @@
 	&.has-background > .wp-block-group__inner-container > [data-align="full"] {
 		// note: using position `left` causes hoz scrollbars so
 		// we opt to use margin instead
-		// the 30px matches the hoz padding applied in `theme.scss`
+		// the 1.875rem matches the hoz padding applied in `theme.scss`
 		// added when the Block has a background set
-		margin-left: -30px;
+		margin-left: -1.875rem;
 
-		// 60px here is x2 the hoz padding from `theme.scss` added when
+		// 3.75rem here is x2 the hoz padding from `theme.scss` added when
 		// the Block has a background set
 		// note: also duplicated below for full width Groups
-		width: calc(100% + 60px);
+		width: calc(100% + 3.75rem);
 	}
 }
 
@@ -61,7 +61,7 @@
 	// Full Width Blocks with a background (ie: has padding)
 	// note: also duplicated above for all Group widths
 	&.has-background > .wp-block-group__inner-container > [data-align="full"] {
-		width: calc(100% + 60px);
+		width: calc(100% + 3.75rem);
 	}
 }
 
diff --git a/packages/block-library/src/latest-comments/editor.scss b/packages/block-library/src/latest-comments/editor.scss
index e5116c2c5bf4a..282a66777a144 100644
--- a/packages/block-library/src/latest-comments/editor.scss
+++ b/packages/block-library/src/latest-comments/editor.scss
@@ -1,14 +1,14 @@
 .wp-block-latest-comments.has-avatars .avatar {
-	margin-right: 10px;
+	margin-right: 0.625rem;
 }
 
 .wp-block-latest-comments__comment-excerpt p {
-	font-size: 14px;
+	font-size: 0.875rem;
 	line-height: $editor-line-height;
-	margin: 5px 0 20px;
+	margin: 0.3125rem 0 1.25rem;
 	padding-top: 0;
 }
 
 .wp-block-latest-comments.has-avatars .wp-block-latest-comments__comment {
-	min-height: 36px;
+	min-height: 2.25rem;
 }
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index 9792e050afc0d..3a540db805cdc 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -1,5 +1,5 @@
-$navigation-height: 60px;
-$navigation-item-height: 46px;
+$navigation-height: 3.75rem;
+$navigation-item-height: 2.875rem;
 
 // Undo default editor styles.
 .editor-styles-wrapper .wp-block-navigation ul,
diff --git a/packages/block-library/src/pullquote/editor.scss b/packages/block-library/src/pullquote/editor.scss
index 89c66a518fcb2..e5bd1a533501d 100644
--- a/packages/block-library/src/pullquote/editor.scss
+++ b/packages/block-library/src/pullquote/editor.scss
@@ -1,13 +1,13 @@
 .wp-block[data-align="left"] > .wp-block-pullquote,
 .wp-block[data-align="right"] > .wp-block-pullquote {
 	& p {
-		font-size: 20px;
+		font-size: 1.25rem;
 	}
 }
 
 .wp-block-pullquote {
 	& blockquote p {
-		font-size: 28px;
+		font-size: 1.75rem;
 		line-height: 1.6;
 	}
 }
@@ -17,7 +17,7 @@
 	margin-right: 0;
 
 	& blockquote p {
-		font-size: 32px;
+		font-size: 2rem;
 	}
 
 	.wp-block-pullquote__citation {
diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss
index e938b8d74ee74..fdcee06771bdb 100644
--- a/packages/block-library/src/social-link/editor.scss
+++ b/packages/block-library/src/social-link/editor.scss
@@ -4,6 +4,6 @@
 }
 
 .wp-block-social-links.is-style-pill-shape .wp-social-link button {
-	padding-left: 16px;
-	padding-right: 16px;
+	padding-left: 1rem;
+	padding-right: 1rem;
 }
diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss
index c70f152286080..35744757e1e41 100644
--- a/packages/block-library/src/tag-cloud/editor.scss
+++ b/packages/block-library/src/tag-cloud/editor.scss
@@ -1,12 +1,12 @@
 .block-editor .wp-block-tag-cloud {
 	a {
 		display: inline-block;
-		margin-right: 5px;
+		margin-right: 0.3125rem;
 	}
 
 	span {
 		display: inline-block;
-		margin-left: 5px;
+		margin-left: 0.3125rem;
 		color: $dark-gray-100;
 		text-decoration: none;
 	}

From 43f447b2d124b8c4545b5eee92659d0b0e698dd1 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:41:46 +0300
Subject: [PATCH 4/6] WIP for gallery-image-style.native

---
 .../block-library/src/gallery/gallery-image-style.native.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/gallery/gallery-image-style.native.scss b/packages/block-library/src/gallery/gallery-image-style.native.scss
index 765f6c4918544..491d535822026 100644
--- a/packages/block-library/src/gallery/gallery-image-style.native.scss
+++ b/packages/block-library/src/gallery/gallery-image-style.native.scss
@@ -1,7 +1,7 @@
-$gallery-image-container-height: 150px;
+$gallery-image-container-height: 9.375rem;
 $overlay-border-width: 3px;
 $caption-background-color: rgba(0, 0, 0, 0.4);
-$caption-padding-vertical: 8px;
+$caption-padding-vertical: 0.5rem;
 
 .galleryImageContainer {
 	flex: 1;

From 46d47081944520213db1a992a8e174bcca929f51 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:53:02 +0300
Subject: [PATCH 5/6] edit variables

---
 packages/base-styles/_variables.scss | 96 ++++++++++++++--------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 276bd120ab0b5..17c96da05d495 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -5,95 +5,95 @@
  */
 
 $default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
-$default-font-size: 13px;
+$default-font-size: 0.8125rem;
 $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
-$editor-font-size: 16px;
-$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
-$text-editor-font-size: 14px;
+$editor-font-size: 1rem;
+$default-block-margin: 1.75rem; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
+$text-editor-font-size: 0.875rem;
 $editor-line-height: 1.8;
-$big-font-size: 18px;
-$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
+$big-font-size: 1.125rem;
+$mobile-text-min-font-size: 1rem; // Any font size below 1rem will cause Mobile Safari to "zoom in"
 $border-width: 1px;
 $border-width-focus: 1.5px;
-$border-width-tab: 4px;
+$border-width-tab: 0.25rem;
 
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 
-$grid-unit: 8px;
-$grid-unit-05: 0.5 * $grid-unit;	// 4px
-$grid-unit-10: 1 * $grid-unit;		// 8px
-$grid-unit-15: 1.5 * $grid-unit;	// 12px
-$grid-unit-20: 2 * $grid-unit;		// 16px
-$grid-unit-30: 3 * $grid-unit;		// 24px
-$grid-unit-40: 4 * $grid-unit;		// 32px
-$grid-unit-50: 5 * $grid-unit;		// 40px
-$grid-unit-60: 6 * $grid-unit;		// 48px
+$grid-unit: 0.5rem;
+$grid-unit-05: 0.5 * $grid-unit;	// 0.25rem
+$grid-unit-10: 1 * $grid-unit;		// 0.5rem
+$grid-unit-15: 1.5 * $grid-unit;	// 0.75rem
+$grid-unit-20: 2 * $grid-unit;		// 1rem
+$grid-unit-30: 3 * $grid-unit;		// 1.5rem
+$grid-unit-40: 4 * $grid-unit;		// 2rem
+$grid-unit-50: 5 * $grid-unit;		// 2.5rem
+$grid-unit-60: 6 * $grid-unit;		// 3rem
 
 /**
  * Dimensions.
  */
 
-$icon-size: 24px;
-$button-size: 36px;
-$button-size-small: 24px;
-$panel-padding: 16px;
-$header-height: 60px;
-$panel-header-height: 50px;
-$admin-bar-height: 32px;
-$admin-bar-height-big: 46px;
-$admin-sidebar-width: 160px;
-$admin-sidebar-width-big: 190px;
-$admin-sidebar-width-collapsed: 36px;
-$modal-min-width: 360px;
-$spinner-size: 18px;
-$mobile-header-toolbar-height: 44px;
-$mobile-floating-toolbar-height: 44px;
-$mobile-floating-toolbar-margin: 8px;
+$icon-size: 1.5rem;
+$button-size: 2.25rem;
+$button-size-small: 1.5rem;
+$panel-padding: 1rem;
+$header-height: 3.75rem;
+$panel-header-height: 3.125rem;
+$admin-bar-height: 2rem;
+$admin-bar-height-big: 2.875rem;
+$admin-sidebar-width: 10rem;
+$admin-sidebar-width-big: 11.875rem;
+$admin-sidebar-width-collapsed: 2.25rem;
+$modal-min-width: 22.5rem;
+$spinner-size: 1.125rem;
+$mobile-header-toolbar-height: 2.75rem;
+$mobile-floating-toolbar-height: 2.75rem;
+$mobile-floating-toolbar-margin: 0.5rem;
 
 
 /**
  * Shadows.
  */
 
-$shadow-popover: 0 2px 6px rgba($black, 0.05);
-$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
+$shadow-popover: 0.125rem 0.375rem rgba($black, 0.05);
+$shadow-modal: 0 0.1875rem 1.875rem rgba($dark-gray-900, 0.2);
 
 
 /**
  * Editor widths.
  */
 
-$sidebar-width: 280px;
-$content-width: 580px; // This is optimized for 70 characters.
-$widget-area-width: 700px;
+$sidebar-width: 17.5rem;
+$content-width: 36.25rem; // This is optimized for 70 characters.
+$widget-area-width: 43.75rem;
 
 /**
  * Block UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
-$mobile-block-toolbar-height: 44px;
-$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-spacing: 4px; // Vertical space between blocks.
+$mobile-block-toolbar-height: 2.75rem;
+$block-padding: 0.875rem; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
+$block-spacing: 0.25rem; // 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-side-ui-clearance:0.125rem; // 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)
 $dimmed-opacity: 1;
 
-$block-edge-to-content: 16px;
-$solid-border-space: 12px;
-$dashed-border-space: 6px;
-$block-selected-margin: 3px;
+$block-edge-to-content: 1rem;
+$solid-border-space: 0.75rem;
+$dashed-border-space: 0.375rem;
+$block-selected-margin: 0.1875rem;
 $block-selected-border-width: 1px;
 $block-selected-padding: 0;
-$block-selected-child-margin: 5px;
+$block-selected-child-margin: 0.3125rem;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
 
@@ -101,6 +101,6 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
  * Border radii.
  */
 
-$radius-round-rectangle: 4px;
+$radius-round-rectangle: 0.25rem;
 $radius-round: 50%;
-$radius-block-ui: 2px;
+$radius-block-ui:0.125rem;

From 5d3b43262970f89f961f6dd67224e24d3b93e039 Mon Sep 17 00:00:00 2001
From: Ari Stathopoulos <aristath@gmail.com>
Date: Wed, 20 May 2020 21:53:02 +0300
Subject: [PATCH 6/6] Revert "edit variables"

This reverts commit 46d47081944520213db1a992a8e174bcca929f51.
---
 packages/base-styles/_variables.scss | 96 ++++++++++++++--------------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/packages/base-styles/_variables.scss b/packages/base-styles/_variables.scss
index 17c96da05d495..276bd120ab0b5 100644
--- a/packages/base-styles/_variables.scss
+++ b/packages/base-styles/_variables.scss
@@ -5,95 +5,95 @@
  */
 
 $default-font: -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,"Helvetica Neue", sans-serif;
-$default-font-size: 0.8125rem;
+$default-font-size: 13px;
 $default-line-height: 1.4;
 $editor-font: "Noto Serif", serif;
 $editor-html-font: Menlo, Consolas, monaco, monospace;
-$editor-font-size: 1rem;
-$default-block-margin: 1.75rem; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
-$text-editor-font-size: 0.875rem;
+$editor-font-size: 16px;
+$default-block-margin: 28px; // This value provides a consistent, contiguous spacing between blocks (it's 2x $block-padding).
+$text-editor-font-size: 14px;
 $editor-line-height: 1.8;
-$big-font-size: 1.125rem;
-$mobile-text-min-font-size: 1rem; // Any font size below 1rem will cause Mobile Safari to "zoom in"
+$big-font-size: 18px;
+$mobile-text-min-font-size: 16px; // Any font size below 16px will cause Mobile Safari to "zoom in"
 $border-width: 1px;
 $border-width-focus: 1.5px;
-$border-width-tab: 0.25rem;
+$border-width-tab: 4px;
 
 /**
  * Grid System.
  * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
  */
 
-$grid-unit: 0.5rem;
-$grid-unit-05: 0.5 * $grid-unit;	// 0.25rem
-$grid-unit-10: 1 * $grid-unit;		// 0.5rem
-$grid-unit-15: 1.5 * $grid-unit;	// 0.75rem
-$grid-unit-20: 2 * $grid-unit;		// 1rem
-$grid-unit-30: 3 * $grid-unit;		// 1.5rem
-$grid-unit-40: 4 * $grid-unit;		// 2rem
-$grid-unit-50: 5 * $grid-unit;		// 2.5rem
-$grid-unit-60: 6 * $grid-unit;		// 3rem
+$grid-unit: 8px;
+$grid-unit-05: 0.5 * $grid-unit;	// 4px
+$grid-unit-10: 1 * $grid-unit;		// 8px
+$grid-unit-15: 1.5 * $grid-unit;	// 12px
+$grid-unit-20: 2 * $grid-unit;		// 16px
+$grid-unit-30: 3 * $grid-unit;		// 24px
+$grid-unit-40: 4 * $grid-unit;		// 32px
+$grid-unit-50: 5 * $grid-unit;		// 40px
+$grid-unit-60: 6 * $grid-unit;		// 48px
 
 /**
  * Dimensions.
  */
 
-$icon-size: 1.5rem;
-$button-size: 2.25rem;
-$button-size-small: 1.5rem;
-$panel-padding: 1rem;
-$header-height: 3.75rem;
-$panel-header-height: 3.125rem;
-$admin-bar-height: 2rem;
-$admin-bar-height-big: 2.875rem;
-$admin-sidebar-width: 10rem;
-$admin-sidebar-width-big: 11.875rem;
-$admin-sidebar-width-collapsed: 2.25rem;
-$modal-min-width: 22.5rem;
-$spinner-size: 1.125rem;
-$mobile-header-toolbar-height: 2.75rem;
-$mobile-floating-toolbar-height: 2.75rem;
-$mobile-floating-toolbar-margin: 0.5rem;
+$icon-size: 24px;
+$button-size: 36px;
+$button-size-small: 24px;
+$panel-padding: 16px;
+$header-height: 60px;
+$panel-header-height: 50px;
+$admin-bar-height: 32px;
+$admin-bar-height-big: 46px;
+$admin-sidebar-width: 160px;
+$admin-sidebar-width-big: 190px;
+$admin-sidebar-width-collapsed: 36px;
+$modal-min-width: 360px;
+$spinner-size: 18px;
+$mobile-header-toolbar-height: 44px;
+$mobile-floating-toolbar-height: 44px;
+$mobile-floating-toolbar-margin: 8px;
 
 
 /**
  * Shadows.
  */
 
-$shadow-popover: 0.125rem 0.375rem rgba($black, 0.05);
-$shadow-modal: 0 0.1875rem 1.875rem rgba($dark-gray-900, 0.2);
+$shadow-popover: 0 2px 6px rgba($black, 0.05);
+$shadow-modal: 0 3px 30px rgba($dark-gray-900, 0.2);
 
 
 /**
  * Editor widths.
  */
 
-$sidebar-width: 17.5rem;
-$content-width: 36.25rem; // This is optimized for 70 characters.
-$widget-area-width: 43.75rem;
+$sidebar-width: 280px;
+$content-width: 580px; // This is optimized for 70 characters.
+$widget-area-width: 700px;
 
 /**
  * Block UI.
  */
 
 $block-toolbar-height: $grid-unit-60;
-$mobile-block-toolbar-height: 2.75rem;
-$block-padding: 0.875rem; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
-$block-spacing: 0.25rem; // Vertical space between blocks.
+$mobile-block-toolbar-height: 44px;
+$block-padding: 14px; // Space between block footprint and focus boundaries. These are drawn outside the block footprint, and do not affect the size.
+$block-spacing: 4px; // Vertical space between blocks.
 $block-side-ui-width: $button-size; // Width of the movers/drag handle UI.
-$block-side-ui-clearance:0.125rem; // Space between movers/drag handle UI, and block.
+$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)
 $dimmed-opacity: 1;
 
-$block-edge-to-content: 1rem;
-$solid-border-space: 0.75rem;
-$dashed-border-space: 0.375rem;
-$block-selected-margin: 0.1875rem;
+$block-edge-to-content: 16px;
+$solid-border-space: 12px;
+$dashed-border-space: 6px;
+$block-selected-margin: 3px;
 $block-selected-border-width: 1px;
 $block-selected-padding: 0;
-$block-selected-child-margin: 0.3125rem;
+$block-selected-child-margin: 5px;
 $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $block-selected-border-width;
 
 
@@ -101,6 +101,6 @@ $block-selected-to-content: $block-edge-to-content - $block-selected-margin - $b
  * Border radii.
  */
 
-$radius-round-rectangle: 0.25rem;
+$radius-round-rectangle: 4px;
 $radius-round: 50%;
-$radius-block-ui:0.125rem;
+$radius-block-ui: 2px;