fix(ui5-calendar): adapt font to VD specs for secondary calendar types (#13257)

didip1000 · web-flow · commit 3a56e61308c3 · 2026-03-12T11:21:33.000+02:00
Font color and size is now correct according to the visual design specs
diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css
@@ -70,7 +70,7 @@
 }
 
 .ui5-calheader-arrowbtn:not(:active) .ui5-calheader-btn-sectext {
-	color: var(--sapNeutralElementColor);
+	color: var(--sapContent_LabelColor);
 	font-size: var(--sapFontSmallSize);
 }
 
diff --git a/packages/main/src/themes/DayPicker.css b/packages/main/src/themes/DayPicker.css
@@ -422,7 +422,7 @@
 }
 
 .ui5-dp-item--withsecondtype .ui5-dp-daytext {
-	font-size: 0.75rem;
+	font-size: var(--_ui5_dp_item_withsecondtype_font_size);
 }
 
 .ui5-dp-item.ui5-dp-item--withsecondtype .ui5-dp-specialday,
diff --git a/packages/main/src/themes/MonthPicker.css b/packages/main/src/themes/MonthPicker.css
@@ -48,8 +48,8 @@
 }
 
 .ui5-dp-monthsectext {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-mp-item.ui5-mp-item--selected,
diff --git a/packages/main/src/themes/YearPicker.css b/packages/main/src/themes/YearPicker.css
@@ -50,8 +50,8 @@
 }
 
 .ui5-yp-item-sec-type {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-yp-item.ui5-yp-item--selected,
diff --git a/packages/main/src/themes/YearRangePicker.css b/packages/main/src/themes/YearRangePicker.css
@@ -50,8 +50,8 @@
 }
 
 .ui5-yrp-item-sec-type {
-	font-size: 0.75rem;
-	color: var(--sapNeutralElementColor);
+	font-size: var(--sapFontSmallSize);
+	color: var(--sapTextColor);
 }
 
 .ui5-yrp-item-one-column-view {
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -16,6 +16,7 @@
 	--_ui5_day_picker_item_height: 2.875rem;
 	--_ui5_day_picker_empty_height: 3rem;
 	--_ui5_day_picker_item_justify_content: space-between;
+	--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSize);
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_top: 2rem;
 	--_ui5_daypicker_item_now_selected_two_calendar_focus_special_day_right: 1.4375rem;
 	--_ui5_dp_two_calendar_item_secondary_text_height: 1rem;
@@ -225,6 +226,7 @@
 		--_ui5_day_picker_item_height: 2rem;
 		--_ui5_day_picker_empty_height: 2.125rem;
 		--_ui5_day_picker_item_justify_content: flex-end;
+		--_ui5_dp_item_withsecondtype_font_size: var(--sapFontSmallSize);
 		--_ui5_dp_two_calendar_item_secondary_text_height: 0.75rem;
 		--_ui5_dp_two_calendar_item_text_padding_top: 0.5rem;
 

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@`
`70`	`70`	`}`
`71`	`71`
`72`	`72`	`.ui5-calheader-arrowbtn:not(:active) .ui5-calheader-btn-sectext {`
`73`		`- color: var(--sapNeutralElementColor);`
	`73`	`+ color: var(--sapContent_LabelColor);`
`74`	`74`	`font-size: var(--sapFontSmallSize);`
`75`	`75`	`}`
`76`	`76`
Original file line number	Diff line number	Diff line change
`@@ -422,7 +422,7 @@`
`422`	`422`	`}`
`423`	`423`
`424`	`424`	`.ui5-dp-item--withsecondtype .ui5-dp-daytext {`
`425`		`- font-size: 0.75rem;`
	`425`	`+ font-size: var(--_ui5_dp_item_withsecondtype_font_size);`
`426`	`426`	`}`
`427`	`427`
`428`	`428`	`.ui5-dp-item.ui5-dp-item--withsecondtype .ui5-dp-specialday,`
Original file line number	Diff line number	Diff line change
`@@ -48,8 +48,8 @@`
`48`	`48`	`}`
`49`	`49`
`50`	`50`	`.ui5-dp-monthsectext {`
`51`		`- font-size: 0.75rem;`
`52`		`- color: var(--sapNeutralElementColor);`
	`51`	`+ font-size: var(--sapFontSmallSize);`
	`52`	`+ color: var(--sapTextColor);`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.ui5-mp-item.ui5-mp-item--selected,`
Original file line number	Diff line number	Diff line change
`@@ -50,8 +50,8 @@`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`.ui5-yp-item-sec-type {`
`53`		`- font-size: 0.75rem;`
`54`		`- color: var(--sapNeutralElementColor);`
	`53`	`+ font-size: var(--sapFontSmallSize);`
	`54`	`+ color: var(--sapTextColor);`
`55`	`55`	`}`
`56`	`56`
`57`	`57`	`.ui5-yp-item.ui5-yp-item--selected,`