igniteui-theming 4.1.0 → 4.3.0

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

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

@@ -14,19 +14,17 @@
 /// @prop {Color} background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} border-color [color: ('surface')] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.
 /// @prop {Color} button-text [color: ('gray', 800)] - Sets the button text color.
-/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-background [null] - Sets the background color for context menus.
-/// @prop {Color} context-menu-color-active [contrast-color: 'surface'] - Sets the text color for active context menus.
-/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
 /// @prop {Color} dock-background [null] - Sets the background color of the dock manager.
 /// @prop {Color} dock-text [null] - Sets the text color of the dock manager.
 /// @prop {Color} drop-shadow-background [color: ('primary', 500, .2)] - Sets the drop-shadow background color.
 /// @prop {Color} floating-pane-border-color [color: 'surface'] - Sets the border color for floating panes.
 /// @prop {Color} flyout-shadow-color [color: ('gray', 900, .8)] - Sets the flyout shadow color.
 /// @prop {Color} joystick-background [null] - Sets the background color of the joystick.
-/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
 /// @prop {Color} joystick-border-color [color: ('gray', 300)] - Sets the border color of the joystick.
-/// @prop {Color} joystick-icon-color [color: ('gray', 600)] - Sets the color for the joystick icons.
+/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} joystick-icon-color-active [contrast-color: 'surface'] - Sets the color of the active joystick icons.
 /// @prop {Color} pane-content-background [color: ('surface')] - Sets the background color of the content panes.
 /// @prop {Color} pane-content-text [null] - Sets the text color of the content panes.
@@ -35,13 +33,12 @@
 /// @prop {Color} pinned-header-background [null] - Sets the background colors of pinned headers.
 /// @prop {Color} pinned-header-text [null] - Sets the text colors of pinned headers.
 /// @prop {Color} splitter-background [color: ('gray', 300)] - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
+/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
 /// @prop {Color} tab-background-active [color: ('primary', 100)] - Sets the background color for active tabs.
-/// @prop {Color} tab-background [null] - Sets the background color for tabs.
+/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color [null] - Sets the border color for tabs.
 /// @prop {Color} tab-border-color-active [null] - Sets the border color for active tabs.
