fix(button): add explicit highcontrast variables for disabled color (#1985)

* fix(button): add explicit highcontrast variables for disabled color

* refactor(button): use variables instead of css

* fix(button): add back no forced color adjust for label

* chore(button): test chromatic whcm

* chore(button): testing out explicitly defining parameters for story

Author: mlogsdon18

components/button/index.css

@@ -239,6 +239,9 @@ a.spectrum-Button {
 /* windows high contrast mode over-writes for accent variant */
 @media (forced-colors: active) {
   .spectrum-Button {
+    --highcontrast-button-content-color-disabled: GrayText;
+    --highcontrast-button-border-color-disabled: GrayText;
+
     &:focus-ring {
       &:after {
         forced-color-adjust: none;
@@ -248,25 +251,21 @@ a.spectrum-Button {
 
     &.spectrum-Button--accent {
       &.spectrum-Button--fill {
-        background-color: ButtonText;
-        color: ButtonFace;
+        --highcontrast-button-background-color-default: ButtonText;
+        --highcontrast-button-content-color-default: ButtonFace;
+        --highcontrast-button-background-color-disabled: ButtonFace;
 
-        &:disabled,
-        &.is-disabled {
-          background-color: ButtonFace;
-          color: GrayText;
-        }
+        --highcontrast-button-background-color-hover: Highlight;
+        --highcontrast-button-background-color-down: Highlight;
+        --highcontrast-button-background-color-focus: Highlight;
+        --highcontrast-button-content-color-hover: ButtonFace;
+        --highcontrast-button-content-color-down: ButtonFace;
+        --highcontrast-button-content-color-focus: ButtonFace;
 
-        /* simplified for a lot of state for high contrast mode */
-        &:active,
-        &:hover,
-        &:focus-ring,
-        &.is-focused {
-          background-color: Highlight;
-        }
         .spectrum-Button-label {
           forced-color-adjust: none;
         }
+        
       }
     }
   }

components/button/stories/button.stories.js

@@ -166,3 +166,11 @@ Disabled.args = {
 	isDisabled: true,
 	iconName: "Actions",
 };
+
+export const WithForcedColors = CustomButton.bind({});
+WithForcedColors.parameters = {
+  chromatic: { forcedColors: "active" },
+};
+WithForcedColors.args = {
+	iconName: "Actions",
+};