fix(ui5-day-picker): fix color contrast of selected day in HCB (#2378)

ilhan007 · web-flow · commit ff671410cd54 · 2020-10-28T11:14:16.000+02:00
FIXES #2372
diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css
@@ -133,7 +133,7 @@
 }
 
 .ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-daytext {
-	border: 1px solid var(--sapList_Background);
+	border: 1px solid var(--_ui5_daypicker_item_selected_border_color);
 	border-radius: var(--_ui5_daypicker_item_now_inner_border_radius);
 }
 
diff --git a/packages/main/src/themes/base/DayPicker-parameters.css b/packages/main/src/themes/base/DayPicker-parameters.css
@@ -1,6 +1,7 @@
 :root {
 	--_ui5_daypicker_item_margin: 2px;
 	--_ui5_daypicker_item_border: none;
+	--_ui5_daypicker_item_selected_border_color: var(--sapList_Background);
 	--_ui5_daypicker_item_outline_width: 1px;
 	--_ui5_daypicker_item_outline_offset: 1px;
 	--_ui5_daypicker_daynames_container_height: 2rem;
diff --git a/packages/main/src/themes/sap_belize_hcb/DatePicker-parameters.css b/packages/main/src/themes/sap_belize_hcb/DatePicker-parameters.css
@@ -2,4 +2,5 @@
 
 :root {
 	--_ui5_datepicker_icon_border: 1px solid transparent;
+	--_ui5_daypicker_item_selected_border_color: var(--sapList_SelectionBorderColor);
 }
diff --git a/packages/main/src/themes/sap_belize_hcw/DayPicker-parameters.css b/packages/main/src/themes/sap_belize_hcw/DayPicker-parameters.css
@@ -9,4 +9,5 @@
 	--_ui5_daypicker_weekname_color: var(--sapHC_ReducedForeground);
 	--_ui5_daypicker_item_now_selected_focus_after_width: calc(100% - 0.25rem);
 	--_ui5_daypicker_item_now_selected_focus_after_height: calc(100% - 0.25rem);
+	--_ui5_daypicker_item_selected_border_color: transparent;
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css b/packages/main/src/themes/sap_fiori_3_hcb/DayPicker-parameters.css
@@ -10,4 +10,5 @@
 	--_ui5_daypicker_weekname_color: var(--sapTextColor);
 	--_ui5_daypicker_item_now_selected_focus_after_width: calc(100% - 0.25rem);
 	--_ui5_daypicker_item_now_selected_focus_after_height: calc(100% - 0.25rem);
+	--_ui5_daypicker_item_selected_border_color: var(--sapList_SelectionBorderColor);
 }
diff --git a/packages/main/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css b/packages/main/src/themes/sap_fiori_3_hcw/DayPicker-parameters.css
@@ -10,4 +10,5 @@
 	--_ui5_daypicker_weekname_color: var(--sapTextColor);
 	--_ui5_daypicker_item_now_selected_focus_after_width: calc(100% - 0.25rem);
 	--_ui5_daypicker_item_now_selected_focus_after_height: calc(100% - 0.25rem);
+	--_ui5_daypicker_item_selected_border_color: transparent;
 }

Original file line number	Diff line number	Diff line change
`@@ -133,7 +133,7 @@`
`133`	`133`	`}`
`134`	`134`
`135`	`135`	`.ui5-dp-item.ui5-dp-item--selected.ui5-dp-item--now .ui5-dp-daytext {`
`136`		`- border: 1px solid var(--sapList_Background);`
	`136`	`+ border: 1px solid var(--_ui5_daypicker_item_selected_border_color);`
`137`	`137`	`border-radius: var(--_ui5_daypicker_item_now_inner_border_radius);`
`138`	`138`	`}`
`139`	`139`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,5 @@`
`2`	`2`
`3`	`3`	`:root {`
`4`	`4`	`--_ui5_datepicker_icon_border: 1px solid transparent;`
	`5`	`+ --_ui5_daypicker_item_selected_border_color: var(--sapList_SelectionBorderColor);`
`5`	`6`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,4 +9,5 @@`
`9`	`9`	`--_ui5_daypicker_weekname_color: var(--sapHC_ReducedForeground);`
`10`	`10`	`--_ui5_daypicker_item_now_selected_focus_after_width: calc(100% - 0.25rem);`
`11`	`11`	`--_ui5_daypicker_item_now_selected_focus_after_height: calc(100% - 0.25rem);`
	`12`	`+ --_ui5_daypicker_item_selected_border_color: transparent;`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,4 +10,5 @@`
`10`	`10`	`--_ui5_daypicker_weekname_color: var(--sapTextColor);`
`11`	`11`	`--_ui5_daypicker_item_now_selected_focus_after_width: calc(100% - 0.25rem);`
`12`	`12`	`--_ui5_daypicker_item_now_selected_focus_after_height: calc(100% - 0.25rem);`
	`13`	`+ --_ui5_daypicker_item_selected_border_color: var(--sapList_SelectionBorderColor);`
`13`	`14`	`}`