igniteui-theming 4.2.0 → 4.4.0

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,31 +29,100 @@ $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,
 );
 
+/// @type {Map}
+/// @prop {Map} hover-background [color: ('gray', 50)] - The hover background color of the fluent icon button.
+/// @prop {Map} focus-border-color [color: ('gray', 400)] - The focus border color of the fluent dark icon button.
+/// @prop {Map} disabled-background [color: ('gray', 50)] - The disabled background color of the icon button.
+/// @prop {Color} disabled-foreground [color: ('gray', 200)] - The disabled foreground color of the icon button.
+$fluent-base-icon-button-dark: (
+    hover-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+    focus-border-color: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
+    disabled-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+    disabled-foreground: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+);
+
 /// Generates a dark fluent flat icon button schema.
 /// @type {Map}
+/// @prop {Map} hover-foreground [color: ('primary', 400)] - The hover text color of the fluent icon button.
+/// @prop {Map} focus-hover-background [color: ('gray', 50)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} focus-hover-foreground [color: ('primary', 400)] - The foreground color on focus hovered state of the icon button.
 /// @requires {Map} $fluent-flat-icon-button
-$fluent-flat-icon-button-dark: extend($fluent-flat-icon-button);
+/// @requires {Map} $fluent-base-icon-button-dark
+$fluent-flat-icon-button-dark: extend(
+    $fluent-flat-icon-button,
+    $fluent-base-icon-button-dark,
+    (
+        hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        hover-foreground: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+        focus-hover-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+        focus-hover-foreground: (
+            color: (
+                'primary',
+                400,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent contained icon button schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('primary', 300)] - The background color of the fluent dark contained icon button.
-/// @prop {Map} foreground [color: ('surface', 500)] - The idle text color of the fluent dark contained icon button.
+/// @prop {Map} foreground [contrast-color: ('primary', 300)] - The idle text color of the fluent dark contained icon button.
 /// @prop {Map} hover-background [color: ('primary', 200)] - The hover background color of the fluent dark contained icon button.
-/// @prop {Map} hover-foreground [color: ('surface', 500)] - The hover text color of the fluent dark contained icon button.
-/// @prop {Map} focus-background [color: ('primary', 200)] - The focus background color of the fluent dark contained icon button.
-/// @prop {Map} focus-foreground [color: ('surface', 500)] - The focus text color of the fluent dark contained icon button.
+/// @prop {Map} hover-foreground [contrast-color: ('primary', 300)] - The hover text color of the fluent dark contained icon button.
+/// @prop {Map} focus-background [color: ('primary', 300)] - The focus background color of the fluent dark contained icon button.
+/// @prop {Map} focus-foreground [contrast-color: ('primary', 300)] - The focus text color of the fluent dark contained icon button.
+/// @prop {Map} focus-hover-background [color: ('primary', 200)] - The background color on focus hovered state of the icon button.
+/// @prop {Map} focus-hover-foreground [contrast-color: ('primary', 300)] - The foreground color on focus hovered state of the icon button.
 /// @prop {Map} active-background [color: ('primary', 200)] - The active background color of the fluent dark contained icon button.
-/// @prop {Map} active-foreground [color: ('surface', 500)] - The active text color of the fluent dark contained icon button.
-/// @prop {Map} focus-border-color [color: ('surface', 500)] - The focus border color of the fluent dark contained icon button.
+/// @prop {Map} active-foreground [contrast-color: ('primary', 300)] - The active text color of the fluent dark contained icon button.
+/// @prop {Map} focus-border-color [contrast-color: ('primary', 300)] - The focus border color of the fluent dark contained icon button.
 /// @requires {Map} $fluent-contained-icon-button
+/// @requires {Map} $fluent-base-icon-button-dark
 $fluent-contained-icon-button-dark: extend(
     $fluent-contained-icon-button,
+    $fluent-base-icon-button-dark,
     (
         background: (
             color: (
@@ -62,9 +131,9 @@ $fluent-contained-icon-button-dark: extend(
             ),
         ),
         foreground: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
         hover-background: (
@@ -74,21 +143,33 @@ $fluent-contained-icon-button-dark: extend(
             ),
         ),
         hover-foreground: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
         focus-background: (
             color: (
                 'primary',
-                200,
+                300,
             ),
         ),
         focus-foreground: (
+            contrast-color: (
+                'primary',
+                300,
+            ),
+        ),
+        focus-hover-background: (
             color: (
-                'surface',
-                500,
+                'primary',
+                200,
+            ),
+        ),
+        focus-hover-foreground: (
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
         active-background: (
@@ -98,15 +179,15 @@ $fluent-contained-icon-button-dark: extend(
             ),
         ),
         active-foreground: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
         focus-border-color: (
-            color: (
-                'surface',
-                500,
+            contrast-color: (
+                'primary',
+                300,
             ),
         ),
     )
@@ -114,8 +195,28 @@ $fluent-contained-icon-button-dark: extend(
 
 /// Generates a dark fluent outlined icon button schema.
 /// @type {Map}
+/// @prop {Map} border-color [color: ('gray', 400)] - The border color of the fluent outlined icon button.
+/// @prop {Map} disabled-border-color [color: ('gray', 100)] - The disabled focused border color of an outlined icon button.
 /// @requires {Map} $fluent-outlined-icon-button
-$fluent-outlined-icon-button-dark: extend($fluent-outlined-icon-button);
+/// @requires {Map} $fluent-base-icon-button-dark
+$fluent-outlined-icon-button-dark: extend(
+    $fluent-outlined-icon-button,
+    $fluent-base-icon-button-dark,
+    (
+        border-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        disabled-border-color: (
+            color: (
+                'gray',
+                100,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark fluent icon button schema.
 /// @type {Map}

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;

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

@@ -62,60 +62,60 @@
 /// Use in combination with dark palettes.
 /// @type Map
 $dark-material-schema: (
-    action-strip: $dark-action-strip,
-    avatar: $dark-avatar,
-    badge: $dark-badge,
-    banner: $dark-banner,
-    bottom-nav: $dark-bottom-nav,
-    button: $dark-button,
-    button-group: $dark-button-group,
-    calendar: $dark-calendar,
-    card: $dark-card,
-    carousel: $dark-carousel,
-    checkbox: $dark-checkbox,
-    chip: $dark-chip,
-    column-actions: $dark-column-actions,
-    combo: $dark-combo,
-    date-range: $dark-date-range-picker,
-    dialog: $dark-dialog,
-    divider: $dark-divider,
-    dockmanager: $dark-dock-manager,
-    drop-down: $dark-drop-down,
-    expansion-panel: $dark-expansion-panel,
-    grid: $dark-grid,
-    grid-filtering: $dark-grid-filtering,
-    grid-summary: $dark-grid-summary,
-    grid-toolbar: $dark-grid-toolbar,
-    highlight: $dark-highlight,
-    icon: $dark-icon,
-    icon-button: $dark-icon-button,
-    input-group: $dark-input-group,
+    action-strip: $dark-material-action-strip,
+    avatar: $dark-material-avatar,
+    badge: $dark-material-badge,
+    banner: $dark-material-banner,
+    bottom-nav: $dark-material-bottom-nav,
+    button: $dark-material-button,
+    button-group: $dark-material-button-group,
+    calendar: $dark-material-calendar,
+    card: $dark-material-card,
+    carousel: $dark-material-carousel,
+    checkbox: $dark-material-checkbox,
+    chip: $dark-material-chip,
+    column-actions: $dark-material-column-actions,
+    combo: $dark-material-combo,
+    date-range: $dark-material-date-range-picker,
+    dialog: $dark-material-dialog,
+    divider: $dark-material-divider,
+    dockmanager: $dark-material-dock-manager,
+    drop-down: $dark-material-drop-down,
+    expansion-panel: $dark-material-expansion-panel,
+    grid: $dark-material-grid,
+    grid-filtering: $dark-material-grid-filtering,
+    grid-summary: $dark-material-grid-summary,
+    grid-toolbar: $dark-material-grid-toolbar,
+    highlight: $dark-material-highlight,
+    icon: $dark-material-icon,
+    icon-button: $dark-material-icon-button,
+    input-group: $dark-material-input-group,
     label: $dark-material-label,
-    list: $dark-list,
-    navbar: $dark-navbar,
-    nav-drawer: $dark-navdrawer,
-    overlay: $dark-overlay,
-    paginator: $dark-pagination,
-    pivot-data-selector: $dark-pivot-data-selector,
-    linear-bar: $dark-progress-linear,
-    circular-bar: $dark-progress-circular,
-    query-builder: $dark-query-builder,
-    radio: $dark-radio,
-    rating: $dark-rating,
-    ripple: $dark-ripple,
-    scrollbar: $dark-scrollbar,
-    select: $dark-select,
-    slider: $dark-slider,
-    snackbar: $dark-snackbar,
-    splitter: $dark-splitter,
-    stepper: $dark-stepper,
-    switch: $dark-switch,
-    tabs: $dark-tabs,
-    time-picker: $dark-time-picker,
-    toast: $dark-toast,
-    tooltip: $dark-tooltip,
-    tree: $dark-tree,
-    watermark: $dark-watermark,
+    list: $dark-material-list,
+    navbar: $dark-material-navbar,
+    nav-drawer: $dark-material-navdrawer,
+    overlay: $dark-material-overlay,
+    paginator: $dark-material-pagination,
+    pivot-data-selector: $dark-material-pivot-data-selector,
+    linear-bar: $dark-material-progress-linear,
+    circular-bar: $dark-material-progress-circular,
+    query-builder: $dark-material-query-builder,
+    radio: $dark-material-radio,
+    rating: $dark-material-rating,
+    ripple: $dark-material-ripple,
+    scrollbar: $dark-material-scrollbar,
+    select: $dark-material-select,
+    slider: $dark-material-slider,
+    snackbar: $dark-material-snackbar,
+    splitter: $dark-material-splitter,
+    stepper: $dark-material-stepper,
+    switch: $dark-material-switch,
+    tabs: $dark-material-tabs,
+    time-picker: $dark-material-time-picker,
+    toast: $dark-material-toast,
+    tooltip: $dark-material-tooltip,
+    tree: $dark-material-tree,
+    watermark: $dark-material-watermark,
     _meta: (
         theme: 'material',
         variant: 'dark',