igniteui-theming 5.2.0-beta.2 → 5.2.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "5.2.0-beta.2",
+  "version": "5.2.0-beta.3",
   "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/_time-picker.scss

@@ -1,5 +1,6 @@
 @use '../../../../utils/map' as *;
 @use '../light/time-picker' as *;
+@use '../elevation/time-picker' as *;
 
 ////
 /// @package theming
@@ -10,12 +11,32 @@
 /// Generates a dark material time-picker schema.
 /// @type {Map}
 /// @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}
 /// @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 +45,56 @@ $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} 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.
 /// @requires $indigo-time-picker
 $dark-indigo-time-picker: extend(
     $indigo-time-picker,
+    $dark-indigo-elevation-time-picker,
     (
-        text-color: (
-            contrast-color: (
-                'surface',
+        background-color: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        header-background: (
+            color: (
+                'gray',
+                50,
             ),
         ),
 
         hover-text-color: (
             color: (
                 'primary',
-                300,
+                200,
             ),
         ),
 
         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/_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,27 @@ $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 {Color} divider-color [color: ('gray', 200)] - The divider color of the time picker.
+/// @prop {Color} divider-color [transparent] - The divider color of the time picker.
+
 /// @requires {Map} $light-time-picker
 $material-time-picker: extend(
     $light-time-picker,
@@ -113,6 +138,13 @@ $material-time-picker: extend(
                 rem(20px),
             ),
         ),
+
+        divider-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
     )
 );
 
@@ -120,6 +152,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 {Color} 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 +172,19 @@ $fluent-time-picker: extend(
                 rem(20px),
             ),
         ),
+        divider-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        time-item-size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(40px),
+            ),
+        ),
     )
 );
 
@@ -146,6 +193,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 {Color} 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 +227,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 {Color} 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 +279,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);
+}