feat(ui5-message-strip): introduce custom colors (#8757)

With the following enhancement, the end user will be able to create message strips with custom colors from a predefined set of colors. That is achieved enhancing the `design` property enum `MessageStripDesign` with two new options `ColorSet1` and `ColorSet2` as well as the newly introduced property `colorScheme`.
Setting the `design` property value to ColorSet1` or `ColorSet2`, then you are able to choose between 10 different colors for each using `colorScheme` property with values from "1" to "10".

packages/main/src/MessageStrip.ts

@@ -25,6 +25,7 @@ import {
 	MESSAGE_STRIP_WARNING,
 	MESSAGE_STRIP_SUCCESS,
 	MESSAGE_STRIP_INFORMATION,
+	MESSAGE_STRIP_CUSTOM,
 } from "./generated/i18n/i18n-defaults.js";
 
 // Styles
@@ -35,13 +36,8 @@ enum DesignClassesMapping {
 	Positive = "ui5-message-strip-root--positive",
 	Negative = "ui5-message-strip-root--negative",
 	Warning = "ui5-message-strip-root--warning",
-}
-
-enum IconMapping {
-	Information = "information",
-	Positive = "sys-enter-2",
-	Negative = "error",
-	Warning = "alert",
+	ColorSet1 = "ui5-message-strip-root--color-set-1",
+	ColorSet2 = "ui5-message-strip-root--color-set-2",
 }
 
 type DesignTypeAnnouncemnt = Record<MessageStripDesign, string>;
@@ -108,9 +104,24 @@ class MessageStrip extends UI5Element {
 	})
 	design!: `${MessageStripDesign}`;
 
+	/**
+	 * Defines the color scheme of the component.
+	 * There are 10 predefined schemes.
+	 * To use one you can set a number from `"1"` to `"10"`. The `colorScheme` `"1"` will be set by default.
+	 *
+	 * @default "1"
+	 * @public
+	 * @since 2.0
+	 */
+	@property({ defaultValue: "1" })
+	colorScheme!: string;
+
 	/**
 	 * Defines whether the MessageStrip will show an icon in the beginning.
 	 * You can directly provide an icon with the `icon` slot. Otherwise, the default icon for the type will be used.
+	 *
+	 *  * **Note:** If <code>MessageStripDesign.ColorSet1</code> or <code>MessageStripDesign.ColorSet2</code> value is set to the <code>design</code> property, default icon will not be presented.
+	 *
 	 * @default false
 	 * @public
 	 * @since 1.0.0-rc.15
@@ -158,6 +169,8 @@ class MessageStrip extends UI5Element {
 			Positive: getTranslation(MESSAGE_STRIP_SUCCESS),
 			Negative: getTranslation(MESSAGE_STRIP_ERROR),
 			Warning: getTranslation(MESSAGE_STRIP_WARNING),
+			ColorSet1: getTranslation(MESSAGE_STRIP_CUSTOM),
+			ColorSet2: getTranslation(MESSAGE_STRIP_CUSTOM),
 		};
 	}
 
@@ -189,7 +202,18 @@ class MessageStrip extends UI5Element {
 	}
 
 	get standardIconName() {
-		return IconMapping[this.design];
+		switch (this.design) {
+		case MessageStripDesign.Warning:
+			return "alert";
+		case MessageStripDesign.Positive:
+			return "sys-enter-2";
+		case MessageStripDesign.Negative:
+			return "error";
+		case MessageStripDesign.Information:
+			return "information";
+		default:
+			return null;
+		}
 	}
 
 	get designClasses() {

packages/main/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
 

packages/main/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);
 }

packages/main/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);
 }

packages/main/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);
 }

packages/main/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);
 }

packages/main/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;
+}

packages/main/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";

packages/main/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);
+}

packages/main/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";

packages/main/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);
 }