feat(datetime): use gray tokens

Author: thetaPC

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

@@ -8,7 +8,7 @@
 :host {
   --background: #{ion-color(light, base)};
   --background-rgb: #{ion-color(light, base, null, true)};
-  --title-color: #{$text-color-step-400};
+  --title-color: var(--ion-color-gray-600);
 }
 
 :host(.datetime-presentation-date-time:not(.datetime-prefer-wheel)),
@@ -22,7 +22,7 @@
 :host .datetime-header {
   @include padding($datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding, $datetime-ios-padding);
 
-  border-bottom: $datetime-ios-border-color;
+  border-bottom: $datetime-ios-border;
 
   font-size: dynamic-font-max(14px, 1.6);
 }
@@ -72,7 +72,7 @@
 :host .calendar-days-of-week {
   @include padding(0, $datetime-ios-padding * 0.5, 0, $datetime-ios-padding * 0.5);
 
-  color: $text-color-step-700;
+  color: var(--ion-color-gray-300);
 
   font-size: dynamic-font-max(12px, 1.6);
 
@@ -280,7 +280,7 @@
 }
 
 :host .calendar-day.calendar-day-adjacent-day {
-  color: $text-color-step-700;
+  color: var(--ion-color-gray-300);
 }
 
 // Time / Header
@@ -305,7 +305,7 @@
     $datetime-ios-padding * 0.5
   );
 
-  border-top: $datetime-ios-border-color;
+  border-top: $datetime-ios-border;
 }
 
 :host .datetime-buttons ::slotted(ion-buttons),

core/src/components/datetime/datetime.ios.vars.scss

@@ -3,8 +3,17 @@
 // iOS Datetime
 // --------------------------------------------------
 
+/// @prop Border width for dividers between header and footer
+$datetime-ios-border-width: 0.55px;
+
+/// @prop - Border style for dividers between header and footer
+$datetime-ios-border-style: solid;
+
 /// @prop - Border color for dividers between header and footer
-$datetime-ios-border-color: 0.55px solid globals.$background-color-step-200;
+$datetime-ios-border-color: var(--ion-color-gray-200);
+
+/// @prop - Border for dividers between header and footer
+$datetime-ios-border: $datetime-ios-border-width $datetime-ios-border-style $datetime-ios-border-color;
 
 /// @prop - Padding for content
 $datetime-ios-padding: 16px;

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

@@ -40,7 +40,7 @@
 // -----------------------------------
 
 :host .calendar-action-buttons ion-button {
-  --color: #{$text-color-step-350};
+  --color: var(--ion-color-gray-650);
 }
 
 .calendar-month-year-toggle {
@@ -50,7 +50,7 @@
 
   background: transparent;
 
-  color: #{$text-color-step-350};
+  color: var(--ion-color-gray-650);
 
   z-index: 1;
 
@@ -78,7 +78,7 @@
 :host .calendar-days-of-week {
   @include padding(0px, 10px, 0px, 10px);
 
-  color: $text-color-step-500;
+  color: var(--ion-color-gray-500);
 
   font-size: $datetime-md-calendar-item-font-size;
 
@@ -138,7 +138,7 @@
 }
 
 :host .calendar-day.calendar-day-adjacent-day {
-  color: $text-color-step-500;
+  color: var(--ion-color-gray-500);
 }
 
 // Time / Header
@@ -148,7 +148,7 @@
 }
 
 :host .time-header {
-  color: #{$text-color-step-350};
+  color: var(--ion-color-gray-650);
 }
 
 // Month and Year