igniteui-theming 4.2.0 → 4.3.0

package/sass/themes/schemas/components/light/_input-group.scss

@@ -10,7 +10,7 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light input-group schema.
+/// Generates a base light input-group schema.
 /// @type {Map}
 /// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border.
 /// @prop {Color} input-prefix-background [transparent] - The background color of an input prefix of type line, box and border.
@@ -24,15 +24,15 @@
 /// @prop {Map} idle-secondary-color [color: ('gray', 700)] - The label color in the idle state.
 /// @prop {Map} filled-secondary-color [color: ('gray', 600)] - The label color in the filled state.
 /// @prop {Map} focused-secondary-color [ color: ('primary', 500)] - The label color in the focused state.
-/// @prop {Map} idle-bottom-line-color [color: ('gray', 600)] - The bottom line and border colors in the idle state.
+/// @prop {Map} idle-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the idle state.
 /// @prop {Map} hover-bottom-line-color [color: ('gray', 900)] - The bottom line and border colors in the hover state.
 /// @prop {Map} focused-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors in the focused state.
 /// @prop {Map} interim-bottom-line-color [color: ('primary', 500, .12)] - The bottom line and border colors during the to-focused transition.
 /// @prop {Map} disabled-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the disabled state.
-/// @prop {Map} border-color [color: ('gray', 600)] - The border color for input groups of type border and fluent.
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
 /// @prop {Map} hover-border-color [color: ('gray', 900)] - The hover input border for input groups of type border and fluent.
 /// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
-/// @prop {Map} disabled-border-color [color: ('gray', 400)] - The disabled border color for input groups of type border and fluent.
+/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
 /// @prop {Map} box-background [color: ('gray', 100)] - The background color of an input group of type box.
 /// @prop {Map} box-background-hover [color: ('gray', 200)] - The background color of an input group of type box on hover.
 /// @prop {Map} box-background-focus [color: ('gray', 200)] - The background color of an input group of type box on focus.
