UI: Align Calendar styling with WPDS tokens

packages/ui/CHANGELOG.md

@@ -15,6 +15,7 @@
 
 ### Breaking Changes
 
+-   `Calendar`, `RangeCalendar`: Remove the `--wp-ui-calendar-range-middle-background-color` and `--wp-ui-calendar-preview-border-color` CSS custom properties. ([#81438](https://github.com/WordPress/gutenberg/pull/81438))
 -   `SearchableChipSelect`: Remove the `creatableItem` prop. Mark a creatable action with `creatable: true` on an item in `items` instead. The item renders in the list footer and is excluded from the main list automatically. Handle selection in `onValueChange`. See the `Creatable` and `GroupedCreatable` stories for examples ([#80989](https://github.com/WordPress/gutenberg/pull/80989)).
 -   `Select.Item`: Remove `'compact'` from the `size` prop. Use `'default'` instead ([#81354](https://github.com/WordPress/gutenberg/pull/81354)).
 -   `Combobox.Item`, `SelectControl.Item`: The `size` prop is removed ([#81354](https://github.com/WordPress/gutenberg/pull/81354)).
@@ -33,6 +34,7 @@
 ### Bug Fixes
 
 -   `Calendar`, `RangeCalendar`: Use the WordPress text direction when no supported formatting locale is provided, while preserving explicit locale and `dir` precedence. ([#81982](https://github.com/WordPress/gutenberg/pull/81982))
+-   `Calendar`, `RangeCalendar`: Align day states with neutral WPDS color tokens. ([#81438](https://github.com/WordPress/gutenberg/pull/81438))
 -   `Calendar`, `RangeCalendar`: Show tooltips for the previous and next month buttons. ([#81983](https://github.com/WordPress/gutenberg/pull/81983))
 -   `Calendar`, `RangeCalendar`: Make the navigation label translatable and use the same locale-derived default first day of the week for locale strings and date-fns locale objects. Existing object-based calendars may use a different default; pass `weekStartsOn` to preserve it. ([#81814](https://github.com/WordPress/gutenberg/pull/81814))
 -   `Autocomplete.Input`, `Combobox.Input`: Omit the `type` prop, since the combobox role is only valid on `input type="text"` ([#80636](https://github.com/WordPress/gutenberg/pull/80636)).

packages/ui/src/calendar/style.module.css

@@ -5,8 +5,6 @@
 		.root {
 			/* Internal variables */
 			--wp-ui-calendar-cell-size: var(--wpds-dimension-size-md);
-			--wp-ui-calendar-range-middle-background-color: color-mix(in srgb, var(--wpds-color-background-interactive-brand-strong) 4%, transparent);
-			--wp-ui-calendar-preview-border-color: color-mix(in srgb, var(--wpds-color-background-interactive-brand-strong) 16%, transparent);
 
 			position: relative; /* Required to position the navigation toolbar. */
 			display: inline flow-root;
@@ -21,6 +19,7 @@
 		.day {
 			padding: 0;
 			position: relative;
+			color: var(--wpds-color-foreground-interactive-neutral);
 
 			/*
 			 * Setting text color on the day container instead of directly on the
@@ -34,7 +33,7 @@
 
 			&:has(.day-button:hover:not(:disabled)),
 			&:has(.day-button:focus-visible) {
-				color: var(--wpds-color-foreground-interactive-brand);
+				color: var(--wpds-color-foreground-interactive-neutral-active);
 			}
 		}
 
@@ -71,6 +70,7 @@
 				inset: 0;
 				border: none; /* No default border to avoid polluting high-contrast mode. */
 				border-radius: var(--wpds-border-radius-sm);
+				background-color: var(--wpds-color-background-interactive-neutral-weak);
 			}
 
 			/* Use the button's ::after to show the selection preview. */
@@ -85,6 +85,10 @@
 			&:disabled {
 				cursor: revert;
 
+				&::before {
+					background-color: var(--wpds-color-background-interactive-neutral-weak-disabled);
+				}
+
 				@media (forced-colors: active) {
 					/*
 					 * As an extra visual cue, show a line-through on disabled days
@@ -93,6 +97,11 @@
 					text-decoration: line-through;
 				}
 			}
+
+			&:hover:not(:disabled)::before,
+			&:focus-visible::before {
+				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
+			}
 		}
 
 		.caption-label {
@@ -208,7 +217,7 @@
 
 		/* Outside month days (visible when showOutsideDays is true): use a lighter text color. */
 		.outside {
-			color: var(--wpds-color-foreground-content-neutral-weak);
+			color: var(--wpds-color-foreground-interactive-neutral-weak);
 		}
 
 		/* Hidden button (ie. outside current month but still rendered) */
@@ -232,7 +241,7 @@
 		/* Middle of date range */
 		.range-middle .day-button {
 			&::before {
-				background-color: var(--wp-ui-calendar-range-middle-background-color);
+				background-color: var(--wpds-color-background-interactive-neutral-weak-active);
 				border-radius: 0;
 
 				/*
@@ -275,13 +284,18 @@
 			position: absolute;
 			inset: 0;
 			pointer-events: none;
-			color: var(--wp-ui-calendar-preview-border-color);
+			color: var(--wpds-color-stroke-interactive-neutral);
 
 			@media (forced-colors: active) {
 				color: inherit;
 			}
 		}
 
+		/* Do not render the preview outline over selected range endpoints. */
+		.preview.selected:not(.range-middle) svg {
+			display: none;
+		}
+
 		.root[dir="rtl"] .preview svg {
 			transform: scaleX(-1);
 		}