igniteui-theming 6.0.2 → 6.1.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "6.0.2",
+  "version": "6.1.0-beta.2",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/schemas/components/dark/_slider.scss

@@ -22,6 +22,7 @@ $dark-material-slider: $material-slider;
 /// @prop {Map} track-color [color: ('gray', 600)] - The color of the track.
 /// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
 /// @prop {Map} thumb-border-color [color: ('gray', 400)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('gray', 400)] - The thumb border color on hover.
 /// @prop {Map} thumb-focus-color [color: ('primary', 100)] - The focus outline color of the thumb.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 200)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
@@ -60,6 +61,12 @@ $dark-fluent-slider: extend(
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
         thumb-focus-color: (
             color: (
                 'primary',
@@ -114,23 +121,121 @@ $dark-bootstrap-slider: extend(
 
 /// Generates a dark indigo slider schema.
 /// @type {Map}
-/// @prop {Map} base-track-color [color: ('gray', 200)] - The base background color of the track.
-/// @prop {Map} base-track-hover-color [color: ('gray', 400)] - The base background color of the track on hover.
+/// @prop {Map} track-step-color [contrast-color: ('gray', 50, 0.3)] - The color of the track steps.
+/// @prop {Map} base-track-color [contrast-color: ('gray', 50, 0.3)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [contrast-color: ('gray', 50, 0.4)] - The base background color of the track on hover.
+/// @prop {Map} track-color [color: ('primary', 400)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 300)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: 'surface'] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('primary', 400)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 300)] - The thumb border color when hovered.
+/// @prop {Map} tick-color [contrast-color: ('gray', 50, 0.2)] - The background-color of the tick.
+/// @prop {Map} tick-label-color [contrast-color: ('gray', 50, 0.6)] - The color of the tick label.
+/// @prop {Map} label-background-color [color: ('gray', 300)] - The background color of the bubble label.
+/// @prop {Map} label-text-color [contrast-color: ('gray', 50)] - The text color of the bubble label.
+/// @prop {Map} disabled-thumb-color [color: 'surface'] - The thumb color when it's disabled.
+/// @prop {Map} thumb-disabled-border-color [color: ('primary', 800)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-base-track-color [contrast-color: ('gray', 50, 0.15)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('primary', 800)] - The background color of the fill track when is disabled.
 /// @requires $indigo-slider
 $dark-indigo-slider: extend(
     $indigo-slider,
     (
+        track-step-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.3,
+            ),
+        ),
         base-track-color: (
-            color: (
+            contrast-color: (
                 'gray',
-                200,
+                50,
+                0.3,
             ),
         ),
         base-track-hover-color: (
-            color: (
+            contrast-color: (
                 'gray',
+                50,
+                0.4,
+            ),
+        ),
+        track-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        thumb-color: (
+            color: 'surface',
+        ),
+        thumb-border-color: (
+            color: (
+                'primary',
                 400,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                300,
+            ),
+        ),
+        tick-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        tick-label-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.6,
+            ),
+        ),
+        label-background-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        label-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        disabled-thumb-color: (
+            color: 'surface',
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
+        disabled-base-track-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.15,
+            ),
+        ),
+        disabled-fill-track-color: (
+            color: (
+                'primary',
+                800,
+            ),
+        ),
     )
 );

package/sass/themes/schemas/components/dark/_splitter.scss

@@ -51,18 +51,39 @@ $dark-bootstrap-splitter: $bootstrap-splitter;
 
 /// Generates a dark indigo splitter schema.
 /// @type {Map}
-/// @prop {Map} handle-color [color: 'surface'] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: 'surface'] - The color for the bar drag handle.
+/// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
+/// @prop {Map} focus-color [color: ('gray', 300)] - The color used for focused splitter bar.
+/// @prop {Map} handle-color [color: ('gray', 600)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 600)] - The color for the arrow expander.
 /// @requires $indigo-splitter
 $dark-indigo-splitter: extend(
     $indigo-splitter,
     (
+        bar-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+
+        focus-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
         handle-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
 
         expander-color: (
-            color: 'surface',
+            color: (
+                'gray',
+                600,
+            ),
         ),
     )
 );

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

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/time-picker' as *;
+@use '../elevation/time-picker' as *;
 
 ////
 /// @package theming
@@ -9,13 +10,35 @@
 
 /// Generates a dark material time-picker schema.
 /// @type {Map}
+/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $material-time-picker
-$dark-material-time-picker: $material-time-picker;
+$dark-material-time-picker: extend(
+    $material-time-picker,
+    (
+        divider-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent time-picker schema.
 /// @type {Map}
+/// @prop {Map} divider-color [color: ('gray', 100)] - The divider color of the time picker.
 /// @requires $fluent-time-picker
-$dark-fluent-time-picker: $fluent-time-picker;
+$dark-fluent-time-picker: extend(
+    $fluent-time-picker,
+    (
+        divider-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark bootstrap time-picker schema.
 /// @type {Map}
@@ -24,30 +47,80 @@ $dark-bootstrap-time-picker: $bootstrap-time-picker;
 
 /// Generates a dark indigo time-picker schema.
 /// @type {Map}
-/// @prop {Map} text-color [contrast-color: ('surface')] - The text color of an open time picker.
-/// @prop {Map} selected-text-color [color: ('primary', 300)] -  The text color of a selected item in time picker.
-/// @prop {Map} hover-text-color [color: ('primary', 300)] - The hover text color of an open time picker.
+/// @prop {Map} text-color [color: ('gray', 900)] - The text color of an open time picker.
+/// @prop {Map} background-color [color: ('gray', 50)] - The time-picker panel background color.
+/// @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} 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,
+    $dark-indigo-elevation-time-picker,
     (
         text-color: (
-            contrast-color: (
-                'surface',
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+
+        background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'gray',
+                50,
             ),
         ),
 
         hover-text-color: (
             color: (
                 'primary',
-                300,
+                200,
+            ),
+        ),
+
+        header-hour-text-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        header-time-period-color: (
+            contrast-color: (
+                'gray',
+                50,
             ),
         ),
 
         selected-text-color: (
             color: (
                 'primary',
-                300,
+                200,
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+
+        divider-color: (
+            color: (
+                'gray',
+                100,
             ),
         ),
     )

package/sass/themes/schemas/components/dark/_tree.scss

@@ -111,17 +111,85 @@ $dark-bootstrap-tree: extend(
 
 /// Generates a dark indigo tree schema.
 /// @type {Map}
-/// @prop {Map} hover-color [color: ('primary', 200, .5)] - The background color used for the tree node on hover.
+/// @prop {Map} background-active [color: ('primary', 400, 0.3)] - The background color used for the active tree node.
+/// @prop {Map} background-active-selected [color: ('primary', 400, 0.3)] - The background color used for the active selected tree node.
+/// @prop {Map} foreground [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node content.
+/// @prop {Map} foreground-active [contrast-color: ('gray', 50)] - The color used for the content in active state of the tree node.
+/// @prop {Map} foreground-selected [contrast-color: ('gray', 50)] - The color used for the content of the selected tree node.
+/// @prop {Map} foreground-active-selected [contrast-color: ('gray', 50)] - The color used for the content of the active selected tree node.
+/// @prop {Map} foreground-disabled [contrast-color: ('gray', 50, 0.2)] - The color used for the content of the disabled tree node.
+/// @prop {Map} icon-color [contrast-color: ('gray', 50, 0.8)] - The color used for the tree node icon.
+/// @prop {Map} hover-color [contrast-color: ('gray', 50, .1)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('primary', 400, 0.5)] - The background color used for the selected tree node on hover.
 /// @requires $indigo-tree
 /// @requires $base-dark-tree
 $dark-indigo-tree: extend(
     $indigo-tree,
-    $base-dark-tree,
     (
+        foreground: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
+        foreground-selected: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        background-active: (
+            color: (
+                'primary',
+                400,
+                0.3,
+            ),
+        ),
+        foreground-active: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        background-active-selected: (
+            color: (
+                'primary',
+                400,
+                0.3,
+            ),
+        ),
+        foreground-active-selected: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
+        foreground-disabled: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        icon-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.8,
+            ),
+        ),
         hover-color: (
+            contrast-color: (
+                'gray',
+                50,
+                0.1,
+            ),
+        ),
+        hover-selected-color: (
             color: (
                 'primary',
-                200,
+                400,
                 0.5,
             ),
         ),

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

@@ -11,3 +11,11 @@ $default-elevation-time-picker: (
     modal-elevation: 24,
     dropdown-elevation: 8,
 );
+$indigo-elevation-time-picker: (
+    modal-elevation: 5,
+    dropdown-elevation: 3,
+);
+$dark-indigo-elevation-time-picker: (
+    modal-elevation: 7,
+    dropdown-elevation: 2,
+);

package/sass/themes/schemas/components/light/_slider.scss

@@ -14,9 +14,6 @@
 /// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
 /// @prop {Color} track-step-color [white] - The color of the track steps.
 /// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
-/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
-/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
-/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
 /// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
 /// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
@@ -31,24 +28,6 @@ $light-slider: (
     ),
     track-step-color: white,
     track-step-size: rem(3px),
-    thumb-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
-    thumb-border-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
-    thumb-border-focus-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
     thumb-disabled-border-color: (
         color: (
             'gray',
@@ -83,6 +62,10 @@ $light-slider: (
 
 /// Generates a material slider schema.
 /// @type {Map}
+/// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('secondary', 500)] - The thumb border color when hovered.
+/// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
 /// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
 /// @prop {Map} track-step-color [color: ('secondary', 200)] - The color of the track steps.
 /// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
@@ -95,6 +78,30 @@ $light-slider: (
 $material-slider: extend(
     $light-slider,
     (
+        thumb-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-hover-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+        thumb-border-focus-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
         track-step-color: (
             color: (
                 'secondary',
@@ -149,6 +156,7 @@ $material-slider: extend(
 /// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
 /// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('gray', 700)] - The thumb border color when hovered.
 /// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
 /// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
@@ -185,6 +193,12 @@ $fluent-slider: extend(
                 700,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
         thumb-border-focus-color: (
             color: (
                 'gray',
@@ -242,6 +256,7 @@ $fluent-slider: extend(
 /// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
 /// @prop {Map} thumb-color [color: ('primary', 500)] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 500)] - The thumb border color when hovered.
 /// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
 /// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
@@ -275,6 +290,12 @@ $bootstrap-slider: extend(
                 500,
             ),
         ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         thumb-border-focus-color: (
             color: (
                 'surface',
@@ -298,23 +319,37 @@ $bootstrap-slider: extend(
 
 /// Generates an indigo slider schema.
 /// @type {Map}
-/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
+/// @prop {Map} track-step-color [color: ('gray', 900, 0.4)] - The color of the track steps.
+/// @prop {Number} track-step-size [rem(2px)] - The size of the track steps.
 /// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
 /// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
-/// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
-/// @prop {Map} disabled-thumb-color [color: ('gray', 300)] - The thumb color when its disabled.
-/// @prop {Map} disabled-base-track-color [color: ('gray', 300)] - The base background color of the track when is disabled.
-/// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
+/// @prop {Map} track-color [color: ('primary', 500)] - The color of the track.
+/// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
+/// @prop {Map} thumb-color [color: ('gray', 50)] - The color of the thumb.
+/// @prop {Map} thumb-border-color [color: ('primary', 500)] - The thumb border color.
+/// @prop {Map} thumb-border-hover-color [color: ('primary', 400)] - The thumb border color when hovered.
+/// @prop {Map} thumb-border-focus-color [color: ('primary', 500)] - The thumb border color when focused.
+/// @prop {Map} thumb-focus-color [color: ('primary', 400, 0.5)] - The focus outline color of the thumb.
+/// @prop {Map} tick-color [color: ('gray', 300)] - The background-color of the tick.
+/// @prop {Map} tick-label-color [color: ('gray', 600)] - The color of the tick label.
+/// @prop {Map} label-background-color [color: ('gray', 600)] - The background color of the bubble label.
+/// @prop {Map} label-text-color [contrast-color: ('gray', 600)] - The text color of the bubble label.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 50)] - The thumb color when it's disabled.
+/// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.
 /// @requires {Map} $light-slider
 $indigo-slider: extend(
     $light-slider,
     (
-        track-hover-color: (
+        track-step-color: (
             color: (
-                'primary',
-                400,
+                'gray',
+                900,
+                0.4,
             ),
         ),
+        track-step-size: rem(2px),
         base-track-color: (
             color: (
                 'gray',
@@ -327,28 +362,96 @@ $indigo-slider: extend(
                 500,
             ),
         ),
+        track-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        thumb-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        thumb-border-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        thumb-border-hover-color: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        thumb-border-focus-color: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
         thumb-focus-color: (
             color: (
                 'primary',
-                200,
+                400,
+                0.5,
             ),
         ),
-        disabled-thumb-color: (
+        tick-color: (
             color: (
                 'gray',
                 300,
             ),
         ),
+        tick-label-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        label-background-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        label-text-color: (
+            contrast-color: (
+                'gray',
+                600,
+            ),
+        ),
+        disabled-thumb-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        thumb-disabled-border-color: (
+            color: (
+                'primary',
+                50,
+            ),
+        ),
         disabled-base-track-color: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         disabled-fill-track-color: (
             color: (
-                'gray',
-                300,
+                'primary',
+                50,
             ),
         ),
     )

package/sass/themes/schemas/components/light/_splitter.scss

@@ -73,9 +73,9 @@ $bootstrap-splitter: $light-splitter;
 /// Generates an indigo splitter schema.
 /// @type {Map}
 /// @prop {Map} bar-color [color: ('gray', 400)] - The background color of the bar.
-/// @prop {Map} handle-color [color: ('surface')] - The color for the bar drag handle.
-/// @prop {Map} expander-color [color: ('surface')] - The color for the bar drag handle.
-/// @prop {Map} focus-color [color: ('primary', 500)] - The color used for focused splitter bar.
+/// @prop {Map} focus-color [color: ('gray', 500)] - The color used for focused splitter bar.
+/// @prop {Map} handle-color [color: ('gray', 700)] - The color for the bar drag handle.
+/// @prop {Map} expander-color [color: ('gray', 700)] - The color for the arrow expander.
 /// @requires {Map} $light-splitter
 $indigo-splitter: extend(
     $light-splitter,
@@ -89,20 +89,22 @@ $indigo-splitter: extend(
 
         focus-color: (
             color: (
-                'primary',
+                'gray',
                 500,
             ),
         ),
 
         handle-color: (
             color: (
-                'surface',
+                'gray',
+                700,
             ),
         ),
 
         expander-color: (
             color: (
-                'surface',
+                'gray',
+                700,
             ),
         ),
     )

package/sass/themes/schemas/components/light/_time-picker.scss

@@ -13,6 +13,7 @@
 /// @prop {Map} text-color [color: ('gray', 500)] - The text color of an open time picker.
 /// @prop {Map} hover-text-color [color: ('secondary', 500)] - The hover text color of an open time picker.
 /// @prop {Map} selected-text-color [color: ('secondary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} active-item-foreground [color: ('gray', 500)] - The foreground color for current item in focused column inside the time picker.
 /// @prop {Map} active-item-background [color: ('gray', 100)] - The background color for current item in focused column inside the time picker.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The text color for disabled values.
 /// @prop {Color} disabled-item-background [transparent] - The background color for disabled values .
@@ -20,9 +21,11 @@
 /// @prop {Map} header-hour-text-color [contrast-color: ('secondary', 500)] - The header hour text color of a time picker.
 /// @prop {Map} header-time-period-color [contrast-color: ('secondary', 500, .8)] - The header AM/PM text color of a time picker.
 /// @prop {Map} background-color [color: 'surface'] - The time-picker panel background color.
-/// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
+/// @prop {Color} border-color [transparent] - The border-color of the time picker.
 /// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
+/// @prop {List} time-item-size [(rem(28px), rem(32px), rem(36px))] - The height of the time item.
+/// @prop {Number} default-size [2] - the default size.
 /// @requires {Map} $default-elevation-time-picker
 $light-time-picker: extend(
     $default-elevation-time-picker,
@@ -48,6 +51,13 @@ $light-time-picker: extend(
             ),
         ),
 
+        active-item-foreground: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
         active-item-background: (
             color: (
                 'gray',
@@ -96,12 +106,25 @@ $light-time-picker: extend(
                 rem(20px),
             ),
         ),
+
+        border-color: transparent,
+
+        time-item-size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(36px),
+            ),
+        ),
+
+        default-size: 2,
     )
 );
 
 /// Generates a light material time-picker schema.
 /// @type {Map}
 /// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
+/// @prop {Map} divider-color [color: ('gray', 200)] - The divider color of the time picker.
 /// @requires {Map} $light-time-picker
 $material-time-picker: extend(
     $light-time-picker,
@@ -113,6 +136,13 @@ $material-time-picker: extend(
                 rem(20px),
             ),
         ),
+
+        divider-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 
@@ -120,6 +150,8 @@ $material-time-picker: extend(
 /// @type {Map}
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
 /// @prop {List} active-item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
+/// @prop {List} time-item-size [(rem(28px), rem(32px), rem(40px))] - The height of the time item.
+/// @prop {Map} divider-color [color: ('gray', 200)] - The divider color of the time picker.
 /// @requires $light-time-picker
 $fluent-time-picker: extend(
     $light-time-picker,
@@ -138,6 +170,19 @@ $fluent-time-picker: extend(
                 rem(20px),
             ),
         ),
+        divider-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        time-item-size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(40px),
+            ),
+        ),
     )
 );
 
@@ -146,6 +191,7 @@ $fluent-time-picker: extend(
 /// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
 /// @prop {Map} hover-text-color [color: ('primary', 600)] - The hover text color of an open time picker.
 /// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
+/// @prop {Map} divider-color [color: ('gray', 300)] - The divider color of the time picker.
 /// @prop {List} active-item-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 /// @requires $light-time-picker
 $bootstrap-time-picker: extend(
@@ -179,28 +225,41 @@ $bootstrap-time-picker: extend(
                 rem(20px),
             ),
         ),
+
+        divider-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
     )
 );
 
 /// Generates an indigo time-picker schema.
 /// @type {Map}
-/// @prop {Map} text-color [color: ('gray', 700)] - The text color of an open time picker.
-/// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} text-color [color: ('gray', 800)] - The text color of an open time picker.
 /// @prop {Map} hover-text-color [color: ('primary', 500)] - The hover text color of an open time picker.
-/// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
-/// @prop {Map} header-hour-text-color [contrast-color: ('primary', 500)] - The header hour text color of a time picker.
-/// @prop {Map} header-time-period-color [contrast-color: ('primary', 500)] - The header AM/PM text color of a time picker.
-/// @prop {List} border-radius [(rem(3px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
-/// @prop {List} active-item-border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
+/// @prop {Map} selected-text-color [color: ('primary', 500)] -  The text color of a selected item in 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} active-item-foreground [contrast-color: ('primary', 900)] - The foreground color for current item in focused column inside the time picker.
+/// @prop {Map} background-color [contrast-color: ('gray', 900)] - The time-picker panel background color.
+/// @prop {Map} header-background [contrast-color: ('gray', 900)] - The header background color of a time picker.
+/// @prop {Map} header-hour-text-color [color: ('gray', 800)] - The header hour text color of a time picker.
+/// @prop {Map} header-time-period-color [color: ('gray', 800)] - The header AM/PM text color of a time picker.
+/// @prop {List} border-radius [(rem(6px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
+/// @prop {List} active-item-border-radius [(rem(32px), rem(0), rem(32px))] - The border radius used for the highlight of the active item in the time-picker.
+/// @prop {Color} border-color [color: ('gray', 400)] - The border-color of the time picker.
+/// @prop {Map} divider-color [color: ('gray', 400)] - The divider color of the time picker.
 ///
 /// @requires $light-time-picker
 $indigo-time-picker: extend(
     $light-time-picker,
+    $indigo-elevation-time-picker,
     (
         text-color: (
             color: (
                 'gray',
-                700,
+                800,
             ),
         ),
 
@@ -218,39 +277,75 @@ $indigo-time-picker: extend(
             ),
         ),
 
-        header-background: (
+        active-item-foreground: (
+            contrast-color: (
+                'primary',
+                900,
+            ),
+        ),
+
+        active-item-background: (
             color: (
                 'primary',
                 500,
             ),
         ),
 
-        header-hour-text-color: (
+        background-color: (
             contrast-color: (
-                'primary',
-                500,
+                'gray',
+                900,
             ),
         ),
 
-        header-time-period-color: (
+        header-background: (
             contrast-color: (
-                'primary',
-                500,
+                'gray',
+                900,
+            ),
+        ),
+
+        header-hour-text-color: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+
+        header-time-period-color: (
+            color: (
+                'gray',
+                800,
             ),
         ),
 
         border-radius: (
             border-radius: (
-                rem(3px),
+                rem(6px),
                 rem(0),
                 rem(20px),
             ),
         ),
+
         active-item-border-radius: (
             border-radius: (
-                rem(20px),
+                rem(32px),
                 rem(0),
-                rem(20px),
+                rem(32px),
+            ),
+        ),
+
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+
+        divider-color: (
+            color: (
+                'gray',
+                400,
             ),
         ),
     )

package/sass/themes/schemas/components/light/_tree.scss

@@ -18,6 +18,7 @@
 /// @prop {Map} foreground [contrast-color: ('surface')] - The color used for the tree node content.
 /// @prop {Map} foreground-active [contrast-color: ('gray', 200)] - The color used for the content in active state of the tree node.
 /// @prop {Map} foreground-disabled [color: ('gray', 500)] - The color used for the content of the disabled tree node.
+/// @prop {Map} icon-color [contrast-color: ('surface')] - The color used for the tree node icon.
 /// @prop {Map} drop-area-color [color: ('secondary')] - The background color used for the tree node drop aria.
 /// @prop {Map} hover-color [color: ('gray', 900, .1)] - The background color used for the tree node on hover.
 /// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
@@ -34,6 +35,11 @@ $light-tree: (
             'surface',
         ),
     ),
+    icon-color: (
+        contrast-color: (
+            'surface',
+        ),
+    ),
     background-selected: (
         color: (
             'primary',
@@ -223,61 +229,104 @@ $bootstrap-tree: extend(
 
 /// Generates a light indigo tree schema.
 /// @type {Map}
-/// @prop {Map} background-active [color: ('surface')] - The background color used for the active tree node.
-/// @prop {Map} foreground-active [contrast-color: ('primary')] - The color used for the content in active state of the tree node.
-/// @prop {Map} foreground-selected [contrast-color: ('primary')] - The color used for the content of the selected tree node.
-/// @prop {Map} background-active-selected [color: ('primary', 400)] - The background color used for the active selected tree node.
-/// @prop {Map} foreground-active-selected [contrast-color: ('primary', 400)] - The color used for the content of the active selected tree node.
-/// @prop {Map} border-color [color: ('primary', 300)] - The outline shadow color used for tree node in focus state.
-/// @prop {Map} hover-color [color: ('primary', 100)] - The background color used for the tree node on hover.
-/// @prop {Map} hover-selected-color [color: ('primary', 100)] - The background color used for the selected tree node on hover.
+/// @prop {Color} background [transparent] - The background color used for the tree node.
+/// @prop {Color} background-selected [transparent] - The background color used for the selected tree node.
+/// @prop {Map} background-active [color: ('primary', 300, 0.3)] - The background color used for the active tree node.
+/// @prop {Map} background-active-selected [color: ('primary', 300, 0.3)] - The background color used for the active selected tree node.
+/// @prop {Color} background-disabled [transparent] - The background color used for the tree node in disabled state.
+/// @prop {Map} foreground [color: ('gray', 800)] - The color used for the tree node content.
+/// @prop {Map} foreground-active [color: ('gray', 900)] - The color used for the content in active state of the tree node.
+/// @prop {Map} foreground-selected [color: ('gray', 900)] - The color used for the content of the selected tree node.
+/// @prop {Map} foreground-active-selected [color: ('gray', 900)] - The color used for the content of the active selected tree node.
+/// @prop {Map} foreground-disabled [color: ('gray', 900, 0.2)] - The color used for the content of the disabled tree node.
+/// @prop {Map} icon-color [color: ('gray', 600)] - The color used for the tree node icon.
+/// @prop {Map} border-color [color: ('primary', 400)] - The outline shadow color used for tree node in focus state.
+/// @prop {Map} hover-color [color: ('gray', 900, .05)] - The background color used for the tree node on hover.
+/// @prop {Map} hover-selected-color [color: ('primary', 300, 0.5)] - The background color used for the selected tree node on hover.
+/// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the tree node.
 /// @requires {Map} $light-tree
 $indigo-tree: extend(
     $light-tree,
     (
+        background: transparent,
+        foreground: (
+            color: (
+                'gray',
+                800,
+            ),
+        ),
+        background-selected: transparent,
+        foreground-selected: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         background-active: (
             color: (
-                'surface',
+                'primary',
+                300,
+                0.3,
             ),
         ),
         foreground-active: (
             color: (
-                'primary',
+                'gray',
+                900,
             ),
         ),
-        foreground-selected: (
-            contrast-color: (
-                'primary',
+        background-disabled: transparent,
+        foreground-disabled: (
+            color: (
+                'gray',
+                900,
+                0.2,
             ),
         ),
         background-active-selected: (
             color: (
                 'primary',
-                400,
+                300,
+                0.3,
             ),
         ),
         foreground-active-selected: (
-            contrast-color: (
-                'primary',
-                400,
+            color: (
+                'gray',
+                900,
+            ),
+        ),
+        icon-color: (
+            color: (
+                'gray',
+                600,
             ),
         ),
         border-color: (
             color: (
                 'primary',
-                300,
+                400,
             ),
         ),
         hover-color: (
             color: (
-                'primary',
-                100,
+                'gray',
+                900,
+                0.05,
             ),
         ),
         hover-selected-color: (
             color: (
                 'primary',
-                100,
+                300,
+                0.5,
+            ),
+        ),
+        size: (
+            sizable: (
+                rem(24px),
+                rem(28px),
+                rem(32px),
             ),
         ),
     )

package/sass/utils/_math.scss

@@ -46,3 +46,11 @@
 
     @return $sign + $result;
 }
+
+/// Removes measurement units from variable.
+/// @access private
+/// @param {Number} $var - The variable to remove the unit of.
+/// @return {Number} - The given variable without units.
+@function unitless($var) {
+    @return math.div($var, $var * 0 + 1);
+}