fix(ui5-tag): add colors for Quartz high contrast themes for Set 2 (#…

…8952)
SAP · May 14, 2024 · 92b3cf8 · 92b3cf8
1 parent c8e68d5
commit 92b3cf8
Show file tree

Hide file tree

Showing 4 changed files with 222 additions and 18 deletions.
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
@@ -43,4 +43,106 @@
 
 	--ui5-tag-text-shadow: none;
 	--ui5-tag-contrast-text-shadow: none;
+
+	/* set 2 */
+
+	--ui5-tag-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor);
+	--ui5-tag-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background);
+	--ui5-tag-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor);
+
+	--ui5-tag-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor);
+	--ui5-tag-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background);
+	--ui5-tag-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor);
+	--ui5-tag-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background);
+	--ui5-tag-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor);
+
+	--ui5-tag-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor);
+	--ui5-tag-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background);
+	--ui5-tag-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor);
+	--ui5-tag-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background);
+	--ui5-tag-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor);
+
+	--ui5-tag-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor);
+	--ui5-tag-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background);
+	--ui5-tag-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor);
+	--ui5-tag-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background);
+	--ui5-tag-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor);
+
+	--ui5-tag-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor);
+	--ui5-tag-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background);
+	--ui5-tag-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor);
+	--ui5-tag-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background);
+	--ui5-tag-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor);
+
+	--ui5-tag-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor);
+	--ui5-tag-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background);
+	--ui5-tag-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor);
+	--ui5-tag-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background);
+	--ui5-tag-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor);
+
+	--ui5-tag-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor);
+	--ui5-tag-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background);
+	--ui5-tag-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor);
+	--ui5-tag-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background);
+	--ui5-tag-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor);
+
+	--ui5-tag-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor);
+	--ui5-tag-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background);
+	--ui5-tag-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor);
+	--ui5-tag-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background);
+	--ui5-tag-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor);
+
+	--ui5-tag-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor);
+	--ui5-tag-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background);
+	--ui5-tag-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor);
+	--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-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_TextColor);
+	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
+	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);
+
+	--ui5-tag-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor);
+	--ui5-tag-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background);
+	--ui5-tag-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_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
@@ -43,4 +43,106 @@
 
 	--ui5-tag-text-shadow: none;
 	--ui5-tag-contrast-text-shadow: none;
