igniteui-theming 14.4.0-beta.2 → 14.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "14.4.0-beta.2",
+  "version": "14.4.1",
   "description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
   "main": "index.js",
   "scripts": {

package/sass/themes/_mixins.scss

@@ -12,7 +12,7 @@
 
 /// A list of ignored keywords to be excluded when generating CSS variables for a theme.
 /// @access private
-$ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
+$ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typography', '_meta');
 
 /// Parses a map of key value pairs from component themes to css variables.
 /// @access private
@@ -28,6 +28,7 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
 @mixin css-vars-from-theme($theme, $name, $ignored: $ignored-keys) {
     $themes: map.get($theme, 'themes');
     $prefix: map.get($theme, 'prefix');
+    $t: map.get($theme, 'theme');
 
     // This is here only because the button theme consists of 4 nested themes.
     @if $themes and meta.type-of($themes) == 'map' {
@@ -43,6 +44,10 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', '_meta');
             --#{$variable}: var(--#{$name}-#{$key}, #{$value});
         }
     }
+
+    @if $t and meta.type-of($t) == 'string' {
+        --ig-theme: #{$t};
+    }
 }
 
 /// Add theme colors as CSS variables to a given scope.

package/sass/themes/schemas/components/dark/_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 @@ $dark-material-schema: (
     stepper: $dark-material-stepper,
     switch: $dark-material-switch,
     tabs: $dark-material-tabs,
-    tile-manager: $dark-material-tile-manager,
     time-picker: $dark-material-time-picker,
     toast: $dark-material-toast,
     tooltip: $dark-material-tooltip,
@@ -179,7 +177,6 @@ $dark-fluent-schema: (
     stepper: $dark-fluent-stepper,
     switch: $dark-fluent-switch,
     tabs: $dark-fluent-tabs,
-    tile-manager: $dark-fluent-tile-manager,
     time-picker: $dark-fluent-time-picker,
     toast: $dark-fluent-toast,
     tooltip: $dark-fluent-tooltip,
@@ -245,7 +242,6 @@ $dark-bootstrap-schema: (
     stepper: $dark-bootstrap-stepper,
     switch: $dark-bootstrap-switch,
     tabs: $dark-bootstrap-tabs,
-    tile-manager: $dark-bootstrap-tile-manager,
     time-picker: $dark-bootstrap-time-picker,
     toast: $dark-bootstrap-toast,
     tooltip: $dark-bootstrap-tooltip,
@@ -311,7 +307,6 @@ $dark-indigo-schema: (
     stepper: $dark-indigo-stepper,
     switch: $dark-indigo-switch,
     tabs: $dark-indigo-tabs,
-    tile-manager: $dark-indigo-tile-manager,
     time-picker: $dark-indigo-time-picker,
     toast: $dark-indigo-toast,
     tooltip: $dark-indigo-tooltip,

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

@@ -148,7 +148,7 @@ $dark-fluent-switch: extend(
 
 /// Generates a dark bootstrap switch schema.
 /// @type {Map}
-/// @prop {Map} thumb-on-color [color: ('gray', 900)] - The color of the thumb when the switch is on.
+/// @prop {Map} focus-outline-color [color: ('primary', 900, 0.5)] - The focus outlined color.
 /// @prop {Map} label-disabled-color [color: ('gray', 300)] - The color of the switch label when the switch is disabled
 /// @prop {Map} border-disabled-color [color: ('gray', 100)] - The border color of the disabled switch.
 /// @prop {Map} track-disabled-color [color: 'surface'] - The color of the track when the switch is on and disabled.
@@ -202,6 +202,8 @@ $dark-bootstrap-switch: extend(
 /// @prop {Map} border-hover-color [contrast-color: ('gray', 50, .8)] - The border color of the switch on hover.
 /// @prop {Map} border-disabled-color [contrast-color: ('gray', 50, .2)] - The border color of the disabled switch.
 /// @prop {Map} error-color [contrast-color: ('gray', 50, .6)] - The border and thumb color in invalid state.
+/// @prop {Map} error-color-hover [contrast-color: ('gray', 50, .2)] - The border and thumb color in invalid state on hover.
+/// @prop {Map} thumb-on-error-color [contrast-color: ('gray', 50)] - The color of the thumb when the switch is on and invalid.
 /// @prop {Map} focus-outline-color [contrast-color: ('gray', 50, .2)] - The focus outlined color.
 /// @requires $indigo-switch
 $dark-indigo-switch: extend(
@@ -289,6 +291,19 @@ $dark-indigo-switch: extend(
                 0.6,
             ),
         ),
+        error-color-hover: (
+            contrast-color: (
+                'gray',
+                50,
+                0.2,
+            ),
+        ),
+        thumb-on-error-color: (
+            contrast-color: (
+                'gray',
+                50,
+            ),
+        ),
         focus-outline-color: (
             contrast-color: (
                 'gray',

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

@@ -16,6 +16,7 @@
 /// @prop {Map} background-color [color: ('primary', 500)] - The background color used.
 /// @prop {Number} elevation [1] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {Number} border-radius [0] - The border radius used for badge.
+/// @prop {Map} typography [text: (value: 'caption')] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-badge
 $light-badge: extend(
     $default-elevation-badge,
@@ -49,6 +50,12 @@ $light-badge: extend(
         ),
 
         border-radius: 0,
+
+        typography: (
+            text: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 
@@ -92,6 +99,7 @@ $bootstrap-badge: extend(
 /// Generates an indigo badge schema.
 /// @type {Map}
 /// @prop {Map} background-color [color: ('primary', 400)] - The background color used.
+/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 /// @requires {Map} $light-badge
 /// @requires {Map} $indigo-elevation-badge
 $indigo-badge: extend(
@@ -104,5 +112,11 @@ $indigo-badge: extend(
                 400,
             ),
         ),
+
+        typography: (
+            text: (
+                value: 'button',
+            ),
+        ),
     )
 );

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

@@ -11,6 +11,7 @@
 /// @type {Map}
 /// @prop {Map} banner-background [color: 'surface'] - The color used for the banner background.
 /// @prop {Map} banner-message-color [contrast-color: 'surface'] - The color used for the banner label.
+/// @prop {Map} typography [message: (value: 'body-2')] - The typography styles used for the component.
 /// @prop {Number} border-radius [0] - The border radius of the banner
 $light-banner: (
     banner-background: (
@@ -18,6 +19,12 @@ $light-banner: (
     ),
 
     border-radius: 0,
+
+    typography: (
+        message: (
+            value: 'body-2',
+        ),
+    ),
 );
 
 /// Generates a material banner schema.
@@ -57,6 +64,7 @@ $material-banner: extend(
 /// @prop {Map} banner-message-color [color: ('gray', 900)] - The color used for the banner label.
 /// @prop {Map} banner-illustration-color [color: ('gray', 900)] - The color used for the banner illustration.
 /// @prop {Map} banner-border-color [color: ('gray', 300)] - The color used for the banner border.
+/// @prop {Map} typography [message: (value: 'caption')] - The typography styles used for the component.
 /// @requires {Map} $light-banner
 $fluent-banner: extend(
     $light-banner,
@@ -81,6 +89,12 @@ $fluent-banner: extend(
                 900,
             ),
         ),
+
+        typography: (
+            message: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 

package/sass/themes/schemas/components/light/_bottom-nav.scss

@@ -18,6 +18,7 @@
 /// @prop {Map} label-disabled-color [color: ('gray', 700)] - The disabled color of the label.
 /// @prop {Map} label-selected-color [color: ('primary', 500)] - The label color used for the selected item.
 /// @prop {Color} border-color [transparent] - The border color of the bottom navigation.
+/// @prop {Map} typography [label: (value: 'caption')] - The typography styles used for the component.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the bottom nav.
 /// @requires {Map} $default-elevation-bottom-nav
 $light-bottom-nav: extend(
@@ -66,6 +67,11 @@ $light-bottom-nav: extend(
             ),
         ),
         border-color: transparent,
+        typography: (
+            label: (
+                value: 'caption',
+            ),
+        ),
     )
 );
 

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

@@ -24,6 +24,7 @@
 /// @prop {Number} elevation [2] - The elevation level, between 0-24, to be used for the button group shadow.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(20px))] - The border radius used for button-group component.
 /// @prop {Number} default-size [2] - The default size used for the button-group component.
+/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 /// @requires {Map} $default-elevation-button-group
 $light-button-group: extend(
     $default-elevation-button-group,
@@ -104,6 +105,12 @@ $light-button-group: extend(
         ),
 
         default-size: 2,
+
+        typography: (
+            text: (
+                value: 'button',
+            ),
+        ),
     )
 );
 

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

@@ -23,6 +23,7 @@
 /// @prop {Map} disabled-icon-color [color: ('gray', 500)] - The disabled icon color of the button.
 /// @prop {List} size [(rem(24px), rem(30px), rem(36px))] - The size used for the button.
 /// @prop {Number} default-size [3] - The default size used for the button component.
+/// @prop {Map} typography [text: (value: 'button')] - The typography styles used for the component.
 $light-base-button: (
     shadow-color: transparent,
     border-color: transparent,
@@ -57,6 +58,11 @@ $light-base-button: (
         ),
     ),
     default-size: 3,
+    typography: (
+        text: (
+            value: 'button',
+        ),
+    ),
 );
 
 /// @type {Map}

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

@@ -364,6 +364,15 @@ $light-calendar: (
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
 /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(8px))] - The border radius used for the week numbers column.
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
+/// @prop {Map} typography [
+///   header: (
+///     year: (value: 'overline'),
+///     date: (value: 'h4')
+///   ),
+///   weekday-label: (value: 'body-1'),
+///   picker-date: (value: 'subtitle-1'),
+///   content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires $light-calendar
 $material-calendar: extend(
     $light-calendar,
@@ -758,6 +767,26 @@ $material-calendar: extend(
                 900,
             ),
         ),
+        typography: (
+            header: (
+                year: (
+                    value: 'overline',
+                ),
+
+                date: (
+                    value: 'h4',
+                ),
+            ),
+            weekday-label: (
+                value: 'body-1',
+            ),
+            picker-date: (
+                value: 'subtitle-1',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 
@@ -856,6 +885,15 @@ $material-calendar: extend(
 /// @prop {List} inner-size [(rem(24px), rem(28px), rem(32px))] - The size of the inner element of a date(often used to outline the special date)
 /// @prop {Map} actions-divider-color [color: ('gray', 200)] - The border color used for the date-picker actions divider.
 /// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
+/// @prop {Map} typography [
+///   header: (
+///     year: (value: 'overline'),
+///     date: (value: 'h4')
+///   ),
+///   weekday-label: (value: 'body-1'),
+///   picker-date: (value: 'subtitle-2'),
+///   content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-calendar
 $fluent-calendar: extend(
     $light-calendar,
@@ -1382,6 +1420,26 @@ $fluent-calendar: extend(
                 900,
             ),
         ),
+        typography: (
+            header: (
+                year: (
+                    value: 'overline',
+                ),
+
+                date: (
+                    value: 'h4',
+                ),
+            ),
+            weekday-label: (
+                value: 'body-1',
+            ),
+            picker-date: (
+                value: 'subtitle-2',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 
@@ -1467,6 +1525,16 @@ $fluent-calendar: extend(
 /// @prop {Map} date-selected-current-focus-border-color [color: ('gray', 900)] - The :focus border color of the selected current date.
 /// @prop {Map} actions-divider-color [color: ('gray', 300)] - The border color used for the date-picker actions divider.
 /// @prop {Map} date-special-range-foreground [color: ('gray', 900)] - The foreground color of a special date in rage selection.
+/// @prop {Map} typography [
+///   header: (
+///     year: (value: 'body-2'),
+///     date: (value: 'h4')
+///   ),
+///   weekday-label: (value: 'body-2'),
+///   picker-date: (value: 'subtitle-1'),
+///   content: (value: 'body-1')
+/// ] - The typography styles used for the component.
+
 /// @requires {Map} $light-calendar
 $bootstrap-calendar: extend(
     $light-calendar,
@@ -1913,6 +1981,26 @@ $bootstrap-calendar: extend(
                 900,
             ),
         ),
+        typography: (
+            header: (
+                year: (
+                    value: 'body-2',
+                ),
+
+                date: (
+                    value: 'h4',
+                ),
+            ),
+            weekday-label: (
+                value: 'body-2',
+            ),
+            picker-date: (
+                value: 'subtitle-1',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 
@@ -2008,6 +2096,15 @@ $bootstrap-calendar: extend(
 /// @prop {List} week-number-border-radius [(rem(4px), rem(0), rem(4px))] - The border radius used for the week numbers column.
 /// @prop {Map} actions-divider-color [color: ('gray', 400)] - The border color used for the date-picker actions divider.
 /// @prop {Map} date-special-range-foreground [color: ('primary', 500)] - The foreground color of a special date in rage selection.
+/// @prop {Map} typography [
+///   header: (
+///     year: (value: 'body-2'),
+///     date: (value: 'h5')
+///   ),
+///   weekday-label: (value: 'body-2'),
+///   picker-date: (value: 'subtitle-2'),
+///   content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-calendar
 $indigo-calendar: extend(
     $light-calendar,
@@ -2557,5 +2654,25 @@ $indigo-calendar: extend(
                 0.38,
             ),
         ),
+        typography: (
+            header: (
+                year: (
+                    value: 'body-2',
+                ),
+
+                date: (
+                    value: 'h5',
+                ),
+            ),
+            weekday-label: (
+                value: 'body-2',
+            ),
+            picker-date: (
+                value: 'subtitle-2',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );

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

@@ -69,6 +69,14 @@ $light-card: extend(
 /// Generates a material card schema.
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 400, .54)] - The outline color of an outlined type card.
+/// @prop {Map} typography [
+///   title: (
+///     value: 'h6',
+///     small: (value: 'subtitle-2')
+///   ),
+///   subtitle: (value: 'subtitle-2'),
+///   content: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-card
 $material-card: extend(
     $light-card,
@@ -80,6 +88,21 @@ $material-card: extend(
                 0.54,
             ),
         ),
+        typography: (
+            title: (
+                value: 'h6',
+
+                small: (
+                    value: 'subtitle-2',
+                ),
+            ),
+            subtitle: (
+                value: 'subtitle-2',
+            ),
+            content: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -87,6 +110,14 @@ $material-card: extend(
 /// @type {Map}
 /// @prop {Map} outline-color [color: ('gray', 200)] - The outline color of an outlined type card.
 /// @prop {List} border-radius [(rem(0px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Map} typography [
+///   title: (
+///     value: 'subtitle-1',
+///     small: (value: 'subtitle-2')
+///   ),
+///   subtitle: (value: 'body-2'),
+///   content: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-card
 $fluent-card: extend(
     $light-card,
@@ -105,6 +136,22 @@ $fluent-card: extend(
                 rem(24px),
             ),
         ),
+
+        typography: (
+            title: (
+                value: 'subtitle-1',
+
+                small: (
+                    value: 'subtitle-2',
+                ),
+            ),
+            subtitle: (
+                value: 'body-2',
+            ),
+            content: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -115,6 +162,14 @@ $fluent-card: extend(
 /// @prop {Map} subtitle-text-color [color: ('gray', 800)] - The text color of the card subtitle.
 /// @prop {Map} content-text-color [color: ('gray', 800)] - The text color of the card content.
 /// @prop {Map} actions-text-color [color: ('gray', 900)] - The text color of the card buttons.
+/// @prop {Map} typography [
+///   title: (
+///     value: 'h5',
+///     small: (value: 'subtitle-2')
+///   ),
+///   subtitle: (value: 'body-1'),
+///   content: (value: 'body-1')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-card
 $bootstrap-card: extend(
     $light-card,
@@ -153,6 +208,22 @@ $bootstrap-card: extend(
                 900,
             ),
         ),
+
+        typography: (
+            title: (
+                value: 'h5',
+
+                small: (
+                    value: 'subtitle-2',
+                ),
+            ),
+            subtitle: (
+                value: 'body-1',
+            ),
+            content: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 
@@ -164,6 +235,14 @@ $bootstrap-card: extend(
 /// @prop {Map} subtitle-text-color [color: ('gray', 700)] - The text color of the card subtitle.
 /// @prop {Map} actions-text-color [color: ('gray', 600)] - The text color of the card buttons.
 /// @prop {List} border-radius [(rem(6px), rem(0), rem(24px))] - The border radius used for card.
+/// @prop {Map} typography [
+///   title: (
+///     value: 'h6',
+///     small: (value: 'body-2')
+///   ),
+///   subtitle: (value: 'body-2'),
+///   content: (value: 'body-2')
+/// ] - The typography styles used for the component.
 /// @requires {Map} $light-card
 $indigo-card: extend(
     $light-card,
@@ -210,5 +289,21 @@ $indigo-card: extend(
                 rem(24px),
             ),
         ),
+
+        typography: (
+            title: (
+                value: 'h6',
+
+                small: (
+                    value: 'body-2',
+                ),
+            ),
+            subtitle: (
+                value: 'body-2',
+            ),
+            content: (
+                value: 'body-2',
+            ),
+        ),
     )
 );

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

@@ -25,6 +25,7 @@
 /// @prop {Map} error-color [color: ('error', 500)] - The border and fill colors in invalid state.
 /// @prop {List} border-radius [(rem(2px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(24px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Map} typography [label: (value: 'body-2')] - The typography styles used for the component.
 $light-checkbox: (
     tick-color: (
         color: (
@@ -97,6 +98,12 @@ $light-checkbox: (
             rem(24px),
         ),
     ),
+
+    typography: (
+        label: (
+            value: 'body-2',
+        ),
+    ),
 );
 
 /// Generates a material checkbox schema.
@@ -108,6 +115,7 @@ $light-checkbox: (
 /// @prop {Map} fill-color-hover [color: ('secondary', 500)] - The checked border and fill colors on hover.
 /// @prop {Color} focus-outline-color [transparent] - The focus outlined color.
 /// @prop {Map} error-color-hover [color: ('error', 500)] - The border and fill colors in invalid state on hover.
+/// @prop {Map} typography [label: (value: 'subtitle-1')] - The typography styles used for the component.
 /// @requires {Map} $light-checkbox
 $material-checkbox: extend(
     $light-checkbox,
@@ -155,6 +163,12 @@ $material-checkbox: extend(
                 500,
             ),
         ),
+
+        typography: (
+            label: (
+                value: 'subtitle-1',
+            ),
+        ),
     )
 );
 
@@ -233,6 +247,7 @@ $fluent-checkbox: extend(
 /// @prop {Map} error-color-hover [color: ('error', 600)] - The focus outlined color in invalid state.
 /// @prop {List} border-radius [(rem(4px), rem(0), rem(10px))] - The border radius used for checkbox.
 /// @prop {List} border-radius-ripple [(rem(4px), rem(0), rem(24px))] - The border radius used for checkbox ripple.
+/// @prop {Map} typography [label: (value: 'body-1')] - The typography styles used for the component.
 /// @requires {Map} $light-checkbox
 $bootstrap-checkbox: extend(
     $light-checkbox,
@@ -325,6 +340,12 @@ $bootstrap-checkbox: extend(
                 rem(24px),
             ),
         ),
+
+        typography: (
+            label: (
+                value: 'body-1',
+            ),
+        ),
     )
 );
 

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

@@ -34,6 +34,7 @@
 /// @prop {Map} $disabled-border-color [color: ('gray', 200)] - The disabled chip border color.
 /// @prop {List} size [(rem(20px), rem(24px), rem(32px))] - The size used for the chip height.
 /// @prop {Number} default-size [2] - The default size used for the chip component.
+/// @prop {Map} typography [text: (value: 'body-2')] - The typography styles used for the component.
 /// @prop {Map} $default-elevation-chip
 $light-chip: extend(
     $default-elevation-chip,
@@ -157,7 +158,14 @@ $light-chip: extend(
                 rem(32px),
             ),
         ),
+
         default-size: 2,
+
+        typography: (
+            text: (
+                value: 'body-2',
+            ),
+        ),
     )
 );
 
@@ -232,6 +240,7 @@ $material-chip: extend(
 /// @prop {Map} hover-selected-background [color: ('primary', 600)] - The selected chip hover background color.
 /// @prop {Map} focus-selected-text-color [contrast-color: ('primary', 700)] - The selected chip text focus color.
 /// @prop {Map} focus-selected-background [color: ('primary', 500)] - The selected chip focus background color.
+/// @prop {Map} typography [text: (value: 'subtitle-2')] - The typography styles used for the component.
 /// @prop {Number} ghost-elevation [2] - The elevation level, between 0-24, to be used for the chip's ghost (dragging mode).
 /// @requires {Map} $light-chip
 /// @requires {Map} $fluent-elevation-chip
@@ -315,6 +324,12 @@ $fluent-chip: extend(
                 800,
             ),
         ),
+
+        typography: (
+            text: (
+                value: 'subtitle-2',
+            ),
+        ),
     )
 );