igniteui-angular 22.1.0-beta.2 → 22.1.0-beta.4

package/lib/core/styles/components/button/_button-theme.scss

@@ -34,20 +34,21 @@
         $_t
     );
 
-    @include themed($_t, $_v) {
-        // Overrides the icon's --size token, which lives in this same theme layer;
-        // a base-layer rule would lose regardless of specificity. Host-scoped so it
-        // only touches icons inside buttons.
-        .igx-button igx-icon {
-            --component-size: var(--ig-size, var(--ig-size-large));
-            --size: var(--ig-icon-size, #{$icon-in-button-size});
+    // @include themed($_t, $_v) {
+    // }
 
-            justify-content: center;
-        }
+    // Overrides the icon's --size token, which lives in this same theme layer;
+    // a base-layer rule would lose regardless of specificity. Host-scoped so it
+    // only touches icons inside buttons.
+    .igx-button {
+        --component-size: var(--ig-size, var(--ig-size-large));
+        --ig-icon-size: #{$icon-in-button-size};
 
-        @each $key, $theme in meta.keywords($themes) {
-            @include tokens($theme, $mode: 'scoped');
-        }
+        justify-content: center;
+    }
+
+    @each $key, $theme in meta.keywords($themes) {
+        @include tokens($theme, $mode: 'scoped');
     }
 
     @include layer(base) {

package/lib/core/styles/components/highlight/highlight-theme.scss

@@ -6,12 +6,7 @@
 /// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin highlight($theme) {
-    $_t: map.get($theme, '_meta', 'theme');
-    $_v: map.get($theme, '_meta', 'variant');
-
-    @include themed($_t, $_v) {
-        @include tokens($theme, $mode: 'scoped', $scope: '.igx-highlight');
-    }
+    @include tokens($theme, $mode: 'scoped', $scope: '.igx-highlight');
 
     @include layer(base) {
         %igx-highlight {

package/lib/core/styles/components/icon-button/_icon-button-theme.scss

@@ -30,14 +30,12 @@
         $_t
     );
 
-    @include themed($_t, $_v) {
-        .igx-icon-button igx-icon {
-            --size: var(--ig-icon-size, #{$icon-in-button-size});
-        }
+    .igx-icon-button {
+        --ig-icon-size: #{$icon-in-button-size};
+    }
 
-        @each $key, $theme in meta.keywords($themes) {
-            @include tokens($theme, $mode: 'scoped');
-        }
+    @each $key, $theme in meta.keywords($themes) {
+        @include tokens($theme, $mode: 'scoped');
     }
 
     @include layer(base) {

package/lib/core/styles/components/label/_label-theme.scss

@@ -7,12 +7,7 @@
 /// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin label($theme) {
-    $_t: map.get($theme, '_meta', 'theme');
-    $_v: map.get($theme, '_meta', 'variant');
-
-    @include themed($_t, $_v) {
-        @include tokens($theme, $mode: 'scoped', $scope: '[igxLabel]');
-    }
+    @include tokens($theme, $mode: 'scoped', $scope: '[igxLabel]');
 
     @include layer(base) {
         $variant: map.get($theme, '_meta', 'theme');

package/lib/core/styles/components/rating/_rating-theme.scss

@@ -6,12 +6,7 @@
 /// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin rating($theme) {
-    $_t: map.get($theme, '_meta', 'theme');
-    $_v: map.get($theme, '_meta', 'variant');
-
-    @include themed($_t, $_v) {
-        @include tokens($theme, $mode: 'scoped', $scope: 'igc-rating');
-    }
+    @include tokens($theme, $mode: 'scoped', $scope: 'igc-rating');
 
     @include layer(base) {
         igc-rating::part(label) {

package/lib/core/styles/components/ripple/_ripple-theme.scss

@@ -6,12 +6,7 @@
 /// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin ripple($theme) {
-    $_t: map.get($theme, '_meta', 'theme');
-    $_v: map.get($theme, '_meta', 'variant');
-
-    @include themed($_t, $_v) {
-        @include tokens($theme, $mode: 'scoped', $scope: '[igxRipple]');
-    }
+    @include tokens($theme, $mode: 'scoped', $scope: '[igxRipple]');
 
     @include layer(base) {
         %igx-ripple-display {

package/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -6,12 +6,7 @@
 /// @see {mixin} tokens
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tooltip($theme) {
-    $_t: map.get($theme, '_meta', 'theme');
-    $_v: map.get($theme, '_meta', 'variant');
-
-    @include themed($_t, $_v) {
-        @include tokens($theme, $mode: 'scoped', $scope: '.igx-tooltip');
-    }
+    @include tokens($theme, $mode: 'scoped', $scope: '.igx-tooltip');
 
     @include layer(base) {
         $variant: map.get($theme, '_meta', 'theme');

package/lib/core/styles/themes/generators/_base.scss

@@ -119,7 +119,7 @@
         $excluded: is-component($exclude);
     }
 
-    @layer ig.base, ig.typography, ig.#{$theme}, ig.derived;
+    @layer ig.reset, ig.base, ig.#{$theme}, ig.derived;
 
     // Component tokens — emitted once per theme, gated by $exclude so a
     // consumer that only uses a handful of components isn't paying for the
@@ -227,7 +227,11 @@
     }
 
     @if is-used('igx-icon', $exclude) {
-        @include std.component-tokens('igx-icon', 'icon', $schema);
+        @scope (.igx-icon) {
+          :scope:is(igx-icon) {
+            @include tokens(digest-schema(map.get($schema, 'icon')), $mode: 'scoped');
+          }
+        }
     }
 
     @if is-used('igx-input-group', $exclude) {

package/lib/core/styles/typography/_typography.scss

@@ -55,14 +55,12 @@
     $_scope: if(is-root() or is-host(), '.ig-typography', '&');
 
     #{$_scope} {
-        @layer ig.typography {
-          @include _component-typography($type-scale, $exclude);
+        @layer ig.base {
+            @include _component-typography($type-scale, $exclude);
         }
     }
 
     @if not(list.index($exclude, 'global')) {
-        @layer ig.typography {
-            @include theming.typography($font-family, $type-scale);
-        }
+        @include theming.typography($font-family, $type-scale, $allow-exclusion: true);
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igniteui-angular",
-  "version": "22.1.0-beta.2",
+  "version": "22.1.0-beta.4",
   "description": "Ignite UI for Angular is a dependency-free Angular toolkit for building modern web apps",
   "author": "Infragistics",
   "license": "SEE LICENSE IN LICENSE",
@@ -75,7 +75,7 @@
     "igniteui-trial-watermark": "^3.1.0",
     "jspdf": "^4.2.1",
     "lodash-es": "^4.17.21",
-    "igniteui-theming": "^27.4.0",
+    "igniteui-theming": "^27.5.1",
     "igniteui-i18n-core": "^1.0.5",
     "@igniteui/material-icons-extended": "^3.1.0"
   },