Skip to content

Commit 2ddc4e9

Browse files
nnaydenownnaydenow
authored
fix(ui5-badge): update colors to match the spec(#2216)
Aligned colors to Quartz Light and Dark and High Contrast themes. Fixes: #2210
1 parent 610d105 commit 2ddc4e9

File tree

11 files changed

+142
-26
lines changed

11 files changed

+142
-26
lines changed

‎packages/main/src/themes/Badge.css

+20-20
Original file line numberDiff line numberDiff line change
@@ -41,62 +41,62 @@
4141

4242
/* Scheme 1 */
4343
:host([color-scheme="1"]) {
44-
background-color: var(--sapLegendBackgroundColor1);
45-
border-color: var(--sapLegendColor1);
44+
background-color: var(--ui5-badge-color-scheme-1-background);
45+
border-color: var(--ui5-badge-color-scheme-1-border);
4646
}
4747

4848
/* Scheme 2 */
4949
:host([color-scheme="2"]) {
50-
background-color: var(--sapLegendBackgroundColor2);
51-
border-color: var(--sapLegendColor2);
50+
background-color: var(--ui5-badge-color-scheme-2-background);
51+
border-color: var(--ui5-badge-color-scheme-2-border);
5252
}
5353

5454
/* Scheme 3 */
5555
:host([color-scheme="3"]) {
56-
background-color: var(--sapLegendBackgroundColor3);
57-
border-color: var(--sapLegendColor3);
56+
background-color: var(--ui5-badge-color-scheme-3-background);
57+
border-color: var(--ui5-badge-color-scheme-3-border);
5858
}
5959

6060
/* Scheme 4 */
6161
:host([color-scheme="4"]) {
62-
background-color: var(--sapLegendBackgroundColor4);
63-
border-color: var(--sapLegendColor4);
62+
background-color: var(--ui5-badge-color-scheme-4-background);
63+
border-color: var(--ui5-badge-color-scheme-4-border);
6464
}
6565

6666
/* Scheme 5 */
6767
:host([color-scheme="5"]) {
68-
background-color: var(--sapLegendBackgroundColor5);
69-
border-color: var(--sapLegendColor5);
68+
background-color: var(--ui5-badge-color-scheme-5-background);
69+
border-color: var(--ui5-badge-color-scheme-5-border);
7070
}
7171

7272
/* Scheme 6 */
7373
:host([color-scheme="6"]) {
74-
background-color: var(--sapLegendBackgroundColor6);
75-
border-color: var(--sapLegendColor6);
74+
background-color: var(--ui5-badge-color-scheme-6-background);
75+
border-color: var(--ui5-badge-color-scheme-6-border);
7676
}
7777

7878
/* Scheme 7 */
7979
:host([color-scheme="7"]) {
80-
background-color: var(--sapLegendBackgroundColor7);
81-
border-color: var(--sapLegendColor7);
80+
background-color: var(--ui5-badge-color-scheme-7-background);
81+
border-color: var(--ui5-badge-color-scheme-7-border);
8282
}
8383

8484
/* Scheme 8 */
8585
:host([color-scheme="8"]) {
86-
background-color: var(--sapLegendBackgroundColor8);
87-
border-color: var(--sapLegendColor8);
86+
background-color: var(--ui5-badge-color-scheme-8-background);
87+
border-color: var(--ui5-badge-color-scheme-8-border);
8888
}
8989

9090
/* Scheme 9 */
9191
:host([color-scheme="9"]) {
92-
background-color: var(--sapLegendBackgroundColor9);
93-
border-color: var(--sapLegendColor9);
92+
background-color: var(--ui5-badge-color-scheme-9-background);
93+
border-color: var(--ui5-badge-color-scheme-9-border);
9494
}
9595

9696
/* Scheme 10 */
9797
:host([color-scheme="10"]) {
98-
background-color: var(--sapLegendBackgroundColor10);
99-
border-color: var(--sapLegendColor10);
98+
background-color: var(--ui5-badge-color-scheme-10-background);
99+
border-color: var(--ui5-badge-color-scheme-10-border);
100100
}
101101

102102
.ui5-badge-root {

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

+20
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,23 @@
11
:root {
22
--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
3+
--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
4+
--ui5-badge-color-scheme-1-border: var(--sapLegendColor1);
5+
--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
6+
--ui5-badge-color-scheme-2-border: var(--sapLegendColor2);
7+
--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
8+
--ui5-badge-color-scheme-3-border: var(--sapLegendColor3);
9+
--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
10+
--ui5-badge-color-scheme-4-border: var(--sapLegendColor5);
11+
--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
12+
--ui5-badge-color-scheme-5-border: var(--sapLegendColor20);
13+
--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
14+
--ui5-badge-color-scheme-6-border: var(--sapLegendColor6);
15+
--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
16+
--ui5-badge-color-scheme-7-border: var(--sapLegendColor7);
17+
--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor8);
18+
--ui5-badge-color-scheme-8-border: var(--sapLegendColor8);
19+
--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
20+
--ui5-badge-color-scheme-9-border: var(--sapLegendColor10);
21+
--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
22+
--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
323
}

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "../base/Badge-parameters.css";
2+
3+
:root {
4+
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
14+
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
15+
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
16+
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
17+
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
19+
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
20+
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
21+
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
23+
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
24+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../base/sizes-parameters.css";
22
@import "./Avatar-parameters.css";
3-
@import "../base/Badge-parameters.css";
3+
@import "./Badge-parameters.css";
44
@import "./Button-parameters.css";
55
@import "./CalendarHeader-parameters.css";
66
@import "./Carousel-parameters.css";

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "../base/Badge-parameters.css";
2+
3+
:root {
4+
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
14+
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
15+
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
16+
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
17+
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
19+
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
20+
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
21+
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
23+
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
24+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../base/sizes-parameters.css";
22
@import "./Avatar-parameters.css";
3-
@import "../base/Badge-parameters.css";
3+
@import "./Badge-parameters.css";
44
@import "./Button-parameters.css";
55
@import "./CalendarHeader-parameters.css";
66
@import "./Carousel-parameters.css";

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "../base/Badge-parameters.css";
2+
3+
:root {
4+
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
14+
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
15+
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
16+
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
17+
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
19+
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
20+
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
21+
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
23+
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
24+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../base/sizes-parameters.css";
22
@import "./Avatar-parameters.css";
3-
@import "../base/Badge-parameters.css";
3+
@import "./Badge-parameters.css";
44
@import "./Button-parameters.css";
55
@import "./CalendarHeader-parameters.css";
66
@import "./Carousel-parameters.css";

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

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@import "../base/Badge-parameters.css";
2+
3+
:root {
4+
--ui5-badge-color-scheme-1-background: var(--sapGroup_ContentBackground);
5+
--ui5-badge-color-scheme-2-background: var(--sapGroup_ContentBackground);
6+
--ui5-badge-color-scheme-3-background: var(--sapGroup_ContentBackground);
7+
--ui5-badge-color-scheme-4-background: var(--sapGroup_ContentBackground);
8+
--ui5-badge-color-scheme-5-background: var(--sapGroup_ContentBackground);
9+
--ui5-badge-color-scheme-6-background: var(--sapGroup_ContentBackground);
10+
--ui5-badge-color-scheme-7-background: var(--sapGroup_ContentBackground);
11+
--ui5-badge-color-scheme-8-background: var(--sapGroup_ContentBackground);
12+
--ui5-badge-color-scheme-9-background: var(--sapGroup_ContentBackground);
13+
--ui5-badge-color-scheme-10-background: var(--sapGroup_ContentBackground);
14+
--ui5-badge-color-scheme-1-border: var(--sapGroup_ContentBorderColor);
15+
--ui5-badge-color-scheme-2-border: var(--sapGroup_ContentBorderColor);
16+
--ui5-badge-color-scheme-3-border: var(--sapGroup_ContentBorderColor);
17+
--ui5-badge-color-scheme-4-border: var(--sapGroup_ContentBorderColor);
18+
--ui5-badge-color-scheme-5-border: var(--sapGroup_ContentBorderColor);
19+
--ui5-badge-color-scheme-6-border: var(--sapGroup_ContentBorderColor);
20+
--ui5-badge-color-scheme-7-border: var(--sapGroup_ContentBorderColor);
21+
--ui5-badge-color-scheme-8-border: var(--sapGroup_ContentBorderColor);
22+
--ui5-badge-color-scheme-9-border: var(--sapGroup_ContentBorderColor);
23+
--ui5-badge-color-scheme-10-border: var(--sapGroup_ContentBorderColor);
24+
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@import "../base/sizes-parameters.css";
22
@import "./Avatar-parameters.css";
3-
@import "../base/Badge-parameters.css";
3+
@import "./Badge-parameters.css";
44
@import "./Button-parameters.css";
55
@import "./CalendarHeader-parameters.css";
66
@import "./Carousel-parameters.css";

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -133,23 +133,23 @@
133133
"--sapLegendBackgroundColor1",
134134
"--sapLegendBackgroundColor2",
135135
"--sapLegendBackgroundColor3",
136-
"--sapLegendBackgroundColor4",
137136
"--sapLegendBackgroundColor5",
138137
"--sapLegendBackgroundColor6",
139138
"--sapLegendBackgroundColor7",
140139
"--sapLegendBackgroundColor8",
141140
"--sapLegendBackgroundColor9",
142141
"--sapLegendBackgroundColor10",
142+
"--sapLegendBackgroundColor20",
143143
"--sapLegendColor1",
144144
"--sapLegendColor2",
145145
"--sapLegendColor3",
146-
"--sapLegendColor4",
147146
"--sapLegendColor5",
148147
"--sapLegendColor6",
149148
"--sapLegendColor7",
150149
"--sapLegendColor8",
151150
"--sapLegendColor9",
152151
"--sapLegendColor10",
152+
"--sapLegendColor20",
153153
"--sapLink_SubtleColor",
154154
"--sapLinkColor",
155155
"--sapList_Active_Background",

0 commit comments

Comments
 (0)