Skip to content

Commit 7deccd1

Browse files
fifoosidfifoosid
authored
feat(ui5-badge): implement sap_horizon theme (#4019)
The new sap_horizon theme implemented. 2 points not implemented - focus state: The focus outline can NOT be implemented within the CSS layer itself & therefore it is not implemented, we would have to add a property API (f.e. "interactive") and add tabindex to ensure tab stop, etc. - disabled state: Because we will have to add a new property "disabled" Part of: #4043
1 parent 6cb3eb0 commit 7deccd1

File tree

8 files changed

+253
-9
lines changed

8 files changed

+253
-9
lines changed

‎packages/main/src/Badge.hbs

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
1-
<div class="ui5-badge-root" dir="{{effectiveDir}}">
1+
<div
2+
class="ui5-badge-root"
3+
dir="{{effectiveDir}}"
4+
@mousedown="{{_onmousedown}}"
5+
@mouseup="{{_onmouseup}}"
6+
>
27
<slot name="icon"></slot>
38

49
{{#if hasText}}

‎packages/main/src/Badge.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,13 @@ const metadata = {
4848
_iconOnly: {
4949
type: Boolean,
5050
},
51+
52+
/**
53+
* Defines whether the component is pressed.
54+
*/
55+
active: {
56+
type: Boolean,
57+
},
5158
},
5259
managedSlots: true,
5360
slots: /** @lends sap.ui.webcomponents.main.Badge.prototype */ {
@@ -134,6 +141,14 @@ class Badge extends UI5Element {
134141
this._iconOnly = this.iconOnly;
135142
}
136143

144+
_onmousedown() {
145+
this.active = true;
146+
}
147+
148+
_onmouseup() {
149+
this.active = false;
150+
}
151+
137152
get hasText() {
138153
return !!this.textContent.trim().length;
139154
}

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

Lines changed: 106 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,25 @@
22

33
:host(:not([hidden])) {
44
display: inline-block;
5-
height: 1em;
5+
height: var(--_ui5-badge-height);
66
min-width: 1.125em;
77
max-width: 100%;
88
padding: 0 0.3125em;
99
color: var(--sapAccentColor1);
1010
background: var(--sapLegendBackgroundColor1);
11-
border: solid 0.0625em var(--sapAccentColor1);
12-
border-radius: 0.5em;
11+
border: var(--_ui5-badge-border);
12+
border-inline-start: var(--_ui5-badge-left-border);
13+
border-radius: var(--_ui5-badge-border-radius);
1314
box-sizing: border-box;
1415
font-family: "72override", var(--sapFontFamily);
1516
text-align: center;
1617
letter-spacing: 0.0125em;
18+
transition: all .2s ease-in-out;
19+
}
20+
21+
:host([color-scheme]:hover),
22+
:host(:not([color-scheme]):hover) {
23+
cursor: var(--_ui5-badge-cursor);
1724
}
1825

1926
.ui5-badge-root {
@@ -28,13 +35,17 @@
2835
width: 100%;
2936
overflow: hidden;
3037
white-space: nowrap;
31-
font-weight: bold;
38+
font-weight: var(--_ui5-badge-font-weight);
3239
text-overflow: ellipsis;
33-
text-transform: uppercase;
40+
text-transform: var(--_ui5-badge-text-transform);
3441
letter-spacing: inherit;
3542
font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
3643
}
3744

45+
:host(:hover) .ui5-badge-text {
46+
cursor: var(--_ui5-badge-cursor);
47+
}
48+
3849
:host([_icon-only]) {
3950
padding: 0 0.1875em;
4051
}
@@ -69,65 +80,155 @@
6980
color: var(--ui5-badge-color-scheme-1-color);
7081
}
7182

83+
:host([color-scheme="1"]:hover) {
84+
background-color: var(--ui5-badge-color-scheme-1-hover-background);
85+
box-shadow: var(--ui5-badge-color-scheme-1-shadow);
86+
}
87+
88+
:host([active][color-scheme="1"]:hover) {
89+
box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
90+
}
91+
7292
/* Scheme 2 */
7393
:host([color-scheme="2"]) {
7494
background-color: var(--ui5-badge-color-scheme-2-background);
7595
border-color: var(--ui5-badge-color-scheme-2-border);
7696
color: var(--ui5-badge-color-scheme-2-color);
7797
}
7898

99+
:host([color-scheme="2"]:hover) {
100+
background-color: var(--ui5-badge-color-scheme-2-hover-background);
101+
box-shadow: var(--ui5-badge-color-scheme-2-shadow);
102+
}
103+
104+
:host([active][color-scheme="2"]:hover) {
105+
box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
106+
}
107+
79108
/* Scheme 3 */
80109
:host([color-scheme="3"]) {
81110
background-color: var(--ui5-badge-color-scheme-3-background);
82111
border-color: var(--ui5-badge-color-scheme-3-border);
83112
color: var(--ui5-badge-color-scheme-3-color);
84113
}
85114

115+
:host([color-scheme="3"]:hover) {
116+
background-color: var(--ui5-badge-color-scheme-3-hover-background);
117+
box-shadow: var(--ui5-badge-color-scheme-3-shadow);
118+
}
119+
120+
:host([active][color-scheme="3"]:hover) {
121+
box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
122+
}
123+
86124
/* Scheme 4 */
87125
:host([color-scheme="4"]) {
88126
background-color: var(--ui5-badge-color-scheme-4-background);
89127
border-color: var(--ui5-badge-color-scheme-4-border);
90128
color: var(--ui5-badge-color-scheme-4-color);
91129
}
92130

131+
:host([color-scheme="4"]:hover) {
132+
background-color: var(--ui5-badge-color-scheme-4-hover-background);
133+
box-shadow: var(--ui5-badge-color-scheme-4-shadow);
134+
}
135+
136+
:host([active][color-scheme="4"]:hover) {
137+
box-shadow: var(--ui5-badge-color-scheme-4-active-shadow);
138+
}
139+
93140
/* Scheme 5 */
94141
:host([color-scheme="5"]) {
95142
background-color: var(--ui5-badge-color-scheme-5-background);
96143
border-color: var(--ui5-badge-color-scheme-5-border);
97144
color: var(--ui5-badge-color-scheme-5-color);
98145
}
99146

147+
:host([color-scheme="5"]:hover) {
148+
background-color: var(--ui5-badge-color-scheme-5-hover-background);
149+
box-shadow: var(--ui5-badge-color-scheme-5-shadow);
150+
}
151+
152+
:host([active][color-scheme="5"]:hover) {
153+
box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
154+
}
155+
100156
/* Scheme 6 */
101157
:host([color-scheme="6"]) {
102158
background-color: var(--ui5-badge-color-scheme-6-background);
103159
border-color: var(--ui5-badge-color-scheme-6-border);
104160
color: var(--ui5-badge-color-scheme-6-color);
105161
}
106162

163+
:host([color-scheme="6"]:hover) {
164+
background-color: var(--ui5-badge-color-scheme-6-hover-background);
165+
box-shadow: var(--ui5-badge-color-scheme-6-shadow);
166+
}
167+
168+
:host([active][color-scheme="6"]:hover) {
169+
box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
170+
}
171+
107172
/* Scheme 7 */
108173
:host([color-scheme="7"]) {
109174
background-color: var(--ui5-badge-color-scheme-7-background);
110175
border-color: var(--ui5-badge-color-scheme-7-border);
111176
color: var(--ui5-badge-color-scheme-7-color);
112177
}
113178

179+
:host([color-scheme="7"]:hover) {
180+
background-color: var(--ui5-badge-color-scheme-7-hover-background);
181+
box-shadow: var(--ui5-badge-color-scheme-7-shadow);
182+
}
183+
184+
:host([active][color-scheme="7"]:hover) {
185+
box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
186+
}
187+
114188
/* Scheme 8 */
115189
:host([color-scheme="8"]) {
116190
background-color: var(--ui5-badge-color-scheme-8-background);
117191
border-color: var(--ui5-badge-color-scheme-8-border);
118192
color: var(--ui5-badge-color-scheme-8-color);
119193
}
120194

195+
:host([color-scheme="8"]:hover) {
196+
background-color: var(--ui5-badge-color-scheme-8-hover-background);
197+
box-shadow: var(--ui5-badge-color-scheme-8-shadow);
198+
}
199+
200+
:host([active][color-scheme="8"]:hover) {
201+
box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
202+
}
203+
121204
/* Scheme 9 */
122205
:host([color-scheme="9"]) {
123206
background-color: var(--ui5-badge-color-scheme-9-background);
124207
border-color: var(--ui5-badge-color-scheme-9-border);
125208
color: var(--ui5-badge-color-scheme-9-color);
126209
}
127210

211+
:host([color-scheme="9"]:hover) {
212+
background-color: var(--ui5-badge-color-scheme-9-hover-background);
213+
box-shadow: var(--ui5-badge-color-scheme-9-shadow);
214+
}
215+
216+
:host([active][color-scheme="9"]:hover) {
217+
box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
218+
}
219+
128220
/* Scheme 10 */
129221
:host([color-scheme="10"]) {
130222
background-color: var(--ui5-badge-color-scheme-10-background);
131223
border-color: var(--ui5-badge-color-scheme-10-border);
132224
color: var(--ui5-badge-color-scheme-10-color);
225+
}
226+
227+
:host([color-scheme="10"]:hover) {
228+
background-color: var(--ui5-badge-color-scheme-10-hover-background);
229+
box-shadow: var(--ui5-badge-color-scheme-10-shadow);
230+
}
231+
232+
:host([active][color-scheme="10"]:hover) {
233+
box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
133234
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,60 @@
11
:root {
22
--ui5-badge-font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
3+
--_ui5-badge-height: 1rem;
4+
--_ui5-badge-border: 0.0625em solid;
5+
--_ui5-badge-left-border: 1px solid;
6+
--_ui5-badge-border-radius: 0.5em;
7+
--_ui5-badge-font-weight: bold;
8+
--_ui5-badge-text-transform: uppercase;
9+
--_ui5-badge-cursor: default;
310

411
--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
12+
--ui5-badge-color-scheme-1-hover-background: var(--ui5-badge-color-scheme-1-background);
513
--ui5-badge-color-scheme-1-border: var(--sapAccentColor1);
614
--ui5-badge-color-scheme-1-color: var(--sapAccentColor1);
715

816
--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
17+
--ui5-badge-color-scheme-2-hover-background: var(--ui5-badge-color-scheme-2-background);
918
--ui5-badge-color-scheme-2-border: var(--sapAccentColor2);
1019
--ui5-badge-color-scheme-2-color: var(--sapAccentColor2);
1120

1221
--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
22+
--ui5-badge-color-scheme-3-hover-background: var(--ui5-badge-color-scheme-3-background);
1323
--ui5-badge-color-scheme-3-border: var(--sapAccentColor3);
1424
--ui5-badge-color-scheme-3-color: var(--sapAccentColor3);
1525

1626
--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
27+
--ui5-badge-color-scheme-4-hover-background: var(--ui5-badge-color-scheme-4-background);
1728
--ui5-badge-color-scheme-4-border: var(--sapAccentColor4);
1829
--ui5-badge-color-scheme-4-color: var(--sapAccentColor4);
1930

2031
--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
32+
--ui5-badge-color-scheme-5-hover-background: var(--ui5-badge-color-scheme-5-background);
2133
--ui5-badge-color-scheme-5-border: var(--sapAccentColor5);
2234
--ui5-badge-color-scheme-5-color: var(--sapAccentColor5);
2335

2436
--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
37+
--ui5-badge-color-scheme-6-hover-background: var(--ui5-badge-color-scheme-6-background);
2538
--ui5-badge-color-scheme-6-border: var(--sapAccentColor6);
2639
--ui5-badge-color-scheme-6-color: var(--sapAccentColor6);
2740

2841
--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
42+
--ui5-badge-color-scheme-7-hover-background: var(--ui5-badge-color-scheme-7-background);
2943
--ui5-badge-color-scheme-7-border: var(--sapAccentColor7);
3044
--ui5-badge-color-scheme-7-color: var(--sapAccentColor7);
3145

3246
--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor18);
47+
--ui5-badge-color-scheme-8-hover-background: var(--ui5-badge-color-scheme-8-background);
3348
--ui5-badge-color-scheme-8-border: var(--sapLegendColor18);
3449
--ui5-badge-color-scheme-8-color: var(--sapLegendColor18);
3550

3651
--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
52+
--ui5-badge-color-scheme-9-hover-background: var(--ui5-badge-color-scheme-9-background);
3753
--ui5-badge-color-scheme-9-border: var(--sapAccentColor10);
3854
--ui5-badge-color-scheme-9-color: var(--sapAccentColor10);
3955

4056
--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
57+
--ui5-badge-color-scheme-10-hover-background: var(--ui5-badge-color-scheme-10-background);
4158
--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
4259
--ui5-badge-color-scheme-10-color: var(--sapAccentColor9);
4360
}

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
:root {
2+
--_ui5-badge-height: 1.5rem;
3+
--_ui5-badge-border: none;
4+
--_ui5-badge-left-border: 2px solid transparent;
5+
--_ui5-badge-border-radius: .25rem;
6+
--_ui5-badge-font-weight: bold;
7+
--_ui5-badge-font-weight: 400;
8+
--_ui5-badge-text-transform: none;
9+
10+
--_ui5-badge-cursor: pointer;
11+
12+
--ui5-badge-color-scheme-1-background: var(--sapNeutralBackground);
13+
--ui5-badge-color-scheme-1-hover-background: #fff;
14+
--ui5-badge-color-scheme-1-border: var(--sapContent_ForegroundBorderColor);
15+
--ui5-badge-color-scheme-1-color: #4D5E71;
16+
--ui5-badge-color-scheme-1-shadow: 0 0 2px var(--sapNeutralBackground), 0 4px 8px var(--sapNeutralBackground);
17+
--ui5-badge-color-scheme-1-active-shadow: 0 2px 4px rgba(131, 150, 168, 0.16), 0 0 2px 0 rgba(131, 150, 168, 0.16);
18+
19+
--ui5-badge-color-scheme-2-background: var(--sapInformationBackground);
20+
--ui5-badge-color-scheme-2-hover-background: #fff;
21+
--ui5-badge-color-scheme-2-border: #1890ff;
22+
--ui5-badge-color-scheme-2-color: var(--sapContent_Selected_TextColor);
23+
--ui5-badge-color-scheme-2-shadow: 0 0 2px var(--sapInformationBackground), 0 4px 8px var(--sapInformationBackground);
24+
--ui5-badge-color-scheme-2-active-shadow: 0 2px 4px rgba(27, 144, 255, 0.16), 0 0 2px 0 rgba(27, 144, 255, 0.16);
25+
26+
--ui5-badge-color-scheme-3-background: #dafdf5;
27+
--ui5-badge-color-scheme-3-hover-background: #fff;
28+
--ui5-badge-color-scheme-3-border: var(--sapChart_Sequence_6);
29+
--ui5-badge-color-scheme-3-color: #046c7a;
30+
--ui5-badge-color-scheme-3-shadow: 0 0 2px #dafdf5, 0 4px 8px #dafdf5;
31+
--ui5-badge-color-scheme-3-active-shadow: 0 2px 4px rgba(4, 172, 167, 0.16), 0 0 2px 0 rgba(4, 172, 167, 0.16);
32+
33+
--ui5-badge-color-scheme-4-background: var(--sapSuccessBackground);
34+
--ui5-badge-color-scheme-4-hover-background: #fff;
35+
--ui5-badge-color-scheme-4-border: var(--sapChart_Good);
36+
--ui5-badge-color-scheme-4-color: var(--sapButton_Accept_TextColor);
37+
--ui5-badge-color-scheme-4-shadow: 0 0 2px var(--sapSuccessBackground), 0 4px 8px var(--sapSuccessBackground);
38+
--ui5-badge-color-scheme-4-active-shadow: 0 2px 4px rgba(93, 193, 34, 0.16), 0 0 2px 0 rgba(93, 193, 34, 0.16);
39+
40+
--ui5-badge-color-scheme-5-background: var(--sapWarningBackground);
41+
--ui5-badge-color-scheme-5-hover-background: #fff;
42+
--ui5-badge-color-scheme-5-border: var(--sapAccentColor1);
43+
--ui5-badge-color-scheme-5-color: var(--sapCriticalTextColor);
44+
--ui5-badge-color-scheme-5-shadow: 0 0 2px var(--sapWarningBackground), 0 4px 8px var(--sapWarningBackground);
45+
--ui5-badge-color-scheme-5-active-shadow: 0 2px 4px rgba(255, 179, 0, 0.16), 0 0 2px 0 rgba(255, 179, 0, 0.16);
46+
47+
--ui5-badge-color-scheme-6-background: var(--sapErrorBackground);
48+
--ui5-badge-color-scheme-6-hover-background: #fff;
49+
--ui5-badge-color-scheme-6-border: #ee3939;
50+
--ui5-badge-color-scheme-6-color: var(--sapButton_Reject_TextColor);
51+
--ui5-badge-color-scheme-6-shadow: 0 0 2px var(--sapErrorBackground), 0 4px 8px var(--sapErrorBackground);
52+
--ui5-badge-color-scheme-6-active-shadow: 0 2px 4px rgba(245, 40, 40, 0.16), 0 0 2px 0 rgba(245, 40, 40, 0.16);
53+
54+
--ui5-badge-color-scheme-7-background: #fff0fa;
55+
--ui5-badge-color-scheme-7-hover-background: #fff;
56+
--ui5-badge-color-scheme-7-border: #f31ded;
57+
--ui5-badge-color-scheme-7-color: #a100c2;
58+
--ui5-badge-color-scheme-7-shadow: 0 0 2px #fff0fa, 0 4px 8px #fff0fa;
59+
--ui5-badge-color-scheme-7-active-shadow: 0 2px 4px rgba(252, 0, 245, 0.16), 0 0 2px 0 rgba(252, 0, 245, 0.16);
60+
61+
--ui5-badge-color-scheme-8-background: #f1ecff;
62+
--ui5-badge-color-scheme-8-hover-background: #fff;
63+
--ui5-badge-color-scheme-8-border: #9b76ff;
64+
--ui5-badge-color-scheme-8-color: #5d36ff;
65+
--ui5-badge-color-scheme-8-shadow: 0 0 2px #f1ecff, 0 4px 8px #f1ecff;
66+
--ui5-badge-color-scheme-8-active-shadow: 0 2px 4px rgba(155, 118, 255, 0.16), 0 0 2px 0 rgba(155, 118, 255, 0.16);
67+
68+
--ui5-badge-color-scheme-9-background: var(--ui5-badge-color-scheme-1-background);
69+
--ui5-badge-color-scheme-9-hover-background: #fff;
70+
--ui5-badge-color-scheme-9-border: var(--ui5-badge-color-scheme-1-border);
71+
--ui5-badge-color-scheme-9-color: var(--ui5-badge-color-scheme-1-color);
72+
--ui5-badge-color-scheme-9-shadow: var(--ui5-badge-color-scheme-1-shadow);
73+
--ui5-badge-color-scheme-9-active-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
74+
75+
--ui5-badge-color-scheme-10-background: var(--ui5-badge-color-scheme-2-background);
76+
--ui5-badge-color-scheme-10-hover-background: #fff;
77+
--ui5-badge-color-scheme-10-border: var(--ui5-badge-color-scheme-2-border);
78+
--ui5-badge-color-scheme-10-color: var(--ui5-badge-color-scheme-2-color);
79+
--ui5-badge-color-scheme-10-shadow: var(--ui5-badge-color-scheme-2-shadow);
80+
--ui5-badge-color-scheme-10-active-shadow: var(--ui5-badge-color-scheme-2-active-shadow)
81+
}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "../base/Avatar-parameters.css";
33
@import "../base/Badge-parameters.css";
44
@import "./Button-parameters.css";
5+
@import "./Badge-parameters.css";
56
@import "../base/Card-parameters.css";
67
@import "../base/Carousel-parameters.css";
78
@import "./CheckBox-parameters.css";

0 commit comments

Comments
 (0)