+
+	/* set 2 */
+
+	--ui5-tag-set2-color-scheme-1-color: var(--sapIndicationColor_1_TextColor);
+	--ui5-tag-set2-color-scheme-1-background: var(--sapIndicationColor_1_Background);
+	--ui5-tag-set2-color-scheme-1-border: var(--sapIndicationColor_1_BorderColor);
+
+	--ui5-tag-set2-color-scheme-1-hover-background: var(--sapIndicationColor_1_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-1-active-color: var(--sapIndicationColor_1_Active_TextColor);
+	--ui5-tag-set2-color-scheme-1-active-background: var(--sapIndicationColor_1_Active_Background);
+	--ui5-tag-set2-color-scheme-1-active-border: var(--sapIndicationColor_1_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-2-color: var(--sapIndicationColor_2_TextColor);
+	--ui5-tag-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background);
+	--ui5-tag-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor);
+
+	--ui5-tag-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor);
+	--ui5-tag-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background);
+	--ui5-tag-set2-color-scheme-2-active-border: var(--sapIndicationColor_2_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-3-color: var(--sapIndicationColor_3_TextColor);
+	--ui5-tag-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background);
+	--ui5-tag-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor);
+
+	--ui5-tag-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor);
+	--ui5-tag-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background);
+	--ui5-tag-set2-color-scheme-3-active-border: var(--sapIndicationColor_3_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-4-color: var(--sapIndicationColor_4_TextColor);
+	--ui5-tag-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background);
+	--ui5-tag-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor);
+
+	--ui5-tag-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor);
+	--ui5-tag-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background);
+	--ui5-tag-set2-color-scheme-4-active-border: var(--sapIndicationColor_4_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-5-color: var(--sapIndicationColor_5_TextColor);
+	--ui5-tag-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background);
+	--ui5-tag-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor);
+
+	--ui5-tag-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor);
+	--ui5-tag-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background);
+	--ui5-tag-set2-color-scheme-5-active-border: var(--sapIndicationColor_5_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-6-color: var(--sapIndicationColor_6_TextColor);
+	--ui5-tag-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background);
+	--ui5-tag-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor);
+
+	--ui5-tag-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor);
+	--ui5-tag-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background);
+	--ui5-tag-set2-color-scheme-6-active-border: var(--sapIndicationColor_6_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-7-color: var(--sapIndicationColor_7_TextColor);
+	--ui5-tag-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background);
+	--ui5-tag-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor);
+
+	--ui5-tag-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor);
+	--ui5-tag-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background);
+	--ui5-tag-set2-color-scheme-7-active-border: var(--sapIndicationColor_7_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-8-color: var(--sapIndicationColor_8_TextColor);
+	--ui5-tag-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background);
+	--ui5-tag-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor);
+
+	--ui5-tag-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor);
+	--ui5-tag-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background);
+	--ui5-tag-set2-color-scheme-8-active-border: var(--sapIndicationColor_8_Active_BorderColor);
+
+	--ui5-tag-set2-color-scheme-9-color: var(--sapIndicationColor_9_TextColor);
+	--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-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_TextColor);
+	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
+	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);
+
+	--ui5-tag-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10_Hover_Background);
+
+	--ui5-tag-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor);
+	--ui5-tag-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background);
+	--ui5-tag-set2-color-scheme-10-active-border: var(--sapIndicationColor_10_Active_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
@@ -63,7 +63,7 @@
 	--ui5-tag-set2-color-scheme-2-background: var(--sapIndicationColor_2_Background);
 	--ui5-tag-set2-color-scheme-2-border: var(--sapIndicationColor_2_BorderColor);
 
-	--ui5-tag-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2b_Hover_Background);
+	--ui5-tag-set2-color-scheme-2-hover-background: var(--sapIndicationColor_2_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-2-active-color: var(--sapIndicationColor_2_Active_TextColor);
 	--ui5-tag-set2-color-scheme-2-active-background: var(--sapIndicationColor_2_Active_Background);
@@ -73,7 +73,7 @@
 	--ui5-tag-set2-color-scheme-3-background: var(--sapIndicationColor_3_Background);
 	--ui5-tag-set2-color-scheme-3-border: var(--sapIndicationColor_3_BorderColor);
 
-	--ui5-tag-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3b_Hover_Background);
+	--ui5-tag-set2-color-scheme-3-hover-background: var(--sapIndicationColor_3_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-3-active-color: var(--sapIndicationColor_3_Active_TextColor);
 	--ui5-tag-set2-color-scheme-3-active-background: var(--sapIndicationColor_3_Active_Background);
@@ -83,7 +83,7 @@
 	--ui5-tag-set2-color-scheme-4-background: var(--sapIndicationColor_4_Background);
 	--ui5-tag-set2-color-scheme-4-border: var(--sapIndicationColor_4_BorderColor);
 
-	--ui5-tag-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4b_Hover_Background);
+	--ui5-tag-set2-color-scheme-4-hover-background: var(--sapIndicationColor_4_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-4-active-color: var(--sapIndicationColor_4_Active_TextColor);
 	--ui5-tag-set2-color-scheme-4-active-background: var(--sapIndicationColor_4_Active_Background);
@@ -93,7 +93,7 @@
 	--ui5-tag-set2-color-scheme-5-background: var(--sapIndicationColor_5_Background);
 	--ui5-tag-set2-color-scheme-5-border: var(--sapIndicationColor_5_BorderColor);
 
-	--ui5-tag-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5b_Hover_Background);
+	--ui5-tag-set2-color-scheme-5-hover-background: var(--sapIndicationColor_5_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-5-active-color: var(--sapIndicationColor_5_Active_TextColor);
 	--ui5-tag-set2-color-scheme-5-active-background: var(--sapIndicationColor_5_Active_Background);
@@ -103,7 +103,7 @@
 	--ui5-tag-set2-color-scheme-6-background: var(--sapIndicationColor_6_Background);
 	--ui5-tag-set2-color-scheme-6-border: var(--sapIndicationColor_6_BorderColor);
 
-	--ui5-tag-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6b_Hover_Background);
+	--ui5-tag-set2-color-scheme-6-hover-background: var(--sapIndicationColor_6_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-6-active-color: var(--sapIndicationColor_6_Active_TextColor);
 	--ui5-tag-set2-color-scheme-6-active-background: var(--sapIndicationColor_6_Active_Background);
@@ -113,7 +113,7 @@
 	--ui5-tag-set2-color-scheme-7-background: var(--sapIndicationColor_7_Background);
 	--ui5-tag-set2-color-scheme-7-border: var(--sapIndicationColor_7_BorderColor);
 
-	--ui5-tag-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7b_Hover_Background);
+	--ui5-tag-set2-color-scheme-7-hover-background: var(--sapIndicationColor_7_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-7-active-color: var(--sapIndicationColor_7_Active_TextColor);
 	--ui5-tag-set2-color-scheme-7-active-background: var(--sapIndicationColor_7_Active_Background);
@@ -123,7 +123,7 @@
 	--ui5-tag-set2-color-scheme-8-background: var(--sapIndicationColor_8_Background);
 	--ui5-tag-set2-color-scheme-8-border: var(--sapIndicationColor_8_BorderColor);
 
-	--ui5-tag-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8b_Hover_Background);
+	--ui5-tag-set2-color-scheme-8-hover-background: var(--sapIndicationColor_8_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-8-active-color: var(--sapIndicationColor_8_Active_TextColor);
 	--ui5-tag-set2-color-scheme-8-active-background: var(--sapIndicationColor_8_Active_Background);
@@ -133,7 +133,7 @@
 	--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_9b_Hover_Background);
+	--ui5-tag-set2-color-scheme-9-hover-background: var(--sapIndicationColor_9_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);
@@ -143,7 +143,7 @@
 	--ui5-tag-set2-color-scheme-10-background: var(--sapIndicationColor_10_Background);
 	--ui5-tag-set2-color-scheme-10-border: var(--sapIndicationColor_10_BorderColor);
 
-	--ui5-tag-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10b_Hover_Background);
+	--ui5-tag-set2-color-scheme-10-hover-background: var(--sapIndicationColor_10_Hover_Background);
 
 	--ui5-tag-set2-color-scheme-10-active-color: var(--sapIndicationColor_10_Active_TextColor);
 	--ui5-tag-set2-color-scheme-10-active-background: var(--sapIndicationColor_10_Active_Background);