From 4ffd3a3bd1fba5b15e8a48d382a2882089ade985 Mon Sep 17 00:00:00 2001
From: Yuraima Estevez <yuraima.estevez@shopify.com>
Date: Fri, 12 Nov 2021 11:37:55 -0600
Subject: [PATCH 1/4] removing unnecessary $button-filled params, cleaning up
 Button component styling

---
 src/components/Button/Button.scss | 24 ++++++++++++++----------
 src/styles/shared/_buttons.scss   |  4 +---
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index c644e38f9f1..8fe41186372 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -111,21 +111,29 @@ $stacking-order: (
   margin-left: -($spinner-size / 2);
 }
 
+.primary,
+.destructive {
+  @include button-filled();
+
+  &.disabled {
+    @include recolor-icon(var(--p-icon-disabled));
+    color: var(--p-text-disabled);
+    box-shadow: none;
+    border-color: transparent;
+  }
+}
+
 .primary {
   --p-button-color: var(--p-action-primary);
   --p-button-text: var(--p-text-on-primary);
   --p-button-color-hover: var(--p-action-primary-hovered);
   --p-button-color-active: var(--p-action-primary-pressed);
   --p-button-color-depressed: var(--p-action-primary-depressed);
-  @include button-filled(color('indigo'), color('indigo', 'dark'));
+  @include button-filled();
   @include recolor-icon(var(--p-icon-on-primary));
 
   &.disabled {
-    @include recolor-icon(var(--p-icon-disabled));
     background: var(--p-action-primary-disabled);
-    color: var(--p-text-disabled);
-    border-color: transparent;
-    box-shadow: none;
   }
 }
 
@@ -135,15 +143,11 @@ $stacking-order: (
   --p-button-color-hover: var(--p-action-critical-hovered);
   --p-button-color-active: var(--p-action-critical-pressed);
   --p-button-color-depressed: var(--p-action-critical-depressed);
-  @include button-filled(color('red'), color('red', 'dark'));
+  @include button-filled();
   @include recolor-icon(var(--p-icon-on-critical));
 
   &.disabled {
-    @include recolor-icon(var(--p-icon-disabled));
     background: var(--p-action-critical-disabled);
-    color: var(--p-text-disabled);
-    box-shadow: none;
-    border-color: transparent;
   }
 }
 
diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss
index e3152567d72..ed424193870 100644
--- a/src/styles/shared/_buttons.scss
+++ b/src/styles/shared/_buttons.scss
@@ -76,10 +76,8 @@
   color: var(--p-text-disabled);
 }
 
-@mixin button-filled($button-color, $focus-color, $outline-color: null) {
+@mixin button-filled() {
   @include focus-ring($border-width: 0);
-  $border-color: darken($button-color, 10%);
-  $active-color: darken($button-color, 15%);
   background: var(--p-button-color);
   border-width: 0;
   border-color: transparent;

From fe990cb72d30f2e9c1189766363d16b0b0fa3667 Mon Sep 17 00:00:00 2001
From: Yuraima Estevez <yuraima.estevez@shopify.com>
Date: Fri, 12 Nov 2021 11:59:09 -0600
Subject: [PATCH 2/4] Co-authored-by: Alex Page <alex.page@shopify.com>


From 9f492f98a35334c9fd938303bf27ab29c5edd4bc Mon Sep 17 00:00:00 2001
From: Yuraima Estevez <yuraima.estevez@shopify.com>
Date: Fri, 12 Nov 2021 12:04:45 -0600
Subject: [PATCH 3/4] update changelong

---
 UNRELEASED.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 5862f997fe8..1abd5faa4a7 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -30,4 +30,6 @@ Bump polaris-icons to v4.10.0 ([#4569](https://github.com/Shopify/polaris-react/
 
 ### Code quality
 
+Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635))
+
 ### Deprecations

From a9d310e58398895726db348f19924ad01110da9a Mon Sep 17 00:00:00 2001
From: Yuraima Estevez <yuraima.estevez@shopify.com>
Date: Fri, 12 Nov 2021 12:45:08 -0600
Subject: [PATCH 4/4] remove parens button-filled

---
 src/components/Button/Button.scss | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
index 8fe41186372..023cb215218 100644
--- a/src/components/Button/Button.scss
+++ b/src/components/Button/Button.scss
@@ -113,7 +113,7 @@ $stacking-order: (
 
 .primary,
 .destructive {
-  @include button-filled();
+  @include button-filled;
 
   &.disabled {
     @include recolor-icon(var(--p-icon-disabled));
@@ -129,7 +129,6 @@ $stacking-order: (
   --p-button-color-hover: var(--p-action-primary-hovered);
   --p-button-color-active: var(--p-action-primary-pressed);
   --p-button-color-depressed: var(--p-action-primary-depressed);
-  @include button-filled();
   @include recolor-icon(var(--p-icon-on-primary));
 
   &.disabled {
@@ -143,7 +142,6 @@ $stacking-order: (
   --p-button-color-hover: var(--p-action-critical-hovered);
   --p-button-color-active: var(--p-action-critical-pressed);
   --p-button-color-depressed: var(--p-action-critical-depressed);
-  @include button-filled();
   @include recolor-icon(var(--p-icon-on-critical));
 
   &.disabled {