fix(ui5-tag): correct hover background color for Set 2 Color Scheme 9 (…

…#10229) fixes: #10164
SAP · Nov 29, 2024 · 1b2eaed · 1b2eaed
1 parent 1558499
commit 1b2eaed
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 0 deletions.
diff --git a/packages/main/src/themes/Tag.css b/packages/main/src/themes/Tag.css
@@ -483,6 +483,16 @@
 	color: var(--ui5-tag-set2-color-scheme-9-color);
 }
 
+:host([interactive][design="Set2"][color-scheme="9"]) .ui5-tag-root:hover {
+	background-color: var(--ui5-tag-set2-color-scheme-9-hover-background);
+}
+
+:host([interactive][design="Set2"][color-scheme="9"]) .ui5-tag-root:active {
+	background-color: var(--ui5-tag-set2-color-scheme-9-active-background);
+	border-color: var(--ui5-tag-set2-color-scheme-9-active-border);
+	color: var(--ui5-tag-set2-color-scheme-9-active-color);
+}
+
 :host([interactive][design="Set2"][color-scheme="10"]) .ui5-tag-root:hover {
 	background-color: var(--ui5-tag-set2-color-scheme-10-hover-background);
 }

diff --git a/packages/main/src/themes/base/Tag-parameters.css b/packages/main/src/themes/base/Tag-parameters.css
@@ -100,6 +100,12 @@
 	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9b);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9b_BorderColor);
 
+	--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);
+
 	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10);
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10b);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10b_BorderColor);

diff --git a/packages/main/src/themes/sap_fiori_3_hcb/Tag-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/Tag-parameters.css
@@ -91,6 +91,8 @@
 	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor);
 
+	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_Hover_Background);
+
 	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor);
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);

diff --git a/packages/main/src/themes/sap_fiori_3_hcw/Tag-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/Tag-parameters.css
@@ -91,6 +91,8 @@
 	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor);
 
+	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_Hover_Background);
+
 	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor);
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);

diff --git a/packages/main/src/themes/sap_horizon_hcb/Tag-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Tag-parameters.css
@@ -99,6 +99,8 @@
 	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor);
 
+	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_Hover_Background);
+
 	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor);
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);

diff --git a/packages/main/src/themes/sap_horizon_hcw/Tag-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Tag-parameters.css
@@ -100,6 +100,8 @@
 	--ui5-tag-set2-color-scheme-9-background: var(--sapIndicationColor_9_Background);
 	--ui5-tag-set2-color-scheme-9-border: var(--sapIndicationColor_9_BorderColor);
 
+	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_Hover_Background);
+
 	--ui5-tag-set2-color-scheme-10-color: var(--sapIndicationColor_10_TextColor);
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);