igniteui-theming 14.4.0-beta.2 → 14.4.1

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

@@ -15,6 +15,7 @@
 /// @prop {Map} text-color [contrast-color: ('primary', 400)] - The navbar text color.
 /// @prop {Map} idle-icon-color [color: ('gray', 900)] - The navbar idle icon color.
 /// @prop {Map} hover-icon-color [color: ('gray', 900)] - The navbar hover icon color.
+/// @prop {Map} typography [title: (value: 'h5')] - The typography styles used for the component.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the navbar.
 /// @requires {Map} $default-elevation-navbar
 $light-navbar: extend(
@@ -45,13 +46,28 @@ $light-navbar: extend(
             ),
         ),
         border-color: transparent,
+        typography: (
+            title: (
+                value: 'h5',
+            ),
+        ),
     )
 );
 
 /// Generates a material navbar schema.
 /// @type {Map}
+/// @prop {Map} typography [title: (value: 'h6')] - The typography styles used for the component.
 /// @requires {Map} $light-navbar
-$material-navbar: $light-navbar;
+$material-navbar: extend(
+    $light-navbar,
+    (
+        typography: (
+            title: (
+                value: 'h6',
+            ),
+        ),
+    )
+);
 
 /// Generates a fluent navbar schema.
 /// @type {Map}
@@ -59,6 +75,7 @@ $material-navbar: $light-navbar;
 /// @prop {Map} text-color [color: ('gray', 900)] - The navbar text color.
 /// @prop {Map} idle-icon-color [color: ('primary', 500)] - The navbar idle icon color.
 /// @prop {Map} hover-icon-color [color: ('primary', 500)] - The navbar hover icon color.
+/// @prop {Map} typography [title: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @requires {Map} $light-navbar
 $fluent-navbar: extend(
     $light-navbar,
@@ -84,6 +101,11 @@ $fluent-navbar: extend(
                 500,
             ),
         ),
+        typography: (
+            title: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );
 

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

