From 6fad36af167c22aff335b8b3f7caa0ba2689ae76 Mon Sep 17 00:00:00 2001
From: Josh Winn <965114+jawinn@users.noreply.github.com>
Date: Thu, 28 Mar 2024 17:40:06 -0400
Subject: [PATCH] refactor(button): use accent as the default

Use accent styles for the default button when there is no variant class
applied, to match the default defined on the guidelines.

Also moves a few of the default color custom properties, so the colors
are all grouped together.
---
 components/button/index.css | 49 ++++++++++++++++++++-----------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/button/index.css b/components/button/index.css
index f014c26c94c..2da59ae69ee 100644
--- a/components/button/index.css
+++ b/components/button/index.css
@@ -12,7 +12,6 @@ governing permissions and limitations under the License.
 
 @import "@spectrum-css/commons/basebutton.css";
 
-/* default for all buttons */
 .spectrum-Button {
   --spectrum-button-animation-duration: var(--spectrum-animation-duration-100);
 
@@ -40,15 +39,6 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
   --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
 
-  --spectrum-button-border-color-default: transparent;
-  --spectrum-button-border-color-hover: transparent;
-  --spectrum-button-border-color-down: transparent;
-  --spectrum-button-border-color-focus: transparent;
-
-  --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
-  --spectrum-button-border-color-disabled: transparent;
-  --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
-
   --mod-progress-circle-position: absolute;
   /* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties */
   --spectrum-downstate-perspective: max(var(--spectrum-downstate-height), var(--spectrum-downstate-width) * var(--spectrum-component-size-width-ratio-down));
@@ -130,15 +120,21 @@ governing permissions and limitations under the License.
   --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
 }
 
-/* Variant colors */
+/* Variants and colors */
 .spectrum-Button {
-  &.spectrum-Button--accent,
-  &.spectrum-Button--negative {
-    --spectrum-button-content-color-default: var(--spectrum-white);
-    --spectrum-button-content-color-hover: var(--spectrum-white);
-    --spectrum-button-content-color-down: var(--spectrum-white);
-    --spectrum-button-content-color-focus: var(--spectrum-white);
-  }
+  --spectrum-button-content-color-default: var(--spectrum-white);
+  --spectrum-button-content-color-hover: var(--spectrum-white);
+  --spectrum-button-content-color-down: var(--spectrum-white);
+  --spectrum-button-content-color-focus: var(--spectrum-white);
+
+  --spectrum-button-border-color-default: transparent;
+  --spectrum-button-border-color-hover: transparent;
+  --spectrum-button-border-color-down: transparent;
+  --spectrum-button-border-color-focus: transparent;
+
+  --spectrum-button-background-color-disabled: var(--spectrum-disabled-background-color);
+  --spectrum-button-border-color-disabled: transparent;
+  --spectrum-button-content-color-disabled: var(--spectrum-disabled-content-color);
 
   &.spectrum-Button--outline {
     --spectrum-button-background-color-disabled: transparent;
@@ -147,7 +143,9 @@ governing permissions and limitations under the License.
   }
 
   /* ---- Accent ---- */
-  &.spectrum-Button--accent {
+  /* Also shows as the default when a variant class is not used. */
+  &.spectrum-Button--accent,
+  & {
     --spectrum-button-background-color-default: var(--spectrum-accent-background-color-default);
     --spectrum-button-background-color-hover: var(--spectrum-accent-background-color-hover);
     --spectrum-button-background-color-down: var(--spectrum-accent-background-color-down);
@@ -163,9 +161,7 @@ governing permissions and limitations under the License.
   }
 
   /* ---- Primary ---- */
-  /* Also shows as the default when a variant is not set. */
-  &.spectrum-Button--primary,
-  & {
+  &.spectrum-Button--primary {
     --spectrum-button-background-color-default: var(--spectrum-neutral-background-color-default);
     --spectrum-button-background-color-hover: var(--spectrum-neutral-background-color-hover);
     --spectrum-button-background-color-down: var(--spectrum-neutral-background-color-down);
@@ -609,7 +605,14 @@ a.spectrum-Button {
       }
     }
 
-    &.spectrum-Button--accent {
+    &.spectrum-Button--accent,
+    &:not(
+      .spectrum-Button--primary,
+      .spectrum-Button--negative,
+      .spectrum-Button--secondary,
+      .spectrum-Button--staticBlack,
+      .spectrum-Button--staticWhite
+    ){
       /* The accent fill variant looks different than the other buttons.
          It inverts the background and content colors. */
       --highcontrast-button-background-color-default: ButtonText;