Adjust colors of buttons and inputs to match older gray values (#472)

Author: carterworks

src/view/global.styl

@@ -44,6 +44,21 @@ body,
   min-height: var(--spectrum-global-dimension-size-4600) !important
 }
 
-.react-spectrum-provider.bg-gray-50 {
+.react-spectrum-provider.legacy-gray {
   background-color: var(--spectrum-gray-50) !important;
+
+  [class*="spectrum-Textfield-input"],
+  [class*="spectrum-BaseButton"]:not([class*="--quiet"]),
+   {
+    background-color: var(--spectrum-gray-25) !important;
+    &[disabled], &[aria-disabled="true"] {
+      background-color: var(--spectrum-gray-100) !important;
+    }
+  }
+
+  [class*="spectrum-Checkbox"] [class*="spectrum-Checkbox-box"]::before,
+  [class*="spectrum-Radio-button"]::before,
+  {
+    background-color: var(--spectrum-gray-25) !important;
+  }
 }

src/view/render.jsx

@@ -32,7 +32,7 @@ export default (View, { noPadding = false } = {}) => {
     <Provider
       theme={lightTheme}
       colorScheme="light"
-      UNSAFE_className={`react-spectrum-provider spectrum spectrum--medium spectrum--light${paddingClass} bg-gray-50`}
+      UNSAFE_className={`react-spectrum-provider spectrum spectrum--medium spectrum--light${paddingClass} legacy-gray`}
     >
       <ErrorBoundary>
         <View />