fix(time-picker): visual discrepancies (#345)

* fix(time-picker): visual discrepancies

* refactor(time-picker): remove redundant property

* fix(time-picker): active item background

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: SisIvanova

sass/themes/schemas/components/dark/_time-picker.scss

@@ -10,11 +10,27 @@
 
 /// Generates a dark material time-picker schema.
 /// @type {Map}
+/// @prop {Map} hover-text-color [color: ('secondary', 200)] - The hover text color of an open time picker.
+/// @prop {Map} selected-text-color [color: ('secondary', 200)] -  The text color of a selected item in time picker.
 /// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $material-time-picker
 $dark-material-time-picker: extend(
     $material-time-picker,
     (
+        hover-text-color: (
+            color: (
+                'secondary',
+                200,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'secondary',
+                200,
+            ),
+        ),
+
         divider-color: (
             color: (
                 'gray',
@@ -26,11 +42,59 @@ $dark-material-time-picker: extend(
 
 /// Generates a dark fluent time-picker schema.
 /// @type {Map}
+/// @prop {Map} hover-text-color [color: ('primary', 200)] - The hover text color of an open time picker.
+/// @prop {Map} selected-text-color [color: ('primary', 200)] -  The text color of a selected item in time picker.
+/// @prop {Map} header-background [color: ('primary', 200)] - The header background color of a time picker.
+/// @prop {Map} header-hour-text-color [contrast-color: ('primary', 200)] - The header hour text color of a time picker.
+/// @prop {Map} active-item-foreground [contrast-color: ('primary', 200)] - The foreground color for current item in focused column inside the time picker.
+/// @prop {Map} active-item-background [color: ('primary', 200)] - The background color for current item in focused column inside the time picker.
 /// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $fluent-time-picker
 $dark-fluent-time-picker: extend(
     $fluent-time-picker,
     (
+        hover-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        header-hour-text-color: (
+            contrast-color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        active-item-foreground: (
+            contrast-color: (
+                'primary',
+                200,
+            ),
+        ),
+
+        active-item-background: (
+            color: (
+                'primary',
+                200,
+            ),
+        ),
+
         divider-color: (
             color: (
                 'gray',
@@ -42,8 +106,35 @@ $dark-fluent-time-picker: extend(
 
 /// Generates a dark bootstrap time-picker schema.
 /// @type {Map}
+/// @prop {Map} hover-text-color [color: ('primary', 300)] - The hover text color of an open time picker.
+/// @prop {Map} active-item-background [color: ('primary', 500)] - The background color for current item in focused column inside the time picker.
+/// @prop {Map} selected-text-color [color: ('primary', 300)] -  The text color of a selected item in time picker.
 /// @requires $bootstrap-time-picker
-$dark-bootstrap-time-picker: $bootstrap-time-picker;
+$dark-bootstrap-time-picker: extend(
+    $bootstrap-time-picker,
+    (
+        hover-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+
+        active-item-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+
+        selected-text-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark indigo time-picker schema.
 /// @type {Map}
@@ -52,10 +143,9 @@ $dark-bootstrap-time-picker: $bootstrap-time-picker;
 /// @prop {Map} header-background [color: ('gray', 50)] - The header background color of a time picker.
 /// @prop {Map} selected-text-color [color: ('primary', 200)] -  The text color of a selected item in time picker.
 /// @prop {Map} hover-text-color [color: ('primary', 200)] - The hover text color of an open time picker.
-/// @prop {Color} border-color [color: ('gray', 100)] - The border-color of the time picker.
-/// @prop {Color} divider-color [color: ('gray', 100)] - The divider color of the time picker.
+/// @prop {Map} border-color [color: ('gray', 100)] - The border-color of the time picker.
+/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @prop {Map} header-hour-text-color [contrast-color: ('gray', 50)] - The header hour text color of a time picker.
-/// @prop {Map} header-time-period-color [contrast-color: ('gray', 50)] - The header AM/PM text color of a time picker.
 /// @requires $indigo-time-picker
 $dark-indigo-time-picker: extend(
     $indigo-time-picker,
@@ -96,13 +186,6 @@ $dark-indigo-time-picker: extend(
             ),
         ),
 
-        header-time-period-color: (
-            contrast-color: (
-                'gray',
-                50,
-            ),
-        ),
-
         selected-text-color: (
             color: (
                 'primary',

sass/themes/schemas/components/elevation/_time-picker.scss

@@ -6,10 +6,10 @@
 
 /// @type Map
 /// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
-/// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
+/// @prop {Number} dropdown-elevation [3] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
 $default-elevation-time-picker: (
     modal-elevation: 24,
-    dropdown-elevation: 8,
+    dropdown-elevation: 3,
 );
 $indigo-elevation-time-picker: (
     modal-elevation: 5,