feat(ui5-panel): implement SAP Horizon themes (#5058)

* feat(ui5-panel): implement SAP Horizon themes - existing themes adjustments - implementation of Horizon themes Related to: #5007 * remove font-weight * additional fixes
SAP · Apr 19, 2022 · 67565d5 · 67565d5
1 parent b09dd35
commit 67565d5
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 24 deletions.
diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css
@@ -6,8 +6,11 @@
 
 :host {
 	font-family: "72override", var(--sapFontFamily);
-	background-color: var(--_ui5_panel_background_color);
+	background-color: var(--sapGroup_TitleBackground);
 	border-radius: var(--_ui5_panel_border_radius);
+}
+
+:host(:not([collapsed])) {
 	border-bottom: var(--_ui5_panel_border_bottom);
 }
 
@@ -16,20 +19,18 @@
 }
 
 .ui5-panel-header {
-	height: var(--_ui5_panel_header_height);
+	min-height: var(--_ui5_panel_header_height);
 	width: 100%;
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
 	outline: none;
 	box-sizing: border-box;
-	padding-right: 1rem;
-	padding-left: .25rem;
-	border-bottom: 1px solid transparent;
+	padding-right: var(--_ui5_panel_header_padding_right);
 }
 
 .ui5-panel-header-icon {
-	color: var(--sapContent_IconColor);
+	color: var(--_ui5_panel_icon_color);
 }
 
 .ui5-panel-header-button-animated {
@@ -68,10 +69,10 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	font-family: "72override", var(--sapFontHeaderFamily);
-	font-size: var(--sapFontHeader5Size);
+	font-size: var(--sapGroup_TitleFontSize);
 	font-weight: normal;
 	color: var(--sapGroup_TitleTextColor);
-	font-weight: var(--_ui5_panel_title_font_weight);
+	font-weight: normal;
 }
 
 .ui5-panel-content {
@@ -91,6 +92,16 @@
 	margin-right: .25rem;
 }
 
