fix(ui-react): Add base bg color for the SearchField component button (#2431)

* fix(ui-react): Add base bg color for the SearchField component button

Author: ioanabrooks

.changeset/fast-mirrors-talk.md

@@ -0,0 +1,5 @@
+---
+'@aws-amplify/ui': patch
+---
+
+This change adds a base background color for the SearchField component's button.

docs/src/pages/[platform]/components/searchfield/examples/SearchFieldThemeExample.tsx

@@ -7,6 +7,7 @@ const theme: Theme = {
       searchfield: {
         button: {
           color: { value: '{colors.blue.80}' },
+          backgroundColor: { value: '{colors.blue.20}' },
           _focus: {
             backgroundColor: {
               value: '{colors.blue.60}',

packages/ui/src/theme/__tests__/defaultTheme.test.ts

@@ -529,6 +529,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
         --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
         --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
+        --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary);
         --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
         --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
         --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);

packages/ui/src/theme/__tests__/overrides.test.ts

@@ -563,6 +563,7 @@ describe('@aws-amplify/ui', () => {
         --amplify-components-rating-empty-color: var(--amplify-colors-background-tertiary);
         --amplify-components-searchfield-color: var(--amplify-components-fieldcontrol-color);
         --amplify-components-searchfield-button-color: var(--amplify-components-button-color);
+        --amplify-components-searchfield-button-background-color: var(--amplify-colors-background-primary);
         --amplify-components-searchfield-button-active-background-color: var(--amplify-components-button-active-background-color);
         --amplify-components-searchfield-button-active-border-color: var(--amplify-components-button-active-border-color);
         --amplify-components-searchfield-button-active-color: var(--amplify-components-button-active-color);

packages/ui/src/theme/css/component/searchField.scss

@@ -4,6 +4,9 @@
   );
   &__search {
     color: var(--amplify-components-searchfield-button-color);
+    background-color: var(
+      --amplify-components-searchfield-button-background-color
+    );
     &:active {
       background-color: var(
         --amplify-components-button-active-background-color

packages/ui/src/theme/tokens/components/searchField.ts

@@ -1,8 +1,13 @@
-import { ColorValue, DesignToken } from '../types/designToken';
+import {
+  BackgroundColorValue,
+  ColorValue,
+  DesignToken,
+} from '../types/designToken';
 import { StateTokens } from './button';
 
 interface SearchTokens {
   color: DesignToken<ColorValue>;
+  backgroundColor: DesignToken<BackgroundColorValue>;
   _active: StateTokens;
   _disabled: StateTokens;
   _focus: StateTokens;
@@ -18,6 +23,7 @@ export const searchfield: SearchFieldTokens = {
   color: { value: '{components.fieldcontrol.color.value}' },
   button: {
     color: { value: '{components.button.color.value}' },
+    backgroundColor: { value: '{colors.background.primary.value}' },
     _active: {
       backgroundColor: {
         value: '{components.button._active.backgroundColor.value}',