igniteui-theming 14.4.0-beta.2 → 14.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-theming",
-  "version": "14.4.0-beta.2",
+  "version": "14.4.0",
   "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/_query-builder.scss

@@ -7,27 +7,83 @@
 /// @access public
 ////
 
+/// Generates a base dark query builder schema.
+/// @type {Map}
+/// @prop {Map} subquery-header-background [color: ('gray', 50)] - The background color of the subquery header.
+/// @prop {Map} subquery-border-color [color: ('gray', 200)] - The border color of the query block.
+/// @prop {Map} separator-color [color: ('gray', 300)] - The separator color of the query block.
+/// @prop {Color} color-expression-group-and [#da64ff] - The color of advanced filtering "AND" condition group.
+/// @prop {Color} color-expression-group-or [#19ad87] - The color of advanced filtering "OR" condition group.
+$dark-query-builder: (
+    subquery-header-background: (
+        color: (
+            'gray',
+            50,
+        ),
+    ),
+
+    subquery-border-color: (
+        color: (
+            'gray',
+            200,
+        ),
+    ),
+
+    separator-color: (
+        color: (
+            'gray',
+            300,
+        ),
+    ),
+
+    color-expression-group-and: #da64ff,
+
+    color-expression-group-or: #19ad87,
+);
+
 /// Generates a dark material query builder schema.
 /// @type {Map}
 /// @see $material-query-builder
 /// @requires $material-query-builder
-$dark-material-query-builder: $material-query-builder;
+/// @requires $dark-query-builder
+$dark-material-query-builder: extend($material-query-builder, $dark-query-builder);
 
 /// Generates a dark fluent query builder schema.
 /// @see $fluent-query-builder
 /// @requires $fluent-query-builder
-$dark-fluent-query-builder: $fluent-query-builder;
+/// @requires $dark-query-builder
+$dark-fluent-query-builder: extend($fluent-query-builder, $dark-query-builder);
 
 /// Generates a dark bootstrap query builder schema.
-$dark-bootstrap-query-builder: $bootstrap-query-builder;
+/// @prop {Map} header-border [color: ('gray', 300)] - The border color of the query builder header.
+/// @see $bootstrap-query-builder
+/// @requires $bootstrap-query-builder
+/// @requires $dark-query-builder
+$dark-bootstrap-query-builder: extend(
+    $bootstrap-query-builder,
+    $dark-query-builder,
+    (
+        header-border: (
+            color: (
+                'gray',
+                300,
+            ),
+        ),
+    )
+);
 
 /// Generates a dark indigo query builder schema.
 /// @type {Map}
-/// @prop {Map} background [color: ('gray', 50)] - The background color of the filtering row.
-/// @prop {Map} header-border [color: ('gray', 100)] - The border color of the query builder header.
+/// @prop {Map} background [color: ('gray', 50)] - The background color of the query builder.
+/// @prop {Map} header-background [color: ('gray', 50)] - The background color of the query builder header.
+/// @prop {Map} subquery-header-background [contrast-color: ('gray', 50, .05)] - The background color of the subquery header.
+/// @prop {Map} subquery-border-color [color: ('gray', 100)] - The border color of the query block.
+/// @see $indigo-query-builder
 /// @requires $indigo-query-builder
+/// @requires $dark-query-builder
 $dark-indigo-query-builder: extend(
     $indigo-query-builder,
+    $dark-query-builder,
     (
         background: (
             color: (
@@ -36,7 +92,22 @@ $dark-indigo-query-builder: extend(
             ),
         ),
 
-        header-border: (
+        header-background: (
+            color: (
+                'gray',
+                50,
+            ),
+        ),
+
+        subquery-header-background: (
+            contrast-color: (
+                'gray',
+                50,
+                0.05,
+            ),
+        ),
+
+        subquery-border-color: (
             color: (
                 'gray',
                 100,

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/elevation/_query-builder.scss

@@ -0,0 +1,11 @@
+////
+/// @package theming
+/// @group schemas
+/// @access public
+////
+
+/// @type Map
+/// @prop {Number} elevation [0] - The elevation level, between 0-24, to be used for the default query-builder.
+$default-elevation-query-builder: (
+    elevation: 0,
+);

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',
+            ),
+        ),
     )
 );