igniteui-theming 4.2.0 → 4.3.0

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

@@ -10,65 +10,71 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light switch schema.
+/// Generates a base light switch schema.
 /// @type {Map}
-/// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
-/// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
-/// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
-/// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
-/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-color [color: ('gray', 50)] - The color of the thumb when the switch is on.
+/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
+/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
 /// @prop {Map} thumb-on-disabled-color [color: ('secondary', 100)] - The color of the thumb when the switch is on and disabled.
-/// @prop {Map} track-disabled-color [color: ('gray', 300)] - The color of the track when the switch is disabled.
-/// @prop {Map} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled.
+/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
 /// @prop {Map} label-color [color: ('gray', 900)] - The color of the switch label
 /// @prop {Map} label-disabled-color [color: ('gray', 500)] - The color of the switch label when the switch is disabled
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [3] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} disabled-elevation [1] - The elevation level, between 0-24, to be used for the disabled state.
-/// @prop {List} border-radius-track [(rem(7px), rem(0), rem(7px))] - The border radius used for switch track.
 /// @prop {List} border-radius-thumb [(rem(10px), rem(0), rem(10px))] - The border radius used for switch thumb.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for switch ripple.
-/// @prop {Color} border-color [transparent] - The border color of the switch.
-/// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
-/// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
-/// @prop {Color} border-on-color [transparent] - The border color of the on-switch.
-/// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
+/// @prop {Map} border-on-color [color('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} label-invalid-color [color: ('gray', 900)] - The color of the switch label in invalid state.
+/// @prop {Map} track-on-disabled-color [color: ('secondary', 50)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} track-error-color [color: ('gray', 500)] - The color of the track in invalid state when the switch is off.
-/// @prop {Map} thumb-on-error-color [color: ('secondary', 500)] - The color of the thumb when the switch is on and invalid.
-/// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
-/// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @requires {Map} $default-elevation-switch
 $light-switch: extend(
     $default-elevation-switch,
     (
-        border-color: transparent,
-        border-hover-color: transparent,
-        border-disabled-color: transparent,
-        border-on-color: transparent,
-        border-on-hover-color: transparent,
-        thumb-on-color: (
+        border-on-color: (
             color: (
-                'secondary',
+                'primary',
                 500,
             ),
         ),
         track-on-color: (
             color: (
-                'secondary',
-                200,
+                'primary',
+                500,
             ),
         ),
-        thumb-off-color: (
+        track-disabled-color: transparent,
+        track-off-color: transparent,
+        thumb-on-color: (
             color: (
                 'gray',
                 50,
             ),
         ),
-        track-disabled-color: (
+        thumb-on-disabled-color: (
+            color: (
+                'secondary',
+                100,
+            ),
+        ),
+        label-color: (
             color: (
                 'gray',
-                300,
+                900,
+            ),
+        ),
+        label-disabled-color: (
+            color: (
+                'gray',
+                500,
+            ),
+        ),
+        label-invalid-color: (
+            color: (
+                'gray',
+                900,
             ),
         ),
         track-on-disabled-color: (
@@ -77,52 +83,103 @@ $light-switch: extend(
                 50,
             ),
         ),
-        track-off-color: (
+        track-error-color: (
             color: (
                 'gray',
                 500,
             ),
         ),
-        thumb-disabled-color: (
+        thumb-on-error-color: (
             color: (
                 'gray',
-                200,
+                50,
             ),
         ),
-        thumb-on-disabled-color: (
+        border-radius-thumb: (
+            border-radius: (
+                rem(10px),
+                rem(0),
+                rem(10px),
+            ),
+        ),
+        border-radius-ripple: (
+            border-radius: (
+                rem(24px),
+                rem(0),
+                rem(24px),
+            ),
+        ),
+    )
+);
+
+/// Generates a material switch schema.
+/// @type {Map}
+/// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
+/// @prop {Color} border-color [transparent] - The border color of the switch.
+/// @prop {Color} border-hover-color [transparent] - The border color of the switch on hover.
+/// @prop {Color} border-on-color [transparent] - The border color of the on-switch.
+/// @prop {Color} border-on-hover-color [transparent] - The border color of the  on-switch.
+/// @prop {Color} border-disabled-color [transparent] - The border color of the disabled switch.
+/// @prop {Map} thumb-on-color [color: ('secondary', 500)] - The color of the thumb when the switch is on.
+/// @prop {Map} thumb-off-color [color: ('gray', 50)] - The color of the thumb when the switch is off.
+/// @prop {Map} thumb-disabled-color [color: ('gray', 200)] - The color of the thumb when the switch is disabled.
+/// @prop {Map} thumb-on-error-color [color: ('secondary', 500)] - The color of the thumb when the switch is on and invalid.
+/// @prop {Map} track-off-color [color: ('gray', 500)] - The color of the track when the switch is off.
+/// @prop {Map} track-on-color [color: ('secondary', 200)] - The color of the track when the switch is on.
+/// @prop {Map} track-disabled-color [color: ('gray', 300)] - The color of the track when the switch is disabled.
+/// @prop {Map} error-color [color: ('gray', 50)] - The color of the thumb in invalid state.
+/// @prop {Map} error-color-hover [color: ('gray', 500)] - The border color in invalid state on hover.
+/// @prop {List} border-radius-track [(rem(7px), rem(0), rem(7px))] - The border radius used for switch track.
+/// @requires {Map} $light-switch
+$material-switch: extend(
+    $light-switch,
+    (
+        focus-outline-color: transparent,
+        border-color: transparent,
+        border-hover-color: transparent,
+        border-on-color: transparent,
+        border-on-hover-color: transparent,
+        border-disabled-color: transparent,
+        thumb-on-color: (
             color: (
                 'secondary',
-                100,
+                500,
             ),
         ),
-        label-color: (
+        thumb-off-color: (
             color: (
                 'gray',
-                900,
+                50,
             ),
         ),
-        label-disabled-color: (
+        thumb-disabled-color: (
             color: (
                 'gray',
-                500,
+                200,
             ),
         ),
-        label-invalid-color: (
+        thumb-on-error-color: (
             color: (
-                'gray',
-                900,
+                'secondary',
+                500,
             ),
         ),
-        track-error-color: (
+        track-off-color: (
             color: (
                 'gray',
                 500,
             ),
         ),
-        thumb-on-error-color: (
+        track-on-color: (
             color: (
                 'secondary',
-                500,
+                200,
+            ),
+        ),
+        track-disabled-color: (
+            color: (
+                'gray',
+                300,
             ),
         ),
         error-color: (
@@ -144,49 +201,24 @@ $light-switch: extend(
                 rem(7px),
             ),
         ),
-        border-radius-thumb: (
-            border-radius: (
-                rem(10px),
-                rem(0),
-                rem(10px),
-            ),
-        ),
-        border-radius-ripple: (
-            border-radius: (
-                rem(24px),
-                rem(0),
-                rem(24px),
-            ),
-        ),
     )
 );
 
 /// Generates a fluent switch schema.
 /// @type {Map}
-///
 /// @prop {Map} border-color [color('gray', 700)] - The border color of the switch.
 /// @prop {Map} border-hover-color [color('gray', 800)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [color('gray', 400)] - The border color of the disabled switch.
-/// @prop {Map} border-on-color [color('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} border-on-hover-color [color('primary', 800)] - The border color of the on-switch.
-///
-/// @prop {Map} thumb-on-color [color: ('gray', 50)] - The color of the thumb when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 700)] - The color of the thumb when the switch is off.
-/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
-/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
 /// @prop {Map} track-on-hover-color [color: ('primary', 800)] - The color of the track when the switch is on and hovered.
 /// @prop {Map} track-on-disabled-color [color: ('gray', 400)] - The color of the track when the switch is on and disabled.
-/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 400)] - The color of the thumb when the switch is disabled.
 /// @prop {Map} thumb-on-disabled-color [color: ('gray', 100)] - The color of the thumb when the switch is on and disabled.
 /// @prop {Map} focus-outline-color [color: ('gray', 700)] - The focus outlined color.
 /// @prop {Map} error-color [color: ('gray', 700)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 800)] - The border and thumb color in invalid state on hover.
-/// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
-///
 /// @prop {List} border-radius-track [(rem(10px), rem(0), rem(10px))] - The border radius used for switch track.
-///
-///
 /// @requires {Map} $light-switch
 $fluent-switch: extend(
     $light-switch,
@@ -209,25 +241,12 @@ $fluent-switch: extend(
                 700,
             ),
         ),
-        track-off-color: transparent,
         border-hover-color: (
             color: (
                 'gray',
                 800,
             ),
         ),
-        track-on-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        border-on-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         track-on-hover-color: (
             color: (
                 'primary',
@@ -240,12 +259,6 @@ $fluent-switch: extend(
                 800,
             ),
         ),
-        thumb-on-color: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
         track-on-disabled-color: (
             color: (
                 'gray',
@@ -270,12 +283,6 @@ $fluent-switch: extend(
                 400,
             ),
         ),
-        thumb-on-error-color: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
         error-color: (
             color: (
                 'gray',
@@ -288,7 +295,6 @@ $fluent-switch: extend(
                 800,
             ),
         ),
-        track-disabled-color: transparent,
         border-radius-track: (
             border-radius: (
                 rem(10px),
@@ -307,16 +313,12 @@ $fluent-switch: extend(
 /// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
 /// @prop {Map} thumb-off-color [color: ('gray', 400)] - The color of the thumb when the switch is off.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
-/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
 /// @prop {Map} track-on-disabled-color [color: ('primary', 200)] - The color of the track when the switch is on and disabled.
 /// @prop {Map} thumb-on-disabled-color [color: ('gray', 50)] - The color of the thumb when the switch is on and disabled.
-/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
 /// @prop {Map} error-color [color: ('gray', 400)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('primary', 200)] - The border and thumb color in invalid state on hover.
 /// @prop {List} border-radius-track [(rem(32px), rem(0), rem(32px))] - The border radius used for switch track.
 /// @prop {List} border-radius-thumb [(rem(32px), rem(0), rem(32px))] - The border radius used for switch thumb.
-///
-///
 /// @requires {Map} $fluent-switch
 $bootstrap-switch: extend(
     $fluent-switch,
@@ -363,12 +365,6 @@ $bootstrap-switch: extend(
                 50,
             ),
         ),
-        track-on-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         track-on-disabled-color: (
             color: (
                 'primary',
@@ -406,28 +402,18 @@ $bootstrap-switch: extend(
 
 /// Generates an indigo switch schema.
 /// @type {Map}
-///
-/// @prop {Map} thumb-on-color [color: ('gray', 50)] - The color of the thumb when the switch is on.
-/// @prop {Map} track-on-color [color: ('primary', 500)] - The color of the track when the switch is on.
 /// @prop {Map} thumb-off-color [color: ('gray', 600)] - The color of the thumb when the switch is off.
-/// @prop {Color} track-off-color [transparent] - The color of the track when the switch is off.
 /// @prop {Map} thumb-disabled-color [color: ('gray', 300)] - The color of the thumb when the switch is disabled.
-/// @prop {Color} track-disabled-color [transparent] - The color of the track when the switch is disabled.
-///
 /// @prop {Map} border-color [color: ('gray', 600)] - The border color of the switch.
 /// @prop {Map} border-hover-color [color: ('gray', 600)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [color: ('gray', 300)] - The border color of the disabled switch.
-/// @prop {Map} border-on-color [color: ('primary', 500)] - The border color of the on-switch.
 /// @prop {Map} border-on-hover-color [color: ('primary', 500)] - The border color of the  on-switch.
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
-/// @prop {Map} thumb-on-error-color [color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} error-color [color: ('gray', 500)] - The border and thumb color in invalid state.
 /// @prop {Map} error-color-hover [color: ('gray', 300)] - The border and thumb color in invalid state on hover.
 /// @prop {List} border-radius-track [(rem(8px), rem(0), rem(8px))] - The border radius used for switch track.
 /// @prop {Map} focus-outline-color [color: ('gray', 300)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 200)] - The focus outlined color for focused state.
-///
-///
 /// @requires $light-switch
 $indigo-switch: extend(
     $light-switch,
@@ -462,42 +448,18 @@ $indigo-switch: extend(
                 300,
             ),
         ),
-        border-on-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
         border-on-hover-color: (
             color: (
                 'primary',
                 500,
             ),
         ),
-        thumb-on-color: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
         thumb-off-color: (
             color: (
                 'gray',
                 600,
             ),
         ),
-        track-on-color: (
-            color: (
-                'primary',
-                500,
-            ),
-        ),
-        thumb-on-error-color: (
-            color: (
-                'gray',
-                50,
-            ),
-        ),
         error-color: (
             color: (
                 'gray',
@@ -510,8 +472,6 @@ $indigo-switch: extend(
                 300,
             ),
         ),
-        track-off-color: transparent,
-        track-disabled-color: transparent,
         thumb-disabled-color: (
             color: (
                 'gray',

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

@@ -9,12 +9,12 @@
 
 /* stylelint-disable max-line-length */
 
-/// Generates a light tabs schema.
+/// Generates a base light tabs schema.
 /// @type {Map}
 /// @prop {Map} item-text-color [color: ('gray', 700)] - The color used for the tab text color.
 /// @prop {Color} item-background [color: ('surface')] - The background color used for the tabs header.
 /// @prop {Map} item-hover-background [color: ('gray', 200)] - The background used for the tabs on hover.
-/// @prop {Map} item-hover-color [color: ('gray', 700)] - The text color used for the tabs on hover.
+/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
 /// @prop {Map} item-icon-color [color: ('gray', 700)] - The color used for the tab icon.
 /// @prop {Map} item-active-icon-color [color: ('primary', 500)] - The color used for the active tab icon.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 700)] - The color used for the tab icon on hover.
@@ -54,7 +54,7 @@ $light-tabs: (
     item-hover-color: (
         color: (
             'gray',
-            700,
+            900,
         ),
     ),
     item-active-color: (
@@ -157,10 +157,25 @@ $light-tabs: (
     ),
 );
 
+/// Generates a material tabs schema.
+/// @type {Map}
+/// @prop {Map} item-hover-color [color: ('gray', 700)] - The text color used for the tabs on hover.
+/// @requires {Map} $light-tabs
+$material-tabs: extend(
+    $light-tabs,
+    (
+        item-hover-color: (
+            color: (
+                'gray',
+                700,
+            ),
+        ),
+    )
+);
+
 /// Generates a fluent tabs schema.
 /// @type {Map}
 /// @prop {Map} item-text-color [color: ('gray', 900)] - The color used for the tab text color.
-/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
 /// @prop {Map} item-disabled-color [color: ('gray', 400)] - The color used for the disabled tabs text.
 /// @prop {Map} item-disabled-icon-color [color: ('gray', 400)] - The color used for the disabled tab icon.
 /// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
@@ -176,12 +191,6 @@ $fluent-tabs: extend(
                 900,
             ),
         ),
-        item-hover-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         item-disabled-color: (
             color: (
                 'gray',
@@ -225,8 +234,6 @@ $fluent-tabs: extend(
 /// @prop {map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tabs icon.
 /// @prop {Map} item-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled tabs text.
 /// @prop {Map} item-disabled-icon-color [color: ('primary', 500, .5)] - The color used for the disabled tab icon.
-/// @prop {map} item-background [color: ('surface')] - The background color used for the tabs header.
-/// @prop {map} button-background [color: ('surface')] - The color used for the button background.
 /// @prop {Map} button-color [color: ('gray', 500)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [color: ('gray', 600)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('primary', 500, .5)] - The color used for the disabled button icon/text.
@@ -239,16 +246,6 @@ $fluent-tabs: extend(
 $bootstrap-tabs: extend(
     $light-tabs,
     (
-        item-background: (
-            color: (
-                'surface',
-            ),
-        ),
-        button-background: (
-            color: (
-                'surface',
-            ),
-        ),
         button-color: (
             color: (
                 'gray',
@@ -355,12 +352,10 @@ $bootstrap-tabs: extend(
 /// @prop {Color} item-background [transparent] - The background color used for the tabs header.
 /// @prop {Color} item-hover-background [transparent] - The background used for the tabs on hover.
 /// @prop {Color} item-active-background [transparent] - The color used for the active/focused tab background.
-/// @prop {Map} item-hover-color [color: ('gray', 900)] - The text color used for the tabs on hover.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
 /// @prop {Map} item-active-color [color: ('gray', 900)] - The color used for the active tabs text.
 /// @prop {Map} item-active-icon-color [color: ('primary', 400)] - The color used for the active tabs icon.
 /// @prop {Map} indicator-color [color: ('primary', 400)] - The color used for the tabs borders.
-/// @prop {Map} button-disabled-color [color: ('gray', 500)] - The color used for the disabled button icon/text.
 /// @prop {Color} button-background [transparent] - The color used for the button background.
 /// @prop {Color} button-hover-background [transparent] - The color used for the button background on hover.
 /// @requires {Map} $light-tabs
@@ -370,12 +365,6 @@ $indigo-tabs: extend(
         item-background: transparent,
         item-hover-background: transparent,
         item-active-background: transparent,
-        item-hover-color: (
-            color: (
-                'gray',
-                900,
-            ),
-        ),
         item-hover-icon-color: (
             color: (
                 'gray',
@@ -400,12 +389,6 @@ $indigo-tabs: extend(
                 400,
             ),
         ),
-        button-disabled-color: (
-            color: (
-                'gray',
-                500,
-            ),
-        ),
         button-background: transparent,
         button-hover-background: transparent,
     )

package/sass/themes/schemas/components/light/_time-picker.scss

@@ -8,7 +8,7 @@
 /// @access public
 ////
 
-/// Generates a light time-picker schema.
+/// Generates a base light time-picker schema.
 /// @type {Map}
 /// @prop {Map} text-color [color: ('gray', 500)] - The text color of an open time picker.
 /// @prop {Map} hover-text-color [color: ('secondary', 500)] - The hover text color of an open time picker.
@@ -23,7 +23,6 @@
 /// @prop {Number} modal-elevation [24] - The elevation level, between 0-24, to be used for the time picker in modal mode.
 /// @prop {Number} dropdown-elevation [8] - The elevation level, between 0-24, to be used for the time picker in dropdown mode.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
-/// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
 /// @requires {Map} $default-elevation-time-picker
 $light-time-picker: extend(
     $default-elevation-time-picker,
@@ -97,6 +96,16 @@ $light-time-picker: extend(
                 rem(20px),
             ),
         ),
+    )
+);
+
+/// Generates a light material time-picker schema.
+/// @type {Map}
+/// @prop {List} active-item-border-radius [(rem(15px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
+/// @requires {Map} $light-time-picker
+$material-time-picker: extend(
+    $light-time-picker,
+    (
         active-item-border-radius: (
             border-radius: (
                 rem(15px),
@@ -111,7 +120,6 @@ $light-time-picker: extend(
 /// @type {Map}
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
 /// @prop {List} active-item-border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
-///
 /// @requires $light-time-picker
 $fluent-time-picker: extend(
     $light-time-picker,
@@ -139,7 +147,6 @@ $fluent-time-picker: extend(
 /// @prop {Map} hover-text-color [color: ('primary', 600)] - The hover text color of an open time picker.
 /// @prop {Map} header-background [color: ('primary', 500)] - The header background color of a time picker.
 /// @prop {List} active-item-border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the highlight of the active item in the time-picker.
-///
 /// @requires $light-time-picker
 $bootstrap-time-picker: extend(
     $light-time-picker,

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

@@ -8,7 +8,7 @@
 /// @access public
 ////
 
-/// Generates a light toast schema.
+/// Generates a base light toast schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 700, .9)] - The background color used for the toast.
 /// @prop {Map} border-color [color: ('gray', 700, .9)] - The border color used for the toast.
@@ -51,6 +51,11 @@ $light-toast: extend(
     )
 );
 
+/// Generates a light material toast schema.
+/// @type {Map}
+/// @requires {Map} $light-toast
+$material-toast: $light-toast;
+
 /// Generates a fluent toast schema.
 /// @type {Map}
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(26px))] - The border radius used for toast.

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

@@ -7,7 +7,7 @@
 /// @access public
 ////
 
-/// Generates a light tooltip schema.
+/// Generates a base light tooltip schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 700, .9),] - The background color of the tooltip.
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text color of the tooltip.
@@ -37,6 +37,11 @@ $light-tooltip: (
     ),
 );
 
+/// Generates a light material tooltip schema.
+/// @type {Map}
+/// @requires {Map} $light-tooltip
+$material-tooltip: $light-tooltip;
+
 /// Generates a light fluent tooltip schema.
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 900, .8)] - The background color of the tooltip.