feat(ui5-message-strip): apply SAP Horizon parameters (#4941)

SAP · Mar 28, 2022 · 8919965 · 8919965
1 parent b501153
commit 8919965
Show file tree

Hide file tree

Showing 12 changed files with 17 additions and 33 deletions.
diff --git a/packages/main/src/themes/MessageStrip.css b/packages/main/src/themes/MessageStrip.css
@@ -10,7 +10,7 @@
 	width: 100%;
 	height: 100%;
 	display: flex;
-	border-radius: var(--_ui5_message_strip_border_radius);
+	border-radius: var(--sapPopover_BorderCornerRadius);
 	padding: var(--_ui5_message_strip_padding);
 	border-width: var(--_ui5_message_strip_border_width);
 	border-style: solid;
@@ -28,7 +28,7 @@
 
 .ui5-message-strip-root--info {
 	background-color: var(--sapInformationBackground);
-	border-color: var(--_ui5_message_strip_information_border_color);
+	border-color: var(--sapMessage_InformationBorderColor);
 	color: var(--sapTextColor);
 }
 
@@ -38,7 +38,7 @@
 
 .ui5-message-strip-root--positive {
 	background-color: var(--sapSuccessBackground);
-	border-color: var(--_ui5_message_strip_success_border_color);
+	border-color: var(--sapMessage_SuccessBorderColor);
 }
 
 .ui5-message-strip-root--positive .ui5-message-strip-icon {
@@ -47,7 +47,7 @@
 
 .ui5-message-strip-root--negative {
 	background-color: var(--sapErrorBackground);
-	border-color: var(--_ui5_message_strip_error_border_color);
+	border-color: var(--sapMessage_ErrorBorderColor);
 }
 
 .ui5-message-strip-root--negative .ui5-message-strip-icon {
@@ -56,7 +56,7 @@
 
 .ui5-message-strip-root--warning {
 	background-color: var(--sapWarningBackground);
-	border-color: var(--_ui5_message_strip_warning_border_color);
+	border-color: var(--sapMessage_WarningBorderColor);
 }
 
 .ui5-message-strip-root--warning .ui5-message-strip-icon {
@@ -88,12 +88,12 @@
 	min-height: var(--_ui5_message_strip_close_button_size);
 	position: absolute;
 	right: 0.125rem;
-	top: 0.125rem;
+	top: var(--_ui5_message_strip_close_button_top);
 }
 
 .ui5-message-strip-close-button::part(icon) {
-	width: .75rem;
-	height: .75rem;
+	width: 1rem;
+	height: 1rem;
 }
 
 /* RTL */

diff --git a/packages/main/src/themes/base/MessageStrip-parameters.css b/packages/main/src/themes/base/MessageStrip-parameters.css
@@ -1,10 +1,5 @@
 :root{
 	--_ui5_message_strip_icon_width: 2.5rem;
-	--_ui5_message_strip_border_radius: 0.1875rem;
-	--_ui5_message_strip_success_border_color: var(--sapSuccessBorderColor);
-	--_ui5_message_strip_error_border_color: var(--sapErrorBorderColor);
-	--_ui5_message_strip_warning_border_color: var(--sapWarningBorderColor);
-	--_ui5_message_strip_information_border_color: var(--sapInformationBorderColor);
 	--_ui5_message_strip_button_border_width: 0;
 	--_ui5_message_strip_button_border_style: none;
 	--_ui5_message_strip_button_border_color: transparent;
@@ -18,4 +13,5 @@
 	--_ui5_message_strip_icon_top: 0.4375rem;
 	--_ui5_message_strip_focus_width: 1px;
 	--_ui5_message_strip_focus_offset: -2px;
+	--_ui5_message_strip_close_button_top: 0.125rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css b/packages/main/src/themes/sap_belize_hcb/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css b/packages/main/src/themes/sap_belize_hcw/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css b/packages/main/src/themes/sap_horizon/MessageStrip-parameters.css
diff --git a/packages/main/src/themes/sap_horizon/parameters-bundle.css b/packages/main/src/themes/sap_horizon/parameters-bundle.css
@@ -21,7 +21,7 @@
 @import "./List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
-@import "./MessageStrip-parameters.css";
+@import "../base/MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_dark/MessageStrip-parameters.css b/packages/main/src/themes/sap_horizon_dark/MessageStrip-parameters.css
diff --git a/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css b/packages/main/src/themes/sap_horizon_dark/parameters-bundle.css
@@ -21,7 +21,7 @@
 @import "./List-parameters.css";
 @import "./ListItemBase-parameters.css";
 @import "./MonthPicker-parameters.css";
-@import "./MessageStrip-parameters.css";
+@import "../base/MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";

diff --git a/packages/main/src/themes/sap_horizon_hcb/MessageStrip-parameters.css b/packages/main/src/themes/sap_horizon_hcb/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/MessageStrip-parameters.css b/packages/main/src/themes/sap_horizon_hcw/MessageStrip-parameters.css
@@ -7,4 +7,5 @@
 	--_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_top: 0.1875rem;
 }