igniteui-theming 4.2.0 → 4.4.0

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

@@ -11,24 +11,20 @@
 /// Generates a light chip schema.
 /// @type {Map}
 /// @prop {List} border-radius [(rem(16px), rem(0), rem(16px))] - The border radius used for chip.
-/// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
-/// @prop {Map} background [color: ('gray', 300)] - The chip background color.
+/// @prop {Map} background [color: ('gray', 200)] - The chip background color.
 /// @prop {Color} border-color [transparent] - The chip border color.
 /// @prop {Map} ghost-background [color: ('gray', 400))] - The chip ghost background color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 400)] - The chip text hover color.
 /// @prop {Map} hover-background [color: ('gray', 400)] - The chip hover background color.
 /// @prop {Color} hover-border-color [transparent] - The chip hover border color.
 /// @prop {Map} selected-text-color [color: ('gray', 700)] - The selected chip text color.
-/// @prop {Map} selected-background [color: ('gray', 300)] - The selected chip background color.
+/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
 /// @prop {Color} selected-border-color [transparent] The selected chip border color.
-/// @prop {Map} focus-background [color: ('gray', 500)] The focused chip background color.
 /// @prop {Map} focus-text-color [contrast-color: ('gray', 500)] The focused chip text color.
 /// @prop {Color} focus-border-color [transparent] - The chip focus border color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('gray', 400)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
 /// @prop {Color} hover-selected-border-color [transparent] - The selected chip hover border color.
-/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 500)] - The selected chip text focus color.
-/// @prop {Map} focus-selected-background [color: ('gray', 500)] - The selected chip focus background color.
 /// @prop {Color} focus-selected-border-color [transparent] - The selected chip focus border color.
 /// @prop {Number} ghost-elevation [8] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @prop {color} remove-icon-color ["'currentColor'"] - The remove icon color for the chip.
@@ -50,17 +46,10 @@ $light-chip: extend(
 
         remove-icon-color-focus: "'currentColor'",
 
-        text-color: (
-            contrast-color: (
-                'gray',
-                300,
-            ),
-        ),
-
         background: (
             color: (
                 'gray',
-                300,
+                200,
             ),
         ),
 
@@ -96,13 +85,6 @@ $light-chip: extend(
             ),
         ),
 
