fix(datetime): add temporary workaround for datetime-ready logic issue on Ionic theme. (#30841)

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

Although the work done on
[FW-6931](https://outsystemsrd.atlassian.net/browse/FW-6931), there was
still a scenario on MobileUI, inside the ion-modal, where the datetime
would disappear. This seems to only happen on iOS 26+, as we were not
able to replicate it on version 18.*

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

As there's already task to better fix this issue across all themes, this
PR introduces a small css backdoor, to be able to override the opacity
value when necessary. This was done on ionic theme only and the css was
split, to have no impact on md and iOS.

* In `datetime.ionic.scss`, opacity is now controlled via CSS variables
(`--body-opacity`, `--year-opacity`) for `.calendar-body` and
`.datetime-year`.
* In `datetime.native.scss`, explicit opacity rules for `.calendar-body`
and `.datetime-year` are added, with visibility toggled based on the
`.datetime-ready` class.
* In `datetime.common.scss`, redundant and hard-coded opacity rules for
`.calendar-body` and `.datetime-year` are removed, deferring control to
theme-specific stylesheets.

A small fix was also done on IonHeader token used for the border-color,
to correctly reflect the value from Figma.

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




[FW-6931]:
https://outsystemsrd.atlassian.net/browse/FW-6931?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

core/src/components/datetime/datetime.common.scss

@@ -25,24 +25,13 @@
   width: 100%;
 }
 
-:host .calendar-body,
-:host .datetime-year {
-  opacity: 0;
-}
-
 :host(:not(.datetime-ready)) .datetime-year {
   position: absolute;
   pointer-events: none;
 }
 
-:host(.datetime-ready) .calendar-body {
-  opacity: 1;
-}
-
 :host(.datetime-ready) .datetime-year {
   display: none;
-
-  opacity: 1;
 }
 
 /**

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

@@ -12,6 +12,30 @@
   --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
+  /**
+   * TODO(FW-6931): Remove these variables upon solving the root cause
+   */
+  --body-opacity: 0;
+  --year-opacity: 0;
+}
+
+/**
+   * TODO(FW-6931): Remove all this css related to opacity upon solving the root cause
+   */
+:host .calendar-body {
+  opacity: var(--body-opacity);
+}
+
+:host .datetime-year {
+  opacity: var(--year-opacity);
+}
+
+:host(.datetime-ready) .calendar-body {
+  --body-opacity: 1;
+}
+
+:host(.datetime-ready) .datetime-year {
+  --year-opacity: 1;
 }
 
 // Header

core/src/components/datetime/datetime.native.scss

@@ -23,6 +23,22 @@
   max-width: 350px;
 }
 
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host .calendar-body,
+:host .datetime-year {
+  opacity: 0;
+}
+
+/**
+ * TODO(FW-6931): Move this back to common file upon solving the root cause
+ */
+:host(.datetime-ready) .calendar-body,
+:host(.datetime-ready) .datetime-year {
+  opacity: 1;
+}
+
 /**
  * This ensures that the picker is appropriately
  * sized and never truncates the text.

core/src/components/header/header.ionic.scss

@@ -8,7 +8,7 @@ ion-header {
   z-index: 10; // TODO(ROU-10853): replace this value with a layer token.
 
   &.header-divider {
-    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-primitives-neutral-300;
+    border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
   }
 }