fix(ui5-calendar-legend): align selected item representation to new VD spec (#11391)

We have new design specification, about the representation of the Selected day default item of the ui5-calendar-legend component.

Now in SAP Horizon and SAP Horizon Dark themes, the Selected Day item of the ui5-calendar-legend has a dot in the middle, which makes its concept more clear.

Before
2025-04-23_13-43-56

After
2025-04-23_13-49-25

Author: hinzzx

packages/main/src/themes/CalendarLegendItem.css

@@ -42,7 +42,20 @@
 
 :host([type="Selected"]) .ui5-calendar-legend-item-box {
 	background: var(--sapContent_Selected_Background);
-	border: 0.0625rem solid var(--sapContent_FocusColor);
+	border: 0.0625rem solid var(--sapList_SelectionBorderColor);
+}
+
+/* Dot in the middle of the box */
+:host([type="Selected"]) .ui5-calendar-legend-item-box::after {
+	content: "";
+	display: var(--_ui5-calendar-legend-item-box-dot-display); /* Dot should be visible only in sap_horizon and sap_horizon_dark themes */
+	width: 0.25rem;
+	height: 0.25rem;
+	background: var(--sapContent_Selected_TextColor);
+	border-radius: 50%;
+	position: relative;
+	inset-block-start: 0.3125rem;
+	inset-inline-end: -0.3125rem;
 }
 
 :host([type="NonWorking"]) .ui5-calendar-legend-item-box {

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

@@ -4,4 +4,5 @@
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) dotted var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0;
 	--_ui5-calendar-legend-item-root-width: 7.75rem;
+	--_ui5-calendar-legend-item-box-dot-display: none;
 }

packages/main/src/themes/sap_horizon/CalendarLegendItem-parameters.css

@@ -3,4 +3,5 @@
 :root {
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
+	--_ui5-calendar-legend-item-box-dot-display: block;
 }

packages/main/src/themes/sap_horizon_dark/CalendarLegendItem-parameters.css

@@ -3,4 +3,5 @@
 :root {
 	--_ui5-calendar-legend-item-root-focus-border: var(--sapContent_FocusWidth) solid var(--sapContent_FocusColor);
 	--_ui5-calendar-legend-item-root-focus-border-radius: 0.125rem;
+	--_ui5-calendar-legend-item-box-dot-display: block;
 }