feat(ui5-dialog, ui5-popup): SAP Horizon theme implementation (#4175)

Author: GerganaKremenska

packages/main/src/themes/Dialog.css

@@ -33,7 +33,8 @@
 }
 
 .ui5-popup-header-root:focus {
-	outline: var(--_ui5_dialog_header_focus_width) dotted var(--sapContent_FocusColor);
+	outline: var(--_ui5_dialog_outline);
+	border-radius: var(--_ui5_dialog_header_border_radius);
 	outline-offset: var(--_ui5_dialog_header_focus_offset);
 }
 
@@ -55,8 +56,8 @@
 
 .ui5-popup-resize-handle {
 	position: absolute;
-	bottom: -0.0625rem;
-	right: -0.25rem;
+	bottom: var(--_ui5_dialog_resize_handle_bottom);
+	right: var(--_ui5_dialog_resize_handle_right);
 	cursor: se-resize;
 	color: var(--_ui5_dialog_resize_handle_color);
 }

packages/main/src/themes/PopupsCommon.css

@@ -28,13 +28,13 @@
 }
 
 .ui5-popup-root .ui5-popup-header-root {
-    box-shadow: var(--sapContent_Shadow0);
+    box-shadow: var(--_ui5_popup_header_shadow);
     margin-bottom: 0.125rem;
 }
 
 .ui5-popup-footer-root {
     background: var(--sapPageFooter_Background);
-    border-top: 1px solid var(--sapPageFooter_BorderColor);
+    border-top: var(--_ui5_popup_footer_border_top);
     color: var(--sapPageFooter_TextColor);
 }
 
@@ -44,7 +44,7 @@
     margin: 0;
     color: var(--sapPageHeader_TextColor);
     font-size: 1rem;
-    font-weight: 400;
+    font-weight: var(--_ui5_popup_header_footer_font_weight);
     font-family: "72override", var(--sapFontFamily);
     display: flex;
     justify-content: center;

packages/main/src/themes/base/Dialog-parameters.css

@@ -2,4 +2,8 @@
 	--_ui5_dialog_resize_handle_color: var(--sapButton_Lite_TextColor);
 	--_ui5_dialog_header_focus_width: 0.0625rem;
 	--_ui5_dialog_header_focus_offset: -0.1875rem;
+	--_ui5_dialog_outline: var(--_ui5_dialog_header_focus_width) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+	--_ui5_dialog_header_border_radius: 0px;
+	--_ui5_dialog_resize_handle_right: -0.25rem;
+	--_ui5_dialog_resize_handle_bottom: -0.0625rem;
 }

packages/main/src/themes/base/PopupsCommon-parameters.css

@@ -2,4 +2,7 @@
 	--_ui5_popup_content_padding: .4375em;
 	--_ui5_popup_viewport_margin: 10px;
 	--_ui5-popup-border-radius: 0.25rem;
+	--_ui5_popup_header_shadow: var(--sapContent_Shadow0);
+	--_ui5_popup_footer_border_top: 1px solid var(--sapPageFooter_BorderColor);
+	--_ui5_popup_header_footer_font_weight: 400;
 }

packages/main/src/themes/sap_horizon/Dialog-parameters.css

@@ -0,0 +1,11 @@
+@import "../base/Dialog-parameters.css";
+
+:root {
+	--_ui5_dialog_header_focus_offset: 0px;
+	--_ui5_dialog_header_focus_width: 0.125rem;
+	--_ui5_dialog_header_border_radius: 0.75rem 0.75rem 0 0;
+	--_ui5_dialog_resize_handle_bottom: 3px;
+	--_ui5_dialog_resize_handle_right: 1px;
+	--_ui5_dialog_header_focus_offset: -2px;
+	--_ui5_dialog_header_focus_width: 2px;
+}

packages/main/src/themes/sap_horizon/PopupsCommon-parameters.css

@@ -0,0 +1,10 @@
+@import "../base/PopupsCommon-parameters.css";
+
+:root {
+	--_ui5_popup_content_padding: .4375em;
+	--_ui5_popup_viewport_margin: 10px;
+	--_ui5-popup-border-radius: 0.75rem;
+	--_ui5_popup_header_shadow: none;
+	--_ui5_popup_footer_border_top: none;
+	--_ui5_popup_header_footer_font_weight: bold;
+}

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

@@ -10,6 +10,7 @@
 @import "../base/DatePicker-parameters.css";
 @import "./DayPicker-parameters.css";
 @import "../base/Dialog-parameters.css";
+@import "./Dialog-parameters.css";
 @import "../base/GroupHeaderListItem-parameters.css";
 @import "./Input-parameters.css";
 @import "../base/InputIcon-parameters.css";
@@ -20,6 +21,7 @@
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
 @import "../base/PopupsCommon-parameters.css";
+@import "./PopupsCommon-parameters.css";
 @import "../base/ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "./RatingIndicator-parameters.css";