-        focus-background: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         focus-border-color: transparent,
 
         selected-text-color: (
@@ -114,8 +96,8 @@ $light-chip: extend(
 
         selected-background: (
             color: (
-                'gray',
-                300,
+                'primary',
+                500,
             ),
         ),
 
@@ -137,20 +119,6 @@ $light-chip: extend(
 
         hover-selected-border-color: transparent,
 
-        focus-selected-text-color: (
-            contrast-color: (
-                'gray',
-                500,
-            ),
-        ),
-
-        focus-selected-background: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-
         focus-selected-border-color: transparent,
 
         border-radius: (
@@ -193,15 +161,71 @@ $light-chip: extend(
     )
 );
 
+/// Generates a material chip schema.
+/// @type {Map}
+/// @prop {Map} text-color [contrast-color: ('gray', 300)] - The chip text color.
+/// @prop {Map} background [color: ('gray', 300)] - The chip background color.
+/// @prop {Map} focus-background [color: ('gray', 500)] The focused chip background color.
+/// @prop {Map} selected-background [color: ('gray', 300)] - The selected chip background color.
+/// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 500)] - The selected chip text focus color.
+/// @prop {Map} focus-selected-background [color: ('gray', 500)] - The selected chip focus background color.
+/// @requires {Map} $light-chip
+/// @requires {Map} $default-elevation-chip
+$material-chip: extend(
+    $light-chip,
+    $default-elevation-chip,
+    (
+        text-color: (
+            contrast-color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        focus-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        selected-background: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+
+        focus-selected-text-color: (
+            contrast-color: (
+                'gray',
+                500,
+            ),
+        ),
+
+        focus-selected-background: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent chip schema.
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 700)] - The chip text color.
-/// @prop {Map} background [color: ('gray', 200)] - The chip background color.
 /// @prop {Map} ghost-background [color: ('primary', 500)] - The chip ghost background color.
 /// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
 /// @prop {Map} hover-text-color [contrast-color: ('gray', 200)] - The chip text hover color.
 /// @prop {Map} selected-text-color [contrast-color: ('primary', 700))] - The selected chip text color.
-/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
 /// @prop {Map} focus-background [color: ('primary', 600)] The focused chip background color.
 /// @prop {Map} focus-text-color [contrast-color: ('primary', 700)] The focused chip text color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 700)] - The selected chip hover text color.
@@ -215,13 +239,6 @@ $fluent-chip: extend(
     $light-chip,
     $fluent-elevation-chip,
     (
-        background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
         text-color: (
             color: (
                 'gray',
@@ -250,13 +267,6 @@ $fluent-chip: extend(
             ),
         ),
 
-        selected-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
         focus-background: (
             color: (
                 'primary',
@@ -310,12 +320,10 @@ $fluent-chip: extend(
 
 /// Generates a bootstrap chip schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 200)] - The chip background color.
 /// @prop {Map} text-color [contrast-color: ('gray', 200)] - The chip text color.
 /// @prop {Map} selected-background [color: ('gray', 200)] - The selected chip background color.
 /// @prop {Map} focus-text-color [contrast-color: ('gray', 400)] The focused chip text color.
 /// @prop {Map} focus-background [color: ('gray', 400)] The focused chip background color.
-/// @prop {Map} hover-selected-background [color: ('gray', 400)] - The selected chip hover background color.
 /// @prop {Map} focus-selected-background [color: ('gray', 400)] - The selected chip focus background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('gray', 400)] - The selected chip text focus color.
 /// @prop {Number} ghost-elevation [0] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
@@ -328,13 +336,6 @@ $bootstrap-chip: extend(
     $light-chip,
     $bootstrap-elevation-chip,
     (
-        background: (
-            color: (
-                'gray',
-                200,
-            ),
-        ),
-
         text-color: (
             contrast-color: (
                 'gray',
@@ -384,13 +385,6 @@ $bootstrap-chip: extend(
             ),
         ),
 
-        hover-selected-background: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
         focus-selected-text-color: (
             contrast-color: (
                 'gray',
@@ -417,7 +411,6 @@ $bootstrap-chip: extend(
 /// @prop {Map} hover-background [color: ('gray', 200)] - The chip hover background color.
 /// @prop {Map} focus-background [color: ('surface')] The focused chip background color.
 /// @prop {Map} selected-text-color [contrast-color: ('primary', 500)] - The selected chip text color.
-/// @prop {Map} selected-background [color: ('primary', 500)] - The selected chip background color.
 /// @prop {Map} hover-selected-text-color [contrast-color: ('primary', 400)] - The selected chip hover text color.
 /// @prop {Map} hover-selected-background [color: ('primary', 400)] - The selected chip hover background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 400)] - The selected chip text focus color.
@@ -509,13 +502,6 @@ $indigo-chip: extend(
             ),
         ),
 
-        selected-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-
         hover-selected-text-color: (
             contrast-color: (
                 'primary',

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

@@ -26,6 +26,11 @@ $light-column-actions: (
     ),
 );
 
+/// Generates a material column actions schema.
+/// @type {Map}
+/// @requires {map} $light-column-actions
+$material-column-actions: $light-column-actions;
+
 /// Generates a fluent column actions schema.
 /// @type {Map}
 /// @requires {map} $light-column-actions

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

@@ -15,15 +15,14 @@
 /// @prop {Map} search-separator-border-color [color: ('gray', 500)] - The combo search box separator color.
 /// @prop {Map} empty-list-placeholder-color [color: ('gray', 700)] - The combo placeholder text color.
 /// @prop {Map} toggle-button-background [color: ('gray', 300)] - The combo toggle button background color.
-/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The combo toggle button background color when the combo is focused.
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 700)] - The combo toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The combo toggle button foreground color when the combo is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
 /// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The combo toggle button background color when the combo is focused in material border and line variants.
 /// @prop {Color} clear-button-background [transparent] - The combo clear button background color.
-/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [contrast-color: ('gray', 100)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [contrast-color: ('gray', 100)] - The combo clear button foreground color when the combo is focused.
 /// @prop {Map} case-icon-color [color: ('gray', 400)] - The case sensitive icon color in inactive state for combo search input
@@ -72,8 +71,7 @@ $light-combo: (
     toggle-button-background-focus: (
         color: (
             'gray',
-            400,
-            0.3,
+            300,
         ),
     ),
     toggle-button-foreground: (
@@ -95,7 +93,6 @@ $light-combo: (
         ),
     ),
     clear-button-background: transparent,
-    clear-button-background-focus: transparent,
     clear-button-foreground: (
         contrast-color: (
             'gray',
@@ -117,12 +114,38 @@ $light-combo: (
     toggle-button-foreground-disabled: (
         color: (
             'gray',
-            500,
+            400,
         ),
     ),
     default-size: 2,
 );
 
+/// Generates a material combo schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The combo toggle button background color when the combo is focused.
+/// @prop {Color} clear-button-background-focus [transparent] - The combo clear button background color when the combo is focused.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The combo toggle button foreground color when the combo is disabled.
+/// @requires {Map} $light-combo
+$material-combo: extend(
+    $light-combo,
+    (
+        toggle-button-background-focus: (
+            color: (
+                'gray',
+                400,
+                0.3,
+            ),
+        ),
+        clear-button-background-focus: transparent,
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent combo schema.
 /// @type {Map}
 /// @prop {Map} toggle-button-background [color: ('gray', 100)] - The combo toggle button background color.
@@ -131,7 +154,6 @@ $light-combo: (
 /// @prop {Color} clear-button-background-focus [color: ('gray', 100)] - The combo clear button background color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The combo toggle button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100)] - The combo toggle button background color when the combo is disabled.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
 /// @requires {Map} $light-combo
 $fluent-combo: extend(
     $light-combo,
@@ -172,12 +194,6 @@ $fluent-combo: extend(
                 100,
             ),
         ),
-        toggle-button-foreground-disabled: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
     )
 );
 
@@ -192,8 +208,6 @@ $fluent-combo: extend(
 /// @prop {Map} clear-button-background-focus [color: ('gray', 300)] - The combo clear button background color when the combo is focused.
 /// @prop {Map} clear-button-foreground [color: ('gray', 800)] - The combo toggle clear foreground color.
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 800)] - The combo clear button foreground color when the combo is focused.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The combo toggle button foreground color when the combo is disabled.
-/// @prop {Map} toggle-button-background-focus [color: ('gray', 300)] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
 $bootstrap-combo: extend(
     $light-combo,
@@ -245,7 +259,7 @@ $bootstrap-combo: extend(
                 800,
             ),
         ),
-        toggle-button-foreground--focus: (
+        toggle-button-foreground-focus: (
             color: (
                 'gray',
                 800,
@@ -257,18 +271,6 @@ $bootstrap-combo: extend(
                 800,
             ),
         ),
-        toggle-button-background-focus: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        toggle-button-foreground-disabled: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
     )
 );
 
@@ -279,7 +281,6 @@ $bootstrap-combo: extend(
 /// @prop {Map} clear-button-foreground-focus [color: ('gray', 600)] - The combo clear button foreground color when the combo is focused.
 /// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 300)] - The combo toggle button foreground color when the combo is disabled.
 /// @prop {Color} toggle-button-background-disabled [transparent] - The combo toggle button background color when the combo is disabled.
-/// @prop {Color} toggle-button-background-focus [transparent] - The combo toggle button background color when the combo is focused.
 /// @requires {Map} $light-combo
 $indigo-combo: extend(
     $light-combo,
@@ -291,12 +292,6 @@ $indigo-combo: extend(
                 600,
             ),
         ),
-        toggle-button-background-focus: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
         clear-button-foreground-focus: (
             color: (
                 'gray',

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

@@ -19,6 +19,11 @@ $light-date-range-picker: (
     ),
 );
 
+/// Generates a material date-range-picker schema.
+/// @type {Map}
+/// @requires {Map} $light-date-range-picker
+$material-date-range-picker: $light-date-range-picker;
+
 /// Generates a fluent date-range-picker schema.
 /// @type {Map}
 /// @requires {Map} $light-date-range-picker

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

@@ -61,6 +61,11 @@ $light-dialog: extend(
     )
 );
 
+/// Generates a material dialog schema.
+/// @type {Map}
+/// @requires {Map} $light-dialog
+$material-dialog: $light-dialog;
+
 /// Generates a fluent dialog schema.
 /// @type {Map}
 /// @prop {Map} backdrop [color: ('gray', 900, .4)] - The dialog backdrop color.

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

@@ -21,6 +21,11 @@ $light-divider: (
     inset: 0,
 );
 
+/// Generates a material divider schema.
+/// @type {Map}
+/// @requires {Map} $light-divider
+$material-divider: $light-divider;
+
 /// Generates a fluent divider schema.
 /// @type {Map}
 /// @requires {Map} $light-divider