igniteui-theming 14.4.0-beta.2 → 14.4.1

package/sass/themes/schemas/components/light/_column-actions.scss

@@ -11,6 +11,7 @@
 /// @type {Map}
 /// @prop {Map} title-color [color: ('primary', 500)]- The text color used for the title of the list.
 /// @prop {Map} background-color [color: ('surface')] - The background color of the panel.
+/// @prop {Map} typography [title: (value: 'subtitle-1')] - The typography styles used for the component.
 $light-column-actions: (
     background-color: (
         color: (
@@ -24,6 +25,12 @@ $light-column-actions: (
             500,
         ),
     ),
+
+    typography: (
+        title: (
+            value: 'subtitle-1',
+        ),
+    ),
 );
 
 /// Generates a material column actions schema.

package/sass/themes/schemas/components/light/_date-range-picker.scss

@@ -10,6 +10,7 @@
 /// Generates a light date-range-picker schema.
 /// @type {Map}
 /// @prop {Map} label-color [color: ('gray', 500)] - The Color for date range separator label.
+/// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 $light-date-range-picker: (
     label-color: (
         color: (
@@ -17,6 +18,12 @@ $light-date-range-picker: (
             500,
         ),
     ),
+
+    typography: (
+        label: (
+            value: 'subtitle-1',
+        ),
+    ),
 );
 
 /// Generates a material date-range-picker schema.

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

@@ -18,6 +18,10 @@
 /// @prop {Number} elevation [24] - The elevation level, between 0-24, to be used for the dialog.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Number} default-size [2] - The default size used for the dialog component.
+/// @prop {Map} typography [
+///  title: (value: 'h5'),
+///  content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-dialog
 $light-dialog: extend(
     $default-elevation-dialog,
@@ -57,20 +61,50 @@ $light-dialog: extend(
                 rem(36px),
             ),
         ),
+
         default-size: 2,
+
+        typography: (
+            title: (
+                value: 'h5',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 
 /// Generates a material dialog schema.
 /// @type {Map}
+/// @prop {Map} typography [
+///  title: (value: 'h6'),
+///  content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-dialog
-$material-dialog: $light-dialog;
+$material-dialog: extend(
+    $light-dialog,
+    (
+        typography: (
+            title: (
+                value: 'h6',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
+    )
+);
 
 /// Generates a fluent dialog schema.
 /// @type {Map}
 /// @prop {Map} backdrop [color: ('gray', 900, .4)] - The dialog backdrop color.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(36px))] - The border radius used for dialog.
 /// @prop {Map} message-color [color: ('gray', 700)] - The dialog message text color.
+/// @prop {Map} typography [
+///  title: (value: 'h6'),
+///  content: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-dialog
 $fluent-dialog: extend(
     $light-dialog,
@@ -96,6 +130,14 @@ $fluent-dialog: extend(
                 700,
             ),
         ),
+        typography: (
+            title: (
+                value: 'h6',
+            ),
+            content: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_drop-down.scss

@@ -30,6 +30,11 @@
 /// @prop {List} item-border-radius [(rem(0), rem(0), rem(20px))] - The border radius used for the drop-down items.
 /// @prop {List} size [(rem(28px), rem(32px), rem(40px))] - The size used for the dropdown item height.
 /// @prop {Number} default-size [2] - The default size used for the drop down component.
+/// @prop {Map} typography [
+///   header: (value: 'overline'),
+///   item: (value: 'body-2'),
+///   select-item: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-drop-down
 $light-drop-down: extend(
     $default-elevation-drop-down,
@@ -116,6 +121,17 @@ $light-drop-down: extend(
             ),
         ),
         default-size: 2,
+        typography: (
+            header: (
+                value: 'overline',
+            ),
+            item: (
+                value: 'body-2',
+            ),
+            select-item: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -218,6 +234,11 @@ $material-drop-down: extend(
 /// @prop {Map} disabled-item-text-color [color: ('gray', 500)] - The drop-down disabled item text color.
 /// @prop {Number} elevation [4] - The elevation level, between 0-24, to be used for the drop-down shadow.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(20px))] - The border radius used for drop-down component.
+/// @prop {Map} typography [
+///   header: (value: 'subtitle-2'),
+///   item: (value: 'body-2'),
+///   select-item: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-drop-down
 /// @requires {Map} $fluent-elevation-drop-down
 $fluent-drop-down: extend(
@@ -302,6 +323,17 @@ $fluent-drop-down: extend(
                 rem(20px),
             ),
         ),
+        typography: (
+            header: (
+                value: 'subtitle-2',
+            ),
+            item: (
+                value: 'body-2',
+            ),
+            select-item: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_expansion-panel.scss

@@ -20,6 +20,11 @@
 /// @prop {Map} disabled-description-color [color: ('gray', 500)] - The panel disabled header description text color.
 /// @prop {List} border-radius [(rem(0), rem(0), rem(16px))] - The border radius used for expansion-panel.
 /// @prop {Number} expanded-margin [8px] - The expansion panel margin in expanded state when positioned inside accordion.
+/// @prop {Map} typography [
+///   title: (value: 'h5'),
+///   description: (value: 'subtitle-2'),
+///   body: (value: 'body-2')
+/// ] - The typography styles used for the component.
 $light-expansion-panel: (
     header-background: (
         color: (
@@ -88,6 +93,18 @@ $light-expansion-panel: (
         rem(0),
         rem(16px),
     ),
+
+    typography: (
+        title: (
+            value: 'h5',
+        ),
+        description: (
+            value: 'subtitle-2',
+        ),
+        body: (
+            value: 'body-2',
+        ),
+    ),
 );
 
 /// Generates a material expansion panel schema.
@@ -100,6 +117,11 @@ $material-expansion-panel: $light-expansion-panel;
 /// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
 /// @prop {Map} disabled-text-color [color: ('gray', 400)] - The panel disabled text color.
 /// @prop {Map} disabled-description-color [color: ('gray', 400)] - The panel disabled header description text color.
+/// @prop {Map} typography [
+///   title: (value: 'subtitle-1'),
+///   description: (value: 'body-2'),
+///   body: (value: 'caption')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-expansion-panel
 $fluent-expansion-panel: extend(
     $light-expansion-panel,
@@ -124,6 +146,18 @@ $fluent-expansion-panel: extend(
                 400,
             ),
         ),
+
+        typography: (
+            title: (
+                value: 'subtitle-1',
+            ),
+            description: (
+                value: 'body-2',
+            ),
+            body: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 
@@ -162,6 +196,11 @@ $bootstrap-expansion-panel: extend(
 /// @prop {Map} body-color [color: ('gray', 700)] - The panel body text color.
 /// @prop {Map} disabled-text-color [color: ('gray', 900, 0.2)] - The panel disabled text color.
 /// @prop {Map} disabled-description-color [color: ('gray', 900, 0.15)] - The panel disabled header description text color.
+/// @prop {Map} typography [
+///   title: (value: 'body-2'),
+///   description: (value: 'body-2'),
+///   body: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-expansion-panel
 $indigo-expansion-panel: extend(
     $light-expansion-panel,
@@ -211,5 +250,17 @@ $indigo-expansion-panel: extend(
                 0.15,
             ),
         ),
+
+        typography: (
+            title: (
+                value: 'body-2',
+            ),
+            description: (
+                value: 'body-2',
+            ),
+            body: (
+                value: 'body-2',
+            ),
+        ),
     )
 );

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

@@ -93,6 +93,10 @@
 /// @prop {List} drop-area-size [(rem(24px), rem(24px), rem(32px))] - The size used for the grid drop area.
 /// @prop {List} group-area-size [(rem(41), rem(49px), rem(57px))] - The size used for the grid group area.
 /// @prop {Map} row-ghost-background [color: 'primary', 50] - The background color of the dragged row.
+/// @prop {Map} typography [
+///  header: (comfortable: (value: 'overline'),
+///  compact: (value: 'subtitle-1'))
+/// ] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-grid
 $light-grid: extend(
     $default-elevation-grid,
@@ -636,6 +640,18 @@ $light-grid: extend(
                 rem(57px),
             ),
         ),
+
+        typography: (
+            header: (
+                comfortable: (
+                    value: 'overline',
+                ),
+
+                compact: (
+                    value: 'subtitle-1',
+                ),
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_icon-button.scss

@@ -30,6 +30,7 @@
 /// @prop {List} border-radius [(rem(20px), rem(0), rem(20px))] - The border radius used for the material icon button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the material icon button.
 /// @prop {Number} default-size [3] - The default size used for the icon button.
+/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 $material-base-icon-button: (
     shadow-color: transparent,
     background: transparent,
@@ -116,6 +117,11 @@ $material-base-icon-button: (
         ),
     ),
     default-size: 3,
+    typography: (
+        text: (
+            value: 'button',
+        ),
+    ),
 );
 
 /// Generates a material flat icon button schema.
@@ -785,6 +791,7 @@ $bootstrap-icon-button: (
 /// @prop {List} border-radius [(rem(40px), rem(0), rem(40px))] - The border radius used for the indigo icon button.
 /// @prop {List} size [(rem(24px), rem(28px), rem(32px))] - The size used for the indigo icon button.
 /// @prop {Number} default-size [2] - The default size used for the icon button.
+/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 $indigo-base-icon-button: (
     shadow-color: (
         color: (
@@ -878,6 +885,11 @@ $indigo-base-icon-button: (
         ),
     ),
     default-size: 2,
+    typography: (
+        text: (
+            value: 'button',
+        ),
+    ),
 );
 
 /// Generates an indigo flat icon button schema.

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

@@ -52,7 +52,6 @@
 @use './stepper' as *;
 @use './switch' as *;
 @use './tabs' as *;
-@use './tile-manager' as *;
 @use './time-picker' as *;
 @use './toast' as *;
 @use './tooltip' as *;
@@ -113,7 +112,6 @@ $light-material-schema: (
     stepper: $material-stepper,
     switch: $material-switch,
     tabs: $material-tabs,
-    tile-manager: $material-tile-manager,
     time-picker: $material-time-picker,
     toast: $material-toast,
     tooltip: $material-tooltip,
@@ -179,7 +177,6 @@ $light-fluent-schema: (
     stepper: $fluent-stepper,
     switch: $fluent-switch,
     tabs: $fluent-tabs,
-    tile-manager: $fluent-tile-manager,
     time-picker: $fluent-time-picker,
     toast: $fluent-toast,
     tooltip: $fluent-tooltip,
@@ -245,7 +242,6 @@ $light-bootstrap-schema: (
     stepper: $bootstrap-stepper,
     switch: $bootstrap-switch,
     tabs: $bootstrap-tabs,
-    tile-manager: $bootstrap-tile-manager,
     time-picker: $bootstrap-time-picker,
     toast: $bootstrap-toast,
     tooltip: $bootstrap-tooltip,
@@ -311,7 +307,6 @@ $light-indigo-schema: (
     stepper: $indigo-stepper,
     switch: $indigo-switch,
     tabs: $indigo-tabs,
-    tile-manager: $indigo-tile-manager,
     time-picker: $indigo-time-picker,
     toast: $indigo-toast,
     tooltip: $indigo-tooltip,

package/sass/themes/schemas/components/light/_input-group.scss

@@ -66,6 +66,10 @@
 /// @prop {Color} input-suffix-background--focused [inherit] - The background color of an input suffix in the focused state.
 /// @prop {List} size [(rem(40px), rem(48px), rem(56px))] - The size used for the input group.
 /// @prop {Number} default-size [2] - The default size used for the input group component.
+/// @prop {Map} typography [
+///   helper-text: (value: 'caption'),
+///   input-text: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-input-group
 $light-input-group: extend(
     $default-elevation-input-group,
@@ -339,6 +343,14 @@ $light-input-group: extend(
             ),
         ),
         default-size: 2,
+        typography: (
+            helper-text: (
+                value: 'caption',
+            ),
+            input-text: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -346,6 +358,10 @@ $light-input-group: extend(
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 600)] - The border color for input groups of type border and fluent.
 /// @prop {Map} disabled-border-color [color: ('gray', 500)] - The disabled border color for input groups of type border and fluent.
+/// @prop {Map} typography [
+///   helper-text: (value: 'caption'),
+///   input-text: (value: 'subtitle-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-input-group
 $material-input-group: extend(
     $light-input-group,
@@ -362,6 +378,14 @@ $material-input-group: extend(
                 500,
             ),
         ),
+        typography: (
+            helper-text: (
+                value: 'caption',
+            ),
+            input-text: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -543,6 +567,10 @@ $fluent-input-group: extend(
 /// @prop {Map} input-suffix-background-filled [color: ('gray', 300)] - The background color of an input suffix in the filled state.
 /// @prop {Map} input-suffix-background--focused [color: ('gray', 300)] - The background color of an input suffix in the focused state.
 /// @prop {List} size [(rem(31px), rem(38px), rem(48px))] - The size used for the input group.
+/// @prop {Map} typography [
+///   helper-text: (value: 'body-2'),
+///   input-text: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-input-group
 $bootstrap-input-group: extend(
     $light-input-group,
@@ -633,6 +661,14 @@ $bootstrap-input-group: extend(
                 rem(48px),
             ),
         ),
+        typography: (
+            helper-text: (
+                value: 'body-2',
+            ),
+            input-text: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 

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

@@ -1,3 +1,5 @@
+@use '../../../../utils/map' as *;
+
 ////
 /// @package theming
 /// @group schemas
@@ -18,12 +20,23 @@ $light-label: (
 
 /// Generates a light material label schema.
 /// @type {Map}
+/// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires {Map} $light-label
-$material-label: $light-label;
+$material-label: extend(
+    $light-label,
+    (
+        typography: (
+            label: (
+                value: 'subtitle-1',
+            ),
+        ),
+    )
+);
 
 /// Generates a light fluent label schema.
 /// @type {Map}
 /// @prop {Color} color [color: ('gray', 900)] - The label color.
+/// @prop {Map} typography [label: (value: 'subtitle-2')] - The typography styles used for the component.
 $fluent-label: (
     color: (
         color: (
@@ -31,16 +44,32 @@ $fluent-label: (
             900,
         ),
     ),
+    typography: (
+        label: (
+            value: 'subtitle-2',
+        ),
+    ),
 );
 
 /// Generates a light bootstrap label schema.
 /// @type {Map}
+/// @prop {Map} typography [label: (value: 'body-1')] - The typography styles used for the component.
 /// @requires {Map} $light-label
-$bootstrap-label: $light-label;
+$bootstrap-label: extend(
+    $light-label,
+    (
+        typography: (
+            label: (
+                value: 'body-1',
+            ),
+        ),
+    )
+);
 
 /// Generates a light indigo label schema.
 /// @type {Map}
 /// @prop {Color} color [color: ('gray', 900)] - The label color.
+/// @prop {Map} typography [label: (value: 'caption')] - The typography styles used for the component.
 $indigo-label: (
     color: (
         color: (
@@ -48,4 +77,9 @@ $indigo-label: (
             900,
         ),
     ),
+    typography: (
+        label: (
+            value: 'caption',
+        ),
+    ),
 );

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

@@ -167,13 +167,43 @@ $light-list: (
 
 /// Generates a material list schema.
 /// @type {Map}
+/// @prop {Map} typography [
+///   header: (value: 'overline'),
+///   item: (value: 'subtitle-1'),
+///   title: (value: 'subtitle-1'),
+///   subtitle: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-list
-$material-list: $light-list;
+$material-list: extend(
+    $light-list,
+    (
+        typography: (
+            header: (
+                value: 'overline',
+            ),
+            item: (
+                value: 'subtitle-1',
+            ),
+            title: (
+                value: 'subtitle-1',
+            ),
+            subtitle: (
+                value: 'body-2',
+            ),
+        ),
+    )
+);
 
 /// Generates a fluent list schema.
 /// @type {Map}
 /// @prop {Map} border-color [color: ('gray', 200)] - The list border color.
 /// @prop {Number} border-width [rem(1px)] - The list border width.
+/// @prop {Map} typography [
+///   header: (value: 'overline'),
+///   item: (value: 'caption'),
+///   title: (value: 'caption'),
+///   subtitle: (value: 'caption')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-list
 $fluent-list: extend(
     $light-list,
@@ -185,6 +215,20 @@ $fluent-list: extend(
             ),
         ),
         border-width: rem(1px),
+        typography: (
+            header: (
+                value: 'overline',
+            ),
+            item: (
+                value: 'caption',
+            ),
+            title: (
+                value: 'caption',
+            ),
+            subtitle: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 
@@ -198,6 +242,12 @@ $fluent-list: extend(
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(24px))] - The border radius used for list component.
 /// @prop {Map} border-color [color: ('gray', 300)] - The list border color.
 /// @prop {Number} border-width [rem(1px)] - The list border width.
+/// @prop {Map} typography [
+///   header: (value: 'overline'),
+///   item: (value: 'body-2'),
+///   title: (value: 'body-1'),
+///   subtitle: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-list
 $bootstrap-list: extend(
     $light-list,
@@ -252,6 +302,21 @@ $bootstrap-list: extend(
                 rem(24px),
             ),
         ),
+
+        typography: (
+            header: (
+                value: 'overline',
+            ),
+            item: (
+                value: 'body-2',
+            ),
+            title: (
+                value: 'body-1',
+            ),
+            subtitle: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -276,6 +341,12 @@ $bootstrap-list: extend(
 /// @prop {Map} item-thumbnail-color-hover [color: ('gray', 700)] - The list item thumbnail hover color.
 /// @prop {Map} item-thumbnail-color-active [color: ('gray', 700)] - The list item thumbnail active color.
 /// @prop {Number} item-border-radius [rem(4px)] - The border radius used for list item.
+/// @prop {Map} typography [
+///   header: (value: 'overline'),
+///   item: (value: 'body-2'),
+///   title: (value: 'body-2'),
+///   subtitle: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-list
 $indigo-list: extend(
     $light-list,
@@ -394,5 +465,19 @@ $indigo-list: extend(
         ),
 
         item-border-radius: rem(4px),
+        typography: (
+            header: (
+                value: 'overline',
+            ),
+            item: (
+                value: 'body-2',
+            ),
+            title: (
+                value: 'body-2',
+            ),
+            subtitle: (
+                value: 'body-2',
+            ),
+        ),
     )
 );