-/// @prop {Color} tab-text [null] - Sets the text color for tabs.
-/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
+/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @prop {Color} text-color [color: ('gray', 800)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
 $light-dock-manager: (
     accent-color: null,
@@ -70,15 +67,11 @@ $light-dock-manager: (
         ),
     ),
 
-    context-menu-background-active: null,
-
-    context-menu-background: null,
-
-    context-menu-color-active: (
-        contrast-color: 'surface',
+    context-menu-background-active: (
+        color: 'primary',
     ),
 
-    context-menu-color: null,
+    context-menu-background: null,
 
     dock-background: (
         color: (
@@ -109,7 +102,9 @@ $light-dock-manager: (
         ),
     ),
 
-    joystick-background-active: null,
+    joystick-background-active: (
+        color: 'primary',
+    ),
 
     joystick-background: null,
 
@@ -121,10 +116,7 @@ $light-dock-manager: (
     ),
 
     joystick-icon-color: (
-        color: (
-            'gray',
-            600,
-        ),
+        color: 'primary',
     ),
 
     joystick-icon-color-active: (
@@ -164,7 +156,12 @@ $light-dock-manager: (
         ),
     ),
 
-    splitter-handle: null,
+    splitter-handle: (
+        color: (
+            'gray',
+            400,
+        ),
+    ),
 
     tab-background-active: (
         color: (
@@ -172,11 +169,19 @@ $light-dock-manager: (
         ),
     ),
 
-    tab-background: null,
+    tab-background: (
+        color: 'surface',
+    ),
+
     tab-border-color-active: null,
     tab-border-color: null,
-    tab-text-active: null,
-    tab-text: null,
+
+    tab-text: (
+        color: (
+            'gray',
+            700,
+        ),
+    ),
 
     text-color: (
         color: (
@@ -186,6 +191,44 @@ $light-dock-manager: (
     ),
 );
 
+/// Generates a material dock-manager schema.
+/// @type {Map}
+/// @prop {Color} context-menu-background-active [null] - Sets the background color for active context menus.
+/// @prop {Color} context-menu-color-active [contrast-color: 'surface'] - Sets the text color for active context menus.
+/// @prop {Color} context-menu-color [null] - Sets the text color for context menus.
+/// @prop {Color} joystick-background-active [null] - Sets the background color of the joysticks.
+/// @prop {Color} joystick-icon-color [color: ('gray', 600)] - Sets the color for the joystick icons.
+/// @prop {Color} splitter-handle [null] - Sets the background color for the splitter handles.
+/// @prop {Color} tab-background [null] - Sets the background color for tabs.
+/// @prop {Color} tab-text [null] - Sets the text color for tabs.
+/// @prop {Color} tab-text-active [null] - Sets the text color for active tabs.
+/// @requires {Map} $light-dock-manager
+$material-dock-manager: extend(
+    $light-dock-manager,
+    (
+        context-menu-background-active: null,
+
+        context-menu-color-active: (
+            contrast-color: 'surface',
+        ),
+
+        context-menu-color: null,
+        joystick-background-active: null,
+
+        joystick-icon-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        splitter-handle: null,
+        tab-background: null,
+        tab-text: null,
+        tab-text-active: null,
+    )
+);
+
 /// Generates a fluent dock-manager schema.
 /// @type {Map}
 /// @prop {Color} context-menu-background-active [color: ('gray', 200)] - Sets the background color for active context menus.
@@ -198,12 +241,9 @@ $light-dock-manager: (
 /// @prop {Color} joystick-icon-color-active [color: ('gray', 800)] - Sets the color of the active joystick icons.
 /// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
 /// @prop {Color} splitter-background [color: ('gray', 100) - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
-/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
 /// @prop {Color} tab-border-color-active [color: 'surface'] - Sets the border color for active tabs.
 /// @prop {Color} tab-text-active [color: 'primary'] - Sets the text color for active tabs.
-/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @requires {Map} $light-dock-manager
 $fluent-dock-manager: extend(
     $light-dock-manager,
@@ -278,17 +318,6 @@ $fluent-dock-manager: extend(
             ),
         ),
 
-        splitter-handle: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        tab-background: (
-            color: 'surface',
-        ),
-
         tab-border-color-active: (
             color: 'surface',
         ),
@@ -300,13 +329,6 @@ $fluent-dock-manager: extend(
         tab-text-active: (
             color: 'primary',
         ),
-
-        tab-text: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
     )
 );
 
@@ -314,18 +336,13 @@ $fluent-dock-manager: extend(
 /// @type {Map}
 /// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
 /// @prop {Color} context-menu-background [color: 'surface'] - Sets the background color for context menus.
-/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-color-active [color: 'surface'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: 'primary'] - Sets the text color for context menus.
 /// @prop {Color} dock-background [color: ('gray', 100)] - Sets the background color of the dock manager.
 /// @prop {Color} floating-pane-border-color [color: ('gray', 300)] - Sets the border color for floating panes.
-/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
-/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} pane-header-background [color: ('gray', 100)] - Sets the background color for pane headers.
 /// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
 /// @prop {Color} splitter-background [color: ('gray', 200)] - Sets the background color for the splitters.
-/// @prop {Color} splitter-handle [color: ('gray', 400)] - Sets the background color for the splitter handles.
-/// @prop {Color} tab-background [color: 'surface'] - Sets the background color for tabs.
 /// @prop {Color} tab-border-color-active [color: ('gray', 300)] - Sets the border color for active tabs.
 /// @prop {Color} tab-border-color [color: 'surface'] - Sets the border color for tabs.
 /// @prop {Color} tab-text-active [color: ('gray', 800)] - Sets the text color for active tabs.
@@ -342,10 +359,6 @@ $bootstrap-dock-manager: extend(
             color: 'surface',
         ),
 
-        context-menu-background-active: (
-            color: 'primary',
-        ),
-
         context-menu-color-active: (
             color: 'surface',
         ),
@@ -368,14 +381,6 @@ $bootstrap-dock-manager: extend(
             ),
         ),
 
-        joystick-background-active: (
-            color: 'primary',
-        ),
-
-        joystick-icon-color: (
-            color: 'primary',
-        ),
-
         pane-header-background: (
             color: (
                 'gray',
@@ -397,17 +402,6 @@ $bootstrap-dock-manager: extend(
             ),
         ),
 
-        splitter-handle: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
-        tab-background: (
-            color: 'surface',
-        ),
-
         tab-border-color-active: (
             color: (
                 'gray',
@@ -436,19 +430,15 @@ $bootstrap-dock-manager: extend(
 /// @type Map
 /// @prop {Color} background-color [color: ('gray', 100)] - Sets the base dock manager color as well as the pane headers and tabs background colors.
 /// @prop {Color} button-text [color: 'primary'] - Sets the button text color.
-/// @prop {Color} context-menu-background-active [color: 'primary'] - Sets the background color for active context menus.
 /// @prop {Color} context-menu-color-active [contrast-color: 'primary'] - Sets the text color for active context menus.
 /// @prop {Color} context-menu-color [color: ('gray', 700)] - Sets the text color for context menus.
 /// @prop {Color} joystick-background [color: ('primary', 50)] - Sets the background color of the joysticks.
-/// @prop {Color} joystick-background-active [color: 'primary'] - Sets the background color of the joysticks.
 /// @prop {Color} joystick-border-color [color: ('primary', 50)] - Sets the border color of the joystick.
-/// @prop {Color} joystick-icon-color [color: 'primary'] - Sets the color for the joystick icons.
 /// @prop {Color} joystick-icon-color-active [contrast-color: 'primary'] - Sets the color of the active joystick icons.
 /// @prop {Color} pinned-header-background [color: ('gray', 100)] - Sets the background colors of pinned headers.
 /// @prop {Color} splitter-handle [color: 'surface'] - Sets the background color for the splitter handles.
 /// @prop {Color} tab-background [color: ('gray', 100)] - Sets the background color for tabs.
 /// @prop {Color} tab-text-active [color: ('gray', 900)] - Sets the text color for active tabs.
-/// @prop {Color} tab-text [color: ('gray', 700)] - Sets the text color for tabs.
 /// @prop {Color} text-color [color: ('gray', 900)] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.
 /// @requires {Map} $light-dock-manager
 $indigo-dock-manager: extend(
@@ -465,10 +455,6 @@ $indigo-dock-manager: extend(
             color: 'primary',
         ),
 
-        context-menu-background-active: (
-            color: 'primary',
-        ),
-
         context-menu-color-active: (
             contrast-color: 'primary',
         ),
@@ -487,10 +473,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        joystick-background-active: (
-            color: 'primary',
-        ),
-
         joystick-border-color: (
             color: (
                 'primary',
@@ -498,10 +480,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        joystick-icon-color: (
-            color: 'primary',
-        ),
-
         joystick-icon-color-active: (
             contrast-color: 'primary',
         ),
@@ -531,13 +509,6 @@ $indigo-dock-manager: extend(
             ),
         ),
 
-        tab-text: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-
         text-color: (
             color: (
                 'gray',