igniteui-theming 4.2.0 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "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/_action-strip.scss

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark action-strip schema.
+/// Generates a dark material action-strip schema.
 /// @type {Map}
-/// @requires $light-action-strip
-$dark-action-strip: $light-action-strip;
+/// @requires $material-action-strip
+$dark-material-action-strip: $material-action-strip;
 
 /// Generates a dark fluent action strip schema.
 /// @type {Map}

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

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark avatar schema.
+/// Generates a dark material avatar schema.
 /// @type {Map}
-/// @requires $light-avatar
-$dark-avatar: $light-avatar;
+/// @requires $material-avatar
+$dark-material-avatar: $material-avatar;
 
 /// Generates a dark fluent avatar schema.
 /// @type {Map}

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

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark badge schema.
+/// Generates a dark material badge schema.
 /// @type {Map}
-/// @requires $light-badge
-$dark-badge: $light-badge;
+/// @requires $material-badge
+$dark-material-badge: $material-badge;
 
 /// Generates a dark fluent badge schema.
 /// @type {Map}

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

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark banner schema.
+/// Generates a dark material banner schema.
 /// @type {Map}
-/// @requires $light-banner
-$dark-banner: $light-banner;
+/// @requires $material-banner
+$dark-material-banner: $material-banner;
 
 /// Generates a dark fluent banner schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_bottom-nav.scss

@@ -7,38 +7,29 @@
 /// @access public
 ////
 
-/// Generates the base dark bottom-nav schema.
+/// Generates a dark material bottom-nav schema.
 /// @type {Map}
-$base-dark-bottom-nav: $light-bottom-nav;
+/// @requires $material-bottom-nav
+$dark-material-bottom-nav: $material-bottom-nav;
 
-/// Generates a dark bottom-nav schema based on a mix of $light-bottom-nav and $base-dark-bottom-nav
-/// @type {Map}
-/// @requires $light-bottom-nav
-/// @requires $base-dark-bottom-nav
-$dark-bottom-nav: extend($light-bottom-nav, $base-dark-bottom-nav);
-
-/// Generates a dark fluent bottom-nav schema based on a mix of $fluent-bottom-nav and $base-dark-bottom-nav
+/// Generates a dark fluent bottom-nav schema.
 /// @type {Map}
 /// @requires $fluent-bottom-nav
-/// @requires $base-dark-bottom-nav
-$dark-fluent-bottom-nav: extend($fluent-bottom-nav, $base-dark-bottom-nav);
+$dark-fluent-bottom-nav: $fluent-bottom-nav;
 
-/// Generates a dark bootstrap bottom-nav schema based on a mix of $bootstrap-bottom-nav and $base-dark-bottom-nav
+/// Generates a dark bootstrap bottom-nav schema.
 /// @type {Map}
 /// @requires $bootstrap-bottom-nav
-/// @requires $base-dark-bottom-nav
-$dark-bootstrap-bottom-nav: extend($bootstrap-bottom-nav, $base-dark-bottom-nav);
+$dark-bootstrap-bottom-nav: $bootstrap-bottom-nav;
 
-/// Generates a dark indigo bottom-nav schema based on a mix of $indigo-bottom-nav and $base-dark-bottom-nav
+/// Generates a dark indigo bottom-nav schema.
 /// @type {Map}
 /// @prop {Map} background [color: 'surface'] - The background color used for the bottom-nav.
 /// @prop {Color} active-item-color [color: ('gray', 700)] - The text-color used for the active color.
 /// @prop {Map} idle-item-color [color: ('gray', 400)] - The text-color used for the idle color.
 /// @requires $indigo-bottom-nav
