@ui5/webcomponents 2.0.0-rc.1 → 2.0.0-rc.2

package/src/Popup.hbs

@@ -1,3 +1,5 @@
+{{>include "./PopupBlockLayer.hbs"}}
+
 <section
 	root-element
 	style="{{styles.root}}"
@@ -29,6 +31,4 @@
 
 {{#*inline "beforeContent"}}{{/inline}}
 
-{{#*inline "afterContent"}}{{/inline}}
-
-{{>include "./PopupBlockLayer.hbs"}}
+{{#*inline "afterContent"}}{{/inline}}

package/src/PopupBlockLayer.hbs

@@ -1,5 +1,4 @@
 <div class="ui5-block-layer"
-	popover="manual"
 	@keydown="{{_preventBlockLayerFocus}}"
 	@mousedown="{{_preventBlockLayerFocus}}">
 </div>

package/src/ResponsivePopover.hbs

@@ -5,7 +5,8 @@
 		accessible-name-ref={{accessibleNameRef}}
 		accessible-role={{accessibleRole}}
 		stretch
-		_disable-initial-focus
+		?_disable-initial-focus="{{_disableInitialFocus}}"
+		initial-focus="{{initialFocus}}"
 		@ui5-before-open="{{_beforeDialogOpen}}"
 		@ui5-after-open="{{_propagateDialogEvent}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"

package/src/i18n/messagebundle.properties

@@ -247,6 +247,9 @@ MESSAGE_STRIP_SUCCESS=Success Information Bar
 #XACT: ARIA announcement for the MessageStrip's "Information" state
 MESSAGE_STRIP_INFORMATION=Information Bar
 
+#XACT: ARIA announcement for the MessageStrip's "Custom" state
+MESSAGE_STRIP_CUSTOM=Custom Information Bar
+
 #XFLD: MultiComboBox dialog button
 MULTICOMBOBOX_DIALOG_OK_BUTTON=OK
 

package/src/themes/AvatarGroup.css

@@ -13,7 +13,8 @@
 	outline: none;
 }
 
-:host([type="Group"]) .ui5-avatar-group-items:focus {
+:host([type="Group"][desktop]) .ui5-avatar-group-items:focus-within,
+:host([type="Group"]) .ui5-avatar-group-items:focus-visible {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
 	border-radius: var(--_ui5_avatar_group_focus_border_radius);
@@ -38,6 +39,14 @@
 	pointer-events: none;
 }
 
+.ui5-avatar-group-overflow-btn {
+	overflow: visible;
+}
+
+.ui5-avatar-group-overflow-btn::part(button) {
+	min-width: auto;
+}
+
 ::slotted([ui5-button]:not([hidden])),
 .ui5-avatar-group-overflow-btn:not([hidden]) {
 	--_ui5_button_base_padding: 0;
@@ -47,10 +56,16 @@
 	z-index: 0; /* prevent last visible avatar from covering half of the button */
 }
 
-::slotted([ui5-button][focused]),
-.ui5-avatar-group-overflow-btn[focused] {
+::slotted([ui5-button][desktop]:focus-within),
+.ui5-avatar-group-overflow-btn[desktop]:focus-within {
+	outline: var(--_ui5_avatar_outline);
+	outline-offset: var(--_ui5_avatar_overflow_button_focus_offset);
+}
+
+.ui5-avatar-group-overflow-btn::part(button):focus-visible:after {
 	outline: var(--_ui5_avatar_outline);
 	outline-offset: var(--_ui5_avatar_focus_offset);
+	border-radius: 50%;
 }
 
 .ui5-avatar-group-overflow-btn.ui5-avatar-group-overflow-btn-xs {

package/src/themes/DayPicker.css

@@ -223,11 +223,8 @@
 	outline: none;
 }
 
-.ui5-dp-item.ui5-dp-item--selected-between .ui5-dp-daytext,
-.ui5-dp-item[hovered] .ui5-dp-daytext {
-	border: var(--_ui5_daypicker_item_select_between_border);
+.ui5-dp-item.ui5-dp-item--selected-between .ui5-dp-daytext {
 	border-radius: var(--_ui5_daypicker_item_border_radius);
-	background-color: var(--_ui5_daypicker_item_selected_between_text_background);
 	color: var(--sapTextColor);
 	font-weight: var(--_ui5_daypicker_item_selected_between_text_font);
 }
@@ -240,8 +237,8 @@
 	border-radius: var(--_ui5_daypicker_item_now_selected_between_border_radius);
 }
 
-.ui5-dp-item.ui5-dp-item--selected-between,
-.ui5-dp-item[hovered] {
+.ui5-dp-item.ui5-dp-item--selected-between {
+	border: var(--_ui5_daypicker_item_select_between_border);
 	border-radius: var(--_ui5_daypicker_item_selected_between_border);
 	background: var(--_ui5_daypicker_item_selected_between_background);
 }

package/src/themes/Dialog.css

@@ -137,4 +137,12 @@
 
 ::slotted([slot="header"][ui5-bar]) {
 	box-shadow: none;
+}
+
+:host::backdrop {
+	background-color: var(--_ui5_popup_block_layer_background);
+}
+
+.ui5-block-layer {
+	display: block;
 }

package/src/themes/DropIndicator.css

@@ -12,6 +12,10 @@
 	background: var(--sapContent_DragAndDropActiveColor);
 }
 
+:host([orientation="Vertical"]) {
+	margin-left: -0.0625rem; /* half of the width */
+}
+
 :host([orientation="Horizontal"]) .ui5-di-needle {
 	height: 0.125rem;
 	width: 100%;
@@ -19,6 +23,18 @@
 	background: var(--sapContent_DragAndDropActiveColor);
 }
 
+:host([orientation="Horizontal"]) {
+	margin-top: -0.0625rem; /* half of the needle height */
+}
+
+:host([orientation="Horizontal"][placement="Before"][first]) {
+	margin-top: 0.3125rem; /* half of the needle height + half of the ear height */
+}
+
+:host([orientation="Horizontal"][placement="After"][last]) {
+	margin-top: -0.3125rem; /* half of the needle height + half of the ear height */
+}
+
 /* the ear of the needle */
 :host([orientation="Vertical"]) .ui5-di-needle::before {
 	left: -0.1875rem;

package/src/themes/Icon.css

@@ -50,7 +50,8 @@
 	color: var(--sapPositiveElementColor);
 }
 
-:host([interactive][focused]) .ui5-icon-root {
+:host([interactive][desktop]) .ui5-icon-root:focus-within,
+:host([interactive]) .ui5-icon-root:focus-visible {
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--ui5-icon-focus-border-radius);
 }

package/src/themes/MessageStrip.css

@@ -88,4 +88,157 @@
 	position: absolute;
 	top: var(--_ui5_message_strip_close_button_top);
 	inset-inline-end: var(--_ui5_message_strip_close_button_right);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-1,
+:host(:not([color-scheme])[design="ColorSet1"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_1_Background);
+	border-color: var(--sapIndicationColor_1_BorderColor);
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_2_Background);
+	border-color: var(--sapIndicationColor_2_BorderColor);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_3_Background);
+	border-color: var(--sapIndicationColor_3_BorderColor);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_4_Background);
+	border-color: var(--sapIndicationColor_4_BorderColor);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_5_Background);
+	border-color: var(--sapIndicationColor_5_BorderColor);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_6_Background);
+	border-color: var(--sapIndicationColor_6_BorderColor);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_7_Background);
+	border-color: var(--sapIndicationColor_7_BorderColor);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_8_Background);
+	border-color: var(--sapIndicationColor_8_BorderColor);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_9_Background);
+	border-color: var(--sapIndicationColor_9_BorderColor);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-1 {
+	background-color: var(--sapIndicationColor_10_Background);
+	border-color: var(--sapIndicationColor_10_BorderColor);
+}
+
+:host([color-scheme="1"]) .ui5-message-strip-root--color-set-2,
+:host(:not([color-scheme])[design="ColorSet2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_1_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_1_set_2_border_color)
+}
+
+:host([color-scheme="2"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_2_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_2_set_2_border_color);
+}
+
+:host([color-scheme="3"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_3_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_3_set_2_border_color);
+}
+
+:host([color-scheme="4"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_4_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_4_set_2_border_color);
+}
+
+:host([color-scheme="5"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_5_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_5_set_2_border_color);
+}
+
+:host([color-scheme="6"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_6_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_6_set_2_border_color);
+}
+
+:host([color-scheme="7"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_7_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_7_set_2_border_color);
+}
+
+:host([color-scheme="8"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_8_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_8_set_2_border_color);
+}
+
+:host([color-scheme="9"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_9_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_9_set_2_border_color);
+}
+
+:host([color-scheme="10"]) .ui5-message-strip-root--color-set-2 {
+	background-color: var(--_ui5_message_strip_scheme_10_set_2_background);
+	border-color: var(--_ui5_message_strip_scheme_10_set_2_border_color);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapContent_ContrastTextColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-root ::slotted([slot="icon"]){
+	color: var(--sapContent_ContrastIconColor);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-root .ui5-message-strip-text {
+	color: var(--sapTextColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button {
+	color: var(--_ui5_message_strip_close_button_color_set_1_color);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button,
+:host([design="ColorSet2"]) .ui5-message-strip-root ::slotted([slot="icon"]) { 
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:hover {
+	border-color: var(--sapContent_ContrastIconColor);
+	background-color: var(--_ui5_message_strip_close_button_color_set_1_background);
+	color: var(--_ui5_message_strip_close_button_color_set_1_hover_color);
+	text-shadow: var(--sapContent_ContrastTextShadow);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:hover {
+	background-color: var(--_ui5_message_strip_close_button_color_set_2_background);
+	border-color: var(--sapContent_IconColor);
+	color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_ContrastIconColor);
+}
+
+:host([design="ColorSet2"]) .ui5-message-strip-close-button:active {
+	background: none;
+	border-color: var(--sapContent_IconColor);
+}
+
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):after,
+:host([design="ColorSet1"]) .ui5-message-strip-close-button::part(button):before {
+	border-color: var(--sapContent_ContrastFocusColor);
 }

package/src/themes/Popover.css

@@ -89,3 +89,11 @@
 	box-shadow: var(--_ui5_popover_box_shadow);
 	transform: rotate(-45deg);
 }
+
+:host([modal]:not([hide-backdrop]))::backdrop {
+	background-color: var(--_ui5_popup_block_layer_background);
+}
+
+:host([modal]) .ui5-block-layer {
+	display: block;
+}

package/src/themes/PopupBlockLayer.css

@@ -1,17 +1,8 @@
 .ui5-block-layer {
 	position: fixed;
-	background-color: var(--_ui5_popup_block_layer_background);
-	top: -500px;
-	left: -500px;
-	right: -500px;
-	width: auto;
-	height: auto;
-	bottom: -500px;
+	z-index: -1;
+	display: none;
+	inset: -500px;
 	outline: none;
 	pointer-events: all;
 }
-
-:host .ui5-block-layer {
-	width: auto;
-	height: auto;
-}

package/src/themes/PopupsCommon.css

@@ -18,8 +18,8 @@
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    flex: 1 1 auto;
     outline: none;
-    justify-content: space-between;
 }
 
 .ui5-popup-root .ui5-popup-header-root {

package/src/themes/ProgressIndicator.css

@@ -10,6 +10,12 @@
 	padding-inline-end: var(--_ui5_progress_indicator_padding_end);
 }
 
+:host(:not([hidden])[hide-value]) {
+	padding-top: var(--_ui5_progress_indicator_padding_novalue);
+	padding-bottom: var(--_ui5_progress_indicator_padding_novalue);
+
+}
+
 .ui5-progress-indicator-root {
 	display: flex;
 	align-items: center;

package/src/themes/SplitButton.css

@@ -48,6 +48,7 @@
 
 :host([disabled]:not([hidden])) {
 	pointer-events: none;
+	opacity: var(--sapContent_DisabledOpacity);
 }
 
 :host([design="Positive"]:not([hidden])) {

package/src/themes/TextArea.css

@@ -178,26 +178,26 @@
 	min-height: calc(2 * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([growing]):not([growing-max-lines]) .ui5-textarea-inner {
+:host([growing]):not([growing-max-rows]) .ui5-textarea-inner {
 	max-height: 100%;
 }
 
-:host([growing-max-lines]) .ui5-textarea-mirror {
-	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+:host([growing-max-rows]) .ui5-textarea-mirror {
+	max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
 :host([rows="1"]) .ui5-textarea-inner {
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([growing-max-lines="1"]) .ui5-textarea-inner, :host([growing-max-lines="1"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"]) .ui5-textarea-inner, :host([growing-max-rows="1"]) .ui5-textarea-mirror {
 	max-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
-:host([rows="1"][growing-max-lines]) .ui5-textarea-inner, :host([rows="1"][growing-max-lines]) .ui5-textarea-mirror {
+:host([rows="1"][growing-max-rows]) .ui5-textarea-inner, :host([rows="1"][growing-max-rows]) .ui5-textarea-mirror {
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
-	max-height: calc((var(--_textarea_growing_max_lines) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
+	max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom));
 }
 
 :host([rows="1"][value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
@@ -213,8 +213,8 @@
 	min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning));
 }
 
-:host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Error"]) .ui5-textarea-mirror
-:host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Warning"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"][value-state="Error"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Error"]) .ui5-textarea-mirror
+:host([growing-max-rows="1"][value-state="Warning"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Warning"]) .ui5-textarea-mirror {
 	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
 	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning);
 }
@@ -230,7 +230,7 @@
 	min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize)  + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information));
 }
 
-:host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-lines="1"][value-state="Information"]) .ui5-textarea-mirror {
+:host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-mirror {
 	max-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top__ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom__ui5_textarea_padding_top_information);
 	min-height: var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_information);
 }

package/src/themes/base/Avatar-parameters.css

@@ -45,6 +45,8 @@
 	--_ui5_avatar_focus_width: 0.0625rem;
 	--_ui5_avatar_focus_color: var(--sapContent_FocusColor);
 
+	--_ui5_avatar_overflow_button_focus_offset: 0.0625rem;
+
 	--_ui5_avatar_fontsize_XS: 0.75rem;
 	--_ui5_avatar_fontsize_S: 1.125rem;
 	--_ui5_avatar_fontsize_M: 1.625rem;

package/src/themes/base/DayPicker-parameters.css

@@ -31,11 +31,11 @@
 	--_ui5_daypicker_item_now_outline: none;
 	--_ui5_daypicker_item_now_outline_offset: none;
 	--_ui5_daypicker_item_now_outline_offset_focus_after: var(--_ui5_daypicker_item_now_outline_offset);
-	--_ui5_daypicker_item_selected_between_border: 5%;
-	--_ui5_daypicker_item_selected_between_background: transparent;
+	--_ui5_daypicker_item_selected_between_border: 0.25rem;
+	--_ui5_daypicker_item_selected_between_background: var(--sapList_SelectionBackgroundColor);
 	--_ui5_daypicker_item_selected_between_text_background: var(--sapList_SelectionBackgroundColor);
 	--_ui5_daypicker_item_selected_between_text_font: inherit;
-	--_ui5_daypicker_item_selected_between_hover_background: inherit;
+	--_ui5_daypicker_item_selected_between_hover_background: var(--sapList_Hover_SelectionBackground);
 	--_ui5_daypicker_item_now_box_shadow: inset 0 0 0 0.0625rem var(--_ui5_daypicker_item_selected_border_color);
 	--_ui5_daypicker_item_selected_text_outline: none;
 	--_ui5_daypicker_item_now_not_selected_inset: 0;

package/src/themes/base/MessageStrip-parameters.css

@@ -15,4 +15,29 @@
 	--_ui5_message_strip_focus_offset: -2px;
 	--_ui5_message_strip_close_button_top: 0.125rem;
 	--_ui5_message_strip_close_button_right: 0.125rem;
+	/* Next two variables below are hardcoded values of sapButton_Lite_Hover_Background parameter with specified opacity*/
+	--_ui5_message_strip_close_button_color_set_1_background: #eaecee4d;
+	--_ui5_message_strip_close_button_color_set_2_background: #eaecee80;
+	--_ui5_message_strip_close_button_color_set_1_color: var(--sapButton_Emphasized_TextColor);
+	--_ui5_message_strip_close_button_color_set_1_hover_color: var(--sapButton_Emphasized_TextColor);
+	--_ui5_message_strip_scheme_1_set_2_background: var(--sapIndicationColor_1b);
+	--_ui5_message_strip_scheme_1_set_2_border_color: var(--sapIndicationColor_1b_BorderColor);
+	--_ui5_message_strip_scheme_2_set_2_background: var(--sapIndicationColor_2b);
+	--_ui5_message_strip_scheme_2_set_2_border_color: var(--sapIndicationColor_2b_BorderColor);
+	--_ui5_message_strip_scheme_3_set_2_background: var(--sapIndicationColor_3b);
+	--_ui5_message_strip_scheme_3_set_2_border_color: var(--sapIndicationColor_3b_BorderColor);
+	--_ui5_message_strip_scheme_4_set_2_background: var(--sapIndicationColor_4b);
+	--_ui5_message_strip_scheme_4_set_2_border_color: var(--sapIndicationColor_4b_BorderColor);
+	--_ui5_message_strip_scheme_5_set_2_background: var(--sapIndicationColor_5b);
+	--_ui5_message_strip_scheme_5_set_2_border_color: var(--sapIndicationColor_5b_BorderColor);
+	--_ui5_message_strip_scheme_6_set_2_background: var(--sapIndicationColor_6b);
+	--_ui5_message_strip_scheme_6_set_2_border_color: var(--sapIndicationColor_6b_BorderColor);
+	--_ui5_message_strip_scheme_7_set_2_background: var(--sapIndicationColor_7b);
+	--_ui5_message_strip_scheme_7_set_2_border_color: var(--sapIndicationColor_7b_BorderColor);
+	--_ui5_message_strip_scheme_8_set_2_background: var(--sapIndicationColor_8b);
+	--_ui5_message_strip_scheme_8_set_2_border_color: var(--sapIndicationColor_8b_BorderColor);
+	--_ui5_message_strip_scheme_9_set_2_background: var(--sapIndicationColor_9b);
+	--_ui5_message_strip_scheme_9_set_2_border_color: var(--sapIndicationColor_9b_BorderColor);
+	--_ui5_message_strip_scheme_10_set_2_background: var(--sapIndicationColor_10b);
+	--_ui5_message_strip_scheme_10_set_2_border_color: var(--sapIndicationColor_10b_BorderColor);
 }

package/src/themes/base/ProgressIndicator-parameters.css

@@ -21,12 +21,14 @@
 
     --_ui5_progress_indicator_side_points_visibility: none;
 
+    --_ui5_progress_indicator_padding_novalue: 0;
+
     --_ui5_progress_indicator_host_height: 1rem;
     --_ui5_progress_indicator_host_min_height: 1rem;
     --_ui5_progress_indicator_root_border_radius: 0.5rem;
     --_ui5_progress_indicator_root_height: 100%;
     --_ui5_progress_indicator_root_overflow: hidden;
-    
+
     --_ui5_progress_indicator_bar_height: 100%;
     --_ui5_progress_indicator_bar_border_radius: 0.5rem 0 0 0.5rem;
 

package/src/themes/sap_belize_hcb/MessageStrip-parameters.css

@@ -6,4 +6,26 @@
 	--_ui5_message_strip_icon_top: 0.375rem;
 	--_ui5_message_strip_focus_width: 0.125rem;
 	--_ui5_message_strip_focus_offset: -2px;
+	--_ui5_message_strip_close_button_color_set_1_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_close_button_color_set_2_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_scheme_1_set_2_background: var(--sapIndicationColor_1_Background);
+	--_ui5_message_strip_scheme_1_set_2_border_color:  var(--sapIndicationColor_1_BorderColor);
+	--_ui5_message_strip_scheme_2_set_2_background: var(--sapIndicationColor_2_Background);
+	--_ui5_message_strip_scheme_2_set_2_border_color: var(--sapIndicationColor_2_BorderColor);
+	--_ui5_message_strip_scheme_3_set_2_background: var(--sapIndicationColor_3_Background);
+	--_ui5_message_strip_scheme_3_set_2_border_color: var(--sapIndicationColor_3_BorderColor);
+	--_ui5_message_strip_scheme_4_set_2_background: var(--sapIndicationColor_4_Background);
+	--_ui5_message_strip_scheme_4_set_2_border_color: var(--sapIndicationColor_4_BorderColor);
+	--_ui5_message_strip_scheme_5_set_2_background: var(--sapIndicationColor_5_Background);
+	--_ui5_message_strip_scheme_5_set_2_border_color: var(--sapIndicationColor_5_BorderColor);
+	--_ui5_message_strip_scheme_6_set_2_background: var(--sapIndicationColor_6_Background);
+	--_ui5_message_strip_scheme_6_set_2_border_color: var(--sapIndicationColor_6_BorderColor);
+	--_ui5_message_strip_scheme_7_set_2_background: var(--sapIndicationColor_7_Background);
+	--_ui5_message_strip_scheme_7_set_2_border_color: var(--sapIndicationColor_7_BorderColor);
+	--_ui5_message_strip_scheme_8_set_2_background: var(--sapIndicationColor_8_Background);
+	--_ui5_message_strip_scheme_8_set_2_border_color: var(--sapIndicationColor_8_BorderColor);
+	--_ui5_message_strip_scheme_9_set_2_background: var(--sapIndicationColor_9_Background);
+	--_ui5_message_strip_scheme_9_set_2_border_color: var(--sapIndicationColor_9_BorderColor);
+	--_ui5_message_strip_scheme_10_set_2_background: var(--sapIndicationColor_10_Background);
+	--_ui5_message_strip_scheme_10_set_2_border_color: var(--sapIndicationColor_10_BorderColor);
 }

package/src/themes/sap_belize_hcw/MessageStrip-parameters.css

@@ -6,4 +6,26 @@
 	--_ui5_message_strip_icon_top: 0.375rem;
 	--_ui5_message_strip_focus_width: 0.125rem;
 	--_ui5_message_strip_focus_offset: -2px;
+	--_ui5_message_strip_close_button_color_set_1_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_close_button_color_set_2_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_scheme_1_set_2_background: var(--sapIndicationColor_1_Background);
+	--_ui5_message_strip_scheme_1_set_2_border_color:  var(--sapIndicationColor_1_BorderColor);
+	--_ui5_message_strip_scheme_2_set_2_background: var(--sapIndicationColor_2_Background);
+	--_ui5_message_strip_scheme_2_set_2_border_color: var(--sapIndicationColor_2_BorderColor);
+	--_ui5_message_strip_scheme_3_set_2_background: var(--sapIndicationColor_3_Background);
+	--_ui5_message_strip_scheme_3_set_2_border_color: var(--sapIndicationColor_3_BorderColor);
+	--_ui5_message_strip_scheme_4_set_2_background: var(--sapIndicationColor_4_Background);
+	--_ui5_message_strip_scheme_4_set_2_border_color: var(--sapIndicationColor_4_BorderColor);
+	--_ui5_message_strip_scheme_5_set_2_background: var(--sapIndicationColor_5_Background);
+	--_ui5_message_strip_scheme_5_set_2_border_color: var(--sapIndicationColor_5_BorderColor);
+	--_ui5_message_strip_scheme_6_set_2_background: var(--sapIndicationColor_6_Background);
+	--_ui5_message_strip_scheme_6_set_2_border_color: var(--sapIndicationColor_6_BorderColor);
+	--_ui5_message_strip_scheme_7_set_2_background: var(--sapIndicationColor_7_Background);
+	--_ui5_message_strip_scheme_7_set_2_border_color: var(--sapIndicationColor_7_BorderColor);
+	--_ui5_message_strip_scheme_8_set_2_background: var(--sapIndicationColor_8_Background);
+	--_ui5_message_strip_scheme_8_set_2_border_color: var(--sapIndicationColor_8_BorderColor);
+	--_ui5_message_strip_scheme_9_set_2_background: var(--sapIndicationColor_9_Background);
+	--_ui5_message_strip_scheme_9_set_2_border_color: var(--sapIndicationColor_9_BorderColor);
+	--_ui5_message_strip_scheme_10_set_2_background: var(--sapIndicationColor_10_Background);
+	--_ui5_message_strip_scheme_10_set_2_border_color: var(--sapIndicationColor_10_BorderColor);
 }

package/src/themes/sap_fiori_3/MessageStrip-parameters.css

@@ -0,0 +1,7 @@
+@import "../base/MessageStrip-parameters.css";
+
+:root{
+	/* Next two variables below are hardcoded values of sapButton_Lite_Hover_Background parameter with specified opacity*/
+	--_ui5_message_strip_close_button_color_set_1_background: #ebf5fe4d;
+	--_ui5_message_strip_close_button_color_set_2_background: #ebf5fe80;
+}

package/src/themes/sap_fiori_3/parameters-bundle.css

@@ -24,7 +24,7 @@
 @import "../base/ListItemBase-parameters.css";
 @import "../base/Menu-parameters.css";
 @import "./MonthPicker-parameters.css";
-@import "../base/MessageStrip-parameters.css";
+@import "./MessageStrip-parameters.css";
 @import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";

package/src/themes/sap_fiori_3_dark/MessageStrip-parameters.css

@@ -0,0 +1,9 @@
+@import "../base/MessageStrip-parameters.css";
+
+:root{
+	/* Next two variables below are hardcoded values of sapButton_Lite_Hover_Background parameter with specified opacity*/
+	--_ui5_message_strip_close_button_color_set_1_background: #062e4f1a;
+	--_ui5_message_strip_close_button_color_set_2_background: #062e4f80;
+	--_ui5_message_strip_close_button_color_set_1_color: var(--sapContent_ContrastIconColor);
+	--_ui5_message_strip_close_button_color_set_1_hover_color: var(--sapContent_ContrastIconColor);
+}

package/src/themes/sap_fiori_3_dark/parameters-bundle.css

@@ -24,7 +24,7 @@
 @import "../base/ListItemBase-parameters.css";
 @import "../base/Menu-parameters.css";
 @import "./MonthPicker-parameters.css";
-@import "../base/MessageStrip-parameters.css";
+@import "./MessageStrip-parameters.css";
 @import "../base/Panel-parameters.css";
 @import "../base/Popover-parameters.css";
 @import "../base/PopupsCommon-parameters.css";

package/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css

@@ -6,4 +6,26 @@
 	--_ui5_message_strip_icon_top: 0.375rem;
 	--_ui5_message_strip_focus_width: 0.125rem;
 	--_ui5_message_strip_focus_offset: -4px;
+	--_ui5_message_strip_close_button_color_set_1_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_close_button_color_set_2_background: var(--sapButton_Lite_Hover_Background);
+	--_ui5_message_strip_scheme_1_set_2_background: var(--sapIndicationColor_1_Background);
+	--_ui5_message_strip_scheme_1_set_2_border_color:  var(--sapIndicationColor_1_BorderColor);
+	--_ui5_message_strip_scheme_2_set_2_background: var(--sapIndicationColor_2_Background);
+	--_ui5_message_strip_scheme_2_set_2_border_color: var(--sapIndicationColor_2_BorderColor);
+	--_ui5_message_strip_scheme_3_set_2_background: var(--sapIndicationColor_3_Background);
+	--_ui5_message_strip_scheme_3_set_2_border_color: var(--sapIndicationColor_3_BorderColor);
+	--_ui5_message_strip_scheme_4_set_2_background: var(--sapIndicationColor_4_Background);
+	--_ui5_message_strip_scheme_4_set_2_border_color: var(--sapIndicationColor_4_BorderColor);
+	--_ui5_message_strip_scheme_5_set_2_background: var(--sapIndicationColor_5_Background);
+	--_ui5_message_strip_scheme_5_set_2_border_color: var(--sapIndicationColor_5_BorderColor);
+	--_ui5_message_strip_scheme_6_set_2_background: var(--sapIndicationColor_6_Background);
+	--_ui5_message_strip_scheme_6_set_2_border_color: var(--sapIndicationColor_6_BorderColor);
+	--_ui5_message_strip_scheme_7_set_2_background: var(--sapIndicationColor_7_Background);
+	--_ui5_message_strip_scheme_7_set_2_border_color: var(--sapIndicationColor_7_BorderColor);
+	--_ui5_message_strip_scheme_8_set_2_background: var(--sapIndicationColor_8_Background);
+	--_ui5_message_strip_scheme_8_set_2_border_color: var(--sapIndicationColor_8_BorderColor);
+	--_ui5_message_strip_scheme_9_set_2_background: var(--sapIndicationColor_9_Background);
+	--_ui5_message_strip_scheme_9_set_2_border_color: var(--sapIndicationColor_9_BorderColor);
+	--_ui5_message_strip_scheme_10_set_2_background: var(--sapIndicationColor_10_Background);
+	--_ui5_message_strip_scheme_10_set_2_border_color: var(--sapIndicationColor_10_BorderColor);
 }