fix(ui5-search-field): correct bg and text colors (#12732)

FIXES: #12578

Author: MapTo0

packages/fiori/src/themes/SearchField.css

@@ -12,16 +12,15 @@
 	max-width: 36rem;
 	margin: 0;
 	height: 2.25rem;
-	color: var(--sapShell_TextColor);
+	color: var(--_ui5-search-field-text-color);
 	font-size: var(--sapFontSize);
 	font-family: var(--sapFontFamily);
 	font-style: normal;
 	box-shadow: var(--sapField_Shadow);
 	border-radius: var(--_ui5_search_input_border_radius);
 	box-sizing: border-box;
 	text-align: start;
-	background: var(--sapField_BackgroundStyle);
-	background-color: var(--_ui5-search-wrapper-background);
+	background: var(--_ui5-search-wrapper-background);
 	position: relative;
 }
 

packages/fiori/src/themes/base/SearchField-parameters.css

@@ -28,4 +28,5 @@
 	--_ui5-search-select-height: 1.625rem;
 	--_ui5-search-loading-overlay-background: var(--sapBackgroundColor);
 	--_ui5-search-loading-overlay-transparency: 0.72;
+	--_ui5-search-field-text-color: var(--sapField_TextColor);
 }

packages/fiori/src/themes/sap_fiori_3/SearchField-parameters.css

@@ -4,7 +4,7 @@
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -25,4 +25,5 @@
 	--_ui5_search_input_end_padding: 0.25rem;
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

packages/fiori/src/themes/sap_fiori_3_dark/SearchField-parameters.css

@@ -4,7 +4,7 @@
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -24,4 +24,5 @@
 	--_ui5_search_input_end_padding: 0.25rem;
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

packages/fiori/src/themes/sap_fiori_3_hcb/SearchField-parameters.css

@@ -4,7 +4,7 @@
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -26,4 +26,5 @@
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
 	--_ui5-search-loading-overlay-transparency: 0.30;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }

packages/fiori/src/themes/sap_fiori_3_hcw/SearchField-parameters.css

@@ -4,7 +4,7 @@
 	--_ui5_search_icon_border_radius: 0.375rem;
 	--_ui5_search_input_border_radius: none;
 	--_ui5-search-border: var(--sapField_BorderWidth) var(--sapField_BorderStyle) var(--sapField_BorderColor);
-	--_ui5-search-wrapper-background: none;
+	--_ui5-search-wrapper-background: var(--sapShellColor);
 	--_ui5_search_separator_background: none;
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
@@ -25,4 +25,5 @@
 	--_ui5-search-input-start-padding: 0.625rem;
 	--_ui5-search-select-height: 2.25rem;
 	--_ui5-search-loading-overlay-transparency: 0.30;
+	--_ui5-search-field-text-color: var(--sapShell_InteractiveTextColor);
 }