-/// @requires $base-dark-bottom-nav
 $dark-indigo-bottom-nav: extend(
     $indigo-bottom-nav,
-    $base-dark-bottom-nav,
     (
         background: (
             color: 'surface',

package/sass/themes/schemas/components/dark/_button-group.scss

@@ -78,11 +78,11 @@ $base-dark-button-group: (
     ),
 );
 
-/// Generates a dark button-group schema based on a mix of $light-button-group and $base-dark-button-group
+/// Generates a dark material button-group schema based on a mix of $light-button-group and $base-dark-button-group
 /// @type {Map}
-/// @requires $light-button-group
+/// @requires $material-button-group
 /// @requires $base-dark-button-group
-$dark-button-group: extend($light-button-group, $base-dark-button-group);
+$dark-material-button-group: extend($material-button-group, $base-dark-button-group);
 
 /// Generates a dark fluent button-group schema based on a mix of $fluent-button-group and $base-dark-button-group
 /// @type {Map}

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

@@ -12,7 +12,6 @@
 /// @type {Map}
 /// @prop {Map} disabled-background [color: ('gray', 100, .3)] - The disabled background color of the button.
 /// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the button.
-/// @requires {Map} $material-base-button
 $material-base-button-dark: (
     disabled-background: (
         color: (
@@ -95,10 +94,10 @@ $material-outlined-button-dark: extend(
 /// Generates a dark material button schema.
 /// @type {Map}
 /// @requires {Map} $material-flat-button-dark
-/// @requires {Map} $material-outlined-button
-/// @requires {Map} $material-contained-button
-/// @requires {Map} $material-fab-button
-$dark-button: (
+/// @requires {Map} $material-outlined-button-dark
+/// @requires {Map} $material-contained-button-dark
+/// @requires {Map} $material-fab-button-dark
+$dark-material-button: (
     flat: $material-flat-button-dark,
     outlined: $material-outlined-button-dark,
     contained: $material-contained-button-dark,
@@ -106,7 +105,6 @@ $dark-button: (
 );
 
 /// @type {Map}
-/// @requires {Map} $material-base-button
 /// @prop {Map} disabled-background [color: ('primary', 50)] - The disabled background color of the button.
 /// @prop {Map} disabled-foreground [color: ('primary', 100)] - The disabled foreground color of the button.
 $fluent-base-button-dark: (
@@ -348,7 +346,6 @@ $dark-bootstrap-button: (
 /// @type {Map}
 /// @prop {Color} disabled-foreground [color: ('gray', 300)] - The disabled foreground color of the button.
 /// @prop {Color} disabled-background [color: ('gray', 200, .1)] - The disabled background color of the button.
-/// @requires {Map} $indigo-base-button
 $indigo-base-button-dark: (
     disabled-foreground: (
         color: (

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

@@ -7,14 +7,14 @@
 /// @access public
 ////
 
-/// Generates a dark calendar schema.
+/// Generates a dark material calendar schema.
 /// @type {Map}
 /// @prop {Map} date-disabled-text-color [color: ('gray', 500)] - The text color for disabled dates.
 /// @prop {Map} date-selected-hover-foreground [contrast-color: ('secondary', 500)] - The hover text color for the selected date.
 /// @prop {Map} date-selected-focus-foreground [contrast-color: ('secondary', 500)] - The focus text color for the selected date.
-/// @requires $light-calendar
-$dark-calendar: extend(
-    $light-calendar,
+/// @requires $material-calendar
+$dark-material-calendar: extend(
+    $material-calendar,
     (
         date-disabled-text-color: (
             color: (

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

@@ -7,12 +7,12 @@
 /// @access public
 ////
 
-/// Generates a dark card schema.
+/// Generates a dark material card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 400, .38)] - The outline color of an outlined type card.
-/// @requires $light-card
-$dark-card: extend(
-    $light-card,
+/// @requires $material-card
+$dark-material-card: extend(
+    $material-card,
     (
         outline-color: (
             color: (

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

@@ -54,11 +54,11 @@ $base-dark-carousel: extend(
     )
 );
 
-/// Generates a dark carousel schema based on a mix of $light-carousel and $base-dark-carousel
+/// Generates a dark material carousel schema based on a mix of $material-carousel and $base-dark-carousel
 /// @type {Map}
-/// @requires $light-carousel
+/// @requires $material-carousel
 /// @requires $base-dark-carousel
-$dark-carousel: $base-dark-carousel;
+$dark-material-carousel: extend($material-carousel, $base-dark-carousel);
 
 /// Generates a dark fluent carousel schema based on a mix of $fluent-carousel and $base-dark-carousel
 /// @type {Map}

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

@@ -8,10 +8,10 @@
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
 ////
 
-/// Generates a dark checkbox schema.
+/// Generates a dark material checkbox schema.
 /// @type {Map}
-/// @requires $light-checkbox
-$dark-checkbox: $light-checkbox;
+/// @requires $material-checkbox
+$dark-material-checkbox: $material-checkbox;
 
 /// Generates a dark fluent checkbox schema.
 /// @type {Map}

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

@@ -7,22 +7,22 @@
 /// @access public
 ////
 
-/// Generates a dark chip schema based on a mix of $light-chip and $base-dark-chip.
+/// Generates a dark material chip schema.
 /// @type {Map}
-/// @requires $light-chip
-$dark-chip: $light-chip;
+/// @requires $material-chip
+$dark-material-chip: $material-chip;
 
-/// Generates a dark fluent chip schema based on a mix of $fluent-chip and $base-dark-chip.
+/// Generates a dark fluent chip schema.
 /// @type {Map}
 /// @requires $fluent-chip
 $dark-fluent-chip: $fluent-chip;
 
-/// Generates a dark bootstrap chip schema based on a mix of $bootstrap-chip and $ase-dark-chip.
+/// Generates a dark bootstrap chip schema.
 /// @type {Map}
 /// @requires $bootstrap-chip
 $dark-bootstrap-chip: $bootstrap-chip;
 
-/// Generates a dark indigo chip schema based on a mix of $indigo-chip and $base-dark-chip.
+/// Generates a dark indigo chip schema.
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
 /// @prop {Map} hover-text-color [color: ('gray', 700)] - The chip text hover color.

package/sass/themes/schemas/components/dark/_column-actions.scss

@@ -7,22 +7,22 @@
 /// @access private
 ////
 
-/// Generates a dark column actions schema based on a mix of $light-column-actions.
+/// Generates a dark material column actions schema.
 /// @type {Map}
-/// @requires $light-column-actions
-$dark-column-actions: $light-column-actions;
+/// @requires $material-column-actions
+$dark-material-column-actions: $material-column-actions;
 
-/// Generates a dark fluent column actions schema based on a mix of $luent-column-actions.
+/// Generates a dark fluent column actions schema.
 /// @type {Map}
 /// @requires $fluent-column-actions
 $dark-fluent-column-actions: $fluent-column-actions;
 
-/// Generates a dark bootstrap column actions schema based on a mix of $bootstrap-column-actions.
+/// Generates a dark bootstrap column actions schema.
 /// @type {Map}
 /// @requires $bootstrap-column-actions
 $dark-bootstrap-column-actions: $bootstrap-column-actions;
 
-/// Generates a dark indigo column actions schema based on a mix of $indigo-column-actions.
+/// Generates a dark indigo column actions schema.
 /// @type {Map}
 /// @requires $indigo-column-actions
 $dark-indigo-column-actions: $indigo-column-actions;

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

@@ -10,10 +10,10 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a dark combo schema.
+/// Generates a dark material combo schema.
 /// @type {Map}
-/// @requires $light-combo
-$dark-combo: $light-combo;
+/// @requires $material-combo
+$dark-material-combo: $material-combo;
 
 /// Generates a dark fluent combo schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_date-range-picker.scss

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark date-range-picker schema.
+/// Generates a dark material date-range-picker schema.
 /// @type {Map}
-/// @requires $light-date-range-picker
-$dark-date-range-picker: $light-date-range-picker;
+/// @requires $material-date-range-picker
+$dark-material-date-range-picker: $material-date-range-picker;
 
 /// Generates a dark fluent date-range-picker schema.
 /// @type {Map}

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

@@ -19,11 +19,11 @@ $base-dark-dialog: (
     ),
 );
 
-/// Generates a dark dialog schema.
+/// Generates a dark material dialog schema.
 /// @type {Map}
-/// @requires $light-dialog
+/// @requires $material-dialog
 /// @requires $base-dark-dialog
-$dark-dialog: extend($light-dialog, $base-dark-dialog);
+$dark-material-dialog: extend($material-dialog, $base-dark-dialog);
 
 /// Generates a dark fluent dialog schema.
 /// @type {Map}

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

@@ -19,11 +19,11 @@ $base-dark-divider: (
     ),
 );
 
-/// Generates a dark divider schema.
+/// Generates a dark material divider schema.
 /// @type {Map}
-/// @requires $light-divider
+/// @requires $material-divider
 /// @requires $base-dark-divider
-$dark-divider: extend($light-divider, $base-dark-divider);
+$dark-material-divider: extend($material-divider, $base-dark-divider);
 
 /// Generates a dark fluent divider schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_dock-manager.scss

@@ -168,6 +168,12 @@ $dark-base-dock-manager: (
     ),
 );
 
+/// Generates a dark material dock-manager schema.
+/// @type {Map}
+/// @requires $material-dock-manager
+/// @requires $dark-base-dock-manager
+$dark-material-dock-manager: extend($material-dock-manager, $dark-base-dock-manager);
+
 /// Generates a dark dock-manager schema.
 /// @type {Map}
 /// @requires $light-dock-manager

package/sass/themes/schemas/components/dark/_drop-down.scss

@@ -22,11 +22,11 @@ $base-dark-drop-down: (
     ),
 );
 
-/// Generates a dark drop-down schema.
+/// Generates a dark material drop-down schema.
 /// @type {Map}
-/// @requires $light-drop-down
+/// @requires $material-drop-down
 /// @requires $base-dark-drop-down
-$dark-drop-down: extend($light-drop-down, $base-dark-drop-down);
+$dark-material-drop-down: extend($material-drop-down, $base-dark-drop-down);
 
 /// Generates a dark fluent drop-down schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_expansion-panel.scss

@@ -20,11 +20,11 @@ $base-dark-expansion-panel: (
     ),
 );
 
-/// Generates a dark expansion panel schema based on a mix of $light-expansion-panel and $base-dark-expansion-panel.
+/// Generates a dark material expansion panel schema based on a mix of $material-expansion-panel and $base-dark-expansion-panel.
 /// @type {Map}
-/// @requires $light-expansion-panel
+/// @requires $material-expansion-panel
 /// @requires $base-dark-expansion-panel
-$dark-expansion-panel: extend($light-expansion-panel, $base-dark-expansion-panel);
+$dark-material-expansion-panel: extend($material-expansion-panel, $base-dark-expansion-panel);
 
 /// Generates a dark fluent expansion panel schema based on a mix of $fluent-expansion-panel and $base-dark-expansion-panel.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_grid-filtering.scss

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark grid-filtering schema.
+/// Generates a dark material grid-filtering schema.
 /// @type {Map}
-/// @requires $light-grid-filtering
-$dark-grid-filtering: $light-grid-filtering;
+/// @requires $material-grid-filtering
+$dark-material-grid-filtering: $material-grid-filtering;
 
 /// Generates a dark fluent grid-filtering schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_grid-summary.scss

@@ -7,10 +7,10 @@
 /// @access public
 ////
 
-/// Generates a dark grid-summary schema.
+/// Generates a dark material grid-summary schema.
 /// @type {Map}
-/// @requires $light-grid-summary
-$dark-grid-summary: $light-grid-summary;
+/// @requires $material-grid-summary
+$dark-material-grid-summary: $material-grid-summary;
 
 /// Generates a dark fluent grid-summary schema.
 /// @type {Map}

package/sass/themes/schemas/components/dark/_grid-toolbar.scss

@@ -7,17 +7,17 @@
 /// @access public
 ////
 
-/// Generates a dark grid-toolbar schema based on a mix of $light-grid-toolbar and $base-dark-grid-toolbar.
+/// Generates a dark material grid-toolbar schema.
 /// @type {Map}
-/// @requires $light-grid-toolbar
-$dark-grid-toolbar: $light-grid-toolbar;
+/// @requires $material-grid-toolbar
+$dark-material-grid-toolbar: $material-grid-toolbar;
 
-/// Generates a dark fluent grid-toolbar schema based on a mix of $fluent-grid-toolbar and $base-dark-grid-toolbar..
+/// Generates a dark fluent grid-toolbar schema.
 /// @type {Map}
 /// @requires $fluent-grid-toolbar
 $dark-fluent-grid-toolbar: $fluent-grid-toolbar;
 
-/// Generates a dark bootstrap grid-toolbar schema based on a mix of $bootstrap-grid-toolbar and $base-dark-grid-toolbar..
+/// Generates a dark bootstrap grid-toolbar schema.
 /// @type {Map}
 /// @requires $bootstrap-grid-toolbar
 $dark-bootstrap-grid-toolbar: $bootstrap-grid-toolbar;

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

@@ -219,23 +219,21 @@ $base-dark-grid: (
     ),
 );
 
-/// Generates a dark grid schema based on a mix of $light-grid and $base-dark-grid.
+/// Generates a dark material grid schema based on a mix of $material-grid and $base-dark-grid.
 /// @type {Map}
-/// @requires $light-grid
+/// @requires $material-grid
 /// @requires $base-dark-grid
-$dark-grid: extend($light-grid, $base-dark-grid);
+$dark-material-grid: extend($material-grid, $base-dark-grid);
 
 /// Generates a dark fluent grid schema based on a mix of $fluent-grid and $base-dark-grid.
 /// @prop {Map} header-selected-background [color: ('gray', 200)] - The table header background color when selected (ex. column selection).
 /// @prop {Map} header-selected-text-color [contrast-color: ('gray', 200)] - The table header text color when selected (ex. column selection).
-/// @prop {Map} row-hover-background [color: ('gray', 100)] - The hover row background color.
 /// @prop {Map} row-selected-background [color: ('gray', 100)] - The selected row background color.
 /// @prop {Map} row-selected-hover-background [color: ('gray', 200)] - The selected row background color on hover.
 /// @prop {Map} row-selected-hover-text-color [contrast-color: ('gray', 200)] - The selected row hover text color.
 /// @prop {Map} cell-selected-within-background [color: ('gray', 200)] - The background of the selected cell inside a selected row/column.
 /// @prop {Map} cell-selected-within-text-color [contrast-color: ('gray', 200)] - The color of the selected cell inside a selected row/column.
 /// @prop {Map} group-row-background [color: ('gray', 100, .5)] - The grid group row background color.
-/// @prop {Map} group-row-selected-background [color: ('gray', 100)] - The drop area background on drop color.
 ///
 /// @requires $fluent-grid
 /// @requires $base-dark-grid
@@ -257,13 +255,6 @@ $dark-fluent-grid: extend(
             ),
         ),
 
-        row-hover-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
-
         pinned-border-color: (
             color: (
                 'gray',
@@ -314,13 +305,6 @@ $dark-fluent-grid: extend(
                 0.5,
             ),
         ),
-
-        group-row-selected-background: (
-            color: (
-                'gray',
-                100,
-            ),
-        ),
     )
 );
 
@@ -382,7 +366,7 @@ $dark-bootstrap-grid: extend(
 /// Generates a dark indigo grid schema.
 /// @type {Map}
 ///
-/// @prop {Map} content-background [color: 'surface'] - The table body background color.
+/// @prop {Color} content-background [color: 'surface'] - The table body background color.
 /// @prop {Map} header-background [color: 'surface'] - The table header background color.
 /// @prop {Map} header-border-color [color: ('gray', 100, .24)] - The color used for header borders.
 /// @prop {MAp} header-text-color [contrast-color: 'surface'] - The table header text color.

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

@@ -27,6 +27,12 @@ $dark-base-highlight: (
     ),
 );
 
+/// Generates a dark material highlight schema.
+/// @type {Map}
+/// @requires $material-highlight
+/// @requires $dark-base-highlight
+$dark-material-highlight: extend($material-highlight, $dark-base-highlight);
+
 /// Generates a dark highlight schema.
 /// @type {Map}
 /// @requires $light-highlight

package/sass/themes/schemas/components/dark/_icon-button.scss

@@ -29,7 +29,7 @@ $material-outlined-icon-button-dark: extend($material-outlined-icon-button);
 /// @requires {Map} $material-flat-icon-button-dark
 /// @requires {Map} $material-outlined-icon-button-dark
 /// @requires {Map} $material-contained-icon-button-dark
-$dark-icon-button: (
+$dark-material-icon-button: (
     flat: $material-flat-icon-button-dark,
     outlined: $material-outlined-icon-button-dark,
     contained: $material-contained-icon-button-dark,

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

@@ -8,15 +8,15 @@
 /// @access public
 ////
 
-/// Generates a dark icon schema.
+/// Generates a dark material icon schema.
 /// @type {Map}
-/// @requires $light-icon
-$dark-icon: $light-icon;
+/// @requires $material-icon
+$dark-material-icon: $material-icon;
 
 /// Generates a dark fluent icon schema.
 /// @type {Map}
 /// @property {Map} disabled-color [color: ('gray' 500)] - The icon color.
-/// @requires $light-icon
+/// @requires $fluent-icon
 $dark-fluent-icon: extend(
     $fluent-icon,
     (
@@ -31,10 +31,10 @@ $dark-fluent-icon: extend(
 
 /// Generates a dark bootstrap icon schema.
 /// @type {Map}
-/// @requires $light-icon
+/// @requires $bootstrap-icon
 $dark-bootstrap-icon: $bootstrap-icon;
 
 /// Generates a dark indigo icon schema.
 /// @type {Map}
-/// @requires $light-icon
+/// @requires $indigo-icon
 $dark-indigo-icon: $indigo-icon;