igniteui-theming 4.2.0 → 4.3.0

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

@@ -7,26 +7,18 @@
 /// @access public
 ////
 
-/// Generates a light radio schema.
+/// Generates a base light radio schema.
 /// @type {Map}
 /// @prop {Color} hover-color [transparent] - The text color used for the label text.
-/// @prop {Map} fill-hover-border-color [color: ('secondary', 500)] - The text color used for the label text.
 /// @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 dot colors.
-/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot 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 dot colors.
 /// @prop {Map} disabled-color [color: ('gray', 400)] - The disabled border and dot colors.
 /// @prop {Map} disabled-label-color [color: ('gray', 400)] - The disabled label color.
 /// @prop {Map} error-color [color: ('error', 500)] - The label, border and dot color in invalid state.
-/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and dot color in invalid state on hover.
+/// @prop {Color} focus-outline-color-focused [transparent] - The focus outlined color for focused state.
 $light-radio: (
     hover-color: transparent,
-    fill-hover-border-color: (
-        color: (
-            'secondary',
-            500,
-        ),
-    ),
     label-color: (
         color: (
             'gray',
@@ -36,18 +28,12 @@ $light-radio: (
     empty-color: (
         color: (
             'gray',
-            600,
-        ),
-    ),
-    fill-color: (
-        color: (
-            'secondary',
             500,
         ),
     ),
-    fill-color-hover: (
+    fill-color: (
         color: (
-            'secondary',
+            'primary',
             500,
         ),
     ),
@@ -69,12 +55,58 @@ $light-radio: (
             500,
         ),
     ),
-    error-color-hover: (
-        color: (
-            'error',
-            500,
+    focus-outline-color-focused: transparent,
+);
+
+/// Generates a material radio schema.
+/// @type {Map}
+/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Map} fill-hover-border-color [color: ('secondary', 500)] - 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 dot colors on hover.
+/// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and dot colors on hover.
+/// @prop {Map} error-color-hover [color: ('error', 500)] - The border and dot color in invalid state on hover.
+/// @requires {Map} $light-radio
+$material-radio: extend(
+    $light-radio,
+    (
+        focus-outline-color: transparent,
+
+        fill-hover-border-color: (
+            color: (
+                'secondary',
+                500,
+            ),
         ),
-    ),
+
+        empty-color: (
+            color: (
+                'gray',
+                600,
+            ),
+        ),
+
+        fill-color: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        fill-color-hover: (
+            color: (
+                'secondary',
+                500,
+            ),
+        ),
+
+        error-color-hover: (
+            color: (
+                'error',
+                500,
+            ),
+        ),
+    )
 );
 
 /// Generates a fluent radio schema.
@@ -82,7 +114,6 @@ $light-radio: (
 /// @prop {Map} hover-color [color: ('gray', 700)] - The border and dot colors on hover.
 /// @prop {Map} fill-hover-border-color [color: ('primary', 800)] - The checked dot border color on hover.
 /// @prop {Map} empty-color [color: ('gray', 900)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 800)] - The checked border and dot colors on hover.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 700)] - The border and dot color in invalid state on hover.
@@ -115,12 +146,6 @@ $fluent-radio: extend(
                 900,
             ),
         ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'primary',
@@ -145,8 +170,6 @@ $fluent-radio: extend(
 /// Generates a bootstrap radio schema.
 /// @type {Map}
 /// @prop {Map} fill-hover-border-color [color: ('gray', 50)] - The checked dot border color on hover.
-/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
 /// @prop {Map} disabled-color [color: ('primary', 200)] - The disabled border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('gray', 50)] - The checked border and dot colors on hover.
 /// @prop {Map} focus-outline-color [color: ('primary', 200)] - The focus outlined color.
@@ -173,18 +196,6 @@ $bootstrap-radio: extend(
                 200,
             ),
         ),
-        empty-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'gray',
@@ -203,9 +214,6 @@ $bootstrap-radio: extend(
 /// Generates an indigo radio schema.
 /// @type {Map}
 /// @prop {Map} fill-hover-border-color [color: ('primary', 500)] - The text color used for the label text.
-/// @prop {Map} label-color [color: ('gray', 900)] - The text color used for the label text.
-/// @prop {Map} empty-color [color: ('gray', 500)] - The unchecked border color.
-/// @prop {Map} fill-color [color: ('primary', 500)] - The checked border and dot colors.
 /// @prop {Map} fill-color-hover [color: ('primary', 500)] - The checked border and dot colors on hover.
 /// @prop {Map} disabled-color [color: ('gray', 300)] - The disabled border and dot colors.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
@@ -233,24 +241,6 @@ $indigo-radio: extend(
                 500,
             ),
         ),
-        label-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-        empty-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
-        fill-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         fill-color-hover: (
             color: (
                 'primary',

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

@@ -9,8 +9,10 @@
 
 /* stylelint-disable max-line-length */
 
+/// Generates a base light rating schema.
+/// @type {Map}
 /// @prop {Map} label-color [color: ('gray', 900)] - sets the color for the label.
-/// @prop {Map} value-label [color: ('gray', 700)] - sets the color for the value label.
+/// @prop {Map} value-label [color: ('gray', 900)] - sets the color for the value label.
 /// @prop {Number} symbol-size [rem(36px)] - the size of the symbols.
 /// @prop {Map} symbol-empty-color [color: ('gray', 900)] - sets the idle color for the symbol when it is a plane text.
 /// @prop {Map} symbol-full-color [color: ('primary')] - sets the color in selected state for the symbol when it is a plane text.
@@ -20,8 +22,6 @@
 /// @prop {Map} disabled-empty-symbol-color [color: ('gray', 400)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @prop {Map} disabled-full-symbol-color [color: ('gray', 600)] - sets the color for the symbol in selected/disabled state when it is a plane text.
 /// @prop {Number} default-size [2] - The default size used for the rating component.
-/// Generates a light rating schema.
-/// @type {Map}
 $light-rating: (
     symbol-size: null,
 
@@ -34,7 +34,7 @@ $light-rating: (
     value-label: (
         color: (
             'gray',
-            700,
+            900,
         ),
     ),
     symbol-empty-color: (
@@ -81,10 +81,24 @@ $light-rating: (
     default-size: 2,
 );
 
+/// Generates a material rating schema.
+/// @type {Map}
+/// @prop {Map} value-label [color: ('gray', 700)] - sets the color for the value label.
+/// @requires {Map} $light-rating
+$material-rating: extend(
+    $light-rating,
+    (
+        value-label: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent rating schema.
 /// @type {Map}
-/// @prop {Map} value-label [color: ('gray', 900)] - sets the color for the value label.
-/// @prop {Map} disabled-idle-symbols-color [color: ('gray', 200)] - sets the idle color for the symbol in disabled state when it is a plane text.
 /// @prop {Map} symbol-empty-color [color: ('gray', 700)] - sets the idle color for the symbol when it is a plane text.
 /// @prop {Map} symbol-full-color [[color: ('warn', 900)] - sets the color in selected state for the symbol when it is a plane text.
 /// @prop {Map} disabled-empty-symbol-color [color: ('warn', 100)] - sets the idle color for the symbol in disabled state when it is a plane text.
@@ -93,12 +107,6 @@ $light-rating: (
 $fluent-rating: extend(
     $light-rating,
     (
-        value-label: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         symbol-empty-color: (
             color: (
                 'gray',
@@ -111,12 +119,6 @@ $fluent-rating: extend(
                 900,
             ),
         ),
-        disabled-value-label: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         disabled-empty-symbol-color: (
             color: (
                 'warn',
@@ -134,32 +136,10 @@ $fluent-rating: extend(
 
 /// Generates a bootstrap rating schema.
 /// @type {Map}
-/// @prop {Map} value-label [color: ('gray', 900)] - sets the color for the value label.
 /// @requires {Map} $light-rating
-$bootstrap-rating: extend(
-    $light-rating,
-    (
-        value-label: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-    )
-);
+$bootstrap-rating: $light-rating;
 
 /// Generates an indigo rating schema.
 /// @type {Map}
-/// @prop {Map} value-label [color: ('gray', 900)] - sets the color for the value label.
 /// @requires {Map} $light-rating
-$indigo-rating: extend(
-    $light-rating,
-    (
-        value-label: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
-    )
-);
+$indigo-rating: $light-rating;

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light ripple schema.
+/// Generates a base light ripple schema.
 /// @type {Map}
 /// @prop {Map} color [color: ('gray', 800, .7)] - The color of the ripple.
 $light-ripple: (
@@ -20,6 +20,11 @@ $light-ripple: (
     ),
 );
 
+/// Generates a material ripple schema.
+/// @type {Map}
+/// @requires {Map} $light-ripple
+$material-ripple: $light-ripple;
+
 /// Generates a fluent ripple schema.
 /// @type {Map}
 /// @requires {Map} $light-ripple

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light scrollbar schema.
+/// Generates a base light scrollbar schema.
 /// @type {Map}
 /// @property {Color} thumb-background [color: ('gray', 400)] - The background color used for the thumb.
 /// @property {Color} track-background [color: ('gray', 100)] - The background color used for the track.
@@ -30,10 +30,14 @@ $light-scrollbar: (
     ),
 );
 
+/// Generates a material scrollbar schema.
+/// @type {Map}
+/// @requires {Map} $light-scrollbar
+$material-scrollbar: $light-scrollbar;
+
 /// Generates a fluent scrollbar schema.
 /// @type {Map}
 /// @property {Color} thumb-background [color: ('gray', 300)] - The background color used for the thumb.
-///
 /// @requires {Map} $light-scrollbar
 $fluent-scrollbar: extend(
     $light-scrollbar,
@@ -49,26 +53,16 @@ $fluent-scrollbar: extend(
 
 /// Generates a bootstrap scrollbar schema.
 /// @type {Map}
-///
 /// @requires {Map} $light-scrollbar
 $bootstrap-scrollbar: $light-scrollbar;
 
 /// Generates an indigo scrollbar schema.
 /// @type {Map}
-/// @property {Map} thumb-background [color: ('gray', 400)] - The background color used for the thumb.
 /// @property {Color} track-background [color: ('gray', 200)] - The background color used for the track.
-///
 /// @requires {Map} $light-scrollbar
 $indigo-scrollbar: extend(
     $light-scrollbar,
     (
-        thumb-background: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
-
         track-background: (
             color: (
                 'gray',

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

@@ -9,7 +9,7 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light select schema.
+/// Generates a base light select schema.
 /// @type {Map}
 /// @prop {Map} toggle-button-background [color: ('gray', 300)] - The select toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 400, .3)] - The select toggle button background color when the select is focused.
@@ -17,7 +17,7 @@
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 900)] - The select toggle button foreground color when the select is filled.
 /// @prop {Map} toggle-button-background-disabled [color: ('gray', 100] - The select toggle button background color when the select is disabled.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @prop {Map} toggle-button-background-focus--border [color: ('gray', 300)] The select toggle button background color when the select is focused in material border and line variants.
 /// @prop {Number} default-size [2] - The default size used for the select component.
 $light-select: (
@@ -67,18 +67,33 @@ $light-select: (
     toggle-button-foreground-disabled: (
         color: (
             'gray',
-            500,
+            400,
         ),
     ),
     default-size: 2,
 );
 
+/// Generates a material select schema.
+/// @type {Map}
+/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 500)] - The select toggle button foreground color when the select is disabled.
+/// @requires {Map} $light-select
+$material-select: extend(
+    $light-select,
+    (
+        toggle-button-foreground-disabled: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent select schema.
 /// @type {Map}
 /// @prop {Map} toggle-button-background [color: ('gray', 100)] - The select toggle button background color.
 /// @prop {Map} toggle-button-background-focus [color: ('gray', 100)] - The select toggle button background color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 700)] - The select toggle button foreground color when the select is focused.
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @requires {Map} $light-select
 $fluent-select: extend(
     $light-select,
@@ -101,18 +116,11 @@ $fluent-select: extend(
                 700,
             ),
         ),
-        toggle-button-foreground-disabled: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
     )
 );
 
 /// Generates a bootstrap select schema.
 /// @type {Map}
-/// @prop {Map} toggle-button-foreground-disabled [color: ('gray', 400)] - The select toggle button foreground color when the select is disabled.
 /// @prop {Map} toggle-button-foreground [color: ('gray', 800)] - The select toggle button foreground color.
 /// @prop {Map} toggle-button-foreground-focus [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
 /// @prop {Map} toggle-button-foreground-filled [color: ('gray', 800)] - The select toggle button foreground color when the select is focused.
@@ -120,19 +128,13 @@ $fluent-select: extend(
 $bootstrap-select: extend(
     $light-select,
     (
-        toggle-button-foreground-disabled: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         toggle-button-foreground: (
             color: (
                 'gray',
                 800,
             ),
         ),
-        toggle-button-foreground--focus: (
+        toggle-button-foreground-focus: (
             color: (
                 'gray',
                 800,