igniteui-theming 21.0.0-beta.2 → 21.0.0

package/package.json

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

@@ -1,11 +1,22 @@
-$_prefix: null !default;
+$_variable-prefix: null !default;
+$_element-prefix: null !default;
 
-@mixin configure-prefix($value) {
+@mixin configure-variable-prefix($value) {
     @if $value {
         $_prefix: $value !global;
     }
 }
 
-@function prefix() {
-    @return $_prefix or 'igx';
+@mixin configure-element-prefix($value) {
+    @if $value {
+        $_prefix: $value !global;
+    }
+}
+
+@function variable-prefix() {
+    @return $_variable-prefix or 'igx';
+}
+
+@function element-prefix() {
+    @return $_element-prefix or 'igx';
 }

package/sass/themes/_functions.scss

@@ -3,7 +3,6 @@
 @use 'sass:meta';
 @use 'sass:string';
 @use 'sass:math';
-@use 'config';
 @use '../typography/functions' as *;
 @use '../elevations/functions' as *;
 @use '../color/functions' as color;
@@ -38,16 +37,6 @@
             $result: map.merge($result, (#{$key}: $value));
         }
 
-        // Enrich _meta key if present with additional information
-        @if meta.type-of($value) == 'map' and $key == '_meta' {
-            $result: map.merge(
-                $result,
-                (
-                    _meta: enrich-meta($value),
-                )
-            );
-        }
-
         // Special case for chart elevation literals
         @if string.index($key, 'elevation') {
             $result: map.merge($result, (#{$key}: #{elevation($value)}));
@@ -62,15 +51,6 @@
     @return $result;
 }
 
-@function enrich-meta($meta) {
-    @return map.merge(
-        $meta,
-        (
-            'element-prefix': config.prefix(),
-        )
-    );
-}
-
 /// Resolves schema values, where the keys of the passed value map are the names
 /// of the functions to be called and the value for a given key is the argument
 /// the function should be called with.

package/sass/themes/_mixins.scss

@@ -31,11 +31,11 @@ $ignored-keys: ('name', 'palette', 'variant', 'selector', 'type', 'theme', 'typo
     $t: map.get($theme, '_meta', 'theme');
 
     // This is here only because the button theme consists of 4 nested themes.
-    @if $themes and meta.type-of($themes) == 'map' {
-        @each $theme in $themes {
-            @include css-vars(list.nth($theme, 2));
-        }
-    }
+    // @if $themes and meta.type-of($themes) == 'map' {
+    //     @each $theme in $themes {
+    //         @include css-vars(list.nth($theme, 2));
+    //     }
+    // }
 
     @each $key, $value in map.remove($theme, $ignored...) {
         $variable: if($prefix, #{$prefix}-#{$key}, #{$key});

package/sass/themes/components/avatar/_avatar-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -34,7 +35,8 @@
     $border-radius: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'avatar'};
+    $name: #{config.variable-prefix() + '-' + 'avatar'};
+    $selector: #{config.element-prefix() + '-' + 'avatar'};
     $avatar-schema: ();
 
     @if map.has-key($schema, 'avatar') {
@@ -57,6 +59,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             color: $color,
             icon-color: $icon-color,

package/sass/themes/components/badge/_badge-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -42,7 +43,8 @@
     $background-color: null,
     $shadow: null
 ) {
-    $name: #{config.prefix() + '-' + 'badge'};
+    $name: #{config.variable-prefix() + '-' + 'badge'};
+    $selector: #{config.element-prefix() + '-' + 'badge'};
     $badge-schema: ();
 
     @if map.has-key($schema, 'badge') {
@@ -70,6 +72,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             icon-color: $icon-color,
             text-color: $text-color,
             border-color: $border-color,

package/sass/themes/components/banner/_banner-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -36,7 +37,8 @@
     $banner-illustration-color: null,
     $border-radius: null
 ) {
-    $name: #{config.prefix() + '-' + 'banner'};
+    $name: #{config.variable-prefix() + '-' + 'banner'};
+    $selector: (#{config.element-prefix() + '-' + 'banner'}, #{'.' + config.element-prefix() + '-' + 'banner'});
     $banner-schema: ();
 
     @if map.has-key($schema, 'banner') {
@@ -59,6 +61,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             banner-background: $banner-background,
             banner-message-color: $banner-message-color,
             banner-border-color: $banner-border-color,

package/sass/themes/components/bottom-nav/_bottom-nav-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -42,7 +43,8 @@
     $border-color: null,
     $shadow: null
 ) {
-    $name: #{config.prefix() + '-' + 'bottom-nav'};
+    $name: #{config.variable-prefix() + '-' + 'bottom-nav'};
+    $selector: #{config.element-prefix() + '-' + 'bottom-nav'};
     $bottom-nav-schema: ();
 
     @if map.has-key($schema, 'bottom-nav') {
@@ -94,6 +96,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             icon-color: $icon-color,
             icon-selected-color: $icon-selected-color,

package/sass/themes/components/button/_button-theme.scss

@@ -11,6 +11,7 @@
 @forward './fab-button-theme';
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -104,7 +105,7 @@
     $disabled-border-color: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'button'};
+    $name: #{config.variable-prefix() + '-' + 'button'};
     $button-schema: ();
 
     @if map.has-key($schema, 'button') {

package/sass/themes/components/button/_contained-button-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -100,7 +101,12 @@
     $disabled-border-color: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'contained-button'};
+    $name: #{config.variable-prefix() + '-' + 'contained-button'};
+    $selector: (
+        #{'[' + config.element-prefix() + 'Button="contained"]'},
+        #{config.element-prefix() + '-' + 'button[variant="contained"]'},
+        #{'.' + config.element-prefix() + '-' + 'button--contained'}
+    );
     $button-schema: ();
 
     @if map.has-key($schema, 'button') {
@@ -266,6 +272,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             foreground: $foreground,
             icon-color: $icon-color,

package/sass/themes/components/button/_fab-button-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -100,7 +101,12 @@
     $disabled-border-color: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'fab-button'};
+    $name: #{config.variable-prefix() + '-' + 'fab-button'};
+    $selector: (
+        #{'[' + config.element-prefix() + 'Button="fab"]'},
+        #{config.element-prefix() + '-' + 'button[variant="fab"]'},
+        #{'.' + config.element-prefix() + '-' + 'button--fab'}
+    );
     $button-schema: ();
 
     @if map.has-key($schema, 'button') {
@@ -242,6 +248,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             foreground: $foreground,
             icon-color: $icon-color,

package/sass/themes/components/button/_flat-button-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -99,7 +100,12 @@
     $disabled-border-color: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'flat-button'};
+    $name: #{config.variable-prefix() + '-' + 'flat-button'};
+    $selector: (
+        #{'[' + config.element-prefix() + 'Button="flat"]'},
+        #{config.element-prefix() + '-' + 'button[variant="flat"]'},
+        #{'.' + config.element-prefix() + '-' + 'button--flat'}
+    );
     $button-schema: ();
 
     @if map.has-key($schema, 'button') {
@@ -301,6 +307,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             foreground: $foreground,
             icon-color: $icon-color,

package/sass/themes/components/button/_outlined-button-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -99,7 +100,12 @@
     $disabled-border-color: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'outlined-button'};
+    $name: #{config.variable-prefix() + '-' + 'outlined-button'};
+    $selector: (
+        #{'[' + config.element-prefix() + 'Button="outlined"]'},
+        #{config.element-prefix() + '-' + 'button[variant="outlined"]'},
+        #{'.' + config.element-prefix() + '-' + 'button--outlined'}
+    );
     $button-schema: ();
 
     @if map.has-key($schema, 'button') {
@@ -367,6 +373,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             foreground: $foreground,
             icon-color: $icon-color,

package/sass/themes/components/button-group/_button-group-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -111,7 +112,8 @@
     $disabled-selected-background: null,
     $disabled-selected-border-color: null
 ) {
-    $name: #{config.prefix() + '-' + 'button-group'};
+    $name: #{config.variable-prefix() + '-' + 'button-group'};
+    $selector: (#{config.element-prefix() + '-' + 'buttongroup'}, #{config.element-prefix() + '-' + 'button-group'});
     $button-group-schema: ();
 
     @if map.has-key($schema, 'button-group') {
@@ -259,6 +261,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             item-text-color: $item-text-color,
             item-icon-color: $item-icon-color,
             item-background: $item-background,

package/sass/themes/components/calendar/_calendar-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -323,7 +324,14 @@
     $size: null,
     $inner-size: null
 ) {
-    $name: #{config.prefix() + '-' + 'calendar'};
+    $name: #{config.variable-prefix() + '-' + 'calendar'};
+    $selector: (
+        #{config.element-prefix() + '-' + 'calendar'},
+        #{config.element-prefix() + '-' + 'date-picker'},
+        #{config.element-prefix() + '-' + 'month-picker'},
+        '.igx-days-view--standalone',
+        '.igx-calendar-view--standalone'
+    );
     $calendar-schema: ();
 
     @if map.has-key($schema, 'calendar') {
@@ -957,6 +965,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
 
             content-background: $content-background,
             content-foreground: $content-foreground,

package/sass/themes/components/card/_card-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -45,7 +46,8 @@
     $resting-shadow: null,
     $hover-shadow: null
 ) {
-    $name: #{config.prefix() + '-' + 'card'};
+    $name: #{config.variable-prefix() + '-' + 'card'};
+    $selector: #{config.element-prefix() + '-' + 'card'};
     $card-schema: ();
 
     @if map.has-key($schema, 'card') {
@@ -86,6 +88,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             background: $background,
             outline-color: $outline-color,
             border-radius: $border-radius,

package/sass/themes/components/carousel/_carousel-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 /////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -77,7 +78,8 @@
     $indicator-active-border-color: null,
     $indicator-active-hover-dot-color: null
 ) {
-    $name: #{config.prefix() + '-' + 'carousel'};
+    $name: #{config.variable-prefix() + '-' + 'carousel'};
+    $selector: #{config.element-prefix() + '-' + 'carousel'};
     $carousel-schema: ();
 
     @if map.has-key($schema, 'carousel') {
@@ -194,6 +196,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
 
             slide-background: $slide-background,
 

package/sass/themes/components/checkbox/_checkbox-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -69,7 +70,8 @@
     $error-color-hover: null,
     $focus-outline-color-error: null
 ) {
-    $name: #{config.prefix() + '-' + 'checkbox'};
+    $name: #{config.variable-prefix() + '-' + 'checkbox'};
+    $selector: #{config.element-prefix() + '-' + 'checkbox'};
     $checkbox-schema: ();
 
     @if map.has-key($schema, 'checkbox') {
@@ -133,6 +135,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             label-color: $label-color,
             label-color-hover: $label-color-hover,
             empty-color: $empty-color,

package/sass/themes/components/chip/_chip-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -96,7 +97,8 @@
     $remove-icon-color-focus: null,
     $size: null
 ) {
-    $name: #{config.prefix() + '-' + 'chip'};
+    $name: #{config.variable-prefix() + '-' + 'chip'};
+    $selector: (#{config.element-prefix() + '-' + 'chip'}, '.igx-chip__ghost');
     $chip-schema: ();
 
     @if map.has-key($schema, 'chip') {
@@ -213,6 +215,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             border-radius: $border-radius,
 
             text-color: $text-color,

package/sass/themes/components/column-actions/_column-actions-theme.scss

@@ -5,6 +5,7 @@
 @use '../../../utils/map' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -29,7 +30,8 @@
     $title-color: null,
     $background-color: null
 ) {
-    $name: #{config.prefix() + '-' + 'column-actions'};
+    $name: #{config.variable-prefix() + '-' + 'column-actions'};
+    $selector: #{config.element-prefix() + '-' + 'column-actions'};
     $column-actions-schema: ();
 
     @if map.has-key($schema, 'column-actions') {
@@ -48,6 +50,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             title-color: $title-color,
             background-color: $background-color,
         )

package/sass/themes/components/combo/_combo-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -52,7 +53,8 @@
     $clear-button-foreground-focus: null,
     $toggle-button-foreground-filled: null
 ) {
-    $name: #{config.prefix() + '-' + 'combo'};
+    $name: #{config.variable-prefix() + '-' + 'combo'};
+    $selector: (#{config.element-prefix() + '-' + 'combo'}, #{config.element-prefix() + '-' + 'simple-combo'});
     $combo-schema: ();
 
     @if map.has-key($schema, 'combo') {
@@ -110,6 +112,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             search-separator-border-color: $search-separator-border-color,
             empty-list-placeholder-color: $empty-list-placeholder-color,
             empty-list-background: $empty-list-background,

package/sass/themes/components/date-range-picker/_date-range-picker-theme.scss

@@ -5,6 +5,7 @@
 @use '../../../utils/map' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
@@ -13,7 +14,8 @@
 /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
 /// @param {color} $label-color [null] - The color for date range separator label.
 @function date-range-picker-theme($schema: $light-material-schema, $label-color: null) {
-    $name: #{config.prefix() + '-' + 'date-range-picker'};
+    $name: #{config.variable-prefix() + '-' + 'date-range-picker'};
+    $selector: #{config.element-prefix() + '-' + 'date-range-picker'};
     $date-range-schema: ();
 
     @if map.has-key($schema, 'date-range') {
@@ -28,6 +30,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             label-color: $label-color,
         )
     );

package/sass/themes/components/dialog/_dialog-theme.scss

@@ -7,6 +7,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -37,7 +38,8 @@
     $message-color: null,
     $shadow: null
 ) {
-    $name: #{config.prefix() + '-' + 'dialog'};
+    $name: #{config.variable-prefix() + '-' + 'dialog'};
+    $selector: (#{config.element-prefix() + '-' + 'dialog'}, '.igx-dialog');
     $dialog-schema: ();
 
     @if map.has-key($schema, 'dialog') {
@@ -69,6 +71,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             border-radius: $border-radius,
             background: $background,
             title-color: $title-color,

package/sass/themes/components/divider/_divider-theme.scss

@@ -6,6 +6,7 @@
 @use '../../../color/functions' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -21,7 +22,8 @@
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-divider-theme);
 @function divider-theme($schema: $light-material-schema, $color: null, $inset: null) {
-    $name: #{config.prefix() + '-' + 'divider'};
+    $name: #{config.variable-prefix() + '-' + 'divider'};
+    $selector: #{config.element-prefix() + '-' + 'divider'};
     $divider-schema: ();
 
     @if map.has-key($schema, 'divider') {
@@ -36,6 +38,7 @@
         $theme,
         (
             name: $name,
+            selector: $selector,
             color: $color,
             inset: $inset,
         )

package/sass/themes/components/dock-manager/_dock-manager-theme.scss

@@ -8,6 +8,7 @@
 @use '../../../elevations/' as *;
 
 ////
+/// @package theming
 /// @group themes
 /// @access public
 /// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
@@ -56,7 +57,8 @@
 ///   // Pass the theme to the css-vars() mixin
 ///   @include css-vars($my-dock-manager-theme);
 @function dock-manager-theme($schema: $light-material-schema, $rest...) {
-    $name: #{config.prefix() + '-' + 'dockmanager'};
+    $name: #{config.variable-prefix() + '-' + 'dockmanager'};
+    $selector: 'igc-dockmanager';
     $dock-manager-schema: ();
 
     @if map.has-key($schema, 'dockmanager') {
@@ -71,7 +73,7 @@
         $theme,
         (
             name: $name,
-            prefix: 'igc',
+            selector: $selector,
         ),
         meta.keywords($rest)
     );