fix(stepper): express whcm (#2384)

* fix(stepper): remove hover from disabled stepper

* fix(stepper): disabled express whcm border

* fix(stepper): disabled buttons border

* refactor(stepper): use tokens for WHCM value

* refactor(stepper): re order whcm selectors

Author: jenndiaz

components/stepper/index.css

@@ -94,37 +94,6 @@ governing permissions and limitations under the License.
   }
 }
 
-
-/********* WHCM *********/
-@media (forced-colors: active) {
-  .spectrum-Stepper {
-    --highcontrast-stepper-border-color: CanvasText;
-    --highcontrast-stepper-border-color-hover: Highlight;
-    --highcontrast-stepper-border-color-focus: Highlight;
-    --highcontrast-stepper-border-color-focus-hover: Highlight;
-    --highcontrast-stepper-border-color-keyboard-focus: CanvasText;
-
-    &.is-disabled {
-      --highcontrast-stepper-border-color: GrayText;
-    }
-
-    &.is-invalid {
-      --highcontrast-stepper-border-color: Highlight;
-      --highcontrast-stepper-border-color-hover: Highlight;
-      --highcontrast-stepper-border-color-focus: Highlight;
-      --highcontrast-stepper-border-color-focus-hover: Highlight;
-      --highcontrast-stepper-border-color-keyboard-focus: Highlight;
-    }
-
-    --highcontrast-stepper-button-background-color-default: Canvas;
-    --highcontrast-stepper-button-background-color-hover: Canvas;
-    --highcontrast-stepper-button-background-color-focus: Canvas;
-    --highcontrast-stepper-button-background-color-keyboard-focus: Canvas;
-
-    --highcontrast-stepper-focus-indicator-color: Highlight;
-  }
-}
-
 .x {
  border-radius: var(--spectrum-stepper-button-border-radius-reset);
 }
@@ -151,7 +120,7 @@ governing permissions and limitations under the License.
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover)));
   }
 
-  &:hover {
+  &:hover:not(.is-disabled) {
     .spectrum-Stepper-input,
     .spectrum-Stepper-buttons {
       border-color: var(--highcontrast-stepper-border-color-hover, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-hover)));
@@ -201,7 +170,6 @@ governing permissions and limitations under the License.
       border-color: var(--highcontrast-stepper-border-color-keyboard-focus, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
     }
   }
-
 }
 
 /*** Quiet ***/
@@ -298,7 +266,7 @@ governing permissions and limitations under the License.
 
   border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color, var(--spectrum-stepper-border-color)));
   border-style: var(--mod-stepper-buttons-border-style, var(--spectrum-stepper-buttons-border-style));
-  border-width: var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width));
+  border-width: var(--highcontrast-stepper-buttons-border-width, var(--mod-stepper-buttons-border-width, var(--spectrum-stepper-buttons-border-width)));
   border-inline-start-width: 0;
 
   /* Have to add border radius here to avoid overlapping textfield border */
@@ -315,3 +283,31 @@ governing permissions and limitations under the License.
   border-end-end-radius: var(--mod-stepper-border-radius, var(--spectrum-stepper-border-radius));
   border-inline-end-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
 }
+
+@media (forced-colors: active) {
+  .spectrum-Stepper {
+    --highcontrast-stepper-border-color: CanvasText;
+    --highcontrast-stepper-border-color-hover: Highlight;
+    --highcontrast-stepper-border-color-focus: Highlight;
+    --highcontrast-stepper-border-color-focus-hover: Highlight;
+    --highcontrast-stepper-border-color-keyboard-focus: CanvasText;
+    --highcontrast-stepper-button-background-color-default: Canvas;
+    --highcontrast-stepper-button-background-color-hover: Canvas;
+    --highcontrast-stepper-button-background-color-focus: Canvas;
+    --highcontrast-stepper-button-background-color-keyboard-focus: Canvas;
+    --highcontrast-stepper-focus-indicator-color: Highlight;
+
+    &.is-disabled {
+      --highcontrast-stepper-border-color: GrayText;
+      --highcontrast-stepper-buttons-border-width: var(--mod-stepper-border-width, var(--spectrum-stepper-border-width));
+    }
+
+    &.is-invalid {
+      --highcontrast-stepper-border-color: Highlight;
+      --highcontrast-stepper-border-color-hover: Highlight;
+      --highcontrast-stepper-border-color-focus: Highlight;
+      --highcontrast-stepper-border-color-focus-hover: Highlight;
+      --highcontrast-stepper-border-color-keyboard-focus: Highlight;
+    }
+  }
+}