refactor(ui5-daypicker): move styles to Base theme (#151)

Author: a-z-ivanov

packages/main/src/DayPicker.hbs

@@ -15,7 +15,7 @@
 					id={{this._id}}
 					role="columnheader"
 					aria-label="{{this.name}}"
-					class="{{this.classes}} sapWCDayPickerDayName">
+					class="{{this.classes}}">
 					{{this.ultraShortName}}
 				</div>
 			{{/each}}

packages/main/src/DayPicker.js

@@ -245,7 +245,7 @@ class DayPicker extends WebComponent {
 				id: `${this._id}-WH${i.toString()}`,
 				name: aDayNamesWide[weekday],
 				ultraShortName: aUltraShortNames[weekday],
-				classes: "sapWCDayPickerWH",
+				classes: "sapWCDayPickerDayName",
 			};
 
 			this._dayNames.push(dayName);

packages/main/src/themes/base/DatePicker.less

@@ -9,7 +9,7 @@
 /* Base theme                    */
 /* ============================= */
 
-@_ui5_webcomponents_datepicker_icon_border: none;
+@_ui5_datepicker_icon_border: none;
 
 :host(ui5-datepicker) {
 	display: inline-block;
@@ -25,7 +25,7 @@ ui5-datepicker {
 	color: @sapUiContentIconColor;
 	cursor: pointer;
 	outline: none;
-	border: @_ui5_webcomponents_datepicker_icon_border;
+	border: @_ui5_datepicker_icon_border;
 	box-sizing: border-box;
 }
 

packages/main/src/themes/base/DayPicker.less

@@ -10,6 +10,9 @@
 /* ============================= */
 
 @_ui5_daypicker_item_margin: 2px;
+@_ui5_daypicker_item_border: none;
+@_ui5_daypicker_item_outline_width: 1px;
+@_ui5_daypicker_item_outline_offset: 1px;
 @_ui5_daypicker_daynames_container_height: 2rem;
 @_ui5_daypicker_weeknumbers_container_padding_top: 2rem;
 @_ui5_daypicker_item_background_color: lighten(@sapUiContentForegroundColor, 5); 
@@ -22,6 +25,12 @@
 @_ui5_daypicker_item_othermonth_hover_background_color: darken(@sapUiListBackground, 10);
 @_ui5_daypicker_item_othermonth_color: @sapUiContentLabelColor;
 @_ui5_daypicker_item_othermonth_hover_color: @sapUiContentLabelColor;
+@_ui5_daypicker_item_border_radius: 0;
+@_ui5_daypicker_item_now_inner_border_radius: 0;
+@_ui5_daypicker_dayname_color: @sapUiContentLabelColor;
+@_ui5_daypicker_weekname_color: @sapUiContentLabelColor;
+@_ui5_daypicker_item_now_selected_focus_after_width: calc(~"100% - 0.125rem");
+@_ui5_daypicker_item_now_selected_focus_after_height: calc(~"100% - 0.125rem");
 
 :host(ui5-daypicker) {
 	display: inline-block;
@@ -43,6 +52,11 @@ ui5-daypicker {
 	margin-top: @_ui5_daypicker_item_margin;
 	margin-right: @_ui5_daypicker_item_margin;
 	font-family: @sapUiFontFamily;
+	border-radius: @_ui5_daypicker_item_border_radius;
+}
+
+.sapWCDayPickerWeekName {
+	color: @_ui5_daypicker_weekname_color;
 }
 
 .sapWCDayPickerContent {
@@ -81,6 +95,7 @@ ui5-daypicker {
 	color: @sapUiBaseText;
 	background: @_ui5_daypicker_item_background_color;
 	font-size: @sapMFontMediumSize;
+	border: @_ui5_daypicker_item_border;
 }
 
 .sapWCDayPickerItem:hover {
@@ -97,14 +112,10 @@ ui5-daypicker {
 }
 
 .sapWCDayPickerDayName {
-	color: @sapUiBaseText;
+	color: @_ui5_daypicker_dayname_color;
 	height: 100%;
 }
 
-.sapWCDayPickerWH {
-	color: @sapUiContentLabelColor;
-}
-
 .sapWCDayPickerItem.sapWCDayPickerItemWeekEnd {
 	background: @_ui5_daypicker_item_weekend_background_color;
 }
@@ -116,6 +127,7 @@ ui5-daypicker {
 .sapWCDayPickerItem.sapWCDayPickerItemOtherMonth {
 	color: @_ui5_daypicker_item_othermonth_color;
 	background: @_ui5_daypicker_item_othermonth_background_color;
+	border-color: transparent;
 }
 
 .sapWCDayPickerItem.sapWCDayPickerItemOtherMonth:hover,
@@ -128,10 +140,10 @@ ui5-daypicker {
 	content: "";
 	width: calc(~"100% - 0.25rem");
 	height: calc(~"100% - 0.25rem");
-	border: 1px dotted @sapUiContentFocusColor;
+	border: @_ui5_daypicker_item_outline_width dotted @sapUiContentFocusColor;
 	position: absolute;
-	top: 1px;
-	left: 1px;
+	top: @_ui5_daypicker_item_outline_offset;
+	left: @_ui5_daypicker_item_outline_offset;
 }
 
 .sapWCDayPickerItem.sapWCDayPickerItemNow {
@@ -145,11 +157,12 @@ ui5-daypicker {
 
 .sapWCDayPickerItem.sapWCDayPickerItemSel.sapWCDayPickerItemNow .sapWCDayPickerDayText {
 	border: 1px solid lighten(@sapUiListBorderColor, 10);
+	border-radius: @_ui5_daypicker_item_now_inner_border_radius;
 }
 
 .sapWCDayPickerItem.sapWCDayPickerItemSel.sapWCDayPickerItemNow:focus::after {
-	width: calc(~"100% - 0.125rem");
-	height: calc(~"100% - 0.125rem");
+	width: @_ui5_daypicker_item_now_selected_focus_after_width;
+	height: @_ui5_daypicker_item_now_selected_focus_after_height;
 	border-color: @sapUiContentFocusColor;
 	top: 0px;
 	left: 0px;

packages/main/src/themes/sap_belize_hcb/DatePicker.less

@@ -21,4 +21,4 @@
 /* Belize HCB theme              */
 /* ============================= */
 
-@_ui5_webcomponents_datepicker_icon_border: 1px solid transparent;
+@_ui5_datepicker_icon_border: 1px solid transparent;

packages/main/src/themes/sap_belize_hcb/DayPicker.less

@@ -23,32 +23,13 @@
 
 @_ui5_daypicker_item_hover_background_color: @sapUiHighlight;
 @_ui5_daypicker_item_margin: 0;
+@_ui5_daypicker_item_border: 1px solid @sapUiListBorderColor;
+@_ui5_daypicker_item_outline_width: 0.125rem;
+@_ui5_daypicker_item_outline_offset: 0;
 @_ui5_daypicker_item_weekend_background_color: @sapUiHcReducedBackground;
 @_ui5_daypicker_item_weekend_hover_background_color: @sapUiHighlight;
 @_ui5_daypicker_item_othermonth_hover_background_color: @sapUiHighlight;
-@_ui5_daypicker_item_selected_background_color: @sapUiHighlight;
-@_ui5_daypicker_item_selected_hover_background_color: @sapUiHighlight;
-
-.sapWCDayPickerWeekName,
-.sapWCDayPickerDayName {
-	color: @sapUiHcReducedForeground;
-}
-
-.sapWCDayPickerItem {
-	border: 1px solid @sapUiListBorderColor;
-}
-
-.sapWCDayPickerItem:focus::after {
-	border-width: 0.125rem;
-	top: 0;
-	left: 0;
-}
-
-.sapWCDayPickerItem.sapWCDayPickerItemSel.sapWCDayPickerItemNow:focus::after {
-	width: calc(~"100% - 0.25rem");
-	height: calc(~"100% - 0.25rem");
-}
-
-.sapWCDayPickerItem.sapWCDayPickerItemOtherMonth {
-	border-color: transparent;
-}
+@_ui5_daypicker_dayname_color: @sapUiHcReducedForeground;
+@_ui5_daypicker_weekname_color: @sapUiHcReducedForeground;
+@_ui5_daypicker_item_now_selected_focus_after_width: calc(~"100% - 0.25rem");
+@_ui5_daypicker_item_now_selected_focus_after_height: calc(~"100% - 0.25rem");

packages/main/src/themes/sap_fiori_3/DayPicker.less

@@ -21,13 +21,5 @@
 @_ui5_daypicker_item_selected_hover_background_color: lighten(@sapUiActive, 3);
 @_ui5_daypicker_item_weekend_background_color: darken(@sapUiListBackground, 13);
 @_ui5_daypicker_item_weekend_hover_background_color: darken(@sapUiListBackground, 20);
-
-.sapWCDayPickerWeekName,
-.sapWCDayPickerDayName,
-.sapWCDayPickerItem {
-	border-radius: 0.25rem;
-}
-
-.sapWCDayPickerItem.sapWCDayPickerItemNow .sapWCDayPickerDayText {
-	border-radius: 0.125rem;
-}
+@_ui5_daypicker_item_border_radius: 0.25rem;
+@_ui5_daypicker_item_now_inner_border_radius: 0.125rem;