[All Input fields with an icon | Web Components | build | icons | theming]:

[DesiMat]

Bug Description

Hi, in the core design team we found a bug related to a wrong theming parameter applied to the active state of the input button and because of it result in light blue.
The correct parameter as per specification for the active state of an input button is --sapField_Hover_Background, which should result in white, but currently sows a light blue background.
While inspecting this and measuring color contrasts, we also stumbled upon the problem that the non-active icon color is also not with the correct parameter resulting in less contrasted black color (#1d2d3e currently), while the correct parameter --sapField_TextColor (should result in the more contrasted black #131E29, which ensures 3:1 contrast ration between active blue and inactive black. As a result we have a insufficient contrast bug.

Affected Component

All Input components with active icons inherit this bug

Expected Behaviour

-Active input with button features --sapField_Hover_Background - white button background .
-Non active icon need to be --sapField_TextColor

Reference from the VD spec:
The Input Button inherit all styles from Button (Horizon) with the following deltas:

border-radius: --sapField_BorderCornerRadius;
Regular
icon: --sapField_TextColor;
border: none;

Hover Delta
background: --sapField_Hover_Background;
Non-semantic field button hover box-shadow: --sapField_Hover_Shadow;
Semantic field button hover box-shadows are the same as the input hover shadows.

The Down state of the input button preserves the hover visual.

Isolated Example

No response

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.7.0

Browser

Chrome

Operating System

MacOS

Additional Context

No response

Organization

No response

Declaration

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

[nnaydenow]

Hello @SAP/ui5-webcomponents-topic-rl,

Could you please check the issue? It seems that inner icon styles are wrong and should be align with the latest specification.

Once you fix it please validate with all components that are using icon:

• ui5-select
• ui5-combobox
• ui5-multi-combobox
• ui5-date-picker
• ui5-time-picker
• and etc...