deps(theming): bump to latest version (#16206)

* deps(theming): bump to latest version

Make sure that when CSS variables for a theme are included, they are
scoped to the correct selector. This is done as the selector properties
will be removed from the igniteui-theming package to allow for greater
flexibility for the generated themes across all frameworks.

Author: simeonoff

package-lock.json

@@ -75,7 +75,7 @@
     "@types/source-map": "0.5.2",
     "express": "^5.1.0",
     "fflate": "^0.8.1",
-    "igniteui-theming": "^19.2.3",
+    "igniteui-theming": "^19.3.1",
     "igniteui-trial-watermark": "^3.1.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^7.8.2",
@@ -121,7 +121,7 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-dockmanager": "^1.16.1",
     "igniteui-sassdoc-theme": "^2.0.1",
-    "igniteui-webcomponents": "6.1.1",
+    "igniteui-webcomponents": "6.2.1",
     "jasmine": "^5.6.0",
     "jasmine-core": "^5.6.0",
     "karma": "^6.4.4",

package.json

@@ -73,7 +73,7 @@
         "tslib": "^2.3.0",
         "igniteui-trial-watermark": "^3.1.0",
         "lodash-es": "^4.17.21",
-        "igniteui-theming": "^19.2.3",
+        "igniteui-theming": "^19.3.1",
         "@igniteui/material-icons-extended": "^3.1.0"
     },
     "peerDependencies": {

projects/igniteui-angular/package.json

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin avatar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-avatar');
 
     $variant: map.get($theme, '_meta', 'theme');
 

projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin badge($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-badge');
 
     $variant: map.get($theme, '_meta', 'theme');
 

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -5,7 +5,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-banner, .igx-banner');
     $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin bottom-nav($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-bottom-nav');
 
     $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin button-group($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-buttongroup');
 
     $group-item-border-thickness: rem(1px);
     $group-items-margin: rem(10px, 16px);

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin calendar($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker');
 
     $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss

@@ -6,7 +6,7 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
-    @include css-vars($theme);
+    @include css-vars($theme, 'igx-card');
     $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';