Skip to content

Commit 81afb57

Browse files
ivoplashkovivoplashkov
authored
feat: Introduce sap_fiori_3_hcb and sap_fiori_3_hcw themes (#1947)
1 parent d11c973 commit 81afb57

File tree

132 files changed

+1040
-86
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

132 files changed

+1040
-86
lines changed

‎docs/Configuration.md

+7-5
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ There are several configuration settings that affect all UI5 Web Components glob
77

88
Setting | Values | Default value | Description
99
------------ | ----------------------------------------------- | ------------- | -------------------------------------------------------------
10-
[theme](#theme) | sap_fiori_3, sap_fiori_3_dark, sap_belize, sap_belize_hcb, sap_belize_hcw | sap_fiori_3 | Visual theme
10+
[theme](#theme) | sap_fiori_3, sap_fiori_3_dark, sap_fiori_3_hcb, sap_fiori_3_hcw, sap_belize, sap_belize_hcb, sap_belize_hcw | sap_fiori_3 | Visual theme
1111
language | en, de, es, etc... | en | Language to be used for translatable texts
1212
[RTL](#rtl) (**deprecated since 1.0.0-rc.8**) | true, false | false | When true, sets global text direction to right-to-left
1313
[animationMode](#animationMode) | full, basic, minimal, none | full | Defines different animation scenarios or levels
@@ -24,6 +24,8 @@ UI5 Web Components contain different content densities for certain controls that
2424
The `theme` setting values above are the technical names of our themes.
2525
- The `sap_fiori_3` is known as `Quartz Light` and it`s the default theme.
2626
- The `sap_fiori_3_dark` is known as `Quartz Dark`.
27+
- The `sap_fiori_3_hcb` is known as `Quartz High Contrast Black`.
28+
- The `sap_fiori_3_hcw` is known as `Quartz High Contrast White`.
2729
- The `sap_belize` is known as `Belize`.
2830
- The `sap_belize_hcb` is known as `High Contrast Black`.
2931
- The `sap_belize_hcw` is known as `High Contrast White`.
@@ -66,19 +68,19 @@ For example, when the `ui5-switch` is toggled, it fires a `change` event, but al
6668

6769
The `noConflict` configuration setting allows certain control over this behavior:
6870
- When `false` (default value) all custom events are fired with and without the `ui5-` prefix.
69-
- When `true` all custom events are fired with the `ui5-` prefix **only**.
71+
- When `true` all custom events are fired with the `ui5-` prefix **only**.
7072
This is handy for example, if the name of an event happens to collide with the name of an event provided by a third-party library.
7173
- When an object is supplied, just the specified events will be fired with the `ui5-` prefix **only**.
72-
All other events will be fired normally - once with the prefix, and once without it.
74+
All other events will be fired normally - once with the prefix, and once without it.
7375
The format of this object is as follows:
7476
```json
7577
{
7678
"events": ["selection-change", "header-click"]
7779
}
7880
```
7981
*Please note that other keys may be added to this object in the future for the purpose of name conflict resolution.*
80-
81-
In the above example, only the `selection-change` and `header-click` events will be fired with a prefix.
82+
83+
In the above example, only the `selection-change` and `header-click` events will be fired with a prefix.
8284
You can still use them by listening to `ui5-selection-change` and `ui5-header-click`, but the names `selection-change` and `header-click` will be
8385
free for use by other UI components and libraries without name collision.
8486

‎packages/base/test/assets/Themes.js

+4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,13 @@ const fiori3Dark = `:root{ --var1: green; }`;
55
const belize = `:root{ --var1: blue; }`;
66
const belizeHcb = `:root{ --var1: orange; }`;
77
const belizeHcw = `:root{ --var1: orange; }`;
8+
const fiori3Hcb = `:root{ --var1: yellow; }`;
9+
const fiori3Hcw = `:root{ --var1: yellow; }`;
810

911
registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3", fiori3);
1012
registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_dark", fiori3Dark);
1113
registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize", belize);
1214
registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcb", belizeHcb);
1315
registerThemeProperties("@ui5/webcomponents-base-test", "sap_belize_hcw", belizeHcw);
16+
registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_hcb", fiori3Hcb);
17+
registerThemeProperties("@ui5/webcomponents-base-test", "sap_fiori_3_hcw", fiori3Hcw);

‎packages/fiori/src/themes/ProductSwitchItem.css

+1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
padding: .5rem;
4545
padding-top: 4rem;
4646
cursor: pointer;
47+
border: var(--_ui5_product_switch_item_border);
4748
}
4849

4950
:host([icon]) .ui5-product-switch-item-root {

‎packages/fiori/src/themes/sap_fiori_3_hcb/ProductSwitchItem-parameters.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../base/ProductSwitchItem-parameters.css";
2+
3+
:root {
4+
--_ui5_product_switch_item_outline_width: .125rem;
5+
--_ui5_product_switch_item_outline_color: var(--sapContent_ContrastFocusColor);
6+
--_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted;
7+
--_ui5_product_switch_item_outline_offset: -.25rem;
8+
--_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);
9+
}

‎packages/fiori/src/themes/sap_fiori_3_hcb/UploadCollection-parameters.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../base/UploadCollection-parameters.css";
2+
3+
:root {
4+
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
5+
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
6+
--ui5_upload_collection_drop_overlay_background: transparent;
7+
--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
8+
--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
9+
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./ProductSwitchItem-parameters.css";
2+
@import "./UploadCollection-parameters.css";

‎packages/fiori/src/themes/sap_fiori_3_hcw/ProductSwitchItem-parameters.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@import "../base/ProductSwitchItem-parameters.css";
2+
3+
:root {
4+
--_ui5_product_switch_item_outline_width: .125rem;
5+
--_ui5_product_switch_item_outline_color: var(--sapContent_ContrastFocusColor);
6+
--_ui5_product_switch_item_outline: var(--_ui5_product_switch_item_outline_width) var(--_ui5_product_switch_item_outline_color) dotted;
7+
--_ui5_product_switch_item_outline_offset: -.25rem;
8+
--_ui5_product_switch_item_border: 1px solid var(--sapField_BorderColor);
9+
}

‎packages/fiori/src/themes/sap_fiori_3_hcw/UploadCollection-parameters.css

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@import "../base/UploadCollection-parameters.css";
2+
3+
:root {
4+
--ui5_upload_collection_drag_overlay_border: 0.1875rem dashed var(--sapContent_ForegroundBorderColor);
5+
--ui5_upload_collection_drop_overlay_border: 0.1875rem solid var(--sapContent_HelpColor);
6+
--ui5_upload_collection_progress_indicator_background: var(--sapHighlightColor);
7+
--ui5_upload_collection_progress_indicator_error_background: var(--sapHighlightColor);
8+
}

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

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "./ProductSwitchItem-parameters.css";
2+
@import "./UploadCollection-parameters.css";

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

+1-9
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,11 @@
1111
height: 3rem;
1212
width: 3rem;
1313
border-radius: 50%;
14+
border: var(--ui5-avatar-initials-border);
1415
outline: none;
1516
color: var(--ui5-avatar-initials-color);
1617
}
1718

18-
:host([initials]) {
19-
border: var(--ui5-avatar-initials-border);
20-
}
21-
22-
:host([icon]) {
23-
border: var(--ui5-avatar-initials-border);
24-
}
25-
26-
2719
/* Shapes */
2820
:host([shape="Square"]) {
2921
border-radius: .25rem;

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

+6-6
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
width: var(--ui5_carousel_button_size);
103103
height: var(--ui5_carousel_button_size);
104104
border-radius: 50%;
105-
box-shadow: var(--sapContent_Shadow1);
105+
box-shadow: none;
106106
cursor: pointer;
107107
outline-offset: .1rem;
108108
}
@@ -121,11 +121,11 @@
121121
}
122122

123123
.ui5-carousel-navigation-dot {
124-
width: .25rem;
125-
height: .25rem;
126-
margin: 0 0.375rem;
124+
width: var(--ui5_carousel_width);
125+
height: var(--ui5_carousel_height);
126+
margin: var(--ui5_carousel_margin);
127127
border-radius: 50%;
128-
background-color: var(--sapContent_NonInteractiveIconColor);
128+
background-color: var(--ui5_carousel_dot_background);
129129
border: var(--ui5_carousel_dot_border);
130130
transition: background-color .1s ease-in;
131131
}
@@ -135,5 +135,5 @@
135135
height: .5rem;;
136136
margin: 0 .25rem;
137137
background-color: var(--sapSelectedColor);
138-
border: none;
138+
border: var(--ui5_carousel_dot_border);
139139
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@
5959
color: var(--sapField_WarningColor);
6060
}
6161

62+
:host([value-state="Information"]) .ui5-checkbox-inner,
63+
:host([value-state="Information"]) .ui5-checkbox--hoverable:hover .ui5-checkbox-inner {
64+
background: var(--sapField_InformationBackground);
65+
border: var(--_ui5_checkbox_inner_information_border);
66+
color: var(--sapField_InformationColor);
67+
}
68+
6269
:host([value-state="Warning"]) .ui5-checkbox-icon {
6370
color: var(--_ui5_checkbox_checkmark_warning_color);
6471
}

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

+1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
left: 50%;
44
transform: translate(-50%, -50%);
55
min-width: 20rem;
6+
box-shadow: var(--sapContent_Shadow3);
67
}
78

89
:host([stretch]) {

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -151,7 +151,8 @@
151151
}
152152

153153
:host([value-state="Error"]:not([readonly]):not([disabled])),
154-
:host([value-state="Warning"]:not([readonly]):not([disabled])) {
154+
:host([value-state="Warning"]:not([readonly]):not([disabled])),
155+
:host([value-state="Information"]:not([readonly]):not([disabled])) {
155156
border-style: var(--_ui5_input_error_warning_border_style);
156157
}
157158

@@ -169,6 +170,7 @@
169170
:host([value-state="Information"]:not([readonly])) {
170171
background-color: var(--sapField_InformationBackground);
171172
border-color: var(--sapField_InformationColor);
173+
border-width: var(--_ui5-input-information_border_width);
172174
}
173175

174176
/* Remove IE's defaut clear button */
@@ -188,7 +190,7 @@
188190
}
189191

190192
/* TODO: Remove this after parser is fixed
191-
- this statement is transformed to "ui5-multi-combobox ui5-icon" which
193+
- this statement is transformed to "ui5-multi-combobox ui5-icon" which
192194
affects all icons in the combobox incuding these in the list items
193195
*/
194196
::slotted(ui5-icon[slot="icon"]) {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*
1+
/*
22
This CSS file enables visual alignment of all icons within input elements.
33
API:
44
- add input-icon attribute to an icon

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,8 @@
1818
}
1919

2020
:host(:not([disabled])) .ui5-link-root:hover {
21-
text-decoration: underline;
2221
color: var(--sapLinkColor);
22+
text-decoration: var(--_ui5_link_hover_text_decoration);
2323
}
2424

2525
:host([disabled]) .ui5-link-root {
@@ -57,6 +57,7 @@
5757
word-wrap: normal;
5858
text-decoration: none;
5959
outline: none;
60+
text-decoration: var(--_ui5_link_text_decoration);
6061
}
6162

6263
.ui5-link-root,

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -87,15 +87,15 @@
8787
align-items: center;
8888
width: var(--_ui5_messagestrip_close_button_size);
8989
height: var(--_ui5_messagestrip_close_button_size);
90-
border-radius: 0.2rem;
90+
border-radius: 0.25rem;
9191
background: transparent;
9292
color: var(--sapTextColor);
9393
cursor: pointer;
9494
position: absolute;
9595
right: 0.125rem;
9696
top: 0.125rem;
9797
outline: none;
98-
border: none;
98+
border: var(--_ui5_messagestrip_close_button_border);
9999
-webkit-user-select: none;
100100
-ms-user-select: none;
101101
user-select: none;
@@ -121,7 +121,7 @@
121121
}
122122

123123
.ui5-messagestrip-close-icon-wrapper:focus {
124-
outline-offset: -2px;
124+
outline-offset: var(--_ui5_messagestrip_focus_offset);
125125
outline: var(--_ui5_messagestrip_focus_width) dotted var(--sapContent_FocusColor);
126126
}
127127

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
width: 0.7rem;
1414
height: 0.7rem;
1515
background-color: var(--sapGroup_ContentBackground);
16-
box-shadow: var(--sapContent_Shadow2);
16+
box-shadow: var(--sapContent_Shadow3);
1717
transform: rotate(-45deg);
1818
}
1919

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

+2-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,8 @@
9090
}
9191

9292
:host([value-state="Error"]) .ui5-radio-root,
93-
:host([value-state="Warning"]) .ui5-radio-root {
93+
:host([value-state="Warning"]) .ui5-radio-root,
94+
:host([value-state="Information"]) .ui5-radio-root {
9495
stroke-dasharray: var(--_ui5_radiobutton_warning_error_border_dash);
9596
}
9697

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

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
outline: none;
99
cursor: pointer;
1010
overflow: hidden;
11+
box-shadow: var(--sapUiContentShadow1);
1112
}
1213

1314
.ui5-select-label-root {

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

+7-14
Original file line numberDiff line numberDiff line change
@@ -123,9 +123,6 @@
123123
cursor: default;
124124
}
125125

126-
.ui5-switch-root.ui5-switch--disabled .ui5-switch-track {
127-
border-color: var(--_ui5_switch_track_disabled_border_color);
128-
}
129126

130127
.ui5-switch-root.ui5-switch--disabled.ui5-switch--checked .ui5-switch-track {
131128
background: var(--_ui5_switch_track_disabled_checked_bg);
@@ -137,34 +134,24 @@
137134

138135
.ui5-switch-root.ui5-switch--disabled .ui5-switch-handle {
139136
background: var(--_ui5_switch_handle_disabled_bg);
140-
border-color: var(--_ui5_switch_handle_disabled_border_color);
141137
}
142138

143139
.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-track {
144140
background: var(--_ui5_switch_track_disabled_semantic_checked_bg);
145-
border-color: var(--_ui5_switch_track_disabled_semantic_checked_border_color);
146141
}
147142

148143
.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled .ui5-switch-handle {
149144
background: var(--_ui5_switch_handle_disabled_semantic_checked_bg);
150-
border-color: var(--_ui5_switch_handle_disabled_semantic_checked_border_color);
151145
}
152146

153147
.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-track {
154148
background: var(--_ui5_switch_track_disabled_semantic_bg);
155-
border-color: var(--_ui5_switch_track_disabled_semantic_border_color);
156149
}
157150

158151
.ui5-switch-root.ui5-switch--semantic.ui5-switch--disabled:not(.ui5-switch--checked) .ui5-switch-handle {
159152
background: var(--sapButton_Background);
160-
border-color: var(--_ui5_switch_handle_disabled_semantic_border_color);
161-
}
162-
163-
.ui5-switch-root.ui5-switch--disabled.ui5-switch--checked .ui5-switch-text {
164-
color: var(--_ui5_switch_text_disabled_color);
165153
}
166154

167-
168155
/* switch checked */
169156
.ui5-switch-root.ui5-switch--checked .ui5-switch-handle {
170157
background: var(--_ui5_switch_handle_checked_bg);
@@ -181,7 +168,7 @@
181168
transform : var(--_ui5_switch_slide_transform);
182169
}
183170

184-
.ui5-switch-root.ui5-switch--checked .ui5-switch-text--on,
171+
.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled) .ui5-switch-text--on,
185172
.ui5-switch-root.ui5-switch--checked .ui5-switch-text--off {
186173
color: var(--sapButton_Track_Selected_TextColor);
187174
}
@@ -238,6 +225,7 @@
238225
/* switch on hover, when switched off */
239226
.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-track {
240227
border-color: var(--sapButton_Hover_BorderColor);
228+
background: var(--sapButton_Track_Background);
241229
}
242230

243231
.ui5-switch-desktop.ui5-switch-root:not(.ui5-switch--disabled):hover .ui5-switch-handle {
@@ -251,6 +239,11 @@
251239
border-color: var(--sapButton_Hover_BorderColor);
252240
}
253241

242+
.ui5-switch-desktop.ui5-switch-root.ui5-switch--checked:not(.ui5-switch--disabled):hover .ui5-switch-track {
243+
border-color: var(--sapButton_Hover_BorderColor);
244+
background: var(--_ui5_switch_track_hover_checked_background_color);
245+
}
246+
254247
/* semantic switch on hover, when switched off */
255248
.ui5-switch-desktop.ui5-switch-root.ui5-switch--semantic:not(.ui5-switch--disabled):hover .ui5-switch-handle {
256249
background: var(--_ui5_switch_handle_semantic_hover_bg);

0 commit comments

Comments
 (0)