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

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;
   }
 }