igniteui-theming 4.2.0 → 4.3.0

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

@@ -15,7 +15,6 @@
 /// @prop {Map} subtitle-text-color [color: ('gray', 700)] - The text color of the card subtitle.
 /// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 700)] - The text color of the card buttons.
-/// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
 /// @prop {Number} resting-elevation [4] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [6] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for card.
@@ -56,14 +55,6 @@ $light-card: extend(
             ),
         ),
 
-        outline-color: (
-            color: (
-                'gray',
-                400,
-                0.54,
-            ),
-        ),
-
         border-radius: (
             border-radius: (
                 rem(4px),
@@ -75,6 +66,24 @@ $light-card: extend(
     )
 );
 
+/// Generates a material card schema.
+/// @type {Map}
+/// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
+/// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for card.
+/// @requires {Map} $light-card
+$material-card: extend(
+    $light-card,
+    (
+        outline-color: (
+            color: (
+                'gray',
+                400,
+                0.54,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
@@ -104,7 +113,6 @@ $fluent-card: extend(
 /// @type {Map}
 /// @prop {Map} background [contrast-color: ('gray', 900)]- The card background color.
 /// @prop {Map} outline-color [color: ('gray', 300)] - The outline color of an outlined type card.
-/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
 /// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
 /// @prop {Map} content-text-color [color: ('gray', 800)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
@@ -126,13 +134,6 @@ $bootstrap-card: extend(
             ),
         ),
 
-        header-text-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
         subtitle-text-color: (
             color: (
                 'gray',
@@ -159,9 +160,7 @@ $bootstrap-card: extend(
 /// Generates an indigo card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 400)] - The outline color of an outlined type card.
-/// @prop {Map} header-text-color [color: ('gray', 900)] - The text color of the card title.
 /// @prop {Map} subtitle-text-color [color: ('gray', 500)] - The text color of the card subtitle.
-/// @prop {Map} content-text-color [color: ('gray', 700)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
 /// @prop {List} border-radius [(rem(3px), rem(0), rem(24px))] - The border radius used for card.
 /// @requires {Map} $light-card
@@ -175,13 +174,6 @@ $indigo-card: extend(
             ),
         ),
 
-        header-text-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-
         subtitle-text-color: (
             color: (
                 'gray',
@@ -189,13 +181,6 @@ $indigo-card: extend(
             ),
         ),
 
-        content-text-color: (
-            color: (
-                'gray',
-                700,
-            ),
-        ),
-
         actions-text-color: (
             color: (
                 'gray',

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

@@ -108,6 +108,13 @@ $light-carousel: extend(
     )
 );
 
+/// Generates a material carousel schema.
+/// @type {Map}
+/// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.
+/// @requires {Map} $light-carousel
+/// @requires {Map} $default-elevation-carousel
+$material-carousel: $light-carousel;
+
 /// Generates a fluent carousel schema.
 /// @type {Map}
 /// @prop {Number} button-elevation [0] - The elevation level, between 0-24, to be used for the carousel buttons.

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

@@ -14,9 +14,8 @@
 /// @prop {Map} tick-color [color: ('gray', 50)] - The checked mark color.
 /// @prop {Map} tick-color-hover [color: ('gray', 50)] - The checked mark color on hover.
 /// @prop {Map} label-color [color: ('gray', 900)]- The text color used for the label text.
-/// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
-/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} disabled-indeterminate-color [color: ('secondary', 100)] - The disabled border and fill colors in indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 500)] - The disabled color of the label.
@@ -46,21 +45,16 @@ $light-checkbox: (
     empty-color: (
         color: (
             'gray',
-            600,
+            500,
         ),
     ),
     fill-color: (
         color: (
-            'secondary',
-            500,
-        ),
-    ),
-    fill-color-hover: (
-        color: (
-            'secondary',
+            'primary',
             500,
         ),
     ),
+
     disabled-color: (
         color: (
             'gray',
@@ -107,13 +101,43 @@ $light-checkbox: (
     ),
 );
 
+/// Generates a material checkbox schema.
+/// @type {Map}
+/// @prop {Map} empty-color [color: ('gray', 600)] - The unchecked border color.
+/// @prop {Map} fill-color [color: ('secondary', 500)] - The checked border and fill colors.
+/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
+/// @requires {Map} $light-checkbox
+$material-checkbox: extend(
+    $light-checkbox,
+    (
+        empty-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        fill-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        fill-color-hover: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent checkbox schema.
 /// @type {Map}
 /// @prop {Map} tick-color-hover [color: ('gray', 700)] - The checked mark color on hover when the control in unchecked.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 900)] - The checked border and fill colors on hover.
-/// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and fill colors.
 /// @prop {Map} focus-outline-color [color: ('gray', 800)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 900)] - The border and fill colors in invalid state on hover.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
@@ -140,24 +164,12 @@ $fluent-checkbox: extend(
                 900,
             ),
         ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'primary',
                 900,
             ),
         ),
-        disabled-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         error-color-hover: (
             color: (
                 'error',
@@ -183,9 +195,7 @@ $fluent-checkbox: extend(
 
 /// Generates a bootstrap checkbox schema.
 /// @type {Map}
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 500)] - The checked border and fill colors on hover.
-/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and fill colors.
 /// @prop {Map} disabled-color-label [color: ('gray', 400)] - The disabled color of the label.
 /// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
@@ -202,24 +212,12 @@ $bootstrap-checkbox: extend(
                 200,
             ),
         ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'primary',
                 500,
             ),
         ),
-        empty-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         disabled-color: (
             color: (
                 'primary',
@@ -259,9 +257,7 @@ $bootstrap-checkbox: extend(
 /// @type {Map}
 /// @prop {Color} tick-color [color: 'surface'] - The checked mark color.
 /// @prop {Color} tick-color-hover [color: 'surface'] - The checked mark color on hover.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and fill colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 400)] - The checked border and fill colors on hover.
-/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
 /// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border and fill colors.
 /// @prop {Map} disabled-indeterminate-color [color: ('primary', 200)] - The disabled border and fill colors in checked/indeterminate state.
 /// @prop {Map} disabled-color-label [color: ('gray', 300)] - The disabled label color.
@@ -292,24 +288,12 @@ $indigo-checkbox: extend(
         tick-color-hover: (
             color: 'surface',
         ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'primary',
                 400,
             ),
         ),
-        empty-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         disabled-color: (
             color: (
                 'gray',

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