Bug Description

The background-color for the following WebComponents is incorrect when using color-scheme="9" and design="Set2":

• ui5-tag
• ui5-badge

<ui5-tag design="Set2" color-scheme="9" interactive="true">
    Color Scheme 9
</ui5-tag>

The issue is due to missing CSS in Tag-parameters.css. According to the Tag Design Spec, the correct color would be #F2F2F2. As you can see in the Tag-parameters.css of the base theme, the following definitions are missing but similar definitions exist for all other color-schemes (except 9):

--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9b_Hover_Background);

--ui5-tag-set2-color-scheme-9-active-color: var(--sapIndicationColor_9_Active_TextColor);
--ui5-tag-set2-color-scheme-9-active-background: var(--sapIndicationColor_9_Active_Background);
--ui5-tag-set2-color-scheme-9-active-border: var(--sapIndicationColor_9_Active_BorderColor);

Affected Component

ui5-tag

Expected Behaviour

The missing CSS needs to be added for color-scheme="9" and design="Set2". This has to be done for the ui5-tag component in version 2.x as well as for the ui5-badge component in version 1.x

Isolated Example

WebComponent Playground

Steps to Reproduce

1. Open the sample
2. Hover over the tag "Color Scheme 9"

Priority

Medium

UI5 Web Components Version

1.x & 2.x & nightly

Browser

Chrome, Edge, Firefox, Safari

Operating System

Windows 11, MacOS, iOS, Android

Declaration

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