fix(button): primary, secondary color fast follows (#3648)

Author: rise-erpelding

.changeset/nine-eggs-count.md

@@ -0,0 +1,10 @@
+---
+"@spectrum-css/button": patch
+---
+
+S2 Foundations fixes to adjust:
+
+- primary outline background color for hover, active, and focus states (gray-100)
+- secondary fill background color for active state (gray-200)
+- secondary outline background color for hover, active, and focus states (gray-100)
+- secondary outline border color for default (gray-300) and active states (gray-400)

components/button/dist/metadata.json

@@ -318,6 +318,7 @@
     "--system-button-secondary-outline-background-color-focus",
     "--system-button-secondary-outline-background-color-hover",
     "--system-button-secondary-outline-border-color-default",
+    "--system-button-secondary-outline-border-color-down",
     "--system-button-selected-background-color-default",
     "--system-button-selected-background-color-down",
     "--system-button-selected-background-color-focus",

components/button/index.css

@@ -220,7 +220,6 @@
 
 			--mod-button-border-color-default: var(--spectrum-gray-300);
 			--mod-button-border-color-hover: var(--spectrum-gray-400);
-			--mod-button-border-color-down: var(--spectrum-gray-500);
 			--mod-button-border-color-focus: var(--spectrum-gray-400);
 			--mod-button-border-color-disabled: var(--spectrum-disabled-border-color);
 

components/button/themes/spectrum-two.css

@@ -40,9 +40,9 @@
 			--mod-button-content-color-focus: var(--spectrum-gray-25);
 
 			&.spectrum-Button--outline {
-				--mod-button-background-color-hover: var(--spectrum-gray-200);
-				--mod-button-background-color-down: var(--spectrum-gray-400);
-				--mod-button-background-color-focus: var(--spectrum-gray-200);
+				--mod-button-background-color-hover: var(--spectrum-gray-100);
+				--mod-button-background-color-down: var(--spectrum-gray-100);
+				--mod-button-background-color-focus: var(--spectrum-gray-100);
 			}
 		}
 
@@ -51,16 +51,17 @@
 
 			&:not(.spectrum-Button--outline) {
 				--mod-button-background-color-hover: var(--spectrum-gray-200);
-				--mod-button-background-color-down: var(--spectrum-gray-400);
+				--mod-button-background-color-down: var(--spectrum-gray-200);
 				--mod-button-background-color-focus: var(--spectrum-gray-200);
 			}
 
 			&.spectrum-Button--outline {
-				--mod-button-background-color-hover: var(--spectrum-gray-200);
-				--mod-button-background-color-down: var(--spectrum-gray-400);
-				--mod-button-background-color-focus: var(--spectrum-gray-200);
+				--mod-button-background-color-hover: var(--spectrum-gray-100);
+				--mod-button-background-color-down: var(--spectrum-gray-100);
+				--mod-button-background-color-focus: var(--spectrum-gray-100);
 
-				--mod-button-border-color-default: var(--spectrum-gray-200);
+				--mod-button-border-color-default: var(--spectrum-gray-300);
+				--mod-button-border-color-down: var(--spectrum-gray-400);
 			}
 		}
 

components/button/themes/spectrum.css

@@ -30,6 +30,7 @@
 
 			&.spectrum-Button--outline {
 				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
 				--mod-button-background-color-focus: var(--spectrum-gray-300);
 			}
 		}
@@ -39,14 +40,17 @@
 
 			&:not(.spectrum-Button--outline) {
 				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
 				--mod-button-background-color-focus: var(--spectrum-gray-300);
 			}
 
 			&.spectrum-Button--outline {
 				--mod-button-background-color-hover: var(--spectrum-gray-300);
+				--mod-button-background-color-down: var(--spectrum-gray-400);
 				--mod-button-background-color-focus: var(--spectrum-gray-300);
 
 				--mod-button-border-color-default: var(--spectrum-gray-300);
+				--mod-button-border-color-down: var(--spectrum-gray-500);
 			}
 		}