fix(stepper,styles): use latest CSS

Author: castastrophe

.changeset/lazy-walls-jump.md

@@ -0,0 +1,20 @@
+---
+'@spectrum-web-components/number-field': patch
+'@spectrum-web-components/styles': patch
+---
+
+📝 [#​3621](https://github.com/adobe/spectrum-css/pull/​3621) Thanks [@​marissahuysentruyt](https://github.com/​marissahuysentruyt)!
+
+-   Updates `--spectrum-stepper-border-color-focus-hover` from `gray-800` to `gray-900`.
+-   Updates `--spectrum-stepper-buttons-border-color-keyboard-focus` from `gray-900` to `gray-800` to match the rest of the border color on keyboard focus.
+
+📝 [#​3594](https://github.com/adobe/spectrum-css/pull/​3594) Thanks [@​TarunAdobe](https://github.com/TarunAdobe)!
+
+Updates stepper's key-focus border color (`--spectrum-stepper-border-color-keyboard-focus`) to `--spectrum-gray-800`.
+
+📝 [#​3536](https://github.com/adobe/spectrum-css/pull/​3536) Thanks [@​marissahuysentruyt](https://github.com/​marissahuysentruyt)!
+
+-   Adjusts the background-color of the infield button components within stepper to use `gray-100` as opposed to `gray-25`.
+-   This corresponds to the background-color updates picker has for S2.
+-   Corrects the border color for the default picker for S2 foundations, using `gray-500` (instead of `gray-800`) to align with other field/form components.
+-   Refactors the keyboard-focused placeholder selector to include the label to avoid unexpectedly targeting the nested placeholder class.

packages/number-field/src/number-field-overrides.css

@@ -64,6 +64,9 @@ governing permissions and limitations under the License.
     --spectrum-stepper-border-color-keyboard-focus-invalid: var(
         --system-stepper-border-color-keyboard-focus-invalid
     );
+    --spectrum-stepper-border-color-disabled: var(
+        --system-stepper-border-color-disabled
+    );
     --spectrum-stepper-button-border-width-disabled: var(
         --system-stepper-button-border-width-disabled
     );

packages/number-field/src/spectrum-number-field.css

@@ -138,6 +138,10 @@ governing permissions and limitations under the License.
     --mod-textfield-border-color: var(--spectrum-stepper-border-color);
 }
 
+#textfield:not(.spectrum-Stepper--quiet) {
+    --mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
+}
+
 :host(:not([disabled])[focused]) #textfield,
 :host(:not([disabled])) #textfield:focus {
     --mod-infield-button-border-color: var(--highcontrast-stepper-border-color-focus, var(--mod-stepper-buttons-border-color-focus, var(--spectrum-stepper-buttons-border-color-focus)));
@@ -209,7 +213,7 @@ governing permissions and limitations under the License.
         --mod-stepper-buttons-background-color: transparent;
     }
 
-    :host(:hover) #textfield:not(.is-invalid, .is-disabled) {
+    :host(:hover) #textfield:not(.is-invalid, .is-disabled, .is-focused) {
         --mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
     }
 

tools/styles/tokens-v2/system-theme-bridge.css

@@ -1461,16 +1461,16 @@
     --system-stepper-border-color-default: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-800);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
-    --system-stepper-buttons-background-color: var(--spectrum-gray-25);
+    --system-stepper-buttons-background-color: var(--spectrum-gray-100);
     --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-color-keyboard-focus: var(
-        --spectrum-gray-900
+        --spectrum-gray-800
     );
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
     --system-stepper-border-color-invalid: var(
@@ -1485,8 +1485,9 @@
     --system-stepper-border-color-keyboard-focus-invalid: var(
         --spectrum-negative-border-color-key-focus
     );
+    --system-stepper-border-color-disabled: var(--spectrum-gray-300);
     --system-stepper-button-border-width-disabled: var(
-        --spectrum-border-width-100
+        --spectrum-border-width-200
     );
     --system-stepper-buttons-background-color-disabled: var(--spectrum-gray-50);
     --system-stepper-quiet-buttons-border-style: none;

tools/styles/tokens/express/system-theme-bridge.css

@@ -1494,6 +1494,9 @@
     --system-stepper-border-color-focus-invalid: transparent;
     --system-stepper-border-color-focus-hover-invalid: transparent;
     --system-stepper-border-color-keyboard-focus-invalid: transparent;
+    --system-stepper-border-color-disabled: var(
+        --spectrum-disabled-background-color
+    );
     --system-stepper-button-border-width-disabled: 0;
     --system-stepper-buttons-background-color-disabled: var(
         --spectrum-disabled-background-color

tools/styles/tokens/spectrum/system-theme-bridge.css

@@ -1470,16 +1470,16 @@
     --system-stepper-border-color-default: var(--spectrum-gray-500);
     --system-stepper-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-border-color-focus: var(--spectrum-gray-800);
-    --system-stepper-border-color-focus-hover: var(--spectrum-gray-800);
-    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-900);
+    --system-stepper-border-color-focus-hover: var(--spectrum-gray-900);
+    --system-stepper-border-color-keyboard-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-style: none;
     --system-stepper-buttons-border-width: 0;
     --system-stepper-buttons-border-color: var(--spectrum-gray-500);
     --system-stepper-buttons-background-color: var(--spectrum-gray-50);
     --system-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
     --system-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
     --system-stepper-buttons-border-color-keyboard-focus: var(
-        --spectrum-gray-900
+        --spectrum-gray-800
     );
     --system-stepper-button-border-width: var(--spectrum-border-width-100);
     --system-stepper-border-color-invalid: var(
@@ -1494,6 +1494,7 @@
     --system-stepper-border-color-keyboard-focus-invalid: var(
         --spectrum-negative-border-color-key-focus
     );
+    --system-stepper-border-color-disabled: transparent;
     --system-stepper-button-border-width-disabled: var(
         --spectrum-border-width-100
     );