diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
index fc058199660..06f9e037937 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss
@@ -43,11 +43,11 @@
     $theme: digest-schema($avatar-schema);
 
     @if not($color) and $background {
-        $color: adaptive-contrast($background);
+        $color: adaptive-contrast(var(--background));
     }
 
     @if not($icon-color) and $background {
-        $icon-color: adaptive-contrast($background);
+        $icon-color: adaptive-contrast(var(--background));
     }
 
     @return extend($theme, (
@@ -66,7 +66,7 @@
 @mixin avatar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-avatar-display {
         @include sizable();
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
index 97d3567c89f..305db2063f4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss
@@ -48,14 +48,13 @@
     }
 
     $theme: digest-schema($badge-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($icon-color) and $background-color {
-        $icon-color: text-contrast($background-color);
+        $icon-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($shadow) {
@@ -71,10 +70,6 @@
         border-radius: $border-radius,
         background-color: $background-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -84,7 +79,7 @@
 @mixin badge($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-badge-display {
         --size: #{rem(22px)};