feat(datetime): add styles for adjacent days for ionic theme (#30492)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the current behavior that you are modifying. -->
Now the adjacent days have proper styles for all their states. 
And the next-prev month buttons have the right height.

## Changes:
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- add styles for the adjacent days;
- add styles for active adjacent day;
- add styles for pressed adjacent day;
- add styles for focused adjacent day;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
[ionic
preview](https://ionic-framework-git-rou-11702-ionic1.vercel.app/src/components/datetime/test/show-adjacent-days?ionic:theme=ionic)

---------

Co-authored-by: ionitron <hi@ionicframework.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

Author: 3 people

core/src/components/datetime/datetime.ionic.scss

@@ -104,6 +104,7 @@
   --background-activated: #{globals.$ion-primitives-neutral-200};
   --background-hover: #{globals.$ion-primitives-neutral-200};
   --background-hover-opacity: 1;
+  min-height: globals.$ion-scale-1000;
 }
 
 // TODO(ROU-11119): Rewrite this when we replace the ion-button with a native button
@@ -153,7 +154,8 @@
 }
 
 // Selected Day
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active,
+.calendar-day.calendar-day-active.calendar-day-adjacent-day {
   background: globals.$ion-semantics-primary-100;
 }
 
@@ -170,8 +172,19 @@
 }
 
 // Pressed Day
-.calendar-day:active {
-  background: globals.$ion-semantics-primary-300;
+.calendar-day:active,
+.calendar-day.calendar-day-adjacent-day:active {
+  background: globals.$ion-bg-primary-subtle-press;
+}
+
+// Adjacent Day
+.calendar-day.calendar-day-adjacent-day {
+  color: globals.$ion-text-subtlest;
+}
+
+// Selected Adjacent Day
+.calendar-day.calendar-day-active.calendar-day-adjacent-day {
+  color: globals.$ion-text-default;
 }
 
 // Time / Header
@@ -203,7 +216,6 @@
 
 // Calendar / Footer / Action Buttons
 // -----------------------------------
-
 :host .datetime-buttons ion-buttons,
 .datetime-action-buttons .datetime-action-buttons-container {
   flex-flow: column;

core/src/components/datetime/test/show-adjacent-days/datetime.e2e.ts

@@ -4,7 +4,7 @@ import { configs, test } from '@utils/test/playwright';
 /**
  * This behavior does not vary across directions
  */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('datetime: show adjacent days'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/datetime/test/show-adjacent-days', config);