add datetime new variable to control opacity on ionic theme

Author: BenOsodrac

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

@@ -25,26 +25,16 @@
   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;
 }
 
+
 /**
  * Changing the physical order of the
  * picker columns in the DOM is added

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

@@ -12,6 +12,24 @@
   --background: #{globals.$ion-bg-surface-default};
   --focus-ring-color: #{globals.$ion-border-focus-default};
   --focus-ring-width: #{globals.$ion-border-radius-025};
+  --body-opacity: 0;
+  --year-opacity: 0;
+}
+
+: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,16 @@
   max-width: 350px;
 }
 
+:host .calendar-body,
+:host .datetime-year {
+  opacity: 0;
+}
+
+: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.