igniteui-theming 4.1.0 → 4.3.0

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

@@ -9,24 +9,17 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light slider schema.
+/// Generates a base light slider schema.
 /// @type {Map}
 /// @prop {Map} track-color [color: ('secondary', 500)] - The color of the track.
-/// @prop {Color} track-step-color [color: ('secondary', 200)] - The color of the track steps.
+/// @prop {Color} track-step-color [white] - The color of the track steps.
 /// @prop {Number} track-step-size [rem(3px)] - The size of the track steps.
-/// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
 /// @prop {Map} thumb-color [color: ('secondary', 500)] - The color of the thumb.
-/// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('secondary', 500)] - The thumb border color.
 /// @prop {Map} thumb-border-focus-color [color: ('secondary', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
-/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
 /// @prop {Map} label-background-color [color: ('gray', 700)] - The background color of the bubble label.
 /// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
-/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
-/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
-/// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled.
-/// @prop {Map} disabled-fill-track-color [color: ('gray', 400)] - The background color of the fill track when is disabled.
 /// @prop {Map} tick-label-color [color: ('gray', 500)] - The color of the tick label.
 /// @prop {Map} tick-color [color: ('gray', 500)] - The background-color of the tick.
 $light-slider: (
@@ -36,26 +29,14 @@ $light-slider: (
             500,
         ),
     ),
-    track-step-color: (
-        color: (
-            'secondary',
-            200,
-        ),
-    ),
+    track-step-color: white,
     track-step-size: rem(3px),
-    track-hover-color: (
-        color: (
-            'secondary',
-            400,
-        ),
-    ),
     thumb-color: (
         color: (
             'secondary',
             500,
         ),
     ),
