From e843e5484e2087d1ef546564c09254cc60dc5170 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Mon, 8 Feb 2021 09:36:29 +0100
Subject: [PATCH] Polish Buttons block radius, and size. (#28514)

---
 packages/block-library/src/button/style.scss           | 10 ++++------
 .../block-library/src/post-comments-form/style.scss    |  4 +---
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/button/style.scss b/packages/block-library/src/button/style.scss
index eca481ce34bf2b..37ace37907278f 100644
--- a/packages/block-library/src/button/style.scss
+++ b/packages/block-library/src/button/style.scss
@@ -1,5 +1,3 @@
-$blocks-button__height: 3.1em;
-
 // This variable is repeated across Button, Buttons, and Buttons editor styles.
 $blocks-block__margin: 0.5em;
 
@@ -8,8 +6,8 @@ $blocks-block__margin: 0.5em;
 .wp-block-button__link {
 	color: $white;
 	background-color: #32373c;
-	border: none;
-	border-radius: $blocks-button__height / 2;
+	border: 2px solid #32373c;
+	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;
@@ -78,12 +76,12 @@ $blocks-block__margin: 0.5em;
 
 .is-style-outline > .wp-block-button__link,
 .wp-block-button__link.is-style-outline {
-	border: 2px solid;
+	border: 2px solid currentColor;
 }
 
 .is-style-outline > .wp-block-button__link:not(.has-text-color),
 .wp-block-button__link.is-style-outline:not(.has-text-color) {
-	color: #32373c;
+	color: currentColor;
 }
 
 .is-style-outline > .wp-block-button__link:not(.has-background),
diff --git a/packages/block-library/src/post-comments-form/style.scss b/packages/block-library/src/post-comments-form/style.scss
index bd2e9c10ec5cdb..68a73d8174b803 100644
--- a/packages/block-library/src/post-comments-form/style.scss
+++ b/packages/block-library/src/post-comments-form/style.scss
@@ -1,11 +1,9 @@
-$blocks-button__height: 3.1em;
-
 // Styles copied from button block styles.
 .wp-block-post-comments-form input[type="submit"] {
 	color: $white;
 	background-color: #32373c;
 	border: none;
-	border-radius: $blocks-button__height / 2;
+	border-radius: 9999px; // 100% causes an oval, but any explicit but really high value retains the pill shape.
 	box-shadow: none;
 	cursor: pointer;
 	display: inline-block;