feat(datetime-button): update design to match iOS 17 spec (#28730)

Issue number: N/A

---------

## What is the current behavior?
Datetime button combines Material Design and iOS styles.

## What is the new behavior?

- Splits the styles into their own mode files for Material Design & iOS
and updates the iOS styles to match iOS 17.
- Updates the basic test to include a screenshot test in both modes &
directions.

I removed all of the datetime button screenshots before running the
action to generate screenshots. Some screenshots were not added back but
this is correct for the following reasons:

-
[datetime-button-disabled](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/disabled/datetime-button.e2e.ts#L4)
does not run for `ios` or `rtl` so those were removed
- [datetime-overlay-modal and
datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L9)
do not run for `rtl` so those were removed
-
[datetime-overlay-popover](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/datetime-button/test/overlays/datetime-button.e2e.ts#L31)
skips the test in firefox so that was removed

I can add these back if you want since they aren't part of this PR but
they should have probably been removed when the test was updated to
exclude directions/modes.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

I compared the datetime button against native iOS 17.1.2:

| iOS 17 | Ionic |
| ---| ---|
|
![ios17](https://github.com/ionic-team/ionic-framework/assets/6577830/1d66ab52-143e-4461-81cd-b6794e6a8d0d)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/6577830/a0658aec-7544-479f-9c37-3018e1f1da9e)
|
|
![ios17](https://github.com/ionic-team/ionic-framework/assets/6577830/aa57d5da-d961-4a24-8b55-c28c0db55aa7)
|
![ionic](https://github.com/ionic-team/ionic-framework/assets/6577830/086c0087-e213-48c8-9385-a008b23ee427)
|

Diff:

![diff](https://github.com/ionic-team/ionic-framework/assets/6577830/ba9d1fca-9faa-445e-bbd1-5da3d8cc4468)

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/datetime-button/datetime-button.ios.scss

@@ -0,0 +1,12 @@
+@import "./datetime-button";
+
+// iOS Datetime Button
+// --------------------------------------------------
+
+:host button {
+  @include padding(7px, 13px, 7px, 13px);
+}
+
+:host button.ion-activated {
+  color: $text-color-step-400;
+}

core/src/components/datetime-button/datetime-button.md.scss

@@ -0,0 +1,8 @@
+@import "./datetime-button";
+
+// Material Design Datetime Button
+// --------------------------------------------------
+
+:host button {
+  @include padding(6px, 12px, 6px, 12px);
+}

core/src/components/datetime-button/datetime-button.scss

@@ -15,7 +15,6 @@
 
 :host button {
   @include border-radius(8px);
-  @include padding(6px, 12px, 6px, 12px);
   @include margin(0px, 2px, 0px, 2px);
 
   position: relative;

core/src/components/datetime-button/datetime-button.tsx

@@ -22,8 +22,8 @@ import { parseDate } from '../datetime/utils/parse';
 @Component({
   tag: 'ion-datetime-button',
   styleUrls: {
-    ios: 'datetime-button.scss',
+    ios: 'datetime-button.ios.scss',
-    md: 'datetime-button.scss',
+    md: 'datetime-button.md.scss',
   },
   shadow: true,
 })

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

@@ -1,6 +1,23 @@
 import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
+configs().forEach(({ config, screenshot, title }) => {
+  test.describe(title('datetime-button: basic'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-datetime-button locale="en-US" datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" value="2022-01-01T06:30:00" presentation="date-time"></ion-datetime>
+      `,
+        config
+      );
+      const datetimeButton = page.locator('ion-datetime-button');
+
+      await expect(datetimeButton).toHaveScreenshot(screenshot(`datetime-button-basic`));
+    });
+  });
+});
+
 /**
  * The tested behavior does not
  * vary across modes/directions