ShellBarSearch theming issue

[mydavidzhang]

Bug Description

ShellBarSearch is used in ShellBar. When do customize theming for ShellBar background color and text color, the ShellBarSearch background color is not changed so that it is possible text and ShellBarSearch input color is same and user won't see the text.

Here is hack that could fix this issue. After rendered insert blow style to ShellBarSearch shadowRoot

<style type="text/css">
:host {
            --sapField_Hover_Background: var(--sapShell_InteractiveBackground);
            --_ui5-v2-13-2-search-wrapper-hover-background-color: var(--sapField_Hover_Background);
          }
</style>

Affected Component

ShellBarSearch

Expected Behaviour

ShellBarSearch background color should support customized theme

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.13.2

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

SAP SF

Declaration

• I’m not disclosing any internal or sensitive information.

[nnaydenow]

Hi @mydavidzhang,

Could you share some details how do you customize the shellbar's search? For example the customized variables so we can observe the problem.

[mydavidzhang]

Hi @nnaydenow
In this use case ShellBar background --sapShellColor has been customized to transparent so shellbar will use page background image which look dark blue in this case.

While Search area background is still white. Because the color --_ui5-v2-13-2-search-wrapper-hover-background-color comes from --sapField_Hover_Background which is white defined in library

For this use case --sapShell_InteractiveBackground is also customized to transparent which is same with --sapShellColor and that is why the workaround works.

For component css level fix should consider that ShellBarSearch is always be used in ShellBar. Should take care when --sapShellColor customization case.
Thanks

[nnaydenow]

Hi @mydavidzhang,

I’ve rechecked the implementation, and it appears that the search component is not aligned with the specification. I’m forwarding this incident to the responsible team. Once they make the necessary adjustments, you’ll be able to remove the workaround you’re currently trying to apply.

---

Hello @UI5/ui5-team-ctr-ril,

Could you please review the implementation of the CSS variables used in the Shellbar search component?
According to the specification, the component should use:

background-color: var(--sapShell_InteractiveBackground);
color: var(--sapShell_InteractiveTextColor);

However, it currently uses:

background: var(--sapField_BackgroundStyle);
color: var(--sapShell_TextColor);

This discrepancy causes issues when applying custom themes (the Shellbar is intended to be customised via custom theme).

Regards,
Nayden