@@ -196,13 +196,13 @@ $light-input-group: extend(
         disabled-border-color: (
             color: (
                 'gray',
-                500,
+                300,
             ),
         ),
         border-color: (
             color: (
                 'gray',
-                600,
+                400,
             ),
         ),
         hover-border-color: (
@@ -328,30 +328,48 @@ $light-input-group: extend(
     )
 );
 
+/// Generates a material input-group schema.
+/// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 600)] - The border color for input groups of type border and fluent.
+/// @prop {Map} disabled-border-color [color: ('gray', 500)] - The disabled border color for input groups of type border and fluent.
+/// @requires {Map} $light-input-group
+$material-input-group: extend(
+    $light-input-group,
+    (
+        border-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent input-group schema.
 /// @type {Map}
 /// @prop {Map} idle-secondary-color [color: ('gray', 900)] - The label color in the idle state.
 /// @prop {Map} idle-text-color [color: ('gray', 900)] - The input text color in the idle state.
-/// @prop {Map} disabled-text-color [color: ('gray', 500)] - The input text color in the disabled state.
 /// @prop {Map} border-color [color: ('gray', 500)] - The border color for input groups of type border and fluent.
 /// @prop {Map} hover-border-color [color: ('gray', 700)] - The hover input border for input groups of type border and fluent.
 /// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled border color for input groups of type border and fluent.
-/// @prop {Map} focused-border-color [color: ('primary', 500)] - The focused input border color for input groups of type border and fluent.
 /// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state.
-/// @prop {Map} search-disabled-background [color: ('gray', 100)] - The background color of an input group of type search in the disabled state.
 /// @prop {Number} search-resting-elevation [0] - The elevation level, between 0-24, to be used for the resting state of the search input.
 /// @prop {Number} search-hover-elevation [0] - The elevation level, between 0-24, to be used for the hover state of the search input.
 /// @prop {Number} search-disabled-elevation [0] - The elevation level, between 0-24, to be used for the disabled state of the search input.
 /// @prop {List} box-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for box input.
 /// @prop {List} border-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for border input.
 /// @prop {List} search-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for search input.
-/// @prop {Map} input-prefix-color [color: ('gray', 700)] - The text color of an input prefix of type line, box and border.
 /// @prop {Map} input-prefix-color--filled [color: ('gray', 700)] - The input prefix color in the filled state.
 /// @prop {Map} input-prefix-color--focused [color: ('gray', 700)] - The input prefix color in the focused state.
 /// @prop {Map} input-prefix-background [color: ('gray', 100)] - The background color of an input prefix of type line, box, border and fluent.
 /// @prop {Map} input-prefix-background--filled [color: ('gray', 100)] - The background color of an input prefix in the filled state.
 /// @prop {Map} input-prefix-background--focused [color: ('gray', 100)] - The background color of an input prefix in the focused state.
-/// @prop {Map} input-suffix-color [color: ('gray', 700)] - The text color of an input suffix of type line, box and border.
 /// @prop {Map} input-suffix-color--filled [color: ('gray', 700)] - The input suffix color in the filled state.
 /// @prop {Map} input-suffix-color--focused [color: ('gray', 700)] - The input suffix color in the focused state.
 /// @prop {Map} input-suffix-background [color: ('gray', 100)] - The background color of an input suffix of type line, box and border.
@@ -376,12 +394,6 @@ $fluent-input-group: extend(
                 900,
             ),
         ),
-        disabled-text-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         border-color: (
             color: (
                 'gray',
@@ -394,12 +406,6 @@ $fluent-input-group: extend(
                 700,
             ),
         ),
-        focused-border-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         disabled-border-color: (
             color: (
                 'gray',
@@ -412,18 +418,6 @@ $fluent-input-group: extend(
                 100,
             ),
         ),
-        search-disabled-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-        input-prefix-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
         input-prefix-color--filled: (
             color: (
                 'gray',
@@ -454,12 +448,6 @@ $fluent-input-group: extend(
                 100,
             ),
         ),
-        input-suffix-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
         input-suffix-color--filled: (
             color: (
                 'gray',
@@ -524,13 +512,7 @@ $fluent-input-group: extend(
 /// Generates a bootstrap input-group schema.
 /// @type {Map}
 /// @prop {Map} border-disabled-background [color: ('gray', 100)] - The background color of an input group of type border in the disabled state.
-/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
-/// @prop {Map} idle-secondary-color [color: ('gray', 700)] - The label color in the idle state.
-/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
 /// @prop {Map} focused-secondary-color [color: ('primary', 500, .38)] - The label color in the focused state.
-/// @prop {Map} success-secondary-color [color: ('success', 500)] - The success color used in the valid state.
-/// @prop {Map} warning-secondary-color [color: ('warn', 500)] - The warning color used in the warning state.
-/// @prop {Map} error-secondary-color [color: ('error')] - The error color used in the error state.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The input text color in the disabled state.
 /// @prop {Map} interim-bottom-line-color [color: ('primary', 500)] - The bottom line and border colors during the to-focused transition.
 /// @prop {Map} disabled-placeholder-color [color: ('gray', 400)] - The disabled placeholder color of an input group.
@@ -570,36 +552,6 @@ $bootstrap-input-group: extend(
                 0.38,
             ),
         ),
-        success-secondary-color: (
-            color: (
-                'success',
-                500,
-            ),
-        ),
-        warning-secondary-color: (
-            color: (
-                'warn',
-                500,
-            ),
-        ),
-        error-secondary-color: (
-            color: (
-                'error',
-                500,
-            ),
-        ),
-        border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        idle-secondary-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
         input-prefix-color: (
             color: (
                 'gray',
@@ -654,18 +606,6 @@ $bootstrap-input-group: extend(
                 400,
             ),
         ),
-        disabled-border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        box-disabled-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
         disabled-placeholder-color: (
             color: (
                 'gray',
@@ -687,14 +627,11 @@ $bootstrap-input-group: extend(
 /// @prop {Map} input-prefix-color [color: ('gray', 600)] - The text color of an input prefix of type line, box and border.
 /// @prop {Map} input-suffix-color [color: ('gray', 600)] - The text color of an input suffix of type line, box and border.
 /// @prop {Map} helper-text-color [color: ('gray', 600)] - The helper text color.
-/// @prop {Map} border-color [color: ('gray', 400)] - The border color for input groups of type border and fluent.
 /// @prop {Color} box-background [transparent] - The background color of an input group of type box.
 /// @prop {Map} box-background-hover [color: ('gray', 100)] - The background color of an input group of type box on hover.
-/// @prop {Map} disabled-border-color [color: ('gray', 300)] - The disabled border color for input groups of type border and fluent.
 /// @prop {Map} disabled-bottom-line-color [color: ('gray', 300)] - The bottom line and border colors in the disabled state.
 /// @prop {Color} box-disabled-background [transparent] - The background color of an input group in the disabled state.
 /// @prop {Map} disabled-text-color [color: ('gray', 300)] - The input text color in the disabled state.
-/// @prop {Map} idle-bottom-line-color [color: ('gray', 500)] - The bottom line and border colors in the idle state.
 /// @prop {Map} focused-bottom-line-color [color: ('secondary', 500)] - The bottom line and border colors in the focused state.
 /// @prop {Map} focused-border-color [color: ('primary', 400)] - The focused input border color for input groups of type border and fluent.
 /// @prop {Map} hover-border-color [color: ('gray', 600)] - The hover input border for input groups of type border and fluent.
@@ -760,12 +697,6 @@ $indigo-input-group: extend(
                 600,
             ),
         ),
-        border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         hover-border-color: (
             color: (
                 'gray',
@@ -778,18 +709,6 @@ $indigo-input-group: extend(
                 400,
             ),
         ),
-        disabled-border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        idle-bottom-line-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         focused-bottom-line-color: (
             color: (
                 'secondary',
@@ -822,6 +741,12 @@ $indigo-input-group: extend(
                 600,
             ),
         ),
+        idle-secondary-color: (
+            color: (
+                'gray',
+                900,
+            ),
+        ),
         disabled-text-color: (
             color: (
                 'gray',
@@ -861,11 +786,5 @@ $indigo-input-group: extend(
                 rem(20px),
             ),
         ),
-        idle-secondary-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
     )
 );

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

@@ -4,10 +4,10 @@
 /// @access public
 ////
 
-/// Generates a light material label schema.
+/// Generates a base light label schema.
 /// @type {Map}
 /// @prop {Color} color [color: ('gray', 700)] - The label color.
-$material-label: (
+$light-label: (
     color: (
         color: (
             'gray',
@@ -16,6 +16,11 @@ $material-label: (
     ),
 );
 
+/// Generates a light material label schema.
+/// @type {Map}
+/// @requires {Map} $light-label
+$material-label: $light-label;
+
 /// Generates a light fluent label schema.
 /// @type {Map}
 /// @prop {Color} color [color: ('gray', 900)] - The label color.
@@ -30,15 +35,8 @@ $fluent-label: (
 
 /// Generates a light bootstrap label schema.
 /// @type {Map}
-/// @prop {Color} color [color: ('gray', 700)] - The label color.
-$bootstrap-label: (
-    color: (
-        color: (
-            'gray',
-            700,
-        ),
-    ),
-);
+/// @requires {Map} $light-label
+$bootstrap-label: $light-label;
 
 /// Generates a light indigo label schema.
 /// @type {Map}

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light list schema.
+/// Generates a base light list schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The list background color.
 /// @prop {Map} header-background [color: 'surface'] - The list header background color.
@@ -135,6 +135,11 @@ $light-list: (
     default-size: 2,
 );
 
+/// Generates a material list schema.
+/// @type {Map}
+/// @requires {Map} $light-list
+$material-list: $light-list;
+
 /// Generates a fluent list schema.
 /// @type {Map}
 /// @requires {Map} $light-list

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

@@ -8,7 +8,7 @@
 /// @access public
 ////
 
-/// Generates a light navbar schema.
+/// Generates a base light navbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 500)] - The navbar background color.
 /// @prop {Map} border-color [color: ('primary', 500)] - The navbar border color.
@@ -53,6 +53,11 @@ $light-navbar: extend(
     )
 );
 
+/// Generates a material navbar schema.
+/// @type {Map}
+/// @requires {Map} $light-navbar
+$material-navbar: $light-navbar;
+
 /// Generates a fluent navbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navbar background color.

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

@@ -8,7 +8,7 @@
 /// @access public
 ////
 
-/// Generates a light navdrawer schema.
+/// Generates a base light navdrawer schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The navigation drawer background color.
 /// @prop {Map} border-color [color: ('gray', 900, .14)] - The navigation drawer right border color.
@@ -122,6 +122,11 @@ $light-navdrawer: extend(
     )
 );
 
+/// Generates a material navdrawer schema.
+/// @type {Map}
+/// @requires {Map} $light-navdrawer
+$material-navdrawer: $light-navdrawer;
+
 /// Generates a fluent navdrawer schema.
 /// @type {Map}
 /// @requires {Map} $light-navdrawer

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light overlay schema.
+/// Generates a base light overlay schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: ('gray', 500, .54)] - The background color used for modal overlays.
 $light-overlay: (
@@ -20,6 +20,11 @@ $light-overlay: (
     ),
 );
 
+/// Generates a material overlay schema.
+/// @type {Map}
+/// @requires {Map} $light-overlay
+$material-overlay: $light-overlay;
+
 /// Generates a fluent overlay schema.
 /// @type {Map}
 /// @prop {Color} background-color [rgba(255, 255, 255, .4)] - The background color used for modal overlays.

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light pagination schema.
+/// Generates a base light pagination schema.
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 800)] - The text color.
 /// @prop {Map} background-color [color: ('gray', 100)] - The background color of the paging panel.
@@ -43,7 +43,12 @@ $light-pagination: (
     ),
 );
 
-/// Generates a light pagination schema.
+/// Generates a material pagination schema.
+/// @type {Map}
+/// @requires {Map} $light-pagination
+$material-pagination: $light-pagination;
+
+/// Generates a fluent pagination schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: 'surface'] - The background color of the paging panel.
 /// @prop {Map} border-color [color: ('gray', 100)] - The border color of the paging panel.

package/sass/themes/schemas/components/light/_pivot-data-selector.scss

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light pivot data selector schema.
+/// Generates a base light pivot data selector schema.
 /// @type {Map}
 $light-pivot-data-selector: (
     background: (
@@ -22,6 +22,11 @@ $light-pivot-data-selector: (
     ),
 );
 
+/// Generates a material pivot data selector schema.
+/// @type {Map}
+/// @requires {Map} $light-pivot-data-selector
+$material-pivot-data-selector: $light-pivot-data-selector;
+
 /// Generates a fluent pivot data selector schema.
 /// @type {Map}
 /// @requires {Map} $light-pivot-data-selector

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light progress-linear schema.
+/// Generates a base light progress-linear schema.
 /// @type {Map}
 /// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
 /// @prop {Map} fill-color-default [color: ('primary', 500)] - The track default fill color.
@@ -83,6 +83,11 @@ $light-progress-linear: extend(
     )
 );
 
+/// Generates a material progress-linear schema.
+/// @type {Map}
+/// @requires $light-progress-linear
+$material-progress-linear: $light-progress-linear;
+
 /// Generates a fluent progress-linear schema.
 /// @type {Map}
 /// @requires $light-progress-linear
@@ -90,20 +95,12 @@ $fluent-progress-linear: $light-progress-linear;
 
 /// Generates a bootstrap progress-linear schema.
 /// @type {Map}
-/// @prop {Map} track-color [color: ('gray', 200)] - The main track color.
 /// @prop {Map} stripes-color [color: ('gray', 50, .15)] - The track stripes color.
 /// @prop {List} track-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the progress bar track.
 /// @requires $light-progress-linear
 $bootstrap-progress-linear: extend(
     $light-progress-linear,
     (
-        track-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
         stripes-color: (
             color: (
                 'gray',
@@ -124,19 +121,11 @@ $bootstrap-progress-linear: extend(
 
 /// Generates an indigo progress-linear schema.
 /// @type {Map}
-/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
 /// @prop {Map} stripes-color [color: ('gray', 50, .45)] - The track stripes color.
 /// @requires $light-progress-linear
 $indigo-progress-linear: extend(
     $light-progress-linear,
     (
-        track-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-
         stripes-color: (
             color: (
                 'gray',
@@ -147,7 +136,7 @@ $indigo-progress-linear: extend(
     )
 );
 
-/// Generates a light progress-circular schema.
+/// Generates a base light progress-circular schema.
 /// @type {Map}
 /// @prop {Map} base-circle-color [color: ('gray', 300)] - The base circle fill color.
 /// @prop {Map} progress-circle-color [color: ('primary', 500)] - The progress circle fill color.
@@ -180,6 +169,11 @@ $light-progress-circular: extend(
     )
 );
 
+/// Generates a material progress-circular schema.
+/// @type {Map}
+/// @requires {Map} $light-progress-circular
+$material-progress-circular: $light-progress-circular;
+
 /// Generates a fluent progress-circular schema.
 /// @type {Map}
 /// @requires {Map} $light-progress-circular
@@ -187,32 +181,10 @@ $fluent-progress-circular: $light-progress-circular;
 
 /// Generates a bootstrap progress-circular schema.
 /// @type {Map}
-/// @prop {Map} track-color [color: ('gray', 200)] - The main track color.
 /// @requires {Map} $light-progress-circular
-$bootstrap-progress-circular: extend(
-    $light-progress-circular,
-    (
-        track-color: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-    )
-);
+$bootstrap-progress-circular: $light-progress-circular;
 
 /// Generates an indigo progress-circular schema.
 /// @type {Map}
-/// @prop {Map} track-color [color: ('gray', 300)] - The main track color.
 /// @requires {Map} $light-progress-circular
-$indigo-progress-circular: extend(
-    $light-progress-circular,
-    (
-        track-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-    )
-);
+$indigo-progress-circular: $light-progress-circular;

package/sass/themes/schemas/components/light/_query-builder.scss

@@ -8,7 +8,8 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// Generates a fluent query builder schema.
+/// Generates a base light query builder schema.
+/// @type {Map}
 /// @prop {Color} background [('gray', 50)] - The background color of the filtering row.
 /// @prop {Color} header-background [('gray', 100)] - The background color of the query builder header.
 /// @prop {Color} header-foreground [('gray', 700)] - The foreground color of the query builder header.
@@ -67,22 +68,19 @@ $light-query-builder: (
     ),
 );
 
+/// Generates a material query builder schema.
+/// @type {Map}
+/// @requires {Map} $light-query-builder
+$material-query-builder: $light-query-builder;
+
 /// Generates a fluent query builder schema.
 /// @type {Map}
-/// @prop {Map} background [('gray', 50)] - The background color of the filtering row.
 /// @prop {Map} background-or [('error', 500, .5)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} background-or--focus [('error')] - The background color on focus/selected of advanced filtering "OR" condition.
 /// @requires {Map} $light-query-builder
 $fluent-query-builder: extend(
     $light-query-builder,
     (
-        background: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
-
         background-or: (
             color: (
                 'error',
@@ -99,9 +97,9 @@ $fluent-query-builder: extend(
     )
 );
 
-/// Generates a fluent query builder schema.
-/// @prop {Color} header-background [('gray', 100, .5)] - The background color of the query builder header.
+/// Generates a bootstrap query builder schema.
 /// @type {Map}
+/// @prop {Color} header-background [('gray', 100, .5)] - The background color of the query builder header.
 /// @requires {Map} $light-query-builder
 $bootstrap-query-builder: extend(
     $light-query-builder,
@@ -117,6 +115,7 @@ $bootstrap-query-builder: extend(
 );
 
 /// Generates an indigo query builder schema.
+/// @type {Map}
 /// @prop {Map} background-or [('warn', 500, .72)] - The background color of advanced filtering "OR" condition.
 /// @prop {Map} background-or--focus [('warn', 500)] - The background color on focus/selected of advanced filtering "OR" condition.
 /// @requires {Map} $light-query-builder