igniteui-theming 4.2.0 → 4.3.0

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

@@ -16,15 +16,8 @@
 /// @prop {Map} header-text-color [color: ('secondary', 500)] - The drop-down header text color.
 /// @prop {Map} item-text-color [color: ('gray', 800)] - The drop-down text color.
 /// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
-/// @prop {Map} hover-item-background [color: ('gray', 100, .8)] - The drop-down hover item background color.
-/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
-/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
-/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
-/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
-/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
-/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
-/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
+/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
 /// @prop {Map} disabled-item-text-color [color: ('gray', 400)] - The drop-down disabled item text color.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the drop-down shadow.
@@ -59,24 +52,85 @@ $light-drop-down: extend(
                 800,
             ),
         ),
-        hover-item-background: (
+        focused-item-text-color: (
             color: (
                 'gray',
-                100,
-                0.8,
+                800,
             ),
         ),
-        focused-item-background: (
+        selected-item-background: (
+            color: (
+                'primary',
+                500,
+            ),
+        ),
+        disabled-item-background: transparent,
+        disabled-item-text-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        border-color: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+        border-width: 0,
+        border-radius: (
+            border-radius: (
+                rem(4px),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+        item-border-radius: (
+            border-radius: (
+                rem(0),
+                rem(0),
+                rem(20px),
+            ),
+        ),
+        size: (
+            sizable: (
+                rem(28px),
+                rem(32px),
+                rem(40px),
+            ),
+        ),
+        default-size: 2,
+    )
+);
+
+/// Generates a material drop-down schema.
+/// @type {Map}
+/// @prop {Map} hover-item-background [color: ('gray', 100, .8)] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [color: ('gray', 100, .8)] - The drop-down focused item background color.
+/// @prop {Map} selected-item-background [color: ('secondary', 100)] - The drop-down selected item background color.
+/// @prop {Map} selected-item-text-color [contrast-color: ('secondary', 100)] - The drop-down selected item text color.
+/// @prop {Map} selected-hover-item-background [color: ('secondary', 200)] - The drop-down selected item hover background color.
+/// @prop {Map} selected-hover-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item hover text color.
+/// @prop {Map} selected-focus-item-background [color: ('secondary', 200)] - The drop-down selected item focus background color.
+/// @prop {Map} selected-focus-item-text-color [contrast-color: ('secondary', 200)] - The drop-down selected item focus text color.
+/// @requires {Map} $light-drop-down
+/// @requires {Map} $default-elevation-drop-down
+$material-drop-down: extend(
+    $light-drop-down,
+    $default-elevation-drop-down,
+    (
+        hover-item-background: (
             color: (
                 'gray',
                 100,
                 0.8,
             ),
         ),
-        focused-item-text-color: (
+        focused-item-background: (
             color: (
                 'gray',
-                800,
+                100,
+                0.8,
             ),
         ),
         selected-item-background: (
@@ -115,54 +169,11 @@ $light-drop-down: extend(
                 200,
             ),
         ),
-        disabled-item-background: (
-            color: (
-                'gray',
-                50,
-                0,
-            ),
-        ),
-        disabled-item-text-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-        border-color: (
-            color: (
-                'gray',
-                300,
-            ),
-        ),
-        border-width: 0,
-        border-radius: (
-            border-radius: (
-                rem(4px),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        item-border-radius: (
-            border-radius: (
-                rem(0),
-                rem(0),
-                rem(20px),
-            ),
-        ),
-        size: (
-            sizable: (
-                rem(28px),
-                rem(32px),
-                rem(40px),
-            ),
-        ),
-        default-size: 2,
     )
 );
 
 /// Generates a fluent drop-down schema.
 /// @type {Map}
-/// @prop {Map} hover-item-text-color [color: ('gray', 800)] - The drop-down hover text color.
 /// @prop {Map} hover-item-background [color: ('gray', 100)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: 'surface'] - The drop-down focused item background color.
 /// @prop {Map} focused-item-text-color [color: ('gray', 800)] - The drop-down focused item text color.
@@ -182,12 +193,6 @@ $fluent-drop-down: extend(
     $light-drop-down,
     $fluent-elevation-drop-down,
     (
-        hover-item-text-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
         hover-item-background: (
             color: (
                 'gray',
@@ -199,12 +204,6 @@ $fluent-drop-down: extend(
                 'surface',
             ),
         ),
-        focused-item-text-color: (
-            color: (
-                'gray',
-                800,
-            ),
-        ),
         selected-item-background: (
             color: (
                 'gray',
@@ -268,7 +267,6 @@ $fluent-drop-down: extend(
 /// @prop {Map} header-text-color [color: ('gray', 700)] - The drop-down header text color.
 /// @prop {Map} hover-item-background [color: ('gray', 200)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('gray', 200)] - The drop-down focused item background color.
-/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [contrast-color('primary', 600)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 600)] - The drop-down selected item hover background color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color('primary', 600)] - The drop-down selected item hover text color.
@@ -300,12 +298,6 @@ $bootstrap-drop-down: extend(
                 200,
             ),
         ),
-        selected-item-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         selected-item-text-color: (
             contrast-color: (
                 'primary',
@@ -337,12 +329,6 @@ $bootstrap-drop-down: extend(
             ),
         ),
         border-width: 1px,
-        disabled-item-text-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
     )
 );
 
@@ -352,7 +338,6 @@ $bootstrap-drop-down: extend(
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The drop-down text color.
 /// @prop {Map} hover-item-background [color: ('primary', 500, .15)] - The drop-down hover item background color.
 /// @prop {Map} focused-item-background [color: ('primary', 500, .15)] - The drop-down focused item background color.
-/// @prop {Map} selected-item-background [color: ('primary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [contrast-color: ('primary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [color: ('primary', 400)] - The drop-down selected item hover background color.
 /// @prop {Map} selected-hover-item-text-color [contrast-color: ('primary', 400)] - The drop-down selected item hover text color.
@@ -393,12 +378,6 @@ $indigo-drop-down: extend(
                 0.15,
             ),
         ),
-        selected-item-background: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         selected-item-text-color: (
             contrast-color: (
                 'primary',

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

@@ -82,6 +82,11 @@ $light-expansion-panel: (
     ),
 );
 
+/// Generates a material expansion panel schema.
+/// @type {Map}
+/// @requires {Map} $light-expansion-panel
+$material-expansion-panel: $light-expansion-panel;
+
 /// Generates a fluent expansion panel schema.
 /// @type {Map}
 /// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.

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

@@ -81,18 +81,15 @@ $light-grid-filtering: (
     ),
 );
 
+/// Generates a material grid-filtering schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-filtering
+$material-grid-filtering: $light-grid-filtering;
+
 /// Generates a fluent grid-filtering schema.
 /// @type {Map}
-/// @prop {Map} menu-background [color: 'surface'] - The idle menu background color.
 /// @requires {Map} $light-grid-filtering
-$fluent-grid-filtering: extend(
-    $light-grid-filtering,
-    (
-        menu-background: (
-            color: 'surface',
-        ),
-    )
-);
+$fluent-grid-filtering: $light-grid-filtering;
 
 /// Generates a bootstrap grid-filtering schema.
 /// @type {Map}

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

@@ -61,6 +61,11 @@ $light-grid-summary: (
     ),
 );
 
+/// Generates a material grid-summary schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-summary
+$material-grid-summary: $light-grid-summary;
+
 /// Generates a fluent grid-summary schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: ('surface')] - The summaries background color is inherited from the grid footer.

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

@@ -83,6 +83,11 @@ $light-grid-toolbar: (
     ),
 );
 
+/// Generates a material grid-toolbar schema.
+/// @type {Map}
+/// @requires {Map} $light-grid-toolbar
+$material-grid-toolbar: $light-grid-toolbar;
+
 /// Generates a fluent grid-toolbar schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: 'surface'] - The toolbar background color.