-    thumb-focus-color: transparent,
     thumb-border-color: (
         color: (
             'secondary',
@@ -74,12 +55,6 @@ $light-slider: (
             400,
         ),
     ),
-    disabled-thumb-color: (
-        color: (
-            'gray',
-            400,
-        ),
-    ),
     label-background-color: (
         color: (
             'gray',
@@ -92,32 +67,6 @@ $light-slider: (
             700,
         ),
     ),
-    base-track-color: (
-        color: (
-            'secondary',
-            500,
-            0.24,
-        ),
-    ),
-    base-track-hover-color: (
-        color: (
-            'secondary',
-            500,
-            0.24,
-        ),
-    ),
-    disabled-base-track-color: (
-        color: (
-            'gray',
-            200,
-        ),
-    ),
-    disabled-fill-track-color: (
-        color: (
-            'gray',
-            400,
-        ),
-    ),
     tick-color: (
         color: (
             'gray',
@@ -132,23 +81,82 @@ $light-slider: (
     ),
 );
 
+/// Generates a material slider schema.
+/// @type {Map}
+/// @prop {Color} thumb-focus-color [transparent] - The focus outline color of the thumb.
+/// @prop {Map} track-step-color [color: ('secondary', 200)] - The color of the track steps.
+/// @prop {Map} track-hover-color [color: ('secondary', 400)] - The color of the track on hover.
+/// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
+/// @prop {Map} base-track-color [color: ('secondary', 500, .24)] - The base background color of the track.
+/// @prop {Map} base-track-hover-color [color: ('secondary', 500, .24)] - The base background color of the track on hover.
+/// @prop {Map} disabled-base-track-color [color: ('gray', 200)] - The base background color of the track when is disabled.
+/// @prop {Map} disabled-fill-track-color [color: ('gray', 400)] - The background color of the fill track when is disabled.
+/// @requires {Map} $light-slider
+$material-slider: extend(
+    $light-slider,
+    (
+        track-step-color: (
+            color: (
+                'secondary',
+                200,
+            ),
+        ),
+        track-hover-color: (
+            color: (
+                'secondary',
+                400,
+            ),
+        ),
+        thumb-focus-color: transparent,
+        disabled-thumb-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+        base-track-color: (
+            color: (
+                'secondary',
+                500,
+                0.24,
+            ),
+        ),
+        base-track-hover-color: (
+            color: (
+                'secondary',
+                500,
+                0.24,
+            ),
+        ),
+        disabled-base-track-color: (
+            color: (
+                'gray',
+                200,
+            ),
+        ),
+        disabled-fill-track-color: (
+            color: (
+                'gray',
+                400,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent slider schema.
 /// @type {Map}
 /// @prop {Map} track-color [color: ('gray', 800)] - The color of the track.
-/// @prop {Color} track-step-color [white] - The color of the track steps.
 /// @prop {Map} track-hover-color [color: ('primary', 500)] - The color of the track on hover.
 /// @prop {Map} thumb-color [color: ('surface', 500)] - The color of the thumb.
 /// @prop {Map} thumb-border-color [color: ('gray', 700)] - The thumb border color.
 /// @prop {Map} thumb-border-focus-color [color: ('gray', 700)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 700)] - The focus outline color of the thumb.
-/// @prop {Map} thumb-disabled-border-color [color: ('gray', 400)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-thumb-color [color: ('surface', 500)] - The thumb color when its disabled.
 /// @prop {Map} label-background-color [color: ('primary', 500)] - The background color of the bubble label.
 /// @prop {Map} base-track-color [color: ('gray', 600)] - The base background color of the track.
 /// @prop {Map} base-track-hover-color [color: ('gray', 600)] - The base background color of the track on hover.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 100)] - The base background color of the track when is disabled.
 /// @prop {Map} disabled-fill-track-color [color: ('gray', 500)] - The background color of the fill track when is disabled.
-///
 /// @requires {Map} $light-slider
 $fluent-slider: extend(
     $light-slider,
@@ -159,7 +167,6 @@ $fluent-slider: extend(
                 800,
             ),
         ),
-        track-step-color: white,
         track-hover-color: (
             color: (
                 'primary',
@@ -190,12 +197,6 @@ $fluent-slider: extend(
                 700,
             ),
         ),
-        thumb-disabled-border-color: (
-            color: (
-                'gray',
-                400,
-            ),
-        ),
         disabled-thumb-color: (
             color: (
                 'surface',
@@ -244,7 +245,6 @@ $fluent-slider: extend(
 /// @prop {Map} thumb-border-focus-color [color: ('surface', 500)] - The thumb border color when focused.
 /// @prop {Map} thumb-focus-color [color: ('primary', 200)] - The focus outline color of the thumb.
 /// @prop {Map} disabled-thumb-color [color: ('gray', 400)] - The thumb color when its disabled.
-///
 /// @requires {Map} $light-slider
 $bootstrap-slider: extend(
     $fluent-slider,
@@ -298,7 +298,6 @@ $bootstrap-slider: extend(
 
 /// Generates an indigo slider schema.
 /// @type {Map}
-/// @prop {Color} track-step-color [white] - The color of the track steps.
 /// @prop {Map} track-hover-color [color: ('primary', 400)] - The color of the track on hover.
 /// @prop {Map} base-track-color [color: ('gray', 400)] - The base background color of the track.
 /// @prop {Map} base-track-hover-color [color: ('gray', 500)] - The base background color of the track on hover.
@@ -306,12 +305,10 @@ $bootstrap-slider: extend(
 /// @prop {Map} disabled-thumb-color [color: ('gray', 300)] - The thumb color when its disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 300)] - The base background color of the track when is disabled.
 /// @prop {Map} disabled-fill-track-color [color: ('gray', 300)] - The background color of the fill track when is disabled.
-///
 /// @requires {Map} $light-slider
 $indigo-slider: extend(
     $light-slider,
     (
-        track-step-color: white,
         track-hover-color: (
             color: (
                 'primary',

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

@@ -8,7 +8,7 @@
 /// @access public
 ////
 
-/// Generates a light snackbar schema.
+/// Generates a base light snackbar schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 900, .9)] - The background color used in the snackbar.
 /// @prop {Map} text-color [contrast-color: ('gray', 900)] - The text color used in the snackbar.
@@ -51,10 +51,14 @@ $light-snackbar: extend(
     )
 );
 
+/// Generates a material snackbar schema.
+/// @type {Map}
+/// @requires $light-snackbar
+$material-snackbar: $light-snackbar;
+
 /// Generates a fluent snackbar schema.
 /// @type {Map}
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(24px))] - The border radius used for snackbar.
-///
 /// @requires $light-snackbar
 $fluent-snackbar: extend(
     $light-snackbar,
@@ -75,7 +79,6 @@ $fluent-snackbar: extend(
 /// @prop {Map} text-color [contrast-color: ('surface')] - The text color used in the snackbar.
 /// @prop {Map} button-color [color: ('primary', 500)] - The button color used in the snackbar.
 /// @prop {Number} elevation [10] - The elevation level, between 0-24, to be used in the snackbar.
-///
 /// @requires $light-snackbar
 /// @requires {Map} $bootstrap-elevation-snackbar
 $bootstrap-snackbar: extend(
@@ -105,13 +108,10 @@ $bootstrap-snackbar: extend(
 
 /// Generates an indigo snackbar schema.
 /// @type {Map}
-///
 /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used in the snackbar.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color used in the snackbar.
 /// @prop {Map} button-color [contrast-color: ('gray', 700)] - The button color used in the snackbar.
 /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for snackbar.
-///
-///
 /// @requires $light-snackbar
 $indigo-snackbar: extend(
     $light-snackbar,

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light splitter schema.
+/// Generates a base light splitter schema.
 /// @type {Map}
 /// @prop {Map} bar-color [color: ('gray', 200)] - The background color of the bar.
 /// @prop {Map} handle-color [color: ('gray', 400)] - The color for the bar drag handle.
@@ -55,9 +55,13 @@ $light-splitter: (
     ),
 );
 
+/// Generates a material splitter schema.
+/// @type {Map}
+/// @requires {Map} $light-splitter
+$material-splitter: $light-splitter;
+
 /// Generates a fluent splitter schema.
 /// @type {Map}
-///
 /// @requires {Map} $light-splitter
 $fluent-splitter: $light-splitter;