fix(ui5-calendar): adjust picker styles (#4672)

The ui5-calendar component styles are now adjusted according to the visual specification:
-The ui5-datepicker popover content paddings are now removed.
-The ui5-calendar component paddings are now compliant with the visual specification for cozy and compact form factor mode.
-The font styles and colors of the ui5-calendar-header buttons, week numbers and day names are now compliant with the visual specification.

packages/main/src/DatePickerPopover.hbs

@@ -6,7 +6,7 @@
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
 	hide-arrow
-	with-padding
+	no-padding
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"

packages/main/src/themes/Calendar.css

@@ -7,12 +7,17 @@
     box-sizing: border-box;
     height: var(--_ui5_calendar_height);
     width: var(--_ui5_calendar_width);
-    padding: var(--_ui5_calendar_padding);
+    padding: var(--_ui5_calendar_top_bottom_padding) var(--_ui5_calendar_left_right_padding) 0;
     display: flex;
     flex-direction: column-reverse;
     justify-content: flex-end;
 }
 
 .ui5-cal-root [ui5-calendar-header] {
     height: var(--_ui5_calendar_header_height);
+    font-family: var(--_ui5_button_fontFamily);
 }
+
+.ui5-cal-root .ui5-cal-content {
+    padding: 0 var(--_ui5_calendar_left_right_padding) var(--_ui5_calendar_top_bottom_padding);
+}

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

@@ -10,8 +10,8 @@
 	--_ui5_daypicker_item_othermonth_hover_color: var(--sapContent_LabelColor);
 	--_ui5_daypicker_item_border_radius: 0;
 	--_ui5_daypicker_item_now_inner_border_radius: 0;
-	--_ui5_daypicker_dayname_color: var(--sapContent_LabelColor);
-	--_ui5_daypicker_weekname_color: var(--sapContent_LabelColor);
+	--_ui5_daypicker_dayname_color: var(--sapTextColor);
+	--_ui5_daypicker_weekname_color: var(--sapTextColor);
 	--_ui5_daypicker_item_outline_width: 1px;
 	--_ui5_daypicker_item_outline_offset: 1px;
 	--_ui5_daypicker_item_now_selected_outline_offset: 2px;

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

@@ -2,7 +2,8 @@
 	/* Calendar */
 	--_ui5_calendar_height: 24.5rem;
 	--_ui5_calendar_width: 20.5rem;
-	--_ui5_calendar_padding: 0.75rem;
+	--_ui5_calendar_left_right_padding:  0.5rem;
+	--_ui5_calendar_top_bottom_padding: 1rem;
 	--_ui5_calendar_header_height: 3rem;
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
 	--_ui5_calendar_header_padding: 0.25rem 0;
@@ -132,7 +133,8 @@
 	/* Calendar */
 	--_ui5_calendar_height: 18rem;
 	--_ui5_calendar_width: 17.75rem;
-	--_ui5_calendar_padding: 0.5rem;
+	--_ui5_calendar_left_right_padding: 0.25rem;
+	--_ui5_calendar_top_bottom_padding: 0.5rem;
 	--_ui5_calendar_header_height: 2rem;
 	--_ui5_calendar_header_arrow_button_width: 2rem;
 	--_ui5_calendar_header_padding: 0;

packages/main/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css

@@ -4,8 +4,6 @@
 	--_ui5_daypicker_item_margin: 0;
 	--_ui5_daypicker_item_border: 1px solid #000;
 	--_ui5_daypicker_item_border_radius: 0.25rem;
-	--_ui5_daypicker_dayname_color: var(--sapTextColor);
-	--_ui5_daypicker_weekname_color: var(--sapTextColor);
 	--_ui5_daypicker_item_outline_width: 0.125rem;
 	--_ui5_daypicker_item_outline_offset: 0;
 	--_ui5_daypicker_item_now_outline_offset: 2px;

packages/main/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css

@@ -4,8 +4,6 @@
 	--_ui5_daypicker_item_margin: 0;
 	--_ui5_daypicker_item_border: 1px solid #fff;
 	--_ui5_daypicker_item_border_radius: 0.25rem;
-	--_ui5_daypicker_dayname_color: var(--sapTextColor);
-	--_ui5_daypicker_weekname_color: var(--sapTextColor);
 	--_ui5_daypicker_item_outline_width: 0.125rem;
 	--_ui5_daypicker_item_outline_offset: 0;
 	--_ui5_daypicker_item_now_outline_offset: 1px;