fix(pickerbutton): correct states' background colors (#3630)

* fix(pickerbutton): correct states' background colors

* chore(pickerbutton): update metadata

* chore(pickerbutton): create changeset

Author: marissahuysentruyt

.changeset/kind-walls-fix.md

@@ -0,0 +1,9 @@
+---
+"@spectrum-css/pickerbutton": patch
+---
+
+Updates background colors for the picker button to match S2-foundations design specs.
+
+default state: gray-50 to gray-100
+hover state: gray-100 to gray-200
+key-focus state: gray-100 to gray-200

components/pickerbutton/dist/metadata.json

@@ -126,7 +126,6 @@
     "--spectrum-font-size-75",
     "--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/pickerbutton/themes/spectrum-two.css

@@ -13,10 +13,10 @@
 
 @container style(--system: spectrum) {
 	.spectrum-PickerButton {
-		--spectrum-picker-button-background-color: var(--spectrum-gray-50);
-		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-100);
+		--spectrum-picker-button-background-color: var(--spectrum-gray-100);
+		--spectrum-picker-button-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-picker-button-background-color-down: var(--spectrum-gray-200);
-		--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-100);
+		--spectrum-picker-button-background-color-key-focus: var(--spectrum-gray-200);
 
 		--spectrum-picker-button-border-color: none;
 		--spectrum-picker-button-border-radius: var(--spectrum-corner-radius-75);