Skip to content

Commit 74470fe

Browse files
dimovpetardimovpetar
authored
feat(u5-badge): implement SAP Horizon theme family (#5143)
- Added new colors - Deleted logic for active badge Related to #5006
1 parent 4e2218b commit 74470fe

File tree

11 files changed

+156
-214
lines changed

11 files changed

+156
-214
lines changed

‎packages/main/src/Badge.hbs

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
<div
2-
class="ui5-badge-root"
3-
@mousedown="{{_onmousedown}}"
4-
@mouseup="{{_onmouseup}}"
5-
>
1+
<div class="ui5-badge-root">
62
<slot name="icon"></slot>
73

84
{{#if hasText}}

‎packages/main/src/Badge.js

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

138-
_onmousedown() {
139-
this.active = true;
140-
}
141-
142-
_onmouseup() {
143-
this.active = false;
144-
}
145-
146131
get hasText() {
147132
return !!this.textContent.trim().length;
148133
}

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

Lines changed: 7 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,19 @@
22

33
:host(:not([hidden])) {
44
display: inline-block;
5-
height: var(--_ui5-badge-height);
5+
height: 1rem;
66
min-width: 1.125em;
77
max-width: 100%;
88
padding: 0 0.3125em;
99
color: var(--sapAccentColor1);
1010
background: var(--sapLegendBackgroundColor1);
11-
border: var(--_ui5-badge-border);
12-
border-inline-start: var(--_ui5-badge-left-border);
13-
border-radius: var(--_ui5-badge-border-radius);
11+
border: 0.0625em solid;
12+
border-radius: 0.5rem;
1413
box-sizing: border-box;
1514
font-family: "72override", var(--sapFontFamily);
16-
font-weight: var(--_ui5-badge-font-weight);
15+
font-weight: bold;
1716
text-align: center;
1817
letter-spacing: 0.0125em;
19-
transition: all .2s ease-in-out;
2018
}
2119

2220
:host([color-scheme]:hover),
@@ -30,7 +28,7 @@
3028
width: 100%;
3129
height: 100%;
3230
box-sizing: border-box;
33-
pointer-events: var(--_ui5_badge_pointer_events);
31+
pointer-events: none;
3432
}
3533

3634
.ui5-badge-text {
@@ -40,9 +38,9 @@
4038
font-weight: inherit;
4139
text-overflow: ellipsis;
4240
line-height: 1;
43-
text-transform: var(--_ui5-badge-text-transform);
41+
text-transform: uppercase;
4442
letter-spacing: inherit;
45-
font-size: var(--ui5-badge-font-size); /* origin from --sapFontSmallSize (0.75rem) */
43+
font-size: 0.75em; /* origin from --sapFontSmallSize (0.75rem) */
4644
}
4745

4846
:host(:hover) .ui5-badge-text {
@@ -77,165 +75,65 @@
7775
color: var(--ui5-badge-color-scheme-1-color);
7876
}
7977

80-
:host([color-scheme="1"]:hover) {
81-
background-color: var(--ui5-badge-color-scheme-1-hover-background);
82-
box-shadow: var(--ui5-badge-color-scheme-1-shadow);
83-
}
84-
85-
:host([active][color-scheme="1"]:hover) {
86-
box-shadow: var(--ui5-badge-color-scheme-1-active-shadow);
87-
color: var(--ui5-badge-color-scheme-1-active-color);
88-
}
89-
9078
/* Scheme 2 */
9179
:host([color-scheme="2"]) {
9280
background-color: var(--ui5-badge-color-scheme-2-background);
9381
border-color: var(--ui5-badge-color-scheme-2-border);
9482
color: var(--ui5-badge-color-scheme-2-color);
9583
}
9684

97-
:host([color-scheme="2"]:hover) {
98-
background-color: var(--ui5-badge-color-scheme-2-hover-background);
99-
box-shadow: var(--ui5-badge-color-scheme-2-shadow);
100-
}
101-
102-
:host([active][color-scheme="2"]:hover) {
103-
box-shadow: var(--ui5-badge-color-scheme-2-active-shadow);
104-
color: var(--ui5-badge-color-scheme-2-active-color);
105-
}
106-
10785
/* Scheme 3 */
10886
:host([color-scheme="3"]) {
10987
background-color: var(--ui5-badge-color-scheme-3-background);
11088
border-color: var(--ui5-badge-color-scheme-3-border);
11189
color: var(--ui5-badge-color-scheme-3-color);
11290
}
11391

114-
:host([color-scheme="3"]:hover) {
115-
background-color: var(--ui5-badge-color-scheme-3-hover-background);
116-
box-shadow: var(--ui5-badge-color-scheme-3-shadow);
117-
}
118-
119-
:host([active][color-scheme="3"]:hover) {
120-
box-shadow: var(--ui5-badge-color-scheme-3-active-shadow);
121-
color: var(--ui5-badge-color-scheme-3-active-color);
122-
}
123-
12492
/* Scheme 4 */
12593
:host([color-scheme="4"]) {
12694
background-color: var(--ui5-badge-color-scheme-4-background);
12795
border-color: var(--ui5-badge-color-scheme-4-border);
12896
color: var(--ui5-badge-color-scheme-4-color);
12997
}
13098

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-
color: var(--ui5-badge-color-scheme-4-active-color);
139-
}
140-
14199
/* Scheme 5 */
142100
:host([color-scheme="5"]) {
143101
background-color: var(--ui5-badge-color-scheme-5-background);
144102
border-color: var(--ui5-badge-color-scheme-5-border);
145103
color: var(--ui5-badge-color-scheme-5-color);
146104
}
147105

148-
:host([color-scheme="5"]:hover) {
149-
background-color: var(--ui5-badge-color-scheme-5-hover-background);
150-
box-shadow: var(--ui5-badge-color-scheme-5-shadow);
151-
}
152-
153-
:host([active][color-scheme="5"]:hover) {
154-
box-shadow: var(--ui5-badge-color-scheme-5-active-shadow);
155-
color: var(--ui5-badge-color-scheme-5-active-color);
156-
}
157-
158106
/* Scheme 6 */
159107
:host([color-scheme="6"]) {
160108
background-color: var(--ui5-badge-color-scheme-6-background);
161109
border-color: var(--ui5-badge-color-scheme-6-border);
162110
color: var(--ui5-badge-color-scheme-6-color);
163111
}
164112

165-
:host([color-scheme="6"]:hover) {
166-
background-color: var(--ui5-badge-color-scheme-6-hover-background);
167-
box-shadow: var(--ui5-badge-color-scheme-6-shadow);
168-
}
169-
170-
:host([active][color-scheme="6"]:hover) {
171-
box-shadow: var(--ui5-badge-color-scheme-6-active-shadow);
172-
color: var(--ui5-badge-color-scheme-6-active-color);
173-
}
174-
175113
/* Scheme 7 */
176114
:host([color-scheme="7"]) {
177115
background-color: var(--ui5-badge-color-scheme-7-background);
178116
border-color: var(--ui5-badge-color-scheme-7-border);
179117
color: var(--ui5-badge-color-scheme-7-color);
180118
}
181119

182-
:host([color-scheme="7"]:hover) {
183-
background-color: var(--ui5-badge-color-scheme-7-hover-background);
184-
box-shadow: var(--ui5-badge-color-scheme-7-shadow);
185-
}
186-
187-
:host([active][color-scheme="7"]:hover) {
188-
box-shadow: var(--ui5-badge-color-scheme-7-active-shadow);
189-
color: var(--ui5-badge-color-scheme-7-active-color);
190-
}
191-
192120
/* Scheme 8 */
193121
:host([color-scheme="8"]) {
194122
background-color: var(--ui5-badge-color-scheme-8-background);
195123
border-color: var(--ui5-badge-color-scheme-8-border);
196124
color: var(--ui5-badge-color-scheme-8-color);
197125
}
198126

199-
:host([color-scheme="8"]:hover) {
200-
background-color: var(--ui5-badge-color-scheme-8-hover-background);
201-
box-shadow: var(--ui5-badge-color-scheme-8-shadow);
202-
}
203-
204-
:host([active][color-scheme="8"]:hover) {
205-
box-shadow: var(--ui5-badge-color-scheme-8-active-shadow);
206-
color: var(--ui5-badge-color-scheme-8-active-color);
207-
}
208-
209127
/* Scheme 9 */
210128
:host([color-scheme="9"]) {
211129
background-color: var(--ui5-badge-color-scheme-9-background);
212130
border-color: var(--ui5-badge-color-scheme-9-border);
213131
color: var(--ui5-badge-color-scheme-9-color);
214132
}
215133

216-
:host([color-scheme="9"]:hover) {
217-
background-color: var(--ui5-badge-color-scheme-9-hover-background);
218-
box-shadow: var(--ui5-badge-color-scheme-9-shadow);
219-
}
220-
221-
:host([active][color-scheme="9"]:hover) {
222-
box-shadow: var(--ui5-badge-color-scheme-9-active-shadow);
223-
color: var(--ui5-badge-color-scheme-9-active-color);
224-
}
225-
226134
/* Scheme 10 */
227135
:host([color-scheme="10"]) {
228136
background-color: var(--ui5-badge-color-scheme-10-background);
229137
border-color: var(--ui5-badge-color-scheme-10-border);
230138
color: var(--ui5-badge-color-scheme-10-color);
231139
}
232-
233-
:host([color-scheme="10"]:hover) {
234-
background-color: var(--ui5-badge-color-scheme-10-hover-background);
235-
box-shadow: var(--ui5-badge-color-scheme-10-shadow);
236-
}
237-
238-
:host([active][color-scheme="10"]:hover) {
239-
box-shadow: var(--ui5-badge-color-scheme-10-active-shadow);
240-
color: var(--ui5-badge-color-scheme-10-active-color);
241-
}

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

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,43 @@
11
:root {
2-
--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;
92
--_ui5-badge-cursor: default;
10-
--_ui5_badge_pointer_events: none;
113

124
--ui5-badge-color-scheme-1-background: var(--sapLegendBackgroundColor1);
13-
--ui5-badge-color-scheme-1-hover-background: var(--ui5-badge-color-scheme-1-background);
145
--ui5-badge-color-scheme-1-border: var(--sapAccentColor1);
156
--ui5-badge-color-scheme-1-color: var(--sapTextColor);
167

178
--ui5-badge-color-scheme-2-background: var(--sapLegendBackgroundColor2);
18-
--ui5-badge-color-scheme-2-hover-background: var(--ui5-badge-color-scheme-2-background);
199
--ui5-badge-color-scheme-2-border: var(--sapAccentColor2);
2010
--ui5-badge-color-scheme-2-color: var(--sapTextColor);
2111

2212
--ui5-badge-color-scheme-3-background: var(--sapLegendBackgroundColor3);
23-
--ui5-badge-color-scheme-3-hover-background: var(--ui5-badge-color-scheme-3-background);
2413
--ui5-badge-color-scheme-3-border: var(--sapAccentColor3);
2514
--ui5-badge-color-scheme-3-color: var(--sapTextColor);
2615

2716
--ui5-badge-color-scheme-4-background: var(--sapLegendBackgroundColor5);
28-
--ui5-badge-color-scheme-4-hover-background: var(--ui5-badge-color-scheme-4-background);
2917
--ui5-badge-color-scheme-4-border: var(--sapAccentColor4);
3018
--ui5-badge-color-scheme-4-color: var(--sapTextColor);
3119

3220
--ui5-badge-color-scheme-5-background: var(--sapLegendBackgroundColor20);
33-
--ui5-badge-color-scheme-5-hover-background: var(--ui5-badge-color-scheme-5-background);
3421
--ui5-badge-color-scheme-5-border: var(--sapAccentColor5);
3522
--ui5-badge-color-scheme-5-color: var(--sapTextColor);
3623

3724
--ui5-badge-color-scheme-6-background: var(--sapLegendBackgroundColor6);
38-
--ui5-badge-color-scheme-6-hover-background: var(--ui5-badge-color-scheme-6-background);
3925
--ui5-badge-color-scheme-6-border: var(--sapAccentColor6);
4026
--ui5-badge-color-scheme-6-color: var(--sapTextColor);
4127

4228
--ui5-badge-color-scheme-7-background: var(--sapLegendBackgroundColor7);
43-
--ui5-badge-color-scheme-7-hover-background: var(--ui5-badge-color-scheme-7-background);
4429
--ui5-badge-color-scheme-7-border: var(--sapAccentColor7);
4530
--ui5-badge-color-scheme-7-color: var(--sapTextColor);
4631

4732
--ui5-badge-color-scheme-8-background: var(--sapLegendBackgroundColor18);
48-
--ui5-badge-color-scheme-8-hover-background: var(--ui5-badge-color-scheme-8-background);
4933
--ui5-badge-color-scheme-8-border: var(--sapLegendColor18);
5034
--ui5-badge-color-scheme-8-color: var(--sapTextColor);
5135

5236
--ui5-badge-color-scheme-9-background: var(--sapLegendBackgroundColor10);
53-
--ui5-badge-color-scheme-9-hover-background: var(--ui5-badge-color-scheme-9-background);
5437
--ui5-badge-color-scheme-9-border: var(--sapAccentColor10);
5538
--ui5-badge-color-scheme-9-color: var(--sapTextColor);
5639

5740
--ui5-badge-color-scheme-10-background: var(--sapLegendBackgroundColor9);
58-
--ui5-badge-color-scheme-10-hover-background: var(--ui5-badge-color-scheme-10-background);
5941
--ui5-badge-color-scheme-10-border: var(--sapAccentColor9);
6042
--ui5-badge-color-scheme-10-color: var(--sapTextColor);
6143
}

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import "../base/Badge-parameters.css";
2+
3+
:root {
4+
--ui5-badge-color-scheme-1-background: #FFF3B8; /* Mango2 */
5+
--ui5-badge-color-scheme-1-border: #A93E00; /* Mango8 */
6+
--ui5-badge-color-scheme-1-color: #A93E00; /* Mango8 */
7+
8+
--ui5-badge-color-scheme-2-background: #FFD5EA; /* Red2*/
9+
--ui5-badge-color-scheme-2-border: #AA0808; /* Red8 */
10+
--ui5-badge-color-scheme-2-color: #AA0808; /* Red8 */
11+
12+
--ui5-badge-color-scheme-3-background: #FFDCE8; /* Raspberry2 */
13+
--ui5-badge-color-scheme-3-border: #BA066C; /* Raspberry8 */
14+
--ui5-badge-color-scheme-3-color: #BA066C; /* Raspberry8 */
15+
16+
--ui5-badge-color-scheme-4-background: #FFDCF3; /* Pink2 */
17+
--ui5-badge-color-scheme-4-border: #A100C2; /* Pink8 */
18+
--ui5-badge-color-scheme-4-color: #A100C2; /* Pink8 */
19+
20+
--ui5-badge-color-scheme-5-background: #E2D8FF; /* Indigo2*/
21+
--ui5-badge-color-scheme-5-border: #470CED; /* Indigo8 */
22+
--ui5-badge-color-scheme-5-color: #470CED; /* Indigo8 */
23+
24+
--ui5-badge-color-scheme-6-background: #D1EFFF; /* Blue2 */
25+
--ui5-badge-color-scheme-6-border: #0057D2; /* Blue8 */
26+
--ui5-badge-color-scheme-6-color: #0057D2; /* Blue8 */
27+
28+
--ui5-badge-color-scheme-7-background: #C2FCEE; /* Teal2 */
29+
--ui5-badge-color-scheme-7-border: #046C7A; /* Teal8 */;
30+
--ui5-badge-color-scheme-7-color: #046C7A; /* Teal8 */
31+
32+
--ui5-badge-color-scheme-8-background: #E5F2BD; /* Green2 */
33+
--ui5-badge-color-scheme-8-border: #256F3A; /* Green8 */
34+
--ui5-badge-color-scheme-8-color: #256F3A; /* Green8 */
35+
36+
--ui5-badge-color-scheme-9-background: #B8F3FF; /* Cyan2 */
37+
--ui5-badge-color-scheme-9-border: #00709F; /* Cyan8 */
38+
--ui5-badge-color-scheme-9-color: #00709F; /* Cyan8 */
39+
40+
--ui5-badge-color-scheme-10-background: #EAECEE; /* Grey2 */
41+
--ui5-badge-color-scheme-10-border: #354A5F; /* Grey8 */
42+
--ui5-badge-color-scheme-10-color: #354A5F; /* Grey8 */
43+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "./sizes-parameters.css";
22
@import "../base/rtl-parameters.css";
33
@import "./Avatar-parameters.css";
4-
@import "../base/Badge-parameters.css";
4+
@import "./Badge-parameters.css";
55
@import "./Breadcrumbs-parameters.css";
66
@import "../base/BrowserScrollbar-parameters.css";
77
@import "./BusyIndicator-parameters.css";

0 commit comments

Comments
 (0)