-:host([fixed]:not([collapsed]):not([_has-header])) .ui5-panel-header {
+:host([fixed]:not([collapsed]):not([_has-header])) .ui5-panel-header,
+:host([collapsed]) .ui5-panel-header {
 	border-bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+}
+
+:host([collapsed]) .ui5-panel-header {
+	border-bottom-left-radius: var(--_ui5_panel_border_radius);
+	border-bottom-right-radius: var(--_ui5_panel_border_radius);
+}
+
+:host(:not([fixed]):not([collapsed])) .ui5-panel-header {
+	border-bottom: var(--_ui5_panel_default_header_border);
 }
diff --git a/packages/main/src/themes/base/Panel-parameters.css b/packages/main/src/themes/base/Panel-parameters.css
@@ -1,11 +1,11 @@
 :root {
 	--_ui5_panel_focus_border:   var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-	--_ui5_panel_header_height: 3rem;
 	--_ui5_panel_button_root_width: 3rem;
-	--_ui5_panel_background_color: var(--sapGroup_TitleBackground);
 	--_ui5_panel_border_radius: 0px;
 	--_ui5_panel_border_radius_expanded: 0;
-	--_ui5_panel_border_bottom: 1px solid var(--sapGroup_TitleBorderColor);
+	--_ui5_panel_default_header_border: none;
+	--_ui5_panel_border_bottom: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	--_ui5_panel_outline_offset: -3px;
-	--_ui5_panel_title_font_weight: normal;
+	--_ui5_panel_icon_color: var(--sapContent_IconColor);
+	--_ui5_panel_header_padding_right: 0.5rem;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -92,6 +92,9 @@
 	--_ui5_textarea_padding: 0.5rem 0.625rem;
 	--_ui5_textarea_margin: .25rem 0;
 
+	/* Panel */
+	--_ui5_panel_header_height: 2.75rem;
+
 	/* Radio Button */
 	--_ui5_radio_button_height: 2.75rem;
 	--_ui5_radio_button_label_side_padding: .875rem;
@@ -232,8 +235,8 @@
 	--_ui5_list_busy_row_height: 2rem;
 
 	--_ui5_month_picker_item_height: 2rem;
-	--_ui5_panel_header_height: 2rem;
 	--_ui5_year_picker_item_height: 2rem;
+	--_ui5_panel_header_height: 2.5rem;
 
 	--_ui5_tokenizer_root_padding: 0.125rem;
 	--_ui5_token_height: 1.125rem;

diff --git a/packages/main/src/themes/sap_belize/Panel-parameters.css b/packages/main/src/themes/sap_belize/Panel-parameters.css
@@ -0,0 +1,12 @@
+@import "../base/Panel-parameters.css";
+
+:root {
+	--_ui5_panel_header_padding_right: 1rem;
+	--_ui5_panel_header_height: 3rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_panel_header_height: 2rem;
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "../base/ListItemBase-parameters.css";
 @import "../base/MessageStrip-parameters.css";
 @import "../base/MonthPicker-parameters.css";
-@import "../base/Panel-parameters.css";
+@import "./Panel-parameters.css";
 @import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";

diff --git a/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css b/packages/main/src/themes/sap_belize_hcb/Panel-parameters.css
@@ -2,4 +2,12 @@
 
 :root {
 	--_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_panel_header_padding_right: 1rem;
+	--_ui5_panel_header_height: 3rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_panel_header_height: 2rem;
 }
diff --git a/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css b/packages/main/src/themes/sap_belize_hcw/Panel-parameters.css
@@ -2,4 +2,12 @@
 
 :root {
 	--_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_panel_header_padding_right: 1rem;
+	--_ui5_panel_header_height: 3rem;
+}
+
+[data-ui5-compact-size],
+.ui5-content-density-compact,
+.sapUiSizeCompact {
+	--_ui5_panel_header_height: 2rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_header_height: 2.75rem;
 	--_ui5_panel_button_root_width: 2.75rem;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_header_height: 2.75rem;
 	--_ui5_panel_button_root_width: 2.75rem;
 }
diff --git a/packages/main/src/themes/sap_horizon/Panel-parameters.css b/packages/main/src/themes/sap_horizon/Panel-parameters.css
@@ -1,12 +1,11 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_header_height: 2.75rem;
 	--_ui5_panel_button_root_width: 2.75rem;
-	--_ui5_panel_background_color: var(--sapGroup_ContentBackground);
 	--_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_panel_border_bottom: none;
+	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	--_ui5_panel_outline_offset: -0.125rem;
-	--_ui5_panel_title_font_weight: bold;
 	--_ui5_panel_border_radius_expanded: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+	--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css
@@ -1,12 +1,11 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_header_height: 2.75rem;
 	--_ui5_panel_button_root_width: 2.75rem;
-	--_ui5_panel_background_color: var(--sapGroup_ContentBackground);
 	--_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius);
 	--_ui5_panel_border_bottom: none;
+	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
 	--_ui5_panel_outline_offset: -0.125rem;
-	--_ui5_panel_title_font_weight: bold;
 	--_ui5_panel_border_radius_expanded: var(--sapElement_BorderCornerRadius) var(--sapElement_BorderCornerRadius) 0 0;
+	--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css b/packages/main/src/themes/sap_horizon_exp/Panel-parameters.css
@@ -1,6 +1,5 @@
 @import "../base/Panel-parameters.css";
 
 :root {
-	--_ui5_panel_header_height: 2.75rem;
 	--_ui5_panel_button_root_width: 2.75rem;
 }
diff --git a/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcb/Panel-parameters.css
@@ -2,4 +2,7 @@
 
 :root {
 	--_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	--_ui5_panel_outline_offset: -0.125rem;
+	--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);
 }
diff --git a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css
@@ -2,4 +2,8 @@
 
 :root {
 	--_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor);
+	--_ui5_panel_button_root_width: 2.75rem;
+	--_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor);
+	--_ui5_panel_outline_offset: -0.125rem;
+	--_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);
 }