feat(datetime): add ionic theme styles to title (#29828)

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 current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There are no dedicated title styles for the `ionic` theme

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Adds `ionic` theme styles for the datetime default title

## 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. -->

[Preview
(inline-custom)](https://ionic-framework-c0db80uay-ionic1.vercel.app/src/components/datetime/test/basic?ionic:theme=ionic)

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

@@ -14,6 +14,41 @@
   --focus-ring-width: #{globals.$ionic-border-radius-050};
 }
 
+// Header
+// -----------------------------------
+:host .datetime-header {
+  @include globals.padding(
+    globals.$ionic-space-200,
+    globals.$ionic-space-400,
+    globals.$ionic-space-400,
+    globals.$ionic-space-400
+  );
+
+  display: flex;
+
+  flex-direction: column;
+  align-items: start;
+  justify-content: space-between;
+
+  height: globals.$ionic-scale-1400;
+
+  margin-bottom: globals.$ionic-space-200;
+
+  border-bottom: globals.$ionic-border-style-solid globals.$ionic-border-size-025 globals.$ionic-color-neutral-300;
+}
+
+:host .datetime-header .datetime-title {
+  @include globals.typography(globals.$ionic-heading-h6-medium);
+
+  color: globals.$ionic-color-neutral-800;
+}
+
+:host .datetime-header .datetime-selected-date {
+  @include globals.typography(globals.$ionic-body-md-regular);
+
+  color: globals.$ionic-color-neutral-1000;
+}
+
 // Calendar Header
 // -----------------------------------
 

core/src/components/datetime/test/basic/datetime.e2e.ts

@@ -29,6 +29,19 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ ti
 
       await expect(datetime).toHaveScreenshot(screenshot(`datetime-basic`));
     });
+
+    test('should render default title', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime show-default-title="true" value="2022-06-06T16:30"></ion-datetime>
+      `,
+        config
+      );
+
+      const datetime = page.locator('ion-datetime');
+
+      await expect(datetime).toHaveScreenshot(screenshot(`datetime-basic-default-title`));
+    });
   });
 });