igniteui-theming 20.0.0 → 21.0.0-beta.2

package/package.json

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

@@ -255,11 +255,7 @@ $_enhanced-accessibility: false;
         $base: map.get($s, #{$variant});
         $raw: map.get($s, #{$variant}-raw);
 
-        @return if(
-            $contrast,
-            $_relative-color,
-            if($raw and $variant != '500', rgba($raw, $_alpha), _normalize-color($base))
-        );
+        @return if($contrast, $_relative-color, if($raw, rgba($raw, $_alpha), _normalize-color($base)));
     }
 
     @return $_relative-color;

package/sass/themes/_config.scss

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

package/sass/themes/_functions.scss

@@ -3,6 +3,7 @@
 @use 'sass:meta';
 @use 'sass:string';
 @use 'sass:math';
+@use 'config';
 @use '../typography/functions' as *;
 @use '../elevations/functions' as *;
 @use '../color/functions' as color;
@@ -37,6 +38,16 @@
             $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)}));
@@ -51,6 +62,15 @@
     @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/_index.scss

@@ -1,3 +1,4 @@
+@forward 'config';
 @forward 'functions';
 @forward 'mixins';
 @forward 'charts';

package/sass/themes/components/_index.scss

@@ -1,4 +1,3 @@
-@forward 'config';
 @forward 'avatar/avatar-theme';
 @forward 'badge/badge-theme';
 @forward 'banner/banner-theme';

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/drop-down/_drop-down-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/expansion-panel/_expansion-panel-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/grid/_grid-summary-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/grid/_grid-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/grid/_grid-toolbar-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/highlight/_highlight-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/icon/_icon-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/icon-button/_icon-button-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

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

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/input/_input-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/label/_label-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/list/_list-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;
@@ -133,20 +133,20 @@
         $item-text-color: adaptive-contrast(var(--item-background));
     }
 
