feat(ui5-search): update visual hover and active state of shell search scope (#13256)

Author: Vonahz

packages/fiori/src/themes/SearchField.css

@@ -85,10 +85,29 @@
 	background-color: var(--_ui5-search-elements-background);
 	height: var(--_ui5-search-select-height);
 	--_ui5_select_label_color: var(--sapShell_TextColor);
+	/* Remove Select's default focus outline without affecting dropdown items */
+	--_ui5_input_focus_outline_color: transparent;
 }
 
-[ui5-select]:hover {
-	box-shadow: var(--sapField_Hover_Shadow);
+[ui5-select]:hover:not(:active):not(:focus-within) {
+	box-shadow: var(--_ui5-search_input_scope_hover_shadow);
+}
+
+[ui5-select]:not(:active):not(:focus-within)::part(icon-wrapper):hover {
+	box-shadow: var(--_ui5-search_input_scope_hover_shadow);
+}
+
+/* Active state for select - only shadow, no background */
+[ui5-select]:active,
+[ui5-select]:focus-within {
+	box-shadow: var(--_ui5-search_input_scope_active_shadow);
+}
+
+[ui5-select]:active::part(icon-wrapper),
+[ui5-select]:focus-within::part(icon-wrapper) {
+	box-shadow: var(--_ui5-search_input_scope_active_shadow);
+	background: var(--sapShell_Active_Background);
+	color: var(--sapShell_Active_TextColor);
 }
 
 [ui5-select]::part(icon) {
@@ -158,12 +177,10 @@
 	padding-inline-start: 0.875rem;
 }
 
-[ui5-select]:hover,
 .ui5-search-field-inner-input:hover {
 	background-color: var(--_ui5-search-elements-hover-background);
 }
 
-[ui5-select]:focus-within,
 .ui5-search-field-inner-input:focus-within {
 	background-color: var(--_ui5-search-elements-active-background);
 }
@@ -273,28 +290,11 @@
 	--_ui5_input_focus_border_radius: var(--_ui5_search_input_border_radius);
 }
 
-.ui5-search-field-select:hover,
-.ui5-search-field-select[focused] {
-	background: var(--_ui5-search-wrapper-hover-background-color);
-}
-
 .ui5-search-field-select::part(icon-wrapper) {
 	border-radius: var(--_ui5_search_input_border_radius);
 	height: 100%;
 }
 
-.ui5-search-field-select[focused]::part(icon-wrapper) {
-	box-shadow: var(--sapField_Hover_Shadow);
-}
-
-:host(:not([collapsed]):hover):has([ui5-select]:hover) {
-	background: var(--_ui5-search-wrapper-background);
-}
-
-:host(:not([collapsed])):has([ui5-select][focused]) {
-	background: var(--_ui5-search-wrapper-background);
-}
-
 .ui5-search-field-inner-input::selection {
 	background: var(--sapSelectedColor);
 	color: var(--sapContent_ContrastTextColor);

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

@@ -10,6 +10,8 @@
 	--_ui5-search-elements-hover-background: none;
 	--_ui5-search-elements-active-background: none;
 	--_ui5_search_input_scope_margin: 0 0.125rem 0 .5rem;
+	--_ui5-search_input_scope_hover_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Hover_BorderColor);
+	--_ui5-search_input_scope_active_shadow: inset 0 0 0 var(--sapField_BorderWidth) var(--sapButton_Lite_Active_BorderColor);
 	--_ui5-search-elements-background: inherit;
 	--_ui5_search_wrapper_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_input_outline: none;

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

@@ -9,6 +9,8 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);

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

@@ -9,6 +9,8 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);

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

@@ -9,6 +9,8 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);

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

@@ -9,6 +9,8 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
 	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
 	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);

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

@@ -9,9 +9,11 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
-	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
-	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
+	--_ui5-search-elements-hover-background: none;
+	--_ui5-search-elements-active-background: none;
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_filter_button_border_radius: 0.375rem;

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

@@ -9,9 +9,11 @@
 	--_ui5-search-wrapper-hover-background: none;
 	--_ui5-search-wrapper-hover-background-color: none;
 	--_ui5_search_input_scope_margin: 0;
+	--_ui5-search_input_scope_hover_shadow: none;
+	--_ui5-search_input_scope_active_shadow: none;
 	--_ui5-search-elements-background: var(--sapShell_InteractiveBackground);
-	--_ui5-search-elements-hover-background: var(--sapShell_Hover_Background);
-	--_ui5-search-elements-active-background: var(--sapShell_Active_Background);
+	--_ui5-search-elements-hover-background: none;
+	--_ui5-search-elements-active-background: none;
 	--_ui5_search_wrapper_outline: none;
 	--_ui5_search_input_outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapField_Active_BorderColor);
 	--_ui5_search_filter_button_border_radius: 0.375rem;