@@ -58,6 +58,10 @@ $light-navdrawer: extend(
 /// @prop {Map} item-icon-color [ color: ('gray', 700)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 700)] - The header's idle text color.
 /// @prop {Map} item-disabled-text-color [color: ('gray', 500)] - The item's disabled text color.
+/// @prop {Map} typography [
+///   item: (value: 'subtitle-2'),
+///   header: (value: 'subtitle-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-navdrawer
 $material-navdrawer: extend(
     $light-navdrawer,
@@ -136,6 +140,14 @@ $material-navdrawer: extend(
                 500,
             ),
         ),
+        typography: (
+            item: (
+                value: 'subtitle-2',
+            ),
+            header: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -152,6 +164,10 @@ $material-navdrawer: extend(
 /// @prop {Map} border-color [color: ('gray', 200)] - The navigation drawer right border color.
 /// @prop {Map} item-icon-color [ color: ('primary', 500)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 800)] - The header's idle text color.
+/// @prop {Map} typography [
+///   item: (value: 'body-2'),
+///   header: (value: 'subtitle-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-navdrawer
 $fluent-navdrawer: extend(
     $light-navdrawer,
@@ -217,6 +233,14 @@ $fluent-navdrawer: extend(
                 800,
             ),
         ),
+        typography: (
+            item: (
+                value: 'body-2',
+            ),
+            header: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -233,6 +257,10 @@ $fluent-navdrawer: extend(
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {Map} item-icon-color [ color: ('gray', 900)] - The item's icon color.
 /// @prop {Map} item-header-text-color [color: ('gray', 900)] - The header's idle text color.
+/// @prop {Map} typography [
+///   item: (value: 'body-2'),
+///   header: (value: 'caption')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-navdrawer
 $bootstrap-navdrawer: extend(
     $light-navdrawer,
@@ -305,6 +333,14 @@ $bootstrap-navdrawer: extend(
                 900,
             ),
         ),
+        typography: (
+            item: (
+                value: 'body-2',
+            ),
+            header: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 
@@ -324,6 +360,10 @@ $bootstrap-navdrawer: extend(
 /// @prop {Map} elevation [0] - The elevation level, between 0-24, to be used for the drawer.
 /// @prop {Map} border-color [color: ('gray', 300)] - The navigation drawer right border color.
 /// @prop {List} item-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the navdrawer items.
+/// @prop {Map} typography [
+///   item: (value: 'subtitle-2'),
+///   header: (value: 'overline')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-navdrawer
 $indigo-navdrawer: extend(
     $light-navdrawer,
@@ -422,5 +462,14 @@ $indigo-navdrawer: extend(
                 rem(4px),
             ),
         ),
+
+        typography: (
+            item: (
+                value: 'subtitle-2',
+            ),
+            header: (
+                value: 'overline',
+            ),
+        ),
     )
 );

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

@@ -18,6 +18,7 @@
 /// @prop {Map} stripes-color [color: ('gray', 50, .7)] - The track stripes color.
 /// @prop {Map} text-color [color: ('gray', 700)] - The track value text color.
 /// @prop {List} track-border-radius [(rem(0), rem(0), rem(8px))] - The border radius used for the progress bar track.
+/// @prop {Map} typography [label: (value: 'subtitle-2')] - The typography styles used for the component.
 $light-progress-linear: extend(
     (
         track-color: (
@@ -80,6 +81,12 @@ $light-progress-linear: extend(
                 rem(8px),
             ),
         ),
+
+        typography: (
+            label: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );
 

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

@@ -20,6 +20,7 @@
 /// @prop {Map} error-color [color: ('error', 500)] - The label, border and dot color in invalid state.
 /// @prop {Color} focus-outline-color-filled [transparent] - The focus outline color when radio is filled.
 /// @prop {Color} focus-outline-color-error [transparent] - The focus outline color when radio is filled and invalid.
+/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 $light-radio: (
     empty-fill-color: transparent,
     hover-color: transparent,
@@ -67,6 +68,11 @@ $light-radio: (
     ),
     focus-outline-color-filled: transparent,
     focus-outline-color-error: transparent,
+    typography: (
+        label: (
+            value: 'body-2',
+        ),
+    ),
 );
 
 /// Generates a material radio schema.
@@ -77,6 +83,7 @@ $light-radio: (
 /// @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} error-color-hover [color: ('error', 500)] - The border and dot color in invalid state on hover.
+/// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires {Map} $light-radio
 $material-radio: extend(
     $light-radio,
@@ -117,6 +124,12 @@ $material-radio: extend(
                 500,
             ),
         ),
+
+        typography: (
+            label: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -183,6 +196,7 @@ $fluent-radio: extend(
 /// @prop {Map} focus-outline-color [color: ('primary', 200, 0.5)] - The focus outline color.
 /// @prop {Map} focus-outline-color-error [color: ('error', 200, 0.5)] - The focus outline color when radio is invalid.
 /// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
+/// @prop {Map} typography [label: (value: 'body-1')] - The typography styles used for the component.
 /// @requires {Map} $light-radio
 $bootstrap-radio: extend(
     $light-radio,
@@ -249,6 +263,11 @@ $bootstrap-radio: extend(
                 600,
             ),
         ),
+        typography: (
+            label: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 

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

@@ -19,6 +19,10 @@
 /// @prop {Map} label-text-color [contrast-color: ('gray', 700)] - The text color of the bubble label.
 /// @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.
+/// @prop {Map} typography [
+///   ticks-label: (value: 'caption'),
+///   thumb-label: (value: 'caption')
+/// ] - The typography styles used for the component.
 $light-slider: (
     track-color: (
         color: (
@@ -58,6 +62,14 @@ $light-slider: (
             500,
         ),
     ),
+    typography: (
+        ticks-label: (
+            value: 'caption',
+        ),
+        thumb-label: (
+            value: 'caption',
+        ),
+    ),
 );
 
 /// Generates a material slider schema.
@@ -338,6 +350,10 @@ $bootstrap-slider: extend(
 /// @prop {Map} thumb-disabled-border-color [color: ('primary', 50)] - The thumb border color when it's disabled.
 /// @prop {Map} disabled-base-track-color [color: ('gray', 900, 0.15)] - The base background color of the track when is disabled.
 /// @prop {Map} disabled-fill-track-color [color: ('primary', 50)] - The background color of the fill track when is disabled.
+/// @prop {Map} typography [
+///   ticks-label: (value: 'body-2'),
+///   thumb-label: (value: 'subtitle-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-slider
 $indigo-slider: extend(
     $light-slider,
@@ -454,5 +470,13 @@ $indigo-slider: extend(
                 50,
             ),
         ),
+        typography: (
+            ticks-label: (
+                value: 'body-2',
+            ),
+            thumb-label: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );

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

@@ -15,6 +15,7 @@
 /// @prop {Map} button-color [color: ('secondary', 500)] - The button color used in the snackbar.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used in the snackbar.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for snackbar.
+/// @prop {Map} typography [text: (value: 'body-2')] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-snackbar
 $light-snackbar: extend(
     $default-elevation-snackbar,
@@ -48,6 +49,12 @@ $light-snackbar: extend(
                 rem(24px),
             ),
         ),
+
+        typography: (
+            text: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -59,6 +66,7 @@ $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.
+/// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
 /// @requires $light-snackbar
 $fluent-snackbar: extend(
     $light-snackbar,
@@ -70,6 +78,11 @@ $fluent-snackbar: extend(
                 rem(24px),
             ),
         ),
+        typography: (
+            text: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 

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

@@ -27,6 +27,7 @@
 /// @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-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 {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 $light-switch: extend(
     (
         border-on-color: (
@@ -111,6 +112,11 @@ $light-switch: extend(
                 rem(24px),
             ),
         ),
+        typography: (
+            label: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -138,6 +144,7 @@ $light-switch: extend(
 /// @prop {Number} resting-elevation [1] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [1] - 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 {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires {Map} $light-switch
 /// @requires {Map} $default-elevation-switch
 $material-switch: extend(
@@ -219,6 +226,11 @@ $material-switch: extend(
                 rem(7px),
             ),
         ),
+        typography: (
+            label: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -368,8 +380,10 @@ $fluent-switch: extend(
 /// @prop {Map} thumb-on-disabled-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and 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 {Map} thumb-on-error-color [contrast-color: ('primary', 800)] - The color of the thumb when the switch is on and invalid.
 /// @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.
+/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 /// @requires {Map} $fluent-switch
 $bootstrap-switch: extend(
     $fluent-switch,
@@ -465,6 +479,12 @@ $bootstrap-switch: extend(
                 200,
             ),
         ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'primary',
+                800,
+            ),
+        ),
         border-radius-track: (
             border-radius: (
                 rem(32px),
@@ -479,6 +499,11 @@ $bootstrap-switch: extend(
                 rem(32px),
             ),
         ),
+        typography: (
+            label: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -498,8 +523,9 @@ $bootstrap-switch: extend(
 /// @prop {Map} border-disabled-color [color: ('gray', 900, .15)] - The border color of the disabled switch.
 /// @prop {Map} border-on-hover-color [color: ('primary', 400)] - The hover border color when the switch is on.
 /// @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 {Map} error-color-hover [color: ('gray', 900, .15)] - The border and thumb color in invalid state on hover.
 /// @prop {Color} track-error-color [transparent] - The color of the track in invalid state when the switch is off.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('gray', 900)] - The color of the thumb when the switch is on and invalid.
 /// @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', 900, .15)] - The focus outlined color.
 /// @prop {Map} focus-outline-color-focused [color: ('primary', 400, .5)] - The focus outlined color for focused state.
@@ -618,10 +644,17 @@ $indigo-switch: extend(
         error-color-hover: (
             color: (
                 'gray',
-                300,
+                900,
+                0.15,
             ),
         ),
         track-error-color: transparent,
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                900,
+            ),
+        ),
         thumb-disabled-color: (
             color: (
                 'gray',

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

@@ -33,6 +33,7 @@
 /// @prop {Map} tab-ripple-color [color: ('gray', 100)] - The color used for the button background.
 /// @prop {Map} button-ripple-color [color: ('gray', 100)] - The color used for the button background on hover.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(6px))] - The border radius used for tabs.
+/// @prop {Map} typography [label: (value: 'button')] - The typography styles used for the component.
 $light-tabs: (
     item-text-color: (
         color: (
@@ -155,6 +156,11 @@ $light-tabs: (
             rem(6px),
         ),
     ),
+    typography: (
+        label: (
+            value: 'button',
+        ),
+    ),
 );
 
 /// Generates a material tabs schema.
@@ -183,6 +189,7 @@ $material-tabs: extend(
 /// @prop {Map} item-active-icon-color [color: ('gray', 800)] - The color used for the active tab icon.
 /// @prop {Map} item-hover-icon-color [color: ('gray', 900)] - The color used for the tab icon on hover.
 /// @prop {Map} item-icon-color [color: ('gray', 800)] - The color used for the tab icon.
+/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 /// @requires {Map} $light-tabs
 $fluent-tabs: extend(
     $light-tabs,
@@ -235,6 +242,11 @@ $fluent-tabs: extend(
                 800,
             ),
         ),
+        typography: (
+            label: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -379,6 +391,7 @@ $bootstrap-tabs: extend(
 /// @prop {Map} button-color [color: ('gray', 600)] - The color used for the button icon/text color.
 /// @prop {Map} button-hover-color [color: ('gray', 700)] - The color used for the button icon/text color on hover.
 /// @prop {Map} button-disabled-color [color: ('gray', 900, .2)] - The color used for the disabled button icon/text.
+/// @prop {Map} typography [label: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @requires {Map} $light-tabs
 $indigo-tabs: extend(
     $light-tabs,
@@ -475,5 +488,10 @@ $indigo-tabs: extend(
                 0.2,
             ),
         ),
+        typography: (
+            label: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );

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

@@ -24,6 +24,10 @@
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for the overall shape of the time-picker.
 /// @prop {List} time-item-size [(rem(28px), rem(32px), rem(36px))] - The height of the time item.
 /// @prop {Number} default-size [2] - the default size.
+/// @prop {Map} typography [
+///   header-hour: (value: 'h4'),
+///   selected-time: (value: 'h5')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-time-picker
 $light-time-picker: extend(
     $default-elevation-time-picker,
@@ -102,6 +106,15 @@ $light-time-picker: extend(
         ),
 
         default-size: 2,
+
+        typography: (
+            header-hour: (
+                value: 'h4',
+            ),
+            selected-time: (
+                value: 'h5',
+            ),
+        ),
     )
 );
 
@@ -231,6 +244,10 @@ $fluent-time-picker: extend(
 /// @prop {Map} divider-color [color: ('gray', 300)] - The divider color of the time picker.
 /// @prop {Map} active-item-background [color: ('primary', 600)] - The background color for current item in focused column inside the 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.
+/// @prop {Map} typography [
+///   header-hour: (value: 'h4'),
+///   selected-time: (value: 'h4')
+/// ] - The typography styles used for the component.
 /// @requires $light-time-picker
 $bootstrap-time-picker: extend(
     $light-time-picker,
@@ -291,6 +308,15 @@ $bootstrap-time-picker: extend(
                 rem(20px),
             ),
         ),
+
+        typography: (
+            header-hour: (
+                value: 'h4',
+            ),
+            selected-time: (
+                value: 'h4',
+            ),
+        ),
     )
 );
 
@@ -305,6 +331,10 @@ $bootstrap-time-picker: extend(
 /// @prop {List} active-item-border-radius [(rem(32px), rem(0), rem(32px))] - The border radius used for the highlight of the active item in the time-picker.
 /// @prop {Map} border-color [color: ('gray', 400)] - The border-color of the time picker.
 /// @prop {Map} divider-color [color: ('gray', 400)] - The divider color of the time picker.
+/// @prop {Map} typography [
+///   header-hour: (value: 'h5'),
+///   selected-time: (value: 'h6')
+/// ] - The typography styles used for the component.
 /// @requires $light-time-picker
 $indigo-time-picker: extend(
     $light-time-picker,
@@ -374,5 +404,14 @@ $indigo-time-picker: extend(
                 400,
             ),
         ),
+
+        typography: (
+            header-hour: (
+                value: 'h5',
+            ),
+            selected-time: (
+                value: 'h6',
+            ),
+        ),
     )
 );

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

@@ -15,6 +15,7 @@
 /// @prop {Map} text-color [contrast-color: ('gray', 700)] - The text-color used for the toast.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the toast.
 /// @prop {List} border-radius [(rem(26px), rem(0), rem(26px))] - The border radius used for toast.
+/// @prop {Map} typography [text: (value: 'body-2')] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-toast
 $light-toast: extend(
     $default-elevation-toast,
@@ -48,6 +49,12 @@ $light-toast: extend(
                 rem(26px),
             ),
         ),
+
+        typography: (
+            text: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -59,6 +66,7 @@ $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.
+/// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
 /// @requires $light-toast
 $fluent-toast: extend(
     $light-toast,
@@ -70,6 +78,12 @@ $fluent-toast: extend(
                 rem(26px),
             ),
         ),
+
+        typography: (
+            text: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 

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

@@ -13,6 +13,7 @@
 /// @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.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
+/// @prop {Map} typography [tooltip-text: (value: null)] - The typography styles used for the tooltip.
 /// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the tooltip.
 /// @requires {Map} $default-elevation-tooltip
 $light-tooltip: extend(
@@ -40,6 +41,12 @@ $light-tooltip: extend(
                 rem(16px),
             ),
         ),
+
+        typography: (
+            tooltip-text: (
+                value: null,
+            ),
+        ),
     )
 );
 
@@ -110,6 +117,7 @@ $bootstrap-tooltip: extend(
 /// @type {Map}
 /// @prop {Map} background [color: ('gray', 600, .9)] - The background color of the tooltip.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(16px))] - The border radius used for tooltip.
+/// @prop {Map} typography [tooltip-text: (value: 'subtitle-2')] - The typography styles used for the tooltip.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the tooltip.
 /// @requires {Map} $light-tooltip
 /// @requires {Map} $indigo-elevation-tooltip
@@ -132,5 +140,11 @@ $indigo-tooltip: extend(
                 rem(16px),
             ),
         ),
+
+        typography: (
+            tooltip-text: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );

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

@@ -24,6 +24,7 @@
 /// @prop {Map} hover-selected-color [color: ('gray', 900, .1)] - The background color used for the selected tree node on hover.
 /// @prop {List} size [(rem(32px), rem(40px), rem(50px))] - The size used for the tree node.
 /// @prop {Number} default-size [2] - The default size used for the tree component.
+/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 $light-tree: (
     background: (
         color: (
@@ -95,6 +96,11 @@ $light-tree: (
         ),
     ),
     default-size: 2,
+    typography: (
+        label: (
+            value: 'body-2',
+        ),
+    ),
 );
 
 /// Generates a light material tree schema.