fix(ui5-badge): update colors to match the spec(#2216)

Aligned colors to Quartz Light and Dark and High Contrast themes.

Fixes: #2210

packages/main/src/themes/Badge.css

@@ -41,62 +41,62 @@
 
 /* Scheme 1 */
 :host([color-scheme="1"]) {
-	background-color: var(--sapLegendBackgroundColor1);
-	border-color: var(--sapLegendColor1);
+	background-color: var(--ui5-badge-color-scheme-1-background);
+	border-color: var(--ui5-badge-color-scheme-1-border);
 }
 
 /* Scheme 2 */
 :host([color-scheme="2"]) {
-	background-color: var(--sapLegendBackgroundColor2);
-	border-color: var(--sapLegendColor2);
+	background-color: var(--ui5-badge-color-scheme-2-background);
+	border-color: var(--ui5-badge-color-scheme-2-border);
 }
 
 /* Scheme 3 */
 :host([color-scheme="3"]) {
-	background-color: var(--sapLegendBackgroundColor3);
-	border-color: var(--sapLegendColor3);
+	background-color: var(--ui5-badge-color-scheme-3-background);
+	border-color: var(--ui5-badge-color-scheme-3-border);
 }
 
 /* Scheme 4 */
 :host([color-scheme="4"]) {
-	background-color: var(--sapLegendBackgroundColor4);
-	border-color: var(--sapLegendColor4);
+	background-color: var(--ui5-badge-color-scheme-4-background);
+	border-color: var(--ui5-badge-color-scheme-4-border);
 }
 
 /* Scheme 5 */
 :host([color-scheme="5"]) {
-	background-color: var(--sapLegendBackgroundColor5);
-	border-color: var(--sapLegendColor5);
+	background-color: var(--ui5-badge-color-scheme-5-background);
+	border-color: var(--ui5-badge-color-scheme-5-border);
 }
 
 /* Scheme 6 */
 :host([color-scheme="6"]) {
-	background-color: var(--sapLegendBackgroundColor6);
-	border-color: var(--sapLegendColor6);
+	background-color: var(--ui5-badge-color-scheme-6-background);
+	border-color: var(--ui5-badge-color-scheme-6-border);
 }
 
 /* Scheme 7 */
 :host([color-scheme="7"]) {
-	background-color: var(--sapLegendBackgroundColor7);
-	border-color: var(--sapLegendColor7);
+	background-color: var(--ui5-badge-color-scheme-7-background);
+	border-color: var(--ui5-badge-color-scheme-7-border);
 }
 
 /* Scheme 8 */
 :host([color-scheme="8"]) {
-	background-color: var(--sapLegendBackgroundColor8);
-	border-color: var(--sapLegendColor8);
+	background-color: var(--ui5-badge-color-scheme-8-background);
+	border-color: var(--ui5-badge-color-scheme-8-border);
 }
 
 /* Scheme 9 */
 :host([color-scheme="9"]) {
-	background-color: var(--sapLegendBackgroundColor9);
-	border-color: var(--sapLegendColor9);
+	background-color: var(--ui5-badge-color-scheme-9-background);
+	border-color: var(--ui5-badge-color-scheme-9-border);
 }
 
 /* Scheme 10 */
 :host([color-scheme="10"]) {
-	background-color: var(--sapLegendBackgroundColor10);
-	border-color: var(--sapLegendColor10);
+	background-color: var(--ui5-badge-color-scheme-10-background);
+	border-color: var(--ui5-badge-color-scheme-10-border);
 }
 
 .ui5-badge-root {

packages/main/src/themes/base/Badge-parameters.css

@@ -1,3 +1,23 @@
 :root {
 	--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
+	--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
+	--ui5-badge-color-scheme-1-border: var(--sapLegendColor1);
+	--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
+	--ui5-badge-color-scheme-2-border: var(--sapLegendColor2);
+	--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
+	--ui5-badge-color-scheme-3-border: var(--sapLegendColor3);
+	--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
+	--ui5-badge-color-scheme-4-border: var(--sapLegendColor5);
+	--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
+	--ui5-badge-color-scheme-5-border: var(--sapLegendColor20);
+	--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
+	--ui5-badge-color-scheme-6-border: var(--sapLegendColor6);
+	--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
+	--ui5-badge-color-scheme-7-border: var(--sapLegendColor7);
+	--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8);
+	--ui5-badge-color-scheme-8-border: var(--sapLegendColor8);
+	--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
+	--ui5-badge-color-scheme-9-border: var(--sapLegendColor10);
+	--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
+	--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
 }

packages/main/src/themes/sap_belize_hcb/Badge-parameters.css

@@ -0,0 +1,24 @@
+@import "../base/Badge-parameters.css";
+
+:root {
+	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+}

packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
-@import "../base/Badge-parameters.css";
+@import "./Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";

packages/main/src/themes/sap_belize_hcw/Badge-parameters.css

@@ -0,0 +1,24 @@
+@import "../base/Badge-parameters.css";
+
+:root {
+	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+}

packages/main/src/themes/sap_belize_hcw/parameters-bundle.css

@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
-@import "../base/Badge-parameters.css";
+@import "./Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";

packages/main/src/themes/sap_fiori_3_hcb/Badge-parameters.css

@@ -0,0 +1,24 @@
+@import "../base/Badge-parameters.css";
+
+:root {
+	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+}

packages/main/src/themes/sap_fiori_3_hcb/parameters-bundle.css

@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
-@import "../base/Badge-parameters.css";
+@import "./Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";

packages/main/src/themes/sap_fiori_3_hcw/Badge-parameters.css

@@ -0,0 +1,24 @@
+@import "../base/Badge-parameters.css";
+
+:root {
+	--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
+	--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
+	--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
+}

packages/main/src/themes/sap_fiori_3_hcw/parameters-bundle.css

@@ -1,6 +1,6 @@
 @import "../base/sizes-parameters.css";
 @import "./Avatar-parameters.css";
-@import "../base/Badge-parameters.css";
+@import "./Badge-parameters.css";
 @import "./Button-parameters.css";
 @import "./CalendarHeader-parameters.css";
 @import "./Carousel-parameters.css";

packages/theme-base/css-vars-usage.json

@@ -133,23 +133,23 @@
   "--sapLegendBackgroundColor1",
   "--sapLegendBackgroundColor2",
   "--sapLegendBackgroundColor3",
-  "--sapLegendBackgroundColor4",
   "--sapLegendBackgroundColor5",
   "--sapLegendBackgroundColor6",
   "--sapLegendBackgroundColor7",
   "--sapLegendBackgroundColor8",
   "--sapLegendBackgroundColor9",
   "--sapLegendBackgroundColor10",
+  "--sapLegendBackgroundColor20",
   "--sapLegendColor1",
   "--sapLegendColor2",
   "--sapLegendColor3",
-  "--sapLegendColor4",
   "--sapLegendColor5",
   "--sapLegendColor6",
   "--sapLegendColor7",
   "--sapLegendColor8",
   "--sapLegendColor9",
   "--sapLegendColor10",
+  "--sapLegendColor20",
   "--sapLink_SubtleColor",
   "--sapLinkColor",
   "--sapList_Active_Background",