fix(stepper,infieldbutton,picker): s2 foundations fast follows (#3536)

* fix(picker): update default border-color to gray-500
- also updates metadata.json

* fix(infieldbutton): update tokens for background color
- updates gray-50 to gray-100 for default background color
- updates gray-100 to gray-200 for down and hover state background color
- updates metadata.json to reflect changes

These fixes should align the stepper infield buttons with the style
behavior of other form elements (particularly to match picker).

* fix(picker): update font color for focus state
- in the keyboard focus state, the picker value/placeholder font color
was resolving to gray-800, when gray-900 was expected.

- create changeset

* fix(stepper): fix border color for focus&hover

fix(picker): add .spectrum-Picker-label to selector
- this should avoid accidentally targeting the nested is-placeholder
class
- updates changeset

Author: marissahuysentruyt

.changeset/nervous-penguins-matter.md

@@ -0,0 +1,12 @@
+---
+"@spectrum-css/infieldbutton": patch
+"@spectrum-css/stepper": patch
+"@spectrum-css/picker": patch
+---
+
+S2 Foundations fixes
+
+- 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 `&.is-keyboardFocused&.is-placeholder` selector to `&.is-keyboardFocused.spectrum-Picker-label.is-placeholder` to avoid unexpectedly targeting the nested placeholder class.

components/infieldbutton/dist/metadata.json

@@ -132,7 +132,6 @@
     "--spectrum-disabled-content-color",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
-    "--spectrum-gray-50",
     "--spectrum-neutral-content-color-default",
     "--spectrum-neutral-content-color-down",
     "--spectrum-neutral-content-color-hover",

components/infieldbutton/themes/spectrum-two.css

@@ -23,9 +23,9 @@
 		--spectrum-infield-button-stacked-top-border-radius-start-start: var(--spectrum-infield-button-border-radius-reset);
 		--spectrum-infield-button-stacked-bottom-border-radius-end-start: var(--spectrum-infield-button-border-radius-reset);
 
-		--spectrum-infield-button-background-color: var(--spectrum-gray-50);
-		--spectrum-infield-button-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-infield-button-background-color: var(--spectrum-gray-100);
+		--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
-		--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-100);
+		--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200);
 	}
 }

components/picker/dist/metadata.json

@@ -49,8 +49,8 @@
     ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):focus-visible",
     ".spectrum-Picker.is-invalid:not(:disabled, .is-disabled):hover",
     ".spectrum-Picker.is-keyboardFocused",
+    ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker.is-keyboardFocused .spectrum-Picker-menuIcon",
-    ".spectrum-Picker.is-keyboardFocused.is-placeholder",
     ".spectrum-Picker.is-keyboardFocused:after",
     ".spectrum-Picker.is-loading .spectrum-Picker-label",
     ".spectrum-Picker.is-loading .spectrum-Picker-menuIcon",
@@ -59,7 +59,6 @@
     ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover",
     ".spectrum-Picker.is-open:not(.spectrum-Picker--quiet, :disabled, .is-disabled):hover .spectrum-Picker-menuIcon",
     ".spectrum-Picker.is-placeholder:active .spectrum-Picker-label",
-    ".spectrum-Picker.is-placeholder:focus-visible",
     ".spectrum-Picker::-moz-focus-inner",
     ".spectrum-Picker:active",
     ".spectrum-Picker:active:after",
@@ -71,6 +70,7 @@
     ".spectrum-Picker:disabled .spectrum-Picker-validationIcon",
     ".spectrum-Picker:focus",
     ".spectrum-Picker:focus-visible",
+    ".spectrum-Picker:focus-visible .spectrum-Picker-label.is-placeholder",
     ".spectrum-Picker:focus-visible .spectrum-Picker-menuIcon",
     ".spectrum-Picker:focus-visible:after",
     ".spectrum-Picker:hover",
@@ -281,7 +281,6 @@
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",
-    "--spectrum-gray-800",
     "--spectrum-gray-900",
     "--spectrum-line-height-100",
     "--spectrum-negative-border-color-default",

components/picker/index.css

@@ -265,7 +265,7 @@
 			border-color: var(--highcontrast-picker-focus-indicator-color, var(--mod-picker-focus-indicator-color, var(--spectrum-picker-focus-indicator-color)));
 		}
 
-		&.is-placeholder {
+		.spectrum-Picker-label.is-placeholder {
 			color: var(--highcontrast-picker-content-color-default, var(--mod-picker-font-color-key-focus, var(--spectrum-picker-font-color-key-focus)));
 		}
 

components/picker/themes/spectrum-two.css

@@ -20,7 +20,7 @@
 		--spectrum-picker-background-color-active: var(--spectrum-gray-200);
 		--spectrum-picker-background-color-key-focus: var(--spectrum-gray-200);
 
-		--spectrum-picker-border-color-default: var(--spectrum-gray-800);
+		--spectrum-picker-border-color-default: var(--spectrum-gray-500);
 		--spectrum-picker-border-color-default-open: var(--spectrum-gray-500);
 		--spectrum-picker-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-picker-border-color-hover-open: var(--spectrum-gray-900);

components/stepper/dist/metadata.json

@@ -36,7 +36,7 @@
     ".spectrum-Stepper.spectrum-Stepper--sizeS",
     ".spectrum-Stepper.spectrum-Stepper--sizeXL",
     ".spectrum-Stepper:before",
-    ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled)",
+    ".spectrum-Stepper:hover:not(.is-invalid, .is-disabled, .is-focused)",
     ".spectrum-Stepper:not(.is-disabled) .is-focused",
     ".spectrum-Stepper:not(.is-disabled) .is-focused:hover",
     ".spectrum-Stepper:not(.is-disabled):focus",
@@ -125,7 +125,7 @@
     "--spectrum-focus-indicator-color",
     "--spectrum-focus-indicator-gap",
     "--spectrum-focus-indicator-thickness",
-    "--spectrum-gray-25",
+    "--spectrum-gray-100",
     "--spectrum-gray-300",
     "--spectrum-gray-50",
     "--spectrum-gray-500",

components/stepper/index.css

@@ -170,7 +170,7 @@
 		--mod-textfield-border-color-disabled: var(--spectrum-stepper-border-color-disabled);
 	}
 
-	&:hover:not(.is-invalid, .is-disabled) {
+	&:hover: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));
 	}
 

components/stepper/themes/spectrum-two.css

@@ -23,7 +23,7 @@
 		--spectrum-stepper-buttons-border-style: none;
 		--spectrum-stepper-buttons-border-width: 0;
 		--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
-		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-25);
+		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-100);
 		--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
 		--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);