-    @if not($item-title-color) and $item-background {
-        $item-title-color: adaptive-contrast(var(--item-background));
+    @if not($item-title-color) and $item-text-color {
+        $item-title-color: var(--item-text-color);
     }
 
-    @if not($item-action-color) and $item-background {
-        $item-action-color: adaptive-contrast(var(--item-background));
+    @if not($item-action-color) and $item-text-color {
+        $item-action-color: var(--item-text-color);
     }
 
-    @if not($item-thumbnail-color) and $item-background {
-        $item-thumbnail-color: adaptive-contrast(var(--item-background));
+    @if not($item-thumbnail-color) and $item-text-color {
+        $item-thumbnail-color: var(--item-text-color);
     }
 
-    @if not($item-subtitle-color) and $item-background {
-        $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.74);
+    @if not($item-subtitle-color) and $item-text-color {
+        $item-subtitle-color: hsla(from var(--item-text-color) h s l / 0.74);
     }
 
     @if not($item-subtitle-color) and $item-text-color {
@@ -157,24 +157,20 @@
         $item-text-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
-    @if not($item-title-color-hover) and $item-background-hover {
-        $item-title-color-hover: adaptive-contrast(var(--item-background-hover));
-    }
-
-    @if not($item-action-color-hover) and $item-background-hover {
-        $item-action-color-hover: adaptive-contrast(var(--item-background-hover));
+    @if not($item-title-color-hover) and $item-text-color-hover {
+        $item-title-color-hover: var(--item-text-color-hover);
     }
 
-    @if not($item-thumbnail-color-hover) and $item-background-hover {
-        $item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover));
+    @if not($item-action-color-hover) and $item-text-color-hover {
+        $item-action-color-hover: var(--item-text-color-hover);
     }
 
-    @if not($item-subtitle-color-hover) and $item-background-hover {
-        $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / 0.74);
+    @if not($item-thumbnail-color-hover) and $item-text-color-hover {
+        $item-thumbnail-color-hover: var(--item-text-color-hover);
     }
 
     @if not($item-subtitle-color-hover) and $item-text-color-hover {
-        $item-subtitle-color-hover: var(--item-text-color-hover);
+        $item-subtitle-color-hover: hsla(from var(--item-text-color-hover) h s l / 0.74);
     }
 
     @if not($item-text-color-active) and $item-background-active {
@@ -185,36 +181,36 @@
         $item-text-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
-    @if not($item-title-color-active) and $item-background-active {
-        $item-title-color-active: adaptive-contrast(var(--item-background-active));
+    @if not($item-title-color-active) and $item-text-color-active {
+        $item-title-color-active: var(--item-text-color-active);
     }
 
-    @if not($item-title-color-selected) and $item-background-selected {
-        $item-title-color-selected: adaptive-contrast(var(--item-background-selected));
+    @if not($item-title-color-selected) and $item-text-color-selected {
+        $item-title-color-selected: var(--item-text-color-selected);
     }
 
-    @if not($item-action-color-active) and $item-background-active {
-        $item-action-color-active: adaptive-contrast(var(--item-background-active));
+    @if not($item-action-color-active) and $item-text-color-active {
+        $item-action-color-active: var(--item-text-color-active);
     }
 
-    @if not($item-action-color-selected) and $item-background-selected {
-        $item-action-color-selected: adaptive-contrast(var(--item-background-selected));
+    @if not($item-action-color-selected) and $item-text-color-selected {
+        $item-action-color-selected: var(--item-text-color-selected);
     }
 
-    @if not($item-thumbnail-color-active) and $item-background-active {
-        $item-thumbnail-color-active: adaptive-contrast(var(--item-background-active));
+    @if not($item-thumbnail-color-active) and $item-text-color-active {
+        $item-thumbnail-color-active: var(--item-text-color-active);
     }
 
-    @if not($item-thumbnail-color-selected) and $item-background-selected {
-        $item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected));
+    @if not($item-thumbnail-color-selected) and $item-text-color-selected {
+        $item-thumbnail-color-selected: var(--item-text-color-selected);
     }
 
-    @if not($item-subtitle-color-active) and $item-background-active {
-        $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / 0.74);
+    @if not($item-subtitle-color-active) and $item-text-color-active {
+        $item-subtitle-color-active: hsla(from var(--item-text-color-active) h s l / 0.74);
     }
 
-    @if not($item-subtitle-color-selected) and $item-background-selected {
-        $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / 0.74);
+    @if not($item-subtitle-color-selected) and $item-text-color-selected {
+        $item-subtitle-color-selected: hsla(from var(--item-text-color-selected) h s l / 0.74);
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {

package/sass/themes/components/navbar/_navbar-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/navdrawer/_navdrawer-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;
@@ -89,7 +89,7 @@
     }
 
     @if not($item-hover-background) and $background {
-        $item-hover-background: hsla(from adaptive-contrast(var(--background)) h s l / 0.08);
+        $item-hover-background: dynamic-shade($background);
     }
 
     @if not($item-hover-text-color) and $background {
@@ -101,7 +101,7 @@
     }
 
     @if not($item-active-background) and $background {
-        $item-active-background: hsla(from adaptive-contrast(var(--background)) h s l / 0.24);
+        $item-active-background: dynamic-shade($background, $offset: 10);
     }
 
     @if not($item-active-text-color) and $item-active-background {

package/sass/themes/components/overlay/_overlay-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/paginator/_paginator-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/progress/_circular-theme.scss

@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/progress/_linear-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/query-builder/_query-builder-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/radio/_radio-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/rating/_rating-theme.scss

@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use 'sass:meta';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/ripple/_ripple-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/scrollbar/_scrollbar-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/select/_select-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/slider/_slider-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;

package/sass/themes/components/snackbar/_snackbar-theme.scss

@@ -1,5 +1,5 @@
 @use 'sass:map';
-@use '../config';
+@use '../../config';
 @use '../../functions' as *;
 @use '../../schemas/' as *;
 @use '../../../utils/map' as *;