fix(actionbutton): disable css transitions in high contrast

In Windows High Contrast, the border color briefly was flashing orange
(ButtonBorder) after hover, before it switched back to the correct color
as defined by the styles. This fixes that issue.

This removes CSS transitions in high contrast to avoid some of these
rendering issues and previously noticed sluggishness in the system color
transitions.

Author: jawinn

components/actionbutton/index.css

@@ -322,14 +322,14 @@ a.spectrum-ActionButton {
 
 /* Focus indicator */
 .spectrum-ActionButton {
-	transition: border-color var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+	transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
 
 	&::after {
 		position: absolute;
 		inset: 0;
 		margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
 		border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
-		transition: box-shadow var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
+		transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
 		pointer-events: none;
 		content: "";
 	}
@@ -346,18 +346,6 @@ a.spectrum-ActionButton {
 
 @media (forced-colors: active) {
 	.spectrum-ActionButton {
-		&::after {
-			/* Make sure the box-shadow for the focus indicator renders. */
-			forced-color-adjust: none;
-		}
-
-		.spectrum-ActionButton-icon,
-		.spectrum-ActionButton-hold,
-		.spectrum-ActionButton-label {
-			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
-			forced-color-adjust: none;
-		}
-
 		/**
 		 * Default
 		 * - Uses "Button*" system color pairings.
@@ -372,6 +360,24 @@ a.spectrum-ActionButton {
 
 		--highcontrast-actionbutton-focus-indicator-color: CanvasText;
 
+		/**
+		 * Avoid performance and rendering issues with transitions between system colors.
+		 * Fixes bug in Windows High Contrast where border flashes the wrong color after hover (quiet).
+		 */
+		--highcontrast-actionbutton-animation-duration: 0;
+
+		&::after {
+			/* Make sure the box-shadow for the focus indicator renders. */
+			forced-color-adjust: none;
+		}
+
+		.spectrum-ActionButton-icon,
+		.spectrum-ActionButton-hold,
+		.spectrum-ActionButton-label {
+			/* Removes the extra unwanted background on label ("readability backplate") that can cause text to be unreadable. */
+			forced-color-adjust: none;
+		}
+
 		/**
 		 * Quiet
 		 * - Default blends in with background and has no border.