diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9a5d8b720cf..6fe5277e2a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,17 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 20.0.2
+
+### New Features
+- **Separating Button and Icon Button Themes** - The `button-theme` and `icon-button-theme` functions are still available, but for more targeted customization, you can now use the specific theme function for each button type.
+- **Component Themes Enchancements** - Component themes have been improved to automatically calculate all necessary states (e.g., hover, focus, active) based on just a few key values. For example, customizing a contained button requires only a background color:
+```scss
+    $custom-contained-button: contained-button-theme(
+        $background: #09f;
+    );
+```
+
 ## 20.0.0
 
 ### General
diff --git a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts
index e5557904ee6..bf6fbbc5c0e 100644
--- a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts
+++ b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts
@@ -16,7 +16,6 @@ export class TemplateWrapperComponent {
 
     public templateFunctions: TemplateFunction[] = [];
     public templateRendered = new Subject<HTMLElement>();
-
     private childParts: WeakMap<HTMLElement, RootPart> = new WeakMap();
 
     /**
@@ -28,7 +27,7 @@ export class TemplateWrapperComponent {
     public templateRefs: QueryList<TemplateRef<any>>;
 
     constructor(private cdr: ChangeDetectorRef) { }
-
+  
     protected litRender(container: HTMLElement, templateFunc: (arg: any) => TemplateResult, arg: any) {
         const part = render(templateFunc(arg), container);
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
index 9a855fc8ae9..78d97b80462 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss
@@ -41,10 +41,9 @@
     }
 
     $theme: digest-schema($action-strip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($icon-color) and $actions-background {
-        $icon-color: text-contrast($actions-background);
+        $icon-color: adaptive-contrast(var(--actions-background));
     }
 
     @if not($actions-border-radius) {
@@ -58,10 +57,6 @@
         icon-color: $icon-color,
         delete-action: $delete-action,
         actions-border-radius: $actions-border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -71,7 +66,7 @@
 @mixin action-strip($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $icon-button-size: map.get((
         'material': rem(36px),
         'fluent': rem(32px),
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 6c462663f50..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
@@ -41,10 +41,13 @@
     }
 
     $theme: digest-schema($avatar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($color) and $background {
-        $color: text-contrast($background);
+        $color: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
     }
 
     @return extend($theme, (
@@ -54,10 +57,6 @@
         icon-color: $icon-color,
         border-radius: $border-radius,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -67,8 +66,8 @@
 @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)};
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
index 74a3166012a..dd52a4a12fc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss
@@ -43,10 +43,13 @@
     }
 
     $theme: digest-schema($banner-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($banner-message-color) and $banner-background {
-        $banner-message-color: text-contrast($banner-background);
+        $banner-message-color: adaptive-contrast(var(--banner-background));
+    }
+
+    @if not($banner-illustration-color) and $banner-background {
+        $banner-illustration-color: adaptive-contrast(var(--banner-background));
     }
 
     @return extend($theme, (
@@ -57,10 +60,6 @@
         banner-border-color: $banner-border-color,
         banner-illustration-color: $banner-illustration-color,
         border-radius: $border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -69,7 +68,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin banner($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-banner-host {
         igx-expansion-panel-body {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
index fdb0a893aea..87da896f8a7 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss
@@ -51,42 +51,36 @@
 
     $theme: digest-schema($bottom-nav-schema);
 
-    $meta: map.get($theme, '_meta');
-
-    @if not($label-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $label-color: text-contrast($background);
-        }
+    @if not($label-color) and not($icon-color) and $background {
+        $label-color: adaptive-contrast(var(--background));
     }
 
     @if not($icon-color) and $label-color {
-        @if meta.type-of($label-color) == 'color' {
-            $icon-color: $label-color;
-        }
+        $icon-color: $label-color;
+    }
+
+    @if not($label-color) and $icon-color {
+        $label-color: $icon-color;
+    }
+
+    @if not($icon-disabled-color) and not($label-disabled-color) and $label-color {
+        $label-disabled-color: adaptive-contrast(var(--background));
     }
 
     @if not($icon-disabled-color) and $label-disabled-color {
-        @if meta.type-of($label-disabled-color) == 'color' {
-            $icon-disabled-color: $label-disabled-color;
-        }
+        $icon-disabled-color: $label-disabled-color;
     }
 
     @if not($label-disabled-color) and $icon-disabled-color {
-        @if meta.type-of($icon-disabled-color) == 'color' {
-            $label-disabled-color: $icon-disabled-color;
-        }
+        $label-disabled-color: $icon-disabled-color;
     }
 
     @if not($icon-selected-color) and $label-selected-color {
-        @if meta.type-of($background) == 'color' {
-            $icon-selected-color: $label-selected-color;
-        }
+        $icon-selected-color: $label-selected-color;
     }
 
-    @if not($icon-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $icon-color: text-contrast($background);
-        }
+    @if not($label-selected-color) and $icon-selected-color {
+        $label-selected-color: $icon-selected-color;
     }
 
     @if not($shadow) {
@@ -105,11 +99,6 @@
         label-disabled-color: $label-disabled-color,
         border-color: $border-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -119,7 +108,7 @@
 @mixin bottom-nav($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
index ff81ce04820..ccf7fb9d749 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss
@@ -120,44 +120,130 @@
     }
 
     $theme: digest-schema($button-group-schema);
-    $meta: map.get($theme, '_meta');
 
     $border: rem(1px) solid map.get($theme, 'item-selected-border-color');
 
+    //background colors
+    @if not($item-hover-background) and $item-background {
+        $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+    }
+
+    @if not($item-selected-background) and $item-background {
+        $item-selected-background: hsl(from var(--item-background) h s calc(l * 0.7));
+    }
+
+    @if not($item-selected-hover-background) and $item-selected-background {
+        $item-selected-hover-background: hsl(from var(--item-selected-background) h s calc(l * 1.1));
+    }
+
+    @if not($item-selected-focus-background) and $item-selected-background {
+        $item-selected-focus-background: var(--item-selected-background);
+    }
+
+    @if not($item-selected-focus-hover-background) and $item-selected-hover-background {
+        $item-selected-focus-hover-background: var(--item-selected-hover-background);
+    }
+
+    @if not($item-focused-background) and $item-background {
+        $item-focused-background: var(--item-hover-background);
+    }
+
+    @if not($item-focused-hover-background) and $item-hover-background {
+        $item-focused-hover-background: hsl(from var(--item-focused-background) h s calc(l * 0.9));
+    }
+
+    @if not($disabled-background-color) and $item-background {
+        $disabled-background-color: var(--item-background);
+    }
+
+    @if not($disabled-selected-background) and $item-selected-background {
+        $disabled-selected-background: rgba(gray, 0.3);
+    }
+
+    //border colors
+    @if not($item-border-color) and $item-background {
+        $item-border-color: hsl(from var(--item-background) h s calc(l * 0.8));
+    }
+
+    @if not($item-hover-border-color) and $item-border-color {
+        $item-hover-border-color: var(--item-border-color);
+    }
+
+    @if not($item-focused-border-color) and $item-border-color {
+        $item-focused-border-color: var(--item-border-color);
+    }
+
+    @if not($item-selected-border-color) and $item-border-color {
+        $item-selected-border-color: var(--item-border-color);
+    }
+
+    @if not($item-selected-hover-border-color) and $item-border-color {
+        $item-selected-hover-border-color: var(--item-border-color);
+    }
+
+    @if not($item-disabled-border) and $item-border-color {
+        $item-disabled-border: var(--item-border-color);
+    }
+
+    @if not($disabled-selected-border-color) and $item-border-color {
+        $disabled-selected-border-color: var(--item-border-color);
+    }
+
+    //text and icon colors
     @if not($item-text-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-text-color: text-contrast($item-background);
-        }
+        $item-text-color: adaptive-contrast(var(--item-background));
     }
 
-    @if not($item-hover-text-color) and $item-hover-background {
-        @if meta.type-of($item-hover-background) == 'color' {
-            $item-hover-text-color: text-contrast($item-hover-background);
-        }
+    @if not($item-icon-color) and $item-text-color {
+        $item-icon-color: var(--item-text-color);
     }
 
-    @if not($item-selected-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-selected-background: text-contrast($item-background);
-        }
+    @if not($item-hover-text-color) and $item-hover-background {
+        $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
     }
 
-    @if not($idle-shadow-color) and $selected-shadow-color {
-        @if meta.type-of($selected-shadow-color) == 'color' {
-            $idle-shadow-color: $selected-shadow-color;
-        }
+    @if not($item-hover-icon-color) and $item-hover-text-color {
+        $item-hover-icon-color: var(--item-hover-text-color);
     }
 
-    @if not($selected-shadow-color) and $idle-shadow-color {
-        @if meta.type-of($idle-shadow-color) == 'color' {
-            $selected-shadow-color: $idle-shadow-color;
-        }
+    @if not($item-focused-text-color) and $item-focused-background {
+        $item-focused-text-color: adaptive-contrast(var(--item-focused-background));
     }
 
     @if not($item-selected-text-color) and $item-selected-background {
-        @if meta.type-of($item-selected-background) == 'color' {
-            $item-selected-text-color: text-contrast($item-selected-background);
-        }
+        $item-selected-text-color: adaptive-contrast(var(--item-selected-background));
+    }
+
+    @if not($item-selected-icon-color) and $item-selected-text-color {
+        $item-selected-icon-color: var(--item-selected-text-color);
+    }
+
+    @if not($item-selected-hover-text-color) and $item-selected-hover-background {
+        $item-selected-hover-text-color: adaptive-contrast(var(--item-selected-hover-background));
+    }
+
+    @if not($item-selected-hover-icon-color) and $item-selected-hover-text-color {
+        $item-selected-hover-icon-color: var(--item-selected-hover-text-color);
+    }
+
+    @if not($disabled-text-color) and $disabled-background-color {
+        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-background-color)) h s l / 0.4);
+    }
+
+    @if not($disabled-selected-text-color) and $disabled-text-color {
+        $disabled-selected-text-color: var(--disabled-text-color);
+    }
+
+    @if not($idle-shadow-color) and $item-background {
+        $idle-shadow-color: hsla(from var(--item-background) h s l / .5);
+    }
+
+    @if not($idle-shadow-color) and $selected-shadow-color {
+        $idle-shadow-color: var(--selected-shadow-color);
+    }
+
+    @if not($selected-shadow-color) and $idle-shadow-color {
+        $selected-shadow-color: var(--idle-shadow-color);
     }
 
     @if map.get($button-group-schema, 'elevation') > 0 {
@@ -205,11 +291,7 @@
         border: $border,
         shadow: $shadow,
         idle-shadow-color: $idle-shadow-color,
-        selected-shadow-color: $selected-shadow-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        selected-shadow-color: $selected-shadow-color
     ));
 }
 
@@ -223,7 +305,7 @@
     $group-items-margin: rem(10px, 16px);
     $outline-btn-indent: rem(2px);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo';
     $group-item-min-width: map.get((
@@ -445,6 +527,7 @@
             @if $variant == 'bootstrap' {
                 background: var-get($theme, 'item-background');
                 z-index: 1;
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color');
 
                 &:active {
                     background: var-get($theme, 'item-hover-background');
@@ -691,6 +774,7 @@
                 color: var-get($theme, 'item-selected-text-color');
                 border-color: var-get($theme, 'item-selected-border-color');
                 background: var-get($theme, 'item-selected-background');
+                box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color');
 
                 igx-icon {
                     color: var-get($theme, 'item-selected-icon-color');
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
index 93f0ba40041..e29b19afdf0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss
@@ -1,9 +1,16 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
+@forward './flat-button-theme';
+@forward './contained-button-theme';
+@forward './outlined-button-theme';
+@forward './fab-button-theme';
+
 ////
 /// @group themes
 /// @access public
@@ -122,61 +129,39 @@
         }
 
         @if not($foreground) and $background {
-            $foreground: text-contrast($background);
+            $foreground: adaptive-contrast(var(--background));
         }
 
-        @if not($hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $hover-background: color.scale($background, $lightness: 5%);
-            }
+        @if not($icon-color) and $background {
+            $icon-color: adaptive-contrast(var(--background));
         }
 
         @if not($hover-foreground) and $hover-background {
-            @if meta.type-of($hover-background) == 'color' {
-                $hover-foreground: text-contrast($hover-background);
-            }
-        }
-
-        @if not($icon-color) and $background {
-            @if meta.type-of($background) == 'color' {
-                $icon-color: text-contrast($background);
-            }
+            $hover-foreground: adaptive-contrast(var(--hover-background));
         }
 
         @if not($icon-color-hover) and $hover-foreground {
-            @if meta.type-of($hover-background) == 'color' {
-                $icon-color-hover: $hover-foreground;
-            }
-        }
-
-        @if not($focus-background) and $background {
-            $focus-background: color.scale($background, $lightness: 5%);
+            $icon-color-hover: var(--hover-foreground);
         }
 
         @if not($focus-foreground) and $focus-background {
-            $focus-foreground: text-contrast($focus-background);
-        }
-
-        @if not($focus-hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $focus-hover-background: color.scale($background, $lightness: 5%);
-            }
+            $focus-foreground: adaptive-contrast(var(--focus-background));
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: text-contrast($focus-hover-background);
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
         }
 
         @if not($focus-visible-background) and $focus-background {
-            $focus-visible-background: $focus-background;
+            $focus-visible-background: var(--focus-background);
         }
 
-        @if not($focus-visible-foreground) and $focus-foreground {
-            $focus-visible-foreground: $focus-foreground;
+        @if not($focus-visible-foreground) and $focus-visible-background {
+            $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
         }
 
         @if not($focus-visible-border-color) and $focus-border-color {
-            $focus-visible-border-color: $focus-border-color;
+            $focus-visible-border-color: var(--focus-border-color);
         }
 
         @if not($_resting-shadow) {
@@ -242,7 +227,6 @@
                 disabled-icon-color: $disabled-icon-color,
                 disabled-border-color: $disabled-border-color,
                 size: $size,
-                theme: map.get($schema, '_meta', 'theme'),
             ))
         ));
     }
@@ -256,28 +240,60 @@
 
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
-/// @param {Map} $theme - The theme used to style the component.
-@mixin button($theme) {
+/// @param {Map} $flat [null] - The flat theme used to style the component.
+/// @param {Map} $contained [null] - The contained theme used to style the component.
+/// @param {Map} $outlined [null] - The outlined theme used to style the component.
+/// @param {Map} $fab [null] - The fab theme used to style the component.
+@mixin button($themes...) {
     $button-width: rem(88px);
+    $flat-theme: null;
+    $contained-theme: null;
+    $outlined-theme: null;
+    $fab-theme: null;
+    $variant: 'material';
+
+    $required: ('flat', 'contained', 'outlined', 'fab');
+    $added: ();
+    $missing: ();
+
+    @each $key, $theme in meta.keywords($themes) {
+        $type: map.get($theme, _meta, type);
+
+        $added: list.append($added, $key);
+
+        @if $type == 'flat' {
+            $flat-theme: $theme;
+        } @else if $type == 'contained' {
+            $contained-theme: $theme;
+        } @else if $type == 'outlined' {
+            $outlined-theme: $theme;
+        } @else if $type == 'fab' {
+            $fab-theme: $theme;
+        }
 
-    $variant: map.get($theme, variant);
+        $variant: map.get($theme, '_meta', 'theme');
+        @include css-vars($theme);
+    }
 
-    $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
-    $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
-    $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-    $fab-theme: map.get(map.get($theme, 'themes'), 'fab');
+    @each $item in $required {
+        @if not(list.index($added, $item)) {
+            $missing: list.append($missing, '$#{$item}', $separator: comma);
+        }
+    }
 
-    @include css-vars($flat-theme);
-    @include css-vars($outlined-theme);
-    @include css-vars($contained-theme);
-    @include css-vars($fab-theme);
+    @if list.length($missing) != 0 {
+        @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
+    }
 
-    $time: map.get((
-        'material': .1s,
-        'fluent': .1s,
-        'bootstrap': .15s,
-        'indigo': .15s
-    ), $variant);
+    $time: map.get(
+        (
+            'material': 0.1s,
+            'fluent': 0.1s,
+            'bootstrap': 0.15s,
+            'indigo': 0.15s,
+        ),
+        $variant
+    );
 
     $button-transition: color $time ease-in-out,
         background-color $time ease-in-out,
@@ -292,89 +308,101 @@
     $button-padding-inline: (
         comfortable: rem(16px, 16px),
         cosy: rem(12px, 16px),
-        compact: rem(8px, 16px)
+        compact: rem(8px, 16px),
     );
 
     $button-padding-indigo-inline: (
         comfortable: rem(24px, 16px),
         cosy: rem(16px, 16px),
-        compact: rem(10px, 16px)
+        compact: rem(10px, 16px),
     );
 
     $button-padding-material-block: (
         comfortable: rem(7px, 16px),
         cosy: rem(4px, 16px),
-        compact: rem(1px, 16px)
+        compact: rem(1px, 16px),
     );
 
     $button-padding-fluent-block: (
         comfortable: 0,
         cosy: 0,
-        compact: 0
+        compact: 0,
     );
 
     $button-padding-bootstrap-block: (
         comfortable: rem(6px, 16px),
         cosy: rem(4px, 16px),
-        compact: rem(2px, 16px)
+        compact: rem(2px, 16px),
     );
 
     $button-padding-indigo-block: (
         comfortable: 0,
         cosy: 0,
-        compact: 0
+        compact: 0,
+    );
+
+    $button-padding-inline: map.get(
+        (
+            'material': $button-padding-inline,
+            'fluent': $button-padding-inline,
+            'bootstrap': $button-padding-inline,
+            'indigo': $button-padding-indigo-inline,
+        ),
+        $variant
     );
 
-    $button-padding-inline: map.get((
-        'material': $button-padding-inline,
-        'fluent': $button-padding-inline,
-        'bootstrap': $button-padding-inline,
-        'indigo': $button-padding-indigo-inline,
-    ), $variant);
-
-    $button-padding-block: map.get((
-        'material': $button-padding-material-block,
-        'fluent': $button-padding-fluent-block,
-        'bootstrap': $button-padding-bootstrap-block,
-        'indigo': $button-padding-indigo-block,
-    ), $variant);
-
-    $outlined-button-padding-inline: map.get((
-        'material': $button-padding-inline,
-        'fluent': $button-padding-inline,
-        'bootstrap': $button-padding-inline,
-        'indigo': $button-padding-indigo-inline,
-    ), $variant);
-
-    $outlined-button-padding-block: map.get((
-        'material': $button-padding-material-block,
-        'fluent': $button-padding-fluent-block,
-        'bootstrap': $button-padding-bootstrap-block,
-        'indigo': $button-padding-indigo-block
-    ), $variant);
+    $button-padding-block: map.get(
+        (
+            'material': $button-padding-material-block,
+            'fluent': $button-padding-fluent-block,
+            'bootstrap': $button-padding-bootstrap-block,
+            'indigo': $button-padding-indigo-block,
+        ),
+        $variant
+    );
+
+    $outlined-button-padding-inline: map.get(
+        (
+            'material': $button-padding-inline,
+            'fluent': $button-padding-inline,
+            'bootstrap': $button-padding-inline,
+            'indigo': $button-padding-indigo-inline,
+        ),
+        $variant
+    );
+
+    $outlined-button-padding-block: map.get(
+        (
+            'material': $button-padding-material-block,
+            'fluent': $button-padding-fluent-block,
+            'bootstrap': $button-padding-bootstrap-block,
+            'indigo': $button-padding-indigo-block,
+        ),
+        $variant
+    );
 
     $button-floating-padding-block: (
         comfortable: rem(8px),
         cosy: rem(4px),
-        compact: 0
+        compact: 0,
     );
 
     $button-floating-padding-inline: (
         comfortable: rem(14px),
         cosy: rem(10px),
-        compact: rem(6px)
+        compact: rem(6px),
     );
 
     $button-floating-padding-indigo-inline: (
         comfortable: rem(10px),
         cosy: rem(8px),
-        compact: rem(6px)
+        compact: rem(6px),
     );
 
     $items-gap: (
         comfortable: rem(12px),
         cosy: rem(8px),
-        compact: rem(4px)
+        compact: rem(4px),
     );
 
     $items-gap-indigo-comfortable: rem(8px);
@@ -382,73 +410,102 @@
     $filtering-row-button-size: (
         comfortable: rem(40px),
         cosy: rem(30px),
-        compact: rem(21px)
+        compact: rem(21px),
     );
 
-    $icon-sizes: map.get((
-        'material': rem(18px),
-        'fluent': rem(18px),
-        'bootstrap': rem(18px),
-        'indigo': rem(16px),
-    ), $variant);
+    $icon-sizes: map.get(
+        (
+            'material': rem(18px),
+            'fluent': rem(18px),
+            'bootstrap': rem(18px),
+            'indigo': rem(16px),
+        ),
+        $variant
+    );
 
     $icon-in-button-size: $icon-sizes;
 
-    $contained-shadow: map.get((
-        'material': var-get($contained-theme, 'resting-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $contained-shadow--hover: map.get((
-        'material': var-get($contained-theme, 'hover-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $contained-shadow--focus: map.get((
-        'material': var-get($contained-theme, 'focus-shadow'),
-        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
-    ), $variant);
-
-    $contained-shadow--active: map.get((
-        'material': var-get($contained-theme, 'active-shadow'),
-        'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($contained-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color')
-    ), $variant);
-
-    $fab-shadow: map.get((
-        'material': var-get($fab-theme, 'resting-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $fab-shadow--hover: map.get((
-        'material': var-get($fab-theme, 'hover-shadow'),
-        'fluent': none,
-        'bootstrap': none,
-        'indigo': none
-    ), $variant);
-
-    $fab-shadow--focus: map.get((
-        'material': var-get($fab-theme, 'focus-shadow'),
-        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
-    ), $variant);
-
-    $fab-shadow--active: map.get((
-        'material': var-get($fab-theme, 'active-shadow'),
-        'fluent':  0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
-        'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
-        'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')
-    ), $variant);
+    $contained-shadow: map.get(
+        (
+            'material': var-get($contained-theme, 'resting-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none,
+        ),
+        $variant
+    );
+
+    $contained-shadow--hover: map.get(
+        (
+            'material': var-get($contained-theme, 'hover-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none,
+        ),
+        $variant
+    );
+
+    $contained-shadow--focus: map.get(
+        (
+            'material': var-get($contained-theme, 'focus-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px)
+                var-get($contained-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+        ),
+        $variant
+    );
+
+    $contained-shadow--active: map.get(
+        (
+            'material': var-get($contained-theme, 'active-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px)
+                var-get($contained-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($contained-theme, 'shadow-color'),
+        ),
+        $variant
+    );
+
+    $fab-shadow: map.get(
+        (
+            'material': var-get($fab-theme, 'resting-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none,
+        ),
+        $variant
+    );
+
+    $fab-shadow--hover: map.get(
+        (
+            'material': var-get($fab-theme, 'hover-shadow'),
+            'fluent': none,
+            'bootstrap': none,
+            'indigo': none,
+        ),
+        $variant
+    );
+
+    $fab-shadow--focus: map.get(
+        (
+            'material': var-get($fab-theme, 'focus-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+        ),
+        $variant
+    );
+
+    $fab-shadow--active: map.get(
+        (
+            'material': var-get($fab-theme, 'active-shadow'),
+            'fluent': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+            'bootstrap': 0 0 0 rem(4px) var-get($fab-theme, 'shadow-color'),
+            'indigo': 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),
+        ),
+        $variant
+    );
 
     %fluent-border {
         &::after {
@@ -514,10 +571,10 @@
     igx-grid-filtering-row {
         @if $variant == 'bootstrap' {
             --filtering-row-button-size: #{sizable(
-                #{map.get($filtering-row-button-size, 'compact')},
-                #{map.get($filtering-row-button-size, 'cosy')},
-                #{map.get($filtering-row-button-size, 'comfortable')}
-            )};
+                    #{map.get($filtering-row-button-size, 'compact')},
+                    #{map.get($filtering-row-button-size, 'cosy')},
+                    #{map.get($filtering-row-button-size, 'comfortable')}
+                )};
 
             %igx-button-display {
                 min-height: var(--filtering-row-button-size);
@@ -994,7 +1051,11 @@
 /// Uses the 'button' category from the typographic scale.
 /// @group typography
 /// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles.
-@mixin button-typography($categories: (text: 'button')) {
+@mixin button-typography(
+    $categories: (
+        text: 'button',
+    )
+) {
     $text: map.get($categories, 'text');
 
     %igx-button-display {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
new file mode 100644
index 00000000000..53577249ca6
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_contained-button-theme.scss
@@ -0,0 +1,302 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and text colors in contained buttons
+///   $my-button-theme: contained-button-theme(
+///     $foreground: white,
+///     $background: black
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function contained-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-contained-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+        @if map.has-key($button-schema, 'contained') {
+            $button-schema: map.get($button-schema, 'contained');
+        } @else {
+            $button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $foreground {
+        $hover-foreground: var(--foreground);
+    }
+
+    @if not($focus-foreground) and $foreground {
+        $focus-foreground: var(--foreground);
+    }
+
+    @if not($focus-hover-foreground) and $foreground {
+        $focus-hover-foreground: var(--foreground);
+    }
+
+    @if not($focus-visible-foreground) and $foreground {
+        $focus-visible-foreground: var(--foreground);
+    }
+
+    @if not($active-foreground) and $foreground {
+        $active-foreground: var(--foreground);
+    }
+
+    @if not($icon-color-hover) and $icon-color {
+        $icon-color-hover: var(--icon-color);
+    }
+
+    @if not($foreground) and $background {
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.08));
+        }
+    } @else {
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.05));
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-background) and $background {
+            $focus-background: var(--background);
+        }
+    } @else {
+        @if not($focus-background) and $background {
+            $focus-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+    }
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($icon-color-hover) and $hover-background {
+        $icon-color-hover: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-background) and $hover-background {
+        $focus-hover-background: var(--hover-background);
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($focus-visible-background) and $focus-background {
+        $focus-visible-background: var(--focus-background);
+    }
+
+    @if not($focus-visible-foreground) and $focus-visible-background {
+        $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
+    }
+
+    @if $variant == 'fluent' {
+        @if not($focus-visible-border-color) and $focus-visible-foreground {
+            $focus-visible-border-color: var(--focus-visible-foreground);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 0.9));
+        }
+    } @else if $variant == 'material' {
+        @if not($active-background) and $focus-background {
+            $active-background: var(--focus-background);
+        }
+    } @else {
+        @if not($active-background) and $hover-background {
+            $active-background: var(--hover-background);
+        }
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($shadow-color) and $focus-visible-background {
+            $shadow-color: hsla(
+                from var(--focus-visible-background) h s l / 0.5
+            );
+        }
+
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.5);
+        }
+
+        @if not($disabled-icon-color) and $disabled-foreground {
+            $disabled-icon-color: var(--disabled-foreground);
+        }
+
+        @if not($disabled-foreground) and $disabled-background {
+            $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+        }
+
+        @if not($disabled-icon-color) and $disabled-background {
+            $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+        }
+    }
+
+    @if not($resting-shadow) {
+        $resting-elevation: map.get($button-schema, 'resting-elevation');
+        $resting-shadow: elevation($resting-elevation);
+    }
+
+    @if not($hover-shadow) {
+        $hover-elevation: map.get($button-schema, 'hover-elevation');
+        $hover-shadow: elevation($hover-elevation);
+    }
+
+    @if not($focus-shadow) {
+        $focus-elevation: map.get($button-schema, 'focus-elevation');
+        $focus-shadow: elevation($focus-elevation);
+    }
+
+    @if not($active-shadow) {
+        $active-elevation: map.get($button-schema, 'active-elevation');
+        $active-shadow: elevation($active-elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            foreground: $foreground,
+            icon-color: $icon-color,
+            icon-color-hover: $icon-color-hover,
+            hover-background: $hover-background,
+            hover-foreground: $hover-foreground,
+            focus-background: $focus-background,
+            focus-foreground: $focus-foreground,
+            focus-hover-background: $focus-hover-background,
+            focus-hover-foreground: $focus-hover-foreground,
+            focus-visible-background: $focus-visible-background,
+            focus-visible-foreground: $focus-visible-foreground,
+            active-background: $active-background,
+            active-foreground: $active-foreground,
+            border-radius: $border-radius,
+            border-color: $border-color,
+            hover-border-color: $hover-border-color,
+            focus-border-color: $focus-border-color,
+            focus-visible-border-color: $focus-visible-border-color,
+            active-border-color: $active-border-color,
+            shadow-color: $shadow-color,
+            resting-shadow: $resting-shadow,
+            hover-shadow: $hover-shadow,
+            focus-shadow: $focus-shadow,
+            active-shadow: $active-shadow,
+            disabled-background: $disabled-background,
+            disabled-foreground: $disabled-foreground,
+            disabled-icon-color: $disabled-icon-color,
+            disabled-border-color: $disabled-border-color,
+            size: $size,
+        )
+    );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
new file mode 100644
index 00000000000..c42835c4037
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_fab-button-theme.scss
@@ -0,0 +1,296 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the background and text colors in fab buttons
+///   $my-button-theme: fab-button-theme(
+///     $foreground: white,
+///     $background: black
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function fab-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-fab-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+        @if map.has-key($button-schema, 'fab') {
+            $button-schema: map.get($button-schema, 'fab');
+        } @else {
+            $button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($foreground) and $background {
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($icon-color) and $background {
+        $icon-color: adaptive-contrast(var(--background));
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.08));
+        }
+    } @else {
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.05));
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-background) and $background {
+            $focus-background: var(--background);
+        }
+    } @else {
+        @if not($focus-background) and $background {
+            $focus-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+    }
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: if(
+            $foreground,
+            var(--foreground),
+            adaptive-contrast(var(--hover-background))
+        );
+    }
+
+    @if not($icon-color-hover) and $hover-background {
+        $icon-color-hover: if(
+            $icon-color,
+            var(--icon-color),
+            adaptive-contrast(var(--hover-background))
+        );
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: if(
+            $foreground,
+            var(--foreground),
+            adaptive-contrast(var(--focus-background))
+        );
+    }
+
+    @if not($focus-hover-background) and $hover-background {
+        $focus-hover-background: var(--hover-background);
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: if(
+            $foreground,
+            var(--foreground),
+            adaptive-contrast(var(--focus-hover-background))
+        );
+    }
+
+    @if not($focus-visible-background) and $focus-background {
+        $focus-visible-background: var(--focus-background);
+    }
+
+    @if not($focus-visible-foreground) and $focus-visible-background {
+        $focus-visible-foreground: adaptive-contrast(
+            var(--focus-visible-background)
+        );
+    }
+
+    @if $variant == 'fluent' {
+        @if not($focus-visible-border-color) and $focus-visible-foreground {
+            $focus-visible-border-color: var(--focus-visible-foreground);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 0.9));
+        }
+    } @else if $variant == 'material' {
+        @if not($active-background) and $focus-background {
+            $active-background: var(--focus-background);
+        }
+    } @else {
+        @if not($active-background) and $hover-background {
+            $active-background: var(--hover-background);
+        }
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($shadow-color) and $focus-visible-background {
+            $shadow-color: hsla(
+                from var(--focus-visible-background) h s l / 0.5
+            );
+        }
+
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.5);
+        }
+
+        @if not($disabled-icon-color) and $disabled-foreground {
+            $disabled-icon-color: var(--disabled-foreground);
+        }
+
+        @if not($disabled-foreground) and $disabled-background {
+            $disabled-foreground: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+        }
+
+        @if not($disabled-icon-color) and $disabled-background {
+            $disabled-icon-color: hsla(from adaptive-contrast(var(--disabled-background)) h s l / 0.5);
+        }
+    }
+
+    @if not($resting-shadow) {
+        $resting-elevation: map.get($button-schema, 'resting-elevation');
+        $resting-shadow: elevation($resting-elevation);
+    }
+
+    @if not($hover-shadow) {
+        $hover-elevation: map.get($button-schema, 'hover-elevation');
+        $hover-shadow: elevation($hover-elevation);
+    }
+
+    @if not($focus-shadow) {
+        $focus-elevation: map.get($button-schema, 'focus-elevation');
+        $focus-shadow: elevation($focus-elevation);
+    }
+
+    @if not($active-shadow) {
+        $active-elevation: map.get($button-schema, 'active-elevation');
+        $active-shadow: elevation($active-elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            foreground: $foreground,
+            icon-color: $icon-color,
+            icon-color-hover: $icon-color-hover,
+            hover-background: $hover-background,
+            hover-foreground: $hover-foreground,
+            focus-background: $focus-background,
+            focus-foreground: $focus-foreground,
+            focus-hover-background: $focus-hover-background,
+            focus-hover-foreground: $focus-hover-foreground,
+            focus-visible-background: $focus-visible-background,
+            focus-visible-foreground: $focus-visible-foreground,
+            active-background: $active-background,
+            active-foreground: $active-foreground,
+            border-radius: $border-radius,
+            border-color: $border-color,
+            hover-border-color: $hover-border-color,
+            focus-border-color: $focus-border-color,
+            focus-visible-border-color: $focus-visible-border-color,
+            active-border-color: $active-border-color,
+            shadow-color: $shadow-color,
+            resting-shadow: $resting-shadow,
+            hover-shadow: $hover-shadow,
+            focus-shadow: $focus-shadow,
+            active-shadow: $active-shadow,
+            disabled-background: $disabled-background,
+            disabled-foreground: $disabled-foreground,
+            disabled-icon-color: $disabled-icon-color,
+            disabled-border-color: $disabled-border-color,
+            size: $size,
+        )
+    );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
new file mode 100644
index 00000000000..8a9a5c98779
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_flat-button-theme.scss
@@ -0,0 +1,356 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text colors in flat buttons
+///   $my-button-theme: flat-button-theme(
+///     $foreground: black,
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function flat-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-flat-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+
+        @if map.has-key($button-schema, 'flat') {
+            $button-schema: map.get($button-schema, 'flat');
+        } @else {
+            $button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($icon-color-hover) and $hover-foreground {
+        $icon-color-hover: var(--hover-foreground);
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if not($focus-visible-background) and $focus-background {
+        $focus-visible-background: var(--focus-background);
+    }
+
+    @if not($focus-visible-foreground) and $focus-visible-background {
+        $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
+    }
+
+    @if not($focus-visible-border-color) and $focus-border-color {
+        $focus-visible-border-color: var(--focus-border-color);
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.32);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.16);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+        }
+
+        @if not($icon-color-hover) and $hover-foreground {
+            $icon-color-hover: var(--hover-foreground);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: hsla(
+                from var(--focus-hover-background) h s l / 1
+            );
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: hsla(from var(--active-background) h s l / 1);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-visible-background) and $foreground {
+                $focus-visible-background: hsla(
+                    from var(--foreground) h s l / 0.16
+                );
+            }
+
+            @if not($focus-visible-foreground) and $focus-visible-background {
+                $focus-visible-foreground: hsla(
+                    from var(--focus-visible-background) h s l / 1
+                );
+            }
+        } @else {
+            @if not($focus-visible-foreground) and $focus-foreground {
+                $focus-visible-foreground: var(--focus-foreground);
+            }
+        }
+
+        @if $variant == 'fluent' {
+            @if not($focus-visible-border-color) and $focus-visible-foreground {
+                $focus-visible-border-color: var(--focus-visible-foreground);
+            }
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($icon-color-hover) and $hover-foreground {
+            $icon-color-hover: var(--hover-foreground);
+        }
+
+        @if $variant == 'bootstrap' {
+            @if not($focus-foreground) and $foreground {
+                $focus-foreground: hsl(
+                    from var(--foreground) h s calc(l * 0.7)
+                );
+            }
+        } @else {
+            @if not($focus-foreground) and $foreground {
+                $focus-foreground: hsl(
+                    from var(--foreground) h s calc(l * 0.9)
+                );
+            }
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: hsl(
+                from var(--foreground) h s calc(l * 0.9)
+            );
+        }
+
+        @if not($focus-visible-foreground) and $foreground {
+            $focus-visible-foreground: var(--foreground);
+        }
+
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+        }
+
+        @if not($disabled-icon-color) and $disabled-foreground {
+            $disabled-icon-color: var(--disabled-foreground);
+        }
+
+        @if $variant == 'bootstrap' {
+            @if not($active-foreground) and $foreground {
+                $active-foreground: hsl(
+                    from var(--foreground) h s calc(l * 0.7)
+                );
+            }
+
+            @if not($shadow-color) and $focus-visible-foreground {
+                $shadow-color: hsla(
+                    from var(--focus-visible-foreground) h s l / 0.5
+                );
+            }
+        } @else {
+            @if not($active-foreground) and $foreground {
+                $active-foreground: hsl(
+                    from var(--foreground) h s calc(l * 0.9)
+                );
+            }
+
+            @if not($shadow-color) and $focus-visible-foreground {
+                $shadow-color: hsla(
+                    from var(--focus-visible-foreground) h s l / 0.2
+                );
+            }
+        }
+    }
+
+    @if not($resting-shadow) {
+        $resting-elevation: map.get($button-schema, 'resting-elevation');
+        $resting-shadow: elevation($resting-elevation);
+    }
+
+    @if not($hover-shadow) {
+        $hover-elevation: map.get($button-schema, 'hover-elevation');
+        $hover-shadow: elevation($hover-elevation);
+    }
+
+    @if not($focus-shadow) {
+        $focus-elevation: map.get($button-schema, 'focus-elevation');
+        $focus-shadow: elevation($focus-elevation);
+    }
+
+    @if not($active-shadow) {
+        $active-elevation: map.get($button-schema, 'active-elevation');
+        $active-shadow: elevation($active-elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            foreground: $foreground,
+            icon-color: $icon-color,
+            icon-color-hover: $icon-color-hover,
+            hover-background: $hover-background,
+            hover-foreground: $hover-foreground,
+            focus-background: $focus-background,
+            focus-foreground: $focus-foreground,
+            focus-hover-background: $focus-hover-background,
+            focus-hover-foreground: $focus-hover-foreground,
+            focus-visible-background: $focus-visible-background,
+            focus-visible-foreground: $focus-visible-foreground,
+            active-background: $active-background,
+            active-foreground: $active-foreground,
+            border-radius: $border-radius,
+            border-color: $border-color,
+            hover-border-color: $hover-border-color,
+            focus-border-color: $focus-border-color,
+            focus-visible-border-color: $focus-visible-border-color,
+            active-border-color: $active-border-color,
+            shadow-color: $shadow-color,
+            resting-shadow: $resting-shadow,
+            hover-shadow: $hover-shadow,
+            focus-shadow: $focus-shadow,
+            active-shadow: $active-shadow,
+            disabled-background: $disabled-background,
+            disabled-foreground: $disabled-foreground,
+            disabled-icon-color: $disabled-icon-color,
+            disabled-border-color: $disabled-border-color,
+            size: $size,
+        )
+    );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
new file mode 100644
index 00000000000..895b516e89f
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/button/_outlined-button-theme.scss
@@ -0,0 +1,419 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+////
+/// @group themes
+/// @access public
+/// @author <a href="https://github.com/desig9stein" target="_blank">Marin Popov</a>
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+////
+
+/// If only background color is specified, text/icon color
+/// will be assigned automatically to a contrasting color.
+/// Does ___not___ apply for disabled state colors.
+/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component.
+/// @param {Color} $background [null] - The background color of the button.
+/// @param {Color} $foreground [null] - The text color of the button.
+/// @param {Color} $icon-color [null] - The icon color in the button.
+/// @param {Color} $icon-color-hover [null] - The icon color in the button on hover.
+/// @param {Color} $hover-background [null] - The hover background color of the button.
+/// @param {Color} $hover-foreground [null] - The hover text color of the button.
+/// @param {Color} $focus-background [null] - The focus background color of the button.
+/// @param {Color} $focus-foreground [null] - The focus text color of the button.
+/// @param {Color} $focus-hover-background [null] - The background color on focus hovered state of the button.
+/// @param {Color} $focus-hover-foreground [null] - The text color on focus hovered state of the button.
+/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.
+/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.
+/// @param {Color} $active-background [null] - The active background of the button.
+/// @param {Color} $active-foreground [null] - The active text color of the button.
+/// @param {List} $border-radius [null] - The border radius of the button.
+/// @param {Color} $border-color [null] - The border color of the button.
+/// @param {Color} $hover-border-color [null] - The hover border color of the button.
+/// @param {Color} $focus-border-color [null] - The focus border color of the button.
+/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.
+/// @param {Color} $active-border-color [null] - The active border color of the button.
+/// @param {Color} $shadow-color [null] - The shadow color of the button.
+/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.
+/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.
+/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.
+/// @param {Color} $disabled-background [null] - The disabled background color of the button.
+/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.
+/// @param {Color} $disabled-icon-color [null] - The disabled icon color of the button.
+/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.
+///
+/// @requires $light-material-schema
+///
+/// @example scss Change the text colors in outlined buttons
+///   $my-button-theme: outlined-button-theme(
+///     $foreground: black,
+///   );
+///   // Pass the theme to the css-vars() mixin
+///   @include css-vars($my-button-theme);
+@function outlined-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $icon-color: $foreground,
+    $icon-color-hover: $hover-foreground,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $focus-visible-background: null,
+    $focus-visible-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $hover-border-color: null,
+    $focus-border-color: null,
+    $focus-visible-border-color: null,
+    $active-border-color: null,
+
+    $shadow-color: null,
+
+    $resting-shadow: null,
+    $hover-shadow: null,
+    $focus-shadow: null,
+    $active-shadow: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-icon-color: $disabled-foreground,
+    $disabled-border-color: null,
+    $size: null
+) {
+    $name: 'igx-outlined-button';
+    $button-schema: ();
+
+    @if map.has-key($schema, 'button') {
+        $button-schema: map.get($schema, 'button');
+        @if map.has-key($button-schema, 'outlined') {
+            $button-schema: map.get($button-schema, 'outlined');
+        } @else {
+            $button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($icon-color-hover) and $hover-foreground {
+        $icon-color-hover: var(--hover-foreground);
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if not($focus-visible-background) and $focus-background {
+        $focus-visible-background: var(--focus-background);
+    }
+
+    @if not($focus-visible-foreground) and $focus-visible-background {
+        $focus-visible-foreground: adaptive-contrast(var(--focus-visible-background));
+    }
+
+    @if not($focus-visible-border-color) and $focus-border-color {
+        $focus-visible-border-color: var(--focus-border-color);
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.32);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.16);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: hsla(from var(--hover-background) h s l / 1);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: hsla(from var(--focus-background) h s l / 1);
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: hsla(
+                from var(--focus-hover-background) h s l / 1
+            );
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: hsla(from var(--active-background) h s l / 1);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-visible-background) and $foreground {
+                $focus-visible-background: hsla(
+                    from var(--foreground) h s l / 0.16
+                );
+            }
+
+            @if not($focus-visible-foreground) and $focus-visible-background {
+                $focus-visible-foreground: hsla(
+                    from var(--focus-visible-background) h s l / 1
+                );
+            }
+        } @else {
+            @if not($focus-visible-foreground) and $focus-foreground {
+                $focus-visible-foreground: var(--focus-foreground);
+            }
+        }
+
+        @if $variant == 'fluent' {
+            @if not($focus-visible-border-color) and $focus-visible-foreground {
+                $focus-visible-border-color: var(--focus-visible-foreground);
+            }
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: hsl(
+                from var(--foreground) h s calc(l * 0.9)
+            );
+        }
+
+        @if not($focus-visible-foreground) and $foreground {
+            $focus-visible-foreground: var(--foreground);
+        }
+
+        @if not($active-foreground) and $foreground {
+            $active-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($shadow-color) and $focus-visible-foreground {
+            $shadow-color: hsla(
+                from var(--focus-visible-foreground) h s l / 0.2
+            );
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($hover-background) and $foreground {
+            $hover-background: var(--foreground);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: adaptive-contrast(var(--hover-background));
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsl(from var(--foreground) h s calc(l * 0.8));
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: adaptive-contrast(var(--focus-background));
+        }
+
+        @if not($focus-hover-background) and $hover-background {
+            $focus-hover-background: hsl(
+                from var(--hover-background) h s calc(l * 0.9)
+            );
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: adaptive-contrast(
+                var(--focus-hover-background)
+            );
+        }
+
+        @if not($focus-visible-background) and $hover-background {
+            $focus-visible-background: var(--hover-background);
+        }
+
+        @if not($focus-visible-foreground) and $focus-visible-background {
+            $focus-visible-foreground: adaptive-contrast(
+                var(--focus-visible-background)
+            );
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: adaptive-contrast(var(--active-background));
+        }
+
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsl(from (var(--foreground) h s l / 0.5));
+        }
+
+        @if not($disabled-icon-color) and $disabled-foreground {
+            $disabled-icon-color: var(--disabled-foreground);
+        }
+
+        @if not($disabled-border-color) and $disabled-foreground {
+            $disabled-border-color: var(--disabled-foreground);
+        }
+
+        @if not($hover-border-color) and $hover-background {
+            $hover-border-color: var(--hover-background);
+        }
+
+        @if not($focus-border-color) and $focus-background {
+            $focus-border-color: var(--focus-background);
+        }
+
+        @if not($focus-visible-border-color) and $focus-visible-background {
+            $focus-visible-border-color: var(--focus-visible-background);
+        }
+
+        @if not($active-border-color) and $active-background {
+            $active-border-color: var(--active-background);
+        }
+
+        @if not($shadow-color) and $focus-visible-background {
+            $shadow-color: hsla(
+                from var(--focus-visible-background) h s l / 0.5
+            );
+        }
+    }
+
+    @if not($icon-color-hover) and $hover-foreground {
+        $icon-color-hover: var(--hover-foreground);
+    }
+
+    @if variant != 'bootstrap' {
+        @if not($border-color) and $foreground {
+            $border-color: var(--foreground);
+        }
+
+        @if not($hover-border-color) and $hover-foreground {
+            $hover-border-color: var(--hover-foreground);
+        }
+
+        @if not($focus-border-color) and $focus-foreground {
+            $focus-border-color: var(--focus-foreground);
+        }
+
+        @if not($focus-visible-border-color) and $focus-visible-foreground {
+            $focus-visible-border-color: var(--focus-visible-foreground);
+        }
+
+        @if not($active-border-color) and $active-foreground {
+            $active-border-color: var(--active-foreground);
+        }
+    }
+
+    @if not($resting-shadow) {
+        $resting-elevation: map.get($button-schema, 'resting-elevation');
+        $resting-shadow: elevation($resting-elevation);
+    }
+
+    @if not($hover-shadow) {
+        $hover-elevation: map.get($button-schema, 'hover-elevation');
+        $hover-shadow: elevation($hover-elevation);
+    }
+
+    @if not($focus-shadow) {
+        $focus-elevation: map.get($button-schema, 'focus-elevation');
+        $focus-shadow: elevation($focus-elevation);
+    }
+
+    @if not($active-shadow) {
+        $active-elevation: map.get($button-schema, 'active-elevation');
+        $active-shadow: elevation($active-elevation);
+    }
+
+    @return extend(
+        $theme,
+        (
+            name: $name,
+            background: $background,
+            foreground: $foreground,
+            icon-color: $icon-color,
+            icon-color-hover: $icon-color-hover,
+            hover-background: $hover-background,
+            hover-foreground: $hover-foreground,
+            focus-background: $focus-background,
+            focus-foreground: $focus-foreground,
+            focus-hover-background: $focus-hover-background,
+            focus-hover-foreground: $focus-hover-foreground,
+            focus-visible-background: $focus-visible-background,
+            focus-visible-foreground: $focus-visible-foreground,
+            active-background: $active-background,
+            active-foreground: $active-foreground,
+            border-radius: $border-radius,
+            border-color: $border-color,
+            hover-border-color: $hover-border-color,
+            focus-border-color: $focus-border-color,
+            focus-visible-border-color: $focus-visible-border-color,
+            active-border-color: $active-border-color,
+            shadow-color: $shadow-color,
+            resting-shadow: $resting-shadow,
+            hover-shadow: $hover-shadow,
+            focus-shadow: $focus-shadow,
+            active-shadow: $active-shadow,
+            disabled-background: $disabled-background,
+            disabled-foreground: $disabled-foreground,
+            disabled-icon-color: $disabled-icon-color,
+            disabled-border-color: $disabled-border-color,
+            size: $size,
+        )
+    );
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
index cf254985f27..0e0ba2c8ca2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss
@@ -328,195 +328,589 @@
     }
 
     $theme: digest-schema($calendar-schema);
-    $meta: map.get($theme, '_meta');
     $variant: map.get($schema, '_meta', 'theme');
 
+    //base start
+    @if not($header-foreground) and $header-background {
+        $header-foreground: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($content-foreground) and $content-background {
+        $content-foreground: adaptive-contrast(var(--content-background));
+    }
+
+    @if not($weekend-color) and $content-foreground {
+        $weekend-color: var(--content-foreground);
+    }
+
+    @if not($inactive-color) and $content-background {
+        $inactive-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5);
+    }
+
+    @if not($weekday-color) and $inactive-color {
+        $weekday-color: var(--inactive-color);
+    }
+
+    @if not($week-number-background) and $content-background {
+        $week-number-background: hsla(from var(--content-background) h s calc(l * 0.8));
+    }
+
+    @if not($week-number-foreground) and $week-number-background {
+        $week-number-foreground: hsla(from adaptive-contrast(var(--week-number-background)) h s l / 0.5);
+    }
+    //base end
+
+    //picker start
     @if $variant == 'bootstrap' {
         @if not($picker-background) and $header-background {
-            @if meta.type-of($header-background) == 'color' {
-                $picker-background: $header-background;
-            }
+            $picker-background: var(--header-background);
+        }
+
+        @if not($picker-hover-foreground) and $picker-background {
+            $picker-hover-foreground: hsla(from adaptive-contrast(var(--picker-background)) h s l / 0.8);
+        }
+
+        @if not($weekday-color) and $header-background {
+            $weekday-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
         }
     } @else {
         @if not($picker-background) and $content-background {
-            @if meta.type-of($picker-background) == 'color' {
-                $picker-background: $content-background;
-            }
+            $picker-background: var(--content-background);
         }
 
-        @if not($weekday-color) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $weekday-color: text-contrast($content-background);
-            }
+        @if not($picker-hover-foreground) and $header-background {
+            $picker-hover-foreground: var(--header-background);
         }
+    }
 
-        @if not($navigation-color) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $navigation-color: text-contrast($content-background);
-            }
+    @if not($picker-foreground) and $picker-background {
+        $picker-foreground: adaptive-contrast(var(--picker-background));
+    }
+
+    @if not($picker-focus-foreground) and $picker-hover-foreground {
+        $picker-focus-foreground: var(--picker-hover-foreground);
+    }
+
+    @if not($navigation-color) and $picker-background {
+        $navigation-color: adaptive-contrast(var(--picker-background));
+    }
+
+    @if not($navigation-hover-color) and $picker-hover-foreground {
+        $navigation-hover-color: var(--picker-hover-foreground);
+    }
+
+    @if not($navigation-focus-color) and $navigation-hover-color {
+        $navigation-focus-color: var(--navigation-hover-color);
+    }
+    //picker end
+
+    //date start
+    @if not($date-hover-background) and $content-background {
+        $date-hover-background: hsl(from var(--content-background) h s calc(l * 0.9));
+    }
+
+    @if not($date-hover-foreground) and $date-hover-background {
+        $date-hover-foreground: adaptive-contrast(var(--date-hover-background));
+    }
+
+    @if not($date-focus-background) and $date-hover-background {
+        $date-focus-background: var(--date-hover-background)
+    }
+
+    @if not($date-focus-foreground) and $date-hover-foreground {
+        $date-focus-foreground: var(--date-hover-foreground);
+    }
+
+    @if not($ym-hover-background) and $date-hover-background {
+        $ym-hover-background: var(--date-hover-background);
+    }
+
+    @if not($ym-hover-foreground) and $ym-hover-background {
+        $ym-hover-foreground: adaptive-contrast(var(--ym-hover-background));
+    }
+    //date end
+
+    //date current start
+    @if $variant == 'indigo' {
+        @if not($date-current-background) and $header-background {
+            $date-current-background: hsla(from var(--header-background) h s l / 0.4);
         }
 
-        @if not($navigation-focus-color) and $navigation-hover-color {
-            @if meta.type-of($navigation-hover-color) == 'color' {
-                $navigation-focus-color: $navigation-hover-color;
-            }
+        @if not($date-current-border-color) and $date-current-background {
+            $date-current-border-color: hsla(from var(--date-current-background) h s l / 0.6);
         }
-    }
 
-    @if not($header-foreground) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-foreground: text-contrast($header-background);
+        @if not($date-current-hover-background) and $date-current-background {
+            $date-current-hover-background: hsl(from var(--date-current-background) h s calc(l * 0.9));
+        }
+
+        @if not($date-current-hover-border-color) and $date-current-border-color {
+            $date-current-hover-border-color: hsl(from var(--date-current-border-color) h s calc(l * 0.9));
+        }
+
+        @if not($date-current-focus-background) and $date-current-hover-background {
+            $date-current-focus-background: var(--date-current-hover-background);
+        }
+
+        @if not($date-current-focus-border-color) and $date-current-hover-border-color {
+            $date-current-focus-border-color: var(--date-current-hover-border-color);
+        }
+
+        @if not($date-current-foreground) and $date-current-background {
+            $date-current-foreground: adaptive-contrast(var(--date-current-background));
+        }
+
+        @if not($date-current-foreground) and $content-foreground {
+            $date-current-foreground: var(--content-foreground);
+        }
+
+        @if not($date-current-hover-foreground) and $date-current-foreground {
+            $date-current-hover-foreground: var(--date-current-foreground);
+        }
+
+        @if not($date-current-focus-foreground) and $date-current-foreground {
+            $date-current-focus-foreground: var(--date-current-foreground);
         }
     }
 
-    @if not($weekend-color) and $content-foreground {
-        @if meta.type-of($content-foreground) == 'color' {
-            $weekend-color: $content-foreground;
+    @if $variant == 'fluent' {
+        @if not($date-current-background) and $header-background {
+            $date-current-background: var(--header-background);
         }
     }
 
-    @if $variant != 'fluent' and $variant != 'bootstrap' {
+    @if $variant == 'material' or $variant == 'bootstrap' {
         @if not($date-current-background) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-current-background: $content-background;
-            }
+            $date-current-background: var(--content-background);
+        }
+    }
+
+    @if $variant != 'indigo' {
+        @if not($date-current-foreground) and $date-current-background {
+            $date-current-foreground: adaptive-contrast(var(--date-current-background));
+        }
+
+        @if not($date-current-hover-background) and $date-hover-background {
+            $date-current-hover-background: var(--date-hover-background);
         }
 
-        @if not($date-current-foreground) and $content-background {
-            @if meta.type-of($content-background) == 'color' {
-                $date-current-foreground: text-contrast($content-background);
+        @if not($date-current-focus-background) and $date-focus-background {
+            $date-current-focus-background: var(--date-focus-background);
+        }
+
+        @if $variant == 'fluent' {
+            @if not($date-current-hover-foreground) and $date-current-background {
+                $date-current-hover-foreground: adaptive-contrast(var(--date-current-background));
+            }
+
+            @if not($date-current-focus-foreground) and $date-current-background {
+                $date-current-focus-foreground: adaptive-contrast(var(--date-current-background));
             }
         }
-    }
 
-    @if not($content-foreground) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $content-foreground: text-contrast($content-background);
+        @if not($date-current-hover-foreground) and $date-current-hover-background {
+            $date-current-hover-foreground: adaptive-contrast(var(--date-current-hover-background));
+        }
+
+        @if not($date-current-focus-foreground) and $date-current-hover-background {
+            $date-current-focus-foreground: adaptive-contrast(var(--date-current-hover-background));
         }
     }
 
-    @if not($weekend-color) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $weekend-color: rgba($content-foreground, .5);
+    @if $variant == 'material' or $variant == 'bootstrap' {
+        @if not($date-current-border-color) and $date-current-foreground {
+            $date-current-border-color: var(--date-current-foreground);
+        }
+
+        @if not($date-current-hover-border-color) and $date-current-hover-foreground {
+            $date-current-hover-border-color: var(--date-current-hover-foreground);
+        }
+
+        @if not($date-current-focus-border-color) and $date-current-focus-foreground {
+            $date-current-focus-border-color: var(--date-current-focus-foreground);
         }
     }
+    //date current end
+
+    //date selected start
 
-    @if not($picker-foreground) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $picker-foreground: text-contrast($content-background);
+    @if $variant == 'fluent' {
+        @if not($date-selected-background) and $date-hover-background {
+            $date-selected-background: var(--date-hover-background);
+        }
+    } @else {
+        @if not($date-selected-background) and $header-background {
+            $date-selected-background: var(--header-background);
         }
     }
 
+    @if not($date-selected-current-background) and $date-selected-background {
+        $date-selected-current-background: var(--date-selected-background);
+    }
+
+    @if not($date-selected-hover-background) and $date-selected-background {
+        $date-selected-hover-background: hsl(from var(--date-selected-background) h s calc(l * 0.9));
+    }
+
+    @if not($date-selected-current-hover-background) and $date-selected-hover-background {
+        $date-selected-current-hover-background: var(--date-selected-hover-background);
+    }
+
+    @if not($date-selected-focus-background) and $date-selected-hover-background {
+        $date-selected-focus-background: var(--date-selected-hover-background);
+    }
+
+    @if not($date-selected-current-focus-background) and $date-selected-focus-background {
+        $date-selected-current-focus-background: var(--date-selected-focus-background);
+    }
+
     @if not($date-selected-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-foreground: text-contrast($date-selected-background);
-        }
+        $date-selected-foreground: adaptive-contrast(var(--date-selected-background));
     }
 
     @if not($date-selected-hover-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-hover-foreground: text-contrast($date-selected-background);
-        }
+        $date-selected-hover-foreground: adaptive-contrast(var(--date-selected-background));
     }
 
     @if not($date-selected-focus-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-focus-foreground: text-contrast($date-selected-background);
-        }
+        $date-selected-focus-foreground: adaptive-contrast(var(--date-selected-background));
     }
 
-    @if not($date-selected-hover-foreground) and $date-selected-hover-background {
-        @if meta.type-of($date-selected-hover-background) == 'color' {
-            $date-selected-hover-foreground: text-contrast($date-selected-hover-background);
+    @if $variant == 'indigo' {
+        @if not($date-selected-current-border-color) and $date-selected-current-background {
+            $date-selected-current-border-color: hsl(from var(--date-selected-current-background) h calc(s * 0.9) calc(l * 1.5));
+        }
+    } @else {
+        @if not($date-selected-current-border-color) and $content-foreground {
+            $date-selected-current-border-color: var(--content-foreground);
         }
     }
 
-    @if not($date-selected-focus-foreground) and $date-selected-focus-background {
-        @if meta.type-of($date-selected-focus-background) == 'color' {
-            $date-selected-focus-foreground: text-contrast($date-selected-focus-background);
-        }
+    @if not($date-selected-current-hover-background) and $date-selected-hover-background {
+        $date-selected-current-hover-background: var(--date-selected-hover-background);
     }
 
-    @if not($date-selected-current-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-foreground: text-contrast($date-selected-background);
-        }
+    @if not($date-selected-current-hover-border-color) and $date-selected-current-border-color {
+        $date-selected-current-hover-border-color: var(--date-selected-current-border-color);
     }
 
-    @if not($date-selected-current-hover-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-hover-foreground: text-contrast($date-selected-background);
+    @if $variant == 'fluent' {
+        @if not($date-selected-current-foreground) and $date-current-background {
+            $date-selected-current-foreground: adaptive-contrast(var(--date-current-background));
         }
-    }
 
-    @if not($date-selected-current-focus-foreground) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-focus-foreground: text-contrast($date-selected-background);
+        @if not($date-selected-current-hover-foreground) and $date-current-background {
+            $date-selected-current-hover-foreground: adaptive-contrast(var(--date-current-background));
         }
-    }
 
-    @if not($date-selected-current-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-background: $date-selected-background;
+        @if not($date-selected-current-focus-foreground) and $date-current-background {
+            $date-selected-current-focus-foreground: adaptive-contrast(var(--date-current-background));
+        }
+    } @else {
+        @if not($date-selected-current-foreground) and $date-selected-background {
+            $date-selected-current-foreground: adaptive-contrast(var(--date-selected-background));
         }
-    }
 
-    @if not($date-selected-current-hover-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-hover-background: $date-selected-background;
+        @if not($date-selected-current-hover-foreground) and $date-selected-background {
+            $date-selected-current-hover-foreground: adaptive-contrast(var(--date-selected-background));
         }
-    }
 
-    @if not($date-selected-current-focus-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-focus-background: $date-selected-background;
+        @if not($date-selected-current-focus-foreground) and $date-selected-current-focus-background {
+            $date-selected-current-focus-foreground: adaptive-contrast(var(--date-selected-current-focus-background));
         }
     }
 
-    @if not($date-selected-current-focus-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-current-focus-background: $date-selected-background;
-        }
+    @if not($date-selected-current-focus-border-color) and $date-selected-current-hover-border-color {
+        $date-selected-current-focus-border-color: var(--date-selected-current-hover-border-color);
     }
+    //date selected end
 
-    @if not($date-selected-hover-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-hover-background: $date-selected-background;
+    //date special start
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($date-special-foreground) and $content-foreground {
+            $date-special-foreground: var(--content-foreground);
         }
-    }
 
-    @if not($date-selected-focus-background) and $date-selected-background {
-        @if meta.type-of($date-selected-background) == 'color' {
-            $date-selected-focus-background: $date-selected-background;
+        @if not($date-special-border-color) and $header-background {
+            $date-special-border-color: var(--header-background);
+        }
+
+        @if not($date-special-hover-border-color) and $date-special-border-color {
+            $date-special-hover-border-color: var(--date-special-border-color);
+        }
+
+        @if not($date-special-focus-foreground) and $date-special-foreground {
+            $date-special-focus-foreground: var(--date-special-foreground);
+        }
+    } @else {
+        @if not($date-special-foreground) and $header-background {
+            $date-special-foreground: var(--header-background);
+        }
+
+        @if not($date-special-border-color) and $date-special-foreground {
+            $date-special-border-color: var(--date-special-foreground);
+        }
+
+        @if not($date-special-hover-foreground) and $date-special-foreground {
+            $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+        }
+
+        @if not($date-special-hover-border-color) and $date-special-hover-foreground {
+            $date-special-hover-border-color: var(--date-special-hover-foreground);
+        }
+
+        @if not($date-special-focus-foreground) and $date-special-hover-border-color {
+            $date-special-focus-foreground: var(--date-special-hover-border-color);
         }
     }
 
-    @if not($date-selected-current-hover-background) and $date-selected-hover-background {
-        @if meta.type-of($date-selected-hover-background) == 'color' {
-            $date-selected-current-hover-background: $date-selected-hover-background;
+    @if not($date-special-hover-foreground) and $date-special-foreground {
+        $date-special-hover-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+    }
+
+    @if not($date-special-hover-background) and $date-hover-background {
+        $date-special-hover-background: var(--date-hover-background);
+    }
+
+    @if not($date-special-focus-background) and $date-focus-background {
+        $date-special-focus-background: var(--date-focus-background);
+    }
+
+    @if not($date-special-range-focus-background) and $date-special-focus-background {
+        $date-special-range-focus-background: var(--date-special-focus-background);
+    }
+
+    @if $variant != 'fluent' {
+        @if not($date-selected-special-border-color) and $date-selected-foreground {
+            $date-selected-special-border-color: var(--date-selected-foreground);
+        }
+
+        @if not($date-selected-special-hover-border-color) and $date-selected-hover-foreground {
+            $date-selected-special-hover-border-color: var(--date-selected-hover-foreground);
+        }
+
+        @if not($date-selected-special-focus-border-color) and $date-selected-focus-foreground {
+            $date-selected-special-focus-border-color: var(--date-selected-focus-foreground);
+        }
+    } @else {
+        @if not($date-selected-special-border-color) and $date-special-border-color {
+            $date-selected-special-border-color: var(--date-special-border-color);
+        }
+
+        @if not($date-selected-special-hover-border-color) and $date-selected-special-border-color {
+            $date-selected-special-hover-border-color: var(--date-selected-special-border-color);
+        }
+
+        @if not($date-selected-special-focus-border-color) and $date-selected-special-border-color {
+            $date-selected-special-focus-border-color: var(--date-selected-special-border-color);
         }
     }
+    //date special end
 
-    @if not($date-selected-current-focus-background) and $date-selected-focus-background {
-        @if meta.type-of($date-selected-focus-background) == 'color' {
-            $date-selected-current-focus-background: $date-selected-focus-background;
+    //calendar views start
+    @if $variant != 'fluent' {
+        @if not($ym-selected-background) and $header-background {
+            $ym-selected-background: var(--header-background);
+        }
+
+        @if not($ym-selected-hover-background) and $ym-selected-background {
+            $ym-selected-hover-background: hsl(from var(--ym-selected-background) h s calc(l * 0.9));
+        }
+
+        @if not($ym-current-background) and $date-current-background {
+            $ym-current-background: var(--date-current-background);
+        }
+
+        @if not($ym-current-hover-background) and $date-current-hover-background {
+            $ym-current-hover-background: var(--date-current-hover-background);
+        }
+
+        @if not($ym-current-outline-color) and $date-current-border-color {
+            $ym-current-outline-color: var(--date-current-border-color);
+        }
+
+        @if not($ym-current-outline-hover-color) and $ym-current-outline-color {
+            $ym-current-outline-hover-color: var(--ym-current-outline-color);
+        }
+
+        @if not($ym-current-outline-focus-color) and $ym-current-outline-hover-color {
+            $ym-current-outline-focus-color: var(--ym-current-outline-hover-color);
+        }
+
+        @if not($ym-selected-current-outline-color) and $ym-current-outline-color {
+            $ym-selected-current-outline-color: var(--ym-current-outline-color);
+        }
+
+        @if not($ym-selected-current-outline-hover-color) and $ym-current-outline-hover-color {
+            $ym-selected-current-outline-hover-color: var(--ym-current-outline-hover-color);
+        }
+
+        @if not($ym-selected-current-outline-focus-color) and $ym-current-outline-focus-color {
+            $ym-selected-current-outline-focus-color: var(--ym-current-outline-focus-color);
+        }
+    } @else {
+        @if not($ym-selected-background) and $header-background {
+            $ym-selected-background: hsla(from var(--header-background) h s l / 0.3);
+        }
+
+        @if not($ym-current-background) and $date-selected-background {
+            $ym-current-background: var(--date-selected-background);
+        }
+
+        @if not($ym-current-hover-background) and $ym-current-background {
+            $ym-current-hover-background: hsl(from var(--ym-current-background) h s calc(l * 0.9));
+        }
+
+        @if not($ym-selected-hover-background) and $ym-selected-background {
+            $ym-selected-hover-background: hsla(from var(--ym-selected-background) h s calc(l * 0.9) / 0.5);
+        }
+
+        @if not($ym-selected-current-outline-color) and $ym-selected-current-foreground {
+            $ym-selected-current-outline-color: var(--ym-selected-current-foreground);
+        }
+
+        @if not($ym-selected-foreground) and $content-foreground {
+            $ym-selected-foreground: var(--content-foreground);
+        }
+
+        @if not($ym-selected-hover-foreground) and $ym-selected-foreground {
+            $ym-selected-hover-foreground: var(--content-foreground);
         }
     }
 
-    @if not($ym-hover-foreground) and $ym-hover-background {
-        @if meta.type-of($ym-hover-background) == 'color' {
-            $ym-hover-foreground: text-contrast($ym-hover-background);
+    @if not($ym-selected-current-background) and $ym-selected-background {
+        $ym-selected-current-background: var(--ym-selected-background);
+    }
+
+    @if not($ym-selected-current-hover-background) and $ym-selected-hover-background {
+        $ym-selected-current-hover-background: var(--ym-selected-hover-background);
+    }
+
+    @if not($ym-current-foreground) and $ym-current-background {
+        $ym-current-foreground: adaptive-contrast(var(--ym-current-background));
+    }
+
+    @if not($ym-current-hover-foreground) and $ym-current-hover-background {
+        $ym-current-hover-foreground: adaptive-contrast(var(--ym-current-hover-background));
+    }
+
+    @if not($ym-selected-current-foreground) and $ym-selected-current-background {
+        $ym-selected-current-foreground: adaptive-contrast(var(--ym-selected-current-background));
+    }
+
+    @if not($ym-selected-current-hover-foreground) and $ym-selected-current-hover-background {
+        $ym-selected-current-hover-foreground: adaptive-contrast(var(--ym-selected-current-hover-background));
+    }
+    //calendar views end
+
+    //date range start
+    @if not($date-selected-range-foreground) and $content-foreground {
+        $date-selected-range-foreground: var(--content-foreground);
+    }
+
+    @if $variant == 'fluent' {
+        @if not($date-selected-range-background) and $date-selected-background {
+            $date-selected-range-background: var(--date-selected-background);
+        }
+
+        @if not($date-selected-current-range-background) and $date-selected-range-background {
+            $date-selected-current-range-background: var(--date-selected-range-background);
+        }
+
+        @if not($date-selected-range-hover-background) and $date-selected-hover-background {
+            $date-selected-range-hover-background: var(--date-selected-hover-background);
+        }
+
+        @if not($date-selected-range-focus-background) and $date-selected-hover-background {
+            $date-selected-range-focus-background: var(--date-selected-hover-background);
+        }
+
+        @if not($date-selected-current-range-hover-foreground) and $date-current-background {
+            $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-current-background));
+        }
+
+        @if not($date-selected-current-range-focus-background) and $date-current-background {
+            $date-selected-current-range-focus-background: adaptive-contrast(var(--date-current-background));
+        }
+    } @else {
+        @if not($date-selected-range-background) and $date-selected-background {
+            $date-selected-range-background: hsla(from var(--date-selected-background) h s l / 0.24);
+        }
+
+         @if not($date-range-preview-border-color) and $date-selected-background {
+            $date-range-preview-border-color: var(--date-selected-background);
         }
+
+        @if not($date-selected-current-range-hover-foreground) and $date-selected-current-range-hover-background {
+            $date-selected-current-range-hover-foreground: adaptive-contrast(var(--date-selected-current-range-hover-background));
+        }
+
+        @if not($date-selected-current-range-hover-foreground) and $content-foreground {
+            $date-selected-current-range-hover-foreground: var(--content-foreground);
+        }
+
+        @if not($date-selected-current-range-focus-background) and $date-selected-current-range-hover-background {
+            $date-selected-current-range-focus-background: var(--date-selected-current-range-hover-background);
+        }
+    }
+
+    @if not($date-selected-range-hover-background) and $date-hover-background {
+        $date-selected-range-hover-background: var(--date-hover-background);
+    }
+
+    @if not($date-selected-range-focus-background) and $date-selected-range-hover-background {
+        $date-selected-range-focus-background: var(--date-selected-range-hover-background);
+    }
+
+    @if not($date-selected-range-hover-foreground) and $date-selected-range-hover-background {
+        $date-selected-range-hover-foreground: adaptive-contrast(hsla(from var(--date-selected-range-hover-background) h s l / 1));
+    }
+
+    @if not($date-selected-range-focus-foreground) and $date-selected-range-focus-background {
+        $date-selected-range-focus-foreground: adaptive-contrast(hsla(from var(--date-selected-range-focus-background) h s l / 1));
     }
 
-    @if not($ym-current-hover-foreground) and $ym-hover-background {
-        @if meta.type-of($ym-hover-background) == 'color' {
-            $ym-current-hover-foreground: text-contrast($ym-hover-background);
+    @if $variant == 'indigo' {
+        @if not($date-selected-current-range-background) and $date-selected-background {
+            $date-selected-current-range-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.12);
+        }
+
+        @if not($date-selected-current-range-hover-background) and $date-selected-background {
+            $date-selected-current-range-hover-background: hsla(from var(--date-selected-background) h s calc(l * 0.9) / 0.24);
+        }
+
+        @if not($date-selected-current-range-foreground) and $date-current-background {
+            $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
+        }
+    } @else {
+        @if not($date-selected-current-range-foreground) and $date-current-background {
+            $date-selected-current-range-foreground: adaptive-contrast(var(--date-current-background));
+        }
+
+        @if not($date-selected-current-range-foreground) and $content-foreground {
+            $date-selected-current-range-foreground: var(--content-foreground);
         }
     }
 
-    @if not($week-number-foreground) and $week-number-background {
-        $week-number-foreground: text-contrast($week-number-background);
+    @if not($date-special-range-foreground) and $date-special-foreground {
+        $date-special-range-foreground: hsl(from var(--date-special-foreground) h s calc(l * 0.8));
+    }
+
+    @if not($date-special-range-border-color) and $date-special-range-foreground {
+        $date-special-range-border-color: var(--date-special-range-foreground);
+    }
+
+    @if not($date-special-range-hover-background) and $date-selected-range-hover-background {
+        $date-special-range-hover-background: var(--date-selected-range-hover-background);
+    }
+    //date range end
+
+    @if not($date-disabled-foreground) and $content-background {
+        $date-disabled-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3);
+    }
+
+    @if not($date-disabled-range-foreground) and $date-selected-range-background {
+        $date-disabled-range-foreground: hsla(from adaptive-contrast(var(--content-background)) h s l / .3);
     }
 
     @return extend($theme, (
@@ -658,10 +1052,6 @@
         actions-divider-color: $actions-divider-color,
         size: $size,
         inner-size: $inner-size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -671,7 +1061,7 @@
 @mixin calendar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
 
     $cal-picker-padding: map.get((
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
index 91b849dd895..4955db6dbee 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss
@@ -52,28 +52,21 @@
     }
 
     $theme: digest-schema($card-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($header-text-color) and $background {
-        $header-text-color: text-contrast($background);
+        $header-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($actions-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $actions-text-color: rgba(text-contrast($background), .5);
-        }
+        $actions-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($content-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $content-text-color: rgba(text-contrast($background), .7);
-        }
+        $content-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
     }
 
     @if not($subtitle-text-color) and $background {
-        @if meta.type-of($background) == 'color' {
-            $subtitle-text-color: rgba(text-contrast($background), .7);
-        }
+        $subtitle-text-color: hsl(from adaptive-contrast(var(--background)) h s calc(l * 0.85));
     }
 
     @if not($resting-shadow) {
@@ -97,10 +90,6 @@
         actions-text-color: $actions-text-color,
         resting-shadow: $resting-shadow,
         hover-shadow: $hover-shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -110,7 +99,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin card($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-material-theme: $variant != 'material';
 
     $card-heading-padding: rem(16px, 16px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
index d90e486d0b9..d4515cf9683 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss
@@ -21,9 +21,13 @@
 /// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.
 /// @param {Color} $button-border-color [null] - The previous/next buttons idle border color.
 /// @param {Color} $button-hover-border-color [null] - The previous/next buttons hover border color.
+/// @param {Color} $button-focus-border-color [null] - The navigation buttons border color on focus.
 /// @param {Color} $button-disabled-border-color [null] - The previous/next buttons disabled border color.
+/// @param {Color} $indicator-background [null] - The indicators container background color.
+/// @param {Color} $label-indicator-background [null] - The label indicator container background color.
 /// @param {Color} $indicator-dot-color [null] - The idle indicator dot color.
 /// @param {Color} $indicator-hover-dot-color [null] - The hover indicator dot color.
+/// @param {Color} $indicator-focus-color [null] - The indicators border and dot color on focus.
 /// @param {Color} $indicator-border-color [null] - The idle indicator border color.
 /// @param {Color} $indicator-active-dot-color [null] - The active indicator dot color.
 /// @param {Color} $indicator-active-border-color [null] - The active indicator border color.
@@ -54,13 +58,18 @@
     $button-disabled-background: null,
     $button-arrow-color: null,
     $button-hover-arrow-color: null,
+    $button-focus-arrow-color: null,
     $button-disabled-arrow-color: null,
     $button-border-color: null,
     $button-hover-border-color: null,
+    $button-focus-border-color: null,
     $button-disabled-border-color: null,
 
+    $indicator-background: null,
+    $label-indicator-background: null,
     $indicator-dot-color: null,
     $indicator-hover-dot-color: null,
+    $indicator-focus-color: null,
     $indicator-border-color: null,
     $indicator-active-dot-color: null,
     $indicator-active-border-color: null,
@@ -76,7 +85,25 @@
     }
 
     $theme: digest-schema($carousel-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'indigo' {
+        @if not($button-hover-background) and $button-background {
+            $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
+
+        @if not($button-border-color) and $button-background {
+            $button-border-color: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
+
+        @if not($button-hover-border-color) and $button-border-color {
+            $button-hover-border-color: hsl(from var(--button-border-color) h s calc(l * 0.9));
+        }
+
+        @if not($indicator-active-dot-color) and not($indicator-background) and $button-background {
+            $indicator-active-dot-color: var(--button-background);
+        }
+    }
 
     @if not($button-shadow) {
         $button-elevation: map.get($carousel-schema, 'button-elevation');
@@ -84,16 +111,80 @@
     }
 
     @if not($button-arrow-color) and $button-background {
-        $button-arrow-color: text-contrast($button-background);
+        $button-arrow-color: hsla(from (adaptive-contrast(var(--button-background)) h s l / 0.85));
+    }
+
+    @if not($button-hover-background) and $button-background {
+        $button-hover-background: var(--button-background);
     }
 
     @if not($button-hover-arrow-color) and $button-hover-background {
-        $button-hover-arrow-color: text-contrast($button-hover-background);
+        $button-hover-arrow-color: adaptive-contrast(var(--button-hover-background));
+    }
+
+    @if not($button-focus-arrow-color) and $button-hover-arrow-color {
+        $button-focus-arrow-color: var(--button-hover-arrow-color);
+    }
+
+    @if not($button-disabled-background) and $button-background {
+        $button-disabled-background: var(--button-background);
     }
 
     @if not($button-disabled-arrow-color) and $button-disabled-background {
-        @if meta.type-of($button-disabled-background) == 'color' {
-            $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);
+        $button-disabled-arrow-color: hsla(from adaptive-contrast(var(--button-disabled-background)) h s l / .4);
+    }
+
+    @if not($indicator-dot-color) and $indicator-background {
+        $indicator-dot-color: hsla(from adaptive-contrast(var(--indicator-background)) h s l / .8);
+    }
+
+    @if not($indicator-hover-dot-color) and $indicator-dot-color {
+        $indicator-hover-dot-color: hsla(from var(--indicator-dot-color) h s l / 1);
+    }
+
+    @if not($indicator-border-color) and $indicator-dot-color {
+        $indicator-border-color: var(--indicator-dot-color);
+    }
+
+    @if not($indicator-active-dot-color) and $indicator-background {
+        $indicator-active-dot-color: hsl(from adaptive-contrast(var(--indicator-background)) h s calc(l * 0.9));
+    }
+
+    @if not($indicator-active-hover-dot-color) and $indicator-active-dot-color {
+        $indicator-active-hover-dot-color: hsl(from var(--indicator-active-dot-color) h s calc(l * 1.1));
+    }
+
+    @if not($indicator-active-border-color) and $indicator-active-dot-color {
+        $indicator-active-border-color: var(--indicator-active-dot-color);
+    }
+
+    @if $variant == 'material' {
+        @if not($button-focus-border-color) and $button-focus-arrow-color {
+            $button-focus-border-color: var(--button-focus-arrow-color);
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($button-focus-border-color) and $button-background {
+            $button-focus-border-color: hsla(from adaptive-contrast(var(--button-background)) h s l / 0.5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($button-focus-border-color) and $indicator-active-dot-color {
+            $button-focus-border-color: var(--indicator-active-dot-color);
+        }
+
+        @if not($indicator-focus-color) and $indicator-active-hover-dot-color {
+            $indicator-focus-color: hsla(from var(--indicator-active-hover-dot-color) h s l / .5);
+        }
+    } @else {
+        @if not($indicator-focus-color) and not($indicator-background) and $button-background {
+            $indicator-focus-color: var(--button-background);
+        }
+
+        @if not($indicator-focus-color) and $indicator-background {
+            $indicator-focus-color: adaptive-contrast(var(--indicator-background));
         }
     }
 
@@ -110,21 +201,22 @@
         button-hover-background: $button-hover-background,
         button-arrow-color: $button-arrow-color,
         button-hover-arrow-color: $button-hover-arrow-color,
+        button-focus-arrow-color: $button-focus-arrow-color,
         button-disabled-arrow-color: $button-disabled-arrow-color,
         button-border-color: $button-border-color,
         button-hover-border-color: $button-hover-border-color,
+        button-focus-border-color: $button-focus-border-color,
         button-disabled-border-color: $button-disabled-border-color,
 
+        indicator-background: $indicator-background,
+        label-indicator-background: $label-indicator-background,
         indicator-dot-color: $indicator-dot-color,
         indicator-hover-dot-color: $indicator-hover-dot-color,
+        indicator-focus-color: $indicator-focus-color,
         indicator-border-color: $indicator-border-color,
         indicator-active-dot-color: $indicator-active-dot-color,
         indicator-active-border-color: $indicator-active-border-color,
         indicator-active-hover-dot-color: $indicator-active-hover-dot-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -139,7 +231,7 @@
     $indicator-border-style: rem(2px) solid;
     $btn-indent: rem(3px);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     %igx-carousel-display {
@@ -206,25 +298,17 @@
             border: rem(2px) solid var-get($theme, 'button-focus-border-color');
 
             igx-icon {
-                color: var-get($theme, 'button-focus-border-color');
+                color: var-get($theme, 'button-focus-arrow-color');
             }
 
             @if $variant == 'bootstrap' {
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'button-focus-border-color');
                 border-color: var-get($theme, 'button-border-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
 
             @if $variant == 'fluent' {
                 border: none;
 
-                igx-icon {
-                    color: var-get($theme, 'indicator-focus-color');
-                }
-
                 &::after {
                     position: absolute;
                     content: '';
@@ -239,10 +323,6 @@
 
             @if $variant == 'indigo' {
                 box-shadow: 0 0 0 rem(3px) var-get($theme, 'indicator-focus-color');
-
-                igx-icon {
-                    color: var-get($theme, 'button-arrow-color');
-                }
             }
         }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
index ea5e85bc339..5c0def5856a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-component.scss
@@ -163,7 +163,7 @@
             @extend %igx-checkbox--focused-bootstrap !optional;
 
             &:hover {
-                @extend %igx-checkbox--focused-hovered !optional;
+                @extend %igx-checkbox--focused-hovered-bootstrap !optional;
             }
         }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
index 4f8f632a66e..48ed1cffa0e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss
@@ -29,8 +29,11 @@
 /// @param {List} $border-radius [null] - The border radius used for checkbox component.
 /// @param {List} $border-radius-ripple [null] - The border radius used for checkbox ripple.
 /// @param {Color} $focus-outline-color [null] - The focus outlined color.
+/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.
+/// @param {Color} $focus-border-color [null] - The focus border color.
 /// @param {Color} $error-color [null] - The border and fill colors in invalid state.
 /// @param {Color} $error-color-hover [null] - The border and fill colors in invalid state on hover.
+/// @param {Color} $focus-outline-color-error [null] - The focus outline error color.
 /// Set to light when the surrounding area is dark.
 ///
 /// @requires $light-material-schema
@@ -58,8 +61,11 @@
     $disabled-color-label: null,
     $border-radius-ripple: null,
     $focus-outline-color: null,
+    $focus-outline-color-focused: null,
+    $focus-border-color: null,
     $error-color: null,
     $error-color-hover: null,
+    $focus-outline-color-error: null,
 ) {
     $name: 'igx-checkbox';
     $checkbox-schema: ();
@@ -71,7 +77,55 @@
     }
 
     $theme: digest-schema($checkbox-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($empty-color-hover) and $empty-color {
+        $empty-color-hover: hsl(from var(--empty-color) h s calc(l * 0.9));
+    }
+
+    @if not($fill-color-hover) and $fill-color {
+        $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+    }
+
+    @if not($tick-color) and $fill-color {
+        $tick-color: adaptive-contrast(var(--fill-color));
+    }
+
+    @if not($label-color-hover) and $label-color {
+        $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-border-color) and $fill-color {
+        $focus-border-color: var(--fill-color);
+    }
+
+    @if not($disabled-indeterminate-color) and $fill-color {
+        $disabled-indeterminate-color: hsla(from var(--fill-color) h s l / 0.5);
+    }
+
+    @if not($error-color-hover) and $error-color {
+        $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-outline-color-error) and $error-color {
+        $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($focus-outline-color) and $fill-color {
+            $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-outline-color) and $empty-color {
+            $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+        }
+
+        @if not($focus-outline-color-focused) and $fill-color {
+            $focus-outline-color-focused: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -91,13 +145,11 @@
         border-radius: $border-radius,
         border-radius-ripple: $border-radius-ripple,
         focus-outline-color: $focus-outline-color,
+        focus-outline-color-focused: $focus-outline-color-focused,
+        focus-border-color: $focus-border-color,
         error-color: $error-color,
         error-color-hover: $error-color-hover,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
+        focus-outline-color-error: $focus-outline-color-error
     ));
 }
 
@@ -106,8 +158,8 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin checkbox($theme) {
     @include css-vars($theme);
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
-    $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';
     $bootstrap-theme: $variant == 'bootstrap';
 
@@ -591,14 +643,14 @@
     %igx-checkbox--focused-bootstrap {
         %cbx-composite {
             border-radius: var-get($theme, 'border-radius');
-            border-color: color($color: 'primary', $variant: 200);
+            border-color: var-get($theme, 'focus-border-color');
             box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
         }
     }
 
-    %igx-checkbox--focused-hovered {
+    %igx-checkbox--focused-hovered-bootstrap {
         %cbx-composite {
-            border-color: color($color: 'primary', $variant: 300);
+            border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
index 45b929e1bda..4b5371c8cc6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -106,94 +106,116 @@
     }
 
     $theme: digest-schema($chip-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
     }
 
-    @if not($hover-background) and $background {
-        $luminance: luminance($background);
+    @if not($border-color) and $background {
+        $border-color: var(--background);
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $hover-background: color.scale($background, $lightness: 14%);
-        } @else {
-            $hover-background: color.scale($background, $lightness: -4%);
-        }
+    @if not($hover-background) and $background {
+        $hover-background: hsl(from var(--background) h s calc(l * 0.9));
     }
 
     @if not($hover-text-color) and $hover-background {
-        $hover-text-color: text-contrast(to-opaque($hover-background));
+        $hover-text-color: adaptive-contrast(var(--hover-background));
     }
 
     @if not($focus-background) and $background {
-        $luminance: luminance($background);
+        $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+    }
 
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $focus-background: color.scale($background, $lightness: -8%);
+    @if $variant == 'fluent' {
+        @if not($focus-background) and $selected-background {
+            $focus-background: var(--selected-background);
         }
     }
 
     @if not($focus-text-color) and $focus-background {
-        $focus-text-color: text-contrast(to-opaque($focus-background));
+        $focus-text-color: adaptive-contrast(var(--focus-background));
     }
 
-    @if not($selected-background) and $background {
-        $luminance: luminance($background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $selected-background: color.scale($background, $lightness: 22%);
-        } @else {
-            $selected-background: color.scale($background, $lightness: -8%);
+    @if $variant != 'indigo' and $variant != 'fluent' {
+        @if not($selected-background) and $background {
+            $selected-background: var(--background);
+        }
+    } @else {
+        @if not($selected-background) and $background {
+            $selected-background: hsl(from var(--background) h s calc(l * 1.1));
         }
     }
 
     @if not($selected-text-color) and $selected-background {
-        $selected-text-color: text-contrast(to-opaque($selected-background));
+        $selected-text-color: adaptive-contrast(var(--selected-background));
     }
 
-    @if not($hover-selected-background) and $hover-background {
-        $hover-selected-background: $hover-background;
+    @if not($hover-selected-background) and $selected-background {
+        $hover-selected-background: hsl(from var(--selected-background) h s calc(l * 0.9));
     }
 
     @if not($hover-selected-text-color) and $hover-selected-background {
-        $hover-selected-text-color: text-contrast(to-opaque($hover-selected-background));
+        $hover-selected-text-color: adaptive-contrast(var(--hover-selected-background));
     }
 
-    @if not($focus-selected-background) and $selected-background {
-        $luminance: luminance($selected-background);
-
-        @if meta.type-of($luminance) == 'color' and $luminance + .05 < .5 {
-            $focus-selected-background: color.scale($background, $lightness: 32%);
-        } @else {
-            $focus-selected-background: color.scale($background, $lightness: -16%);
+    @if $variant != 'indigo' {
+        @if not($focus-selected-background) and $selected-background {
+            $focus-selected-background: hsl(from var(--selected-background) h s calc(l * 0.8));
+        }
+    } @else {
+        @if not($focus-selected-background) and $selected-background {
+            $focus-selected-background: var(--selected-background);
         }
     }
 
     @if not($focus-selected-text-color) and $focus-selected-background {
-        $focus-selected-text-color: text-contrast(to-opaque($focus-selected-background));
+        $focus-selected-text-color: adaptive-contrast(var(--focus-selected-background));
     }
 
     @if not($hover-border-color) and $border-color {
-        $hover-border-color: $border-color;
+        $hover-border-color: var(--border-color);
     }
 
     @if not($focus-border-color) and $border-color {
-        $focus-border-color: $border-color;
+        $focus-border-color: var(--border-color);
     }
 
     @if not($selected-border-color) and $border-color {
-        $selected-border-color: $border-color;
+        $selected-border-color: var(--border-color);
     }
 
     @if not($hover-selected-border-color) and $border-color {
-        $hover-selected-border-color: $border-color;
+        $hover-selected-border-color: var(--border-color);
     }
 
     @if not($focus-selected-border-color) and $border-color {
-        $focus-selected-border-color: $border-color;
+        $focus-selected-border-color: var(--border-color);
+    }
+
+    @if $variant == 'indigo' {
+        @if not($selected-border-color) and $selected-background {
+            $selected-border-color: var(--selected-background);
+        }
+
+        @if not($hover-selected-border-color) and $hover-selected-background {
+            $hover-selected-border-color: var(--hover-selected-background);
+        }
+
+        @if not($focus-selected-border-color) and $focus-selected-background {
+            $focus-selected-border-color: var(--focus-selected-background);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($focus-outline-color) and $focus-background {
+            $focus-outline-color: hsla(from var(--focus-background) h s l / 0.4);
+        }
+
+        @if not($focus-selected-outline-color) and $focus-selected-background {
+            $focus-selected-outline-color: hsla(from var(--focus-selected-background) h s l / 0.4);
+        }
     }
 
     @if not($ghost-shadow) {
@@ -240,11 +262,6 @@
         remove-icon-color-focus: $remove-icon-color-focus,
         focus-selected-outline-color: $focus-selected-outline-color,
         focus-outline-color: $focus-outline-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
         size: $size,
     ));
 }
@@ -256,8 +273,8 @@
     @include css-vars($theme);
     $chip-max-width: 32ch;
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
 
     $chip-padding: (
         comfortable: rem(if($variant != 'indigo', 12px, 7px)),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
index 47c6c705edf..10bc31b20f6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss
@@ -37,20 +37,15 @@
     }
 
     $theme: digest-schema($column-actions-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background-color {
-        $title-color: text-contrast($background-color);
+        $title-color: adaptive-contrast(var(--background-color));
     }
 
     @return extend($theme, (
         name: $name,
         title-color: $title-color,
         background-color: $background-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -59,7 +54,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin column-actions($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %column-actions-display {
         display: flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
index 58e551cb3c5..b04cb960e80 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -60,7 +60,49 @@
     }
 
     $theme: digest-schema($combo-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($empty-list-placeholder-color) and $empty-list-background {
+        $empty-list-placeholder-color: adaptive-contrast(var(--empty-list-background));
+    }
+
+    @if not($toggle-button-foreground) and $toggle-button-background {
+        $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if $variant == 'material' {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+        }
+    } @else {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: var(--toggle-button-background);
+        }
+    }
+
+    @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
+        $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
+    }
+
+    @if not($toggle-button-background-focus--border) and $toggle-button-background {
+        $toggle-button-background-focus--border: var(--toggle-button-background);
+    }
+
+    @if not($toggle-button-foreground-filled) and $toggle-button-background {
+        $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if not($toggle-button-background-disabled) and $toggle-button-background {
+        $toggle-button-background-disabled: hsla(from var(--toggle-button-background) h s l / 0.3);
+    }
+
+    @if not($toggle-button-foreground-disabled) and $toggle-button-background {
+        $toggle-button-foreground-disabled: hsla(from adaptive-contrast(var(--toggle-button-background)) h s l / 0.7);
+    }
+
+    @if not($clear-button-foreground-focus) and $clear-button-background-focus {
+        $clear-button-foreground-focus: adaptive-contrast(var(--clear-button-background-focus));
+    }
 
     @return extend($theme, (
         name: $name,
@@ -80,10 +122,6 @@
         clear-button-background-focus: $clear-button-background-focus,
         clear-button-foreground: $clear-button-foreground,
         clear-button-foreground-focus: $clear-button-foreground-focus,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -93,7 +131,7 @@
 @mixin combo($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $search-input-inline-padding: map.get((
         'material': pad-inline(rem(4px), rem(8px), rem(16px)),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
index 09abd1eca12..88580758382 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss
@@ -46,16 +46,17 @@
     }
 
     $theme: digest-schema($dialog-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($title-color) and $background{
-        $title-color: text-contrast($background);
+        $title-color: adaptive-contrast(var(--background));
     }
 
     @if not($message-color) and $background{
-        @if meta.type-of($background) == 'color' {
-            $message-color: rgba(text-contrast($background), .8);
-        }
+        $message-color: hsla(from adaptive-contrast(var(--background)) h s l / .8);
+    }
+
+    @if not($border-color) and $background{
+        $border-color: hsla(from adaptive-contrast(var(--background)) h s l / .3);
     }
 
     @if not($shadow) {
@@ -71,11 +72,7 @@
         title-color: $title-color,
         message-color: $message-color,
         shadow: $shadow,
-        border-color: $border-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        border-color: $border-color
     ));
 }
 
@@ -85,8 +82,8 @@
 @mixin dialog($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
+    $variant: map.get($theme, '_meta', 'theme');
+    $bootstrap-theme: map.get($theme, '_meta', 'theme') == 'bootstrap';
 
     $dialog-min-width: map.get((
         'material': rem(280px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
index 2326d4151e5..8cf8dbfb696 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss
@@ -32,16 +32,11 @@
     }
 
     $theme: digest-schema($divider-schema);
-    $meta: map.get($theme, '_meta');
 
     @return extend($theme, (
         name: $name,
         color: $color,
         inset: $inset,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-        )),
     ));
 }
 
@@ -51,7 +46,7 @@
 @mixin divider($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-divider-display {
         position: relative;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
index 19b442dfdbe..269339629f1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/drop-down/_drop-down-theme.scss
@@ -91,68 +91,88 @@
     }
 
     $theme: digest-schema($drop-down-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($item-text-color) and $background-color {
-        $item-text-color: text-contrast($background-color);
+        $item-text-color: adaptive-contrast(var(--background-color));
+    }
+
+    @if not($item-icon-color) and $item-text-color {
+        $item-icon-color: hsla(from var(--item-text-color) h s l / 0.8);
     }
 
     @if not($hover-item-background) and $background-color {
-        $hover-item-text-color: text-contrast($background-color);
+        $hover-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .12);
+    }
 
-        @if meta.type-of($background-color) == 'color' {
-            $hover-item-background: rgba(text-contrast($background-color), .12);
-        }
+    @if not($hover-item-text-color) and $item-text-color {
+        $hover-item-text-color: var(--item-text-color);
     }
 
-    @if not($hover-item-text-color) and $background-color {
-        $hover-item-text-color: text-contrast($background-color);
+    @if not($hover-item-icon-color) and $hover-item-text-color {
+        $hover-item-icon-color: hsla(from var(--hover-item-text-color) h s l / 0.8);
     }
 
     @if not($focused-item-background) and $background-color {
-        $focused-item-text-color: text-contrast($background-color);
-
-        @if meta.type-of($background-color) == 'color' {
-            $focused-item-background: rgba(text-contrast($background-color), .12);
-        }
+        $focused-item-background: hsl(from var(--background-color) h s calc(l * 0.8));
     }
 
     @if not($focused-item-text-color) and $focused-item-background {
-        $focused-item-text-color: text-contrast($focused-item-background);
+        $focused-item-text-color: adaptive-contrast(var(--focused-item-background));
+    }
+
+    @if not($selected-item-background) and $background-color {
+        $selected-item-background: hsl(from var(--background-color) h s calc(l * 1.2));
     }
 
     @if not($selected-item-text-color) and $selected-item-background {
-        $selected-item-text-color: text-contrast($selected-item-background);
+        $selected-item-text-color: adaptive-contrast(var(--selected-item-background));
+    }
+
+    @if not($selected-item-icon-color) and $selected-item-text-color {
+        $selected-item-icon-color: hsla(from var(--selected-item-text-color) h s l / 0.8);
+    }
+
+    @if not($selected-hover-item-background) and $selected-item-background {
+        $selected-hover-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
     }
 
     @if not($selected-hover-item-text-color) and $selected-hover-item-background {
-        $selected-hover-item-text-color: text-contrast($selected-hover-item-background);
+        $selected-hover-item-text-color: adaptive-contrast(var(--selected-hover-item-background));
+    }
+
+    @if not($selected-hover-item-icon-color) and $selected-hover-item-text-color {
+        $selected-hover-item-icon-color: hsla(from var(--selected-hover-item-text-color) h s l / 0.8);
+    }
+
+    @if not($selected-focus-item-background) and $selected-item-background {
+        $selected-focus-item-background: hsl(from var(--selected-item-background) h s calc(l * 0.7));
     }
 
     @if not($selected-focus-item-text-color) and $selected-focus-item-background {
-        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+        $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
     }
 
     @if not($selected-focus-item-text-color) and $selected-focus-item-background {
-        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);
+        $selected-focus-item-text-color: adaptive-contrast(var(--selected-focus-item-background));
     }
 
-    @if not($disabled-item-text-color) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $disabled-item-text-color: rgba(text-contrast($background-color), .36);
+    @if $variant == 'indigo' {
+        @if not($focused-item-border-color) and $selected-item-background {
+            $focused-item-border-color: var(--selected-item-background);
         }
     }
 
+    @if not($disabled-item-text-color) and $background-color {
+            $disabled-item-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .36);
+    }
+
     @if not($disabled-item-text-color) and $disabled-item-background {
-        @if meta.type-of($disabled-item-background) == 'color' {
-            $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);
-        }
+        $disabled-item-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .36);
     }
 
     @if not($header-text-color) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $header-text-color: rgba(text-contrast($background-color), .7);
-        }
+        $header-text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .7);
     }
 
     @if not($shadow) {
@@ -189,10 +209,6 @@
         border-color: $border-color,
         border-width: $border-width,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -201,7 +217,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin drop-down($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-drop-down {
         position: absolute;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
index 20e144dcca6..2798fbfd668 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss
@@ -53,24 +53,33 @@
     }
 
     $theme: digest-schema($expansion-panel-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($header-title-color) and $header-background {
-        $header-title-color: text-contrast($header-background);
+        $header-title-color: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($header-icon-color) and $header-background {
+        $header-icon-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($header-description-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-description-color: rgba(text-contrast($header-background), .8);
-        }
+        $header-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8);
     }
 
-    @if not($header-icon-color) and $header-background {
-        $header-icon-color: text-contrast($header-background);
+    @if not($header-focus-background) and $header-background {
+        $header-focus-background: hsl(from var(--header-background) h s calc(l * 1.1));
     }
 
     @if not($body-color) and $body-background {
-        $body-color: text-contrast($body-background);
+        $body-color: adaptive-contrast(var(--body-background));
+    }
+
+    @if not($disabled-text-color) and $header-background {
+        $disabled-text-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
+    }
+
+    @if not($disabled-description-color) and $header-background {
+        $disabled-description-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .5);
     }
 
     @return extend($theme, (
@@ -86,10 +95,6 @@
         disabled-text-color: $disabled-text-color,
         disabled-description-color: $disabled-description-color,
         expanded-margin: $expanded-margin,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -98,7 +103,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin expansion-panel($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $panel-padding: rem(16px) rem(24px);
     $panel-padding-header-indigo: rem(10px) rem(16px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
index 3fe579c34d5..f82f8e2559e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-summary/_grid-summary-theme.scss
@@ -50,22 +50,25 @@
     }
 
     $theme: digest-schema($grid-summary-schema);
-    $meta: map.get($theme, '_meta');
+
+    @if not($label-color) and $background-color {
+        $label-color: adaptive-contrast(var(--background-color));
+    }
+
+    @if not($label-hover-color) and $label-color {
+        $label-hover-color: var(--label-color);
+    }
 
     @if not($result-color) and $background-color {
-        $result-color: text-contrast($background-color);
+        $result-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($border-color) and $background-color {
-        @if type-of($background-color) == 'color' {
-            $border-color: rgba(text-contrast($background-color), .26);
-        }
+        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
     }
 
     @if not($pinned-border-color) and $background-color {
-        @if type-of($background-color) == 'color' {
-            $pinned-border-color: rgba(text-contrast($background-color), .26);
-        }
+        $pinned-border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .26);
     }
 
     @return extend($theme, (
@@ -79,10 +82,6 @@
         pinned-border-style: $pinned-border-style,
         pinned-border-color: $pinned-border-color,
         label-hover-color: $label-hover-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -92,7 +91,7 @@
 @mixin grid-summary($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $cell-pin: (
         style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
index f45ce0a3238..da35e179b9f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -52,30 +52,29 @@
     }
 
     $theme: digest-schema($grid-toolbar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($title-text-color) and $background-color {
-        $title-text-color: text-contrast($background-color);
+        $title-text-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($item-text-color) and $dropdown-background {
-        $item-text-color: text-contrast($dropdown-background);
+        $item-text-color: adaptive-contrast(var(--dropdown-background));
     }
 
     @if not($item-hover-text-color) and $dropdown-background {
-        $item-hover-text-color: text-contrast($dropdown-background);
+        $item-hover-text-color: adaptive-contrast(var(--dropdown-background));
     }
 
     @if not($item-focus-text-color) and $dropdown-background {
-        $item-focus-text-color: text-contrast($dropdown-background);
+        $item-focus-text-color: adaptive-contrast(var(--dropdown-background));
     }
 
     @if not($item-hover-text-color) and $item-hover-background {
-        $item-hover-text-color: text-contrast($item-hover-background);
+        $item-hover-text-color: adaptive-contrast(var(--item-hover-background));
     }
 
     @if not($item-focus-text-color) and $item-focus-background {
-        $item-focus-text-color: text-contrast($item-focus-background);
+        $item-focus-text-color: adaptive-contrast(var(--item-focus-background));
     }
 
     @return extend($theme, (
@@ -89,10 +88,6 @@
         item-hover-text-color: $item-hover-text-color,
         item-focus-background: $item-focus-background,
         item-focus-text-color: $item-focus-text-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
         size: $size,
         border-color: $border-color
     ));
@@ -104,7 +99,7 @@
 @mixin grid-toolbar($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
 
     // Caption
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
index 0166b635863..145d5f0dae8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -225,104 +225,113 @@
     }
 
     $theme: digest-schema($grid-schema);
-    $meta: map.get($theme, '_meta');
-
-    @if not($cell-selected-within-text-color) and $cell-selected-within-background {
-        $cell-selected-within-text-color: text-contrast($cell-selected-within-background);
-    }
 
     @if not($ghost-header-icon-color) and $ghost-header-background {
-        @if meta.type-of($ghost-header-background) == 'color' {
-            $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);
-        }
+        $ghost-header-icon-color: hsla(from adaptive-contrast(var(--ghost-header-background)) h s l / .07);
     }
 
     @if not($ghost-header-text-color) and $ghost-header-background {
-        $ghost-header-text-color: text-contrast($ghost-header-background);
+        $ghost-header-text-color: adaptive-contrast(var(--ghost-header-background));
     }
 
-    @if $header-background and meta.type-of($header-background) == 'color' {
-        $header-background: to-opaque($header-background, color($color: 'surface'));
+    @if not($header-text-color) and $header-background {
+        $header-text-color: adaptive-contrast(var(--header-background));
     }
 
-    @if not($header-text-color) and $header-background {
-        $header-text-color: text-contrast($header-background);
+    @if not($header-selected-background) and $header-background {
+        $header-selected-background: hsl(from var(--header-background) h s calc(l * 0.9));
     }
 
     @if not($header-selected-text-color) and $header-selected-background {
-        $header-selected-text-color: text-contrast($header-selected-background);
+        $header-selected-text-color: adaptive-contrast(var(--header-selected-background));
     }
 
     @if not($header-border-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $header-border-color: rgba(text-contrast($header-background), .24);
-        }
+        $header-border-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .24);
     }
 
     @if not($content-text-color) and $content-background {
-        $content-text-color: text-contrast($content-background);
+        $content-text-color: adaptive-contrast(var(--content-background));
     }
 
     @if not($row-odd-background) and $content-background {
-        $row-odd-background: $content-background;
-    }
-
-    @if $row-odd-background and meta.type-of($row-odd-background) == 'color' and color.alpha($row-odd-background) != 1 {
-        $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));
-
-        $row-odd-background: to-opaque($row-odd-background, $cbg);
+        $row-odd-background: hsl(from var(--content-background) h calc(s - 10) l);
     }
 
     @if not($row-odd-text-color) and $row-odd-background {
-        $row-odd-text-color: text-contrast($row-odd-background);
+        $row-odd-text-color: adaptive-contrast(var(--row-odd-background));
     }
 
     @if not($row-even-background) and $content-background {
-        $row-even-background: $content-background;
-    }
-
-    @if $row-even-background and meta.type-of($row-even-background) == 'color' and color.alpha($row-even-background) != 1 {
-        $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));
-
-        $row-even-background: to-opaque($row-even-background, $cbg);
+        $row-even-background: hsl(from var(--content-background) h calc(s + 10) l);
     }
 
     @if not($row-even-text-color) and $row-even-background {
-        $row-even-text-color: text-contrast($row-even-background);
+        $row-even-text-color: adaptive-contrast(var(--row-even-background));
     }
 
     @if not($row-hover-background) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $row-hover-background: to-opaque(rgba(text-contrast($content-background), .08), $content-background)
-        }
+        $row-hover-background: hsl(from var(--content-background) h s calc(l * 0.85));
     }
 
     @if not($row-hover-text-color) and $row-hover-background {
-        $row-hover-text-color: text-contrast($row-hover-background);
+        $row-hover-text-color: adaptive-contrast(var(--row-hover-background));
+    }
+
+    @if not($cell-selected-background) and $content-background {
+        $cell-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
     }
 
     @if not($cell-selected-text-color) and $cell-selected-background {
-        $cell-selected-text-color: text-contrast($cell-selected-background);
+        $cell-selected-text-color: adaptive-contrast(var(--cell-selected-background));
+    }
+
+    @if not($row-selected-background) and $content-background {
+        $row-selected-background: hsl(from var(--content-background) h s calc(l * 0.9));
     }
 
     @if not($row-selected-text-color) and $row-selected-background {
-        $row-selected-text-color: text-contrast($row-selected-background);
+        $row-selected-text-color: adaptive-contrast(var(--row-selected-background));
+    }
+
+    @if not($row-selected-hover-background) and $row-selected-background {
+        $row-selected-hover-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
     }
 
     @if not($row-selected-hover-text-color) and $row-selected-hover-background {
-        $row-selected-hover-text-color: text-contrast($row-selected-hover-background);
+        $row-selected-hover-text-color: adaptive-contrast(var(--row-selected-hover-background));
     }
 
     @if not($row-border-color) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $row-border-color: rgba(text-contrast($content-background), .08)
-        }
+        $row-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08);
+    }
+
+    @if not($cell-selected-within-background) and $row-selected-background {
+        $cell-selected-within-background: hsl(from var(--row-selected-background) h s calc(l * 0.85));
+    }
+
+    @if not($cell-selected-within-text-color) and $cell-selected-within-background {
+        $cell-selected-within-text-color: adaptive-contrast(var(--cell-selected-within-background));
+    }
+
+    @if not($cell-editing-background) and $content-background {
+        $cell-editing-background: var(--content-background);
+    }
+
+    @if not($cell-editing-foreground) and $cell-editing-background {
+        $cell-editing-foreground: adaptive-contrast(var(--cell-editing-background));
+    }
+
+    @if not($cell-editing-focus-foreground) and $cell-editing-background {
+        $cell-editing-focus-foreground: adaptive-contrast(var(--cell-editing-background));
+    }
+
+    @if not($cell-active-border-color) and $content-background {
+        $cell-active-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .5);
     }
 
     @if not($pinned-border-color) and $content-background {
-        @if meta.type-of($content-background) == 'color' {
-            $pinned-border-color: rgba(text-contrast($content-background), .08)
-        }
+        $pinned-border-color: hsla(from adaptive-contrast(var(--content-background)) h s l / .08);
     }
 
     @if not($group-row-background) and $header-background {
@@ -330,61 +339,75 @@
     }
 
     @if not($expand-icon-color) and $group-row-background {
-        $expand-icon-color: text-contrast($group-row-background)
+        $expand-icon-color: adaptive-contrast(var(--group-row-background))
+    }
+
+    @if not($group-row-selected-background) and $group-row-background {
+        $group-row-selected-background: hsl(from var(--group-row-background) h s calc(l * 0.8));
     }
 
     @if not($group-label-text) and $group-row-selected-background {
-        $group-label-text: text-contrast($group-row-selected-background)
+        $group-label-text: adaptive-contrast(var(--group-row-selected-background))
     }
 
     @if not($expand-icon-color) and $group-row-selected-background {
-        $expand-icon-color: text-contrast($group-row-selected-background)
+        $expand-icon-color: adaptive-contrast(var(--group-row-selected-background))
+    }
+
+    @if not($expand-icon-hover-color) and $expand-icon-color {
+        $expand-icon-hover-color: var(--expand-icon-color);
     }
 
     @if not($group-count-background) and $group-row-selected-background {
-        $group-count-background: text-contrast($group-row-selected-background);
+        $group-count-background: adaptive-contrast(var(--group-row-selected-background));
     }
 
     @if not($expand-all-icon-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $expand-all-icon-color: rgba(text-contrast($header-background), .87);
-        }
+        $expand-all-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .87);
     }
 
     @if not($expand-all-icon-hover-color) and $header-background {
-        $expand-all-icon-hover-color: text-contrast($header-background);
+        $expand-all-icon-hover-color: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($sorted-header-icon-color) and $header-background {
+        $sorted-header-icon-color: hsla(from adaptive-contrast(var(--header-background)) h s l / 0.8);
+    }
+
+    @if not($sortable-header-icon-hover-color) and $sorted-header-icon-color {
+        $sortable-header-icon-hover-color: hsla(from var(--sorted-header-icon-color) h s l / 1);
+    }
+
+    @if not($edit-mode-color) and $content-background {
+        $edit-mode-color: hsla(from adaptive-contrast(var(--content-background)) h s l / 0.5);
     }
 
     @if not($group-label-text) and $group-row-background {
-        $group-label-text: text-contrast($group-row-background)
+        $group-label-text: adaptive-contrast(var(--group-row-background))
     }
 
     @if not($group-count-background) and $group-row-background {
-        $group-count-background: text-contrast($group-row-background);
+        $group-count-background: adaptive-contrast(var(--group-row-background));
     }
 
     @if not($group-count-text-color) and $group-count-background {
-        $group-count-text-color: text-contrast($group-count-background);
+        $group-count-text-color: adaptive-contrast(var(--group-count-background));
     }
 
     @if not($grouparea-background) and $header-background {
-        $grouparea-background: $header-background
+        $grouparea-background: var(--header-background);
     }
 
     @if not($grouparea-color) and $grouparea-background {
-        @if meta.type-of($grouparea-background) == 'color' {
-            $grouparea-color: rgba(text-contrast($grouparea-background), .8)
-        }
+        $grouparea-color: hsla(from adaptive-contrast(var(--grouparea-background)) h s l / .8);
     }
 
     @if not($grouparea-color) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            $grouparea-color: rgba(text-contrast($header-background), .8)
-        }
+        $grouparea-color: hsla(from adaptive-contrast(var(--header-background)) h s l / .8);
     }
 
     @if not($drop-area-background) and $grouparea-background {
-        $drop-area-background: text-contrast($grouparea-background);
+        $drop-area-background: adaptive-contrast(var(--grouparea-background));
     }
 
     @if not($drop-area-on-drop-background) and $drop-area-background {
@@ -392,49 +415,53 @@
     }
 
     @if not($drop-area-text-color) and $drop-area-background {
-        $drop-area-text-color: text-contrast($drop-area-background)
+        $drop-area-text-color: adaptive-contrast(var(--drop-area-background));
     }
 
     @if not($drop-area-icon-color) and $drop-area-background {
-        $drop-area-icon-color: text-contrast($drop-area-background)
+        $drop-area-icon-color: adaptive-contrast(var(--drop-area-background));
     }
 
     @if not($filtering-header-background) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            @if luminance($header-background) < .5 {
-                $filtering-header-background: to-opaque(color.scale($header-background, $lightness: 5%));
-            } @else {
-                $filtering-header-background: to-opaque(color.scale($header-background, $lightness: -5%));
-            }
-        }
+        $filtering-header-background: color-mix(in hsl, var(--header-background), #fff 5%);
     }
 
     @if not($filtering-header-text-color) and $filtering-header-background {
-        $filtering-header-text-color: text-contrast($filtering-header-background);
+        $filtering-header-text-color: adaptive-contrast(var(--filtering-header-background));
     }
 
     @if not($filtering-row-background) and $header-background {
-        @if meta.type-of($header-background) == 'color' {
-            @if luminance($header-background) < .5 {
-                $filtering-row-background: to-opaque(color.scale($header-background, $lightness: 5%));
-            } @else {
-                $filtering-row-background: to-opaque(color.scale($header-background, $lightness: -5%));
-            }
-        }
+        $filtering-row-background: color-mix(in hsl, var(--header-background), #fff 5%);
     }
 
     @if not($filtering-row-text-color) and $filtering-row-background {
-        $filtering-row-text-color: text-contrast(to-opaque($filtering-row-background));
+        $filtering-row-text-color: adaptive-contrast(var(--filtering-row-background));
+    }
+
+    @if not($excel-filtering-header-foreground) and $filtering-row-background {
+        $excel-filtering-header-foreground: adaptive-contrast(var(--filtering-row-background));
+    }
+
+    @if not($excel-filtering-subheader-foreground) and $filtering-row-background {
+        $excel-filtering-subheader-foreground: adaptive-contrast(var(--filtering-row-background));
+    }
+
+    @if not($excel-filtering-actions-foreground) and $filtering-row-background {
+        $excel-filtering-actions-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.8);
+    }
+
+    @if not($excel-filtering-actions-disabled-foreground) and $filtering-row-background {
+        $excel-filtering-actions-disabled-foreground: hsla(from adaptive-contrast(var(--filtering-row-background)) h s l / 0.5);
     }
 
     @if not($grid-shadow) {
         $grid-elevation: map.get($grid-schema, 'grid-elevation');
-        $grid-shadow: elevation($grid-elevation);
+        $grid-shadow: elevation(var(--grid-elevation));
     }
 
     @if not($drag-shadow) {
         $drag-elevation: map.get($grid-schema, 'drag-elevation');
-        $drag-shadow: elevation($drag-elevation);
+        $drag-shadow: elevation(var(--drag-elevation));
     }
 
     @if not($drop-area-border-radius) {
@@ -553,12 +580,6 @@
 
         cell-selected-within-background: $cell-selected-within-background,
         cell-selected-within-text-color: $cell-selected-within-text-color,
-
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -580,8 +601,8 @@
 
     @include scale-in-ver-center();
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
index 2723371e9a9..29747c382f8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss
@@ -25,14 +25,9 @@
     }
 
     $theme: digest-schema($pivot-data-selector-schema);
-    $meta: map.get($theme, '_meta');
 
     @return extend($theme, (
         name: $name,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -41,7 +36,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin pivot-data-selector($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $chip-height-material: (
         comfortable: rem(22px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
index 641077c20d6..7a575101755 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-theme.scss
@@ -39,11 +39,11 @@
     $theme: digest-schema($highlight-schema);
 
     @if not($resting-color) and $resting-background {
-        $resting-color: text-contrast($resting-background);
+        $resting-color: adaptive-contrast(var(--resting-background));
     }
 
     @if not($active-color) and $active-background {
-        $active-color: text-contrast($active-background);
+        $active-color: adaptive-contrast(var(--active-background));
     }
 
     @return extend($theme, (
@@ -53,7 +53,6 @@
         resting-color: $resting-color,
         active-background: $active-background,
         active-color: $active-color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
new file mode 100644
index 00000000000..8c186676e21
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_contained-icon-button-theme.scss
@@ -0,0 +1,196 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function contained-icon-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+    $shadow-color: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $focus-border-color: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-border-color: null,
+
+    $size: null,
+) {
+    $name: 'igx-contained-icon-button';
+    $icon-button-schema: ();
+
+    @if map.has-key($schema, 'icon-button') {
+        $icon-button-schema: map.get($schema, 'icon-button');
+        @if map.has-key($icon-button-schema, 'contained') {
+            $icon-button-schema: map.get($icon-button-schema, 'contained');
+        } @else {
+            $icon-button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($icon-button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $foreground {
+        $hover-foreground: var(--foreground);
+    }
+
+    @if not($focus-foreground) and $foreground {
+        $focus-foreground: var(--foreground);
+    }
+
+    @if not($focus-hover-foreground) and $foreground {
+        $focus-hover-foreground: var(--foreground);
+    }
+
+    @if not($active-foreground) and $foreground {
+        $active-foreground: var(--foreground);
+    }
+
+    @if $variant == 'indigo' {
+        @if not($foreground) and $background {
+            $foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.8);
+        }
+
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+
+        @if not($focus-background) and $background {
+            $focus-background: var(--background);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-background) and $focus-background {
+            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 1.1));
+        }
+
+        @if not($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 1.1));
+        }
+    } @else {
+        @if not($foreground) and $background {
+            $foreground: adaptive-contrast(var(--background));
+        }
+
+        @if not($hover-background) and $background {
+            $hover-background: hsl(from var(--background) h s calc(l * 0.9));
+        }
+
+        @if not($focus-background) and $background {
+            @if $variant == 'fluent' or $variant == 'bootstrap' {
+                $focus-background: var(--background);
+            } @else {
+                $focus-background: hsl(from var(--background) h s calc(l * 0.8));
+            }
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: adaptive-contrast(var(--focus-background));
+        }
+
+        @if not($focus-hover-background) and $focus-background {
+            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+        }
+
+        @if not($active-background) and $background {
+            $active-background: hsl(from var(--background) h s calc(l * 0.8));
+        }
+    }
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if not($shadow-color) and $focus-background {
+        $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+    }
+
+    @if $variant == 'fluent' {
+        @if not($focus-border-color) and $foreground {
+            $focus-border-color: var(--foreground);
+        }
+    } @else {
+        @if not($focus-border-color) and $border-color {
+            $focus-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.4);
+        }
+
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+        }
+
+        @if not($focus-border-color) and $focus-background {
+            $focus-border-color: hsla(from var(--focus-background) h s l / 0.3);
+        }
+    } @else if $variant == 'bootstrap' {
+        @if not($disabled-background) and $background {
+            $disabled-background: hsla(from var(--background) h s l / 0.2);
+        }
+
+        @if not($disabled-foreground) and $disabled-background {
+            $disabled-foreground: hsla(from var(--disabled-background) h s l / 0.7);
+        }
+    }
+
+    @return extend(
+    $theme,
+    (
+        name: $name,
+        background: $background,
+        foreground: $foreground,
+        shadow-color: $shadow-color,
+
+        hover-background: $hover-background,
+        hover-foreground: $hover-foreground,
+
+        focus-background: $focus-background,
+        focus-foreground: $focus-foreground,
+
+        focus-hover-background: $focus-hover-background,
+        focus-hover-foreground: $focus-hover-foreground,
+
+        active-background: $active-background,
+        active-foreground: $active-foreground,
+
+        border-radius: $border-radius,
+        border-color: $border-color,
+        focus-border-color: $focus-border-color,
+
+        disabled-background: $disabled-background,
+        disabled-foreground: $disabled-foreground,
+        disabled-border-color: $disabled-border-color,
+        size: $size,
+    ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
new file mode 100644
index 00000000000..c5d35da4741
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_flat-icon-button-theme.scss
@@ -0,0 +1,188 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function flat-icon-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+    $shadow-color: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $focus-border-color: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-border-color: null,
+
+    $size: null,
+) {
+    $name: 'igx-flat-icon-button';
+    $icon-button-schema: ();
+
+    @if map.has-key($schema, 'icon-button') {
+        $icon-button-schema: map.get($schema, 'icon-button');
+        @if map.has-key($icon-button-schema, 'flat') {
+            $icon-button-schema: map.get($icon-button-schema, 'flat');
+        } @else {
+            $icon-button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($icon-button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: var(--foreground);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: var(--foreground);
+        }
+
+        @if not($active-foreground) and $foreground {
+            $active-foreground: var(--foreground);
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-background) and $foreground {
+                $focus-background: hsla(from var(--foreground) h s l / 0.16);
+            }
+
+            @if not($focus-hover-background) and $foreground {
+                $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+            }
+        } @else {
+            @if not($focus-hover-background) and $hover-background {
+                $focus-hover-background: var(--hover-background);
+            }
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($focus-hover-background) and $foreground {
+            $focus-hover-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.15);
+        }
+    }
+
+    @if $variant == 'bootstrap'or $variant == 'indigo' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-foreground) and $hover-foreground {
+            $focus-hover-foreground: var(--hover-foreground);
+        }
+
+        @if not($disabled-foreground) and $foreground {
+        $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+    }
+
+        @if $variant == 'bootstrap' {
+            @if not($active-foreground) and $foreground {
+                $active-foreground: hsl(from var(--foreground) h s calc(l * 0.7));
+            }
+
+            @if not($shadow-color) and $foreground {
+                $shadow-color: hsla(from var(--foreground) h s l / 0.5);
+            }
+        } @else {
+            @if not($active-foreground) and $hover-foreground {
+                $active-foreground: var(--hover-foreground);
+            }
+
+            @if not($focus-border-color) and $foreground {
+                $focus-border-color: hsla(from var(--foreground) h s l / 0.3);
+            }
+        }
+    }
+
+    @return extend(
+    $theme,
+    (
+        name: $name,
+        background: $background,
+        foreground: $foreground,
+        shadow-color: $shadow-color,
+
+        hover-background: $hover-background,
+        hover-foreground: $hover-foreground,
+
+        focus-background: $focus-background,
+        focus-foreground: $focus-foreground,
+
+        focus-hover-background: $focus-hover-background,
+        focus-hover-foreground: $focus-hover-foreground,
+
+        active-background: $active-background,
+        active-foreground: $active-foreground,
+
+        border-radius: $border-radius,
+        border-color: $border-color,
+        focus-border-color: $focus-border-color,
+
+        disabled-background: $disabled-background,
+        disabled-foreground: $disabled-foreground,
+        disabled-border-color: $disabled-border-color,
+        size: $size,
+    ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index ad2ea91c001..f8f788b2214 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -1,9 +1,14 @@
 @use 'sass:map';
 @use 'sass:meta';
+@use 'sass:list';
 @use 'sass:color';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
 
+@forward './flat-icon-button-theme';
+@forward './contained-icon-button-theme';
+@forward './outlined-icon-button-theme';
+
 ////
 /// @group themes
 /// @access public
@@ -57,37 +62,19 @@
         }
 
         @if not($foreground) and $background {
-            $foreground: text-contrast($background);
-        }
-
-        @if not($hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $hover-background: color.scale($background, $lightness: 5%);
-            }
+            $foreground: adaptive-contrast(var(--background));
         }
 
         @if not($hover-foreground) and $hover-background {
-            @if meta.type-of($hover-background) == 'color' {
-                $hover-foreground: text-contrast($hover-background);
-            }
-        }
-
-        @if not($focus-background) and $background {
-            $focus-background: color.scale($background, $lightness: 5%);
+            $hover-foreground: adaptive-contrast(var(--hover-background));
         }
 
         @if not($focus-foreground) and $focus-background {
-            $focus-foreground: text-contrast($focus-background);
-        }
-
-        @if not($focus-hover-background) and $background {
-            @if meta.type-of($background) == 'color' {
-                $focus-hover-background: color.scale($background, $lightness: 5%);
-            }
+            $focus-foreground: adaptive-contrast(var(--focus-background));
         }
 
         @if not($focus-hover-foreground) and $focus-hover-background {
-            $focus-hover-foreground: text-contrast($focus-hover-background);
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
         }
 
         $themes: map.merge($themes, (
@@ -117,7 +104,6 @@
                 disabled-foreground: $disabled-foreground,
                 disabled-border-color: $disabled-border-color,
                 size: $size,
-                theme: map.get($schema, '_meta', 'theme'),
             ))
         ));
     }
@@ -132,15 +118,42 @@
 /// @deprecated Use the `css-vars` mixin instead.
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
-@mixin icon-button($theme) {
-    $variant: map.get($theme, variant);
-    $flat-theme: map.get(map.get($theme, 'themes'), 'flat');
-    $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');
-    $contained-theme: map.get(map.get($theme, 'themes'), 'contained');
-
-    @include css-vars($flat-theme);
-    @include css-vars($outlined-theme);
-    @include css-vars($contained-theme);
+@mixin icon-button($themes...) {
+    $flat-theme: null;
+    $contained-theme: null;
+    $outlined-theme: null;
+    $variant: 'material';
+
+    $required: ('flat', 'contained', 'outlined');
+    $added: ();
+    $missing: ();
+
+    @each $key, $theme in meta.keywords($themes) {
+        $type: map.get($theme, _meta, type);
+
+        $added: list.append($added, $key);
+
+        @if $type == 'flat' {
+            $flat-theme: $theme;
+        } @else if $type == 'contained' {
+            $contained-theme: $theme;
+        } @else if $type == 'outlined' {
+            $outlined-theme: $theme;
+        }
+
+        $variant: map.get($theme, '_meta', 'theme');
+        @include css-vars($theme);
+    }
+
+    @each $item in $required {
+        @if not(list.index($added, $item)) {
+            $missing: list.append($missing, '$#{$item}', $separator: comma);
+        }
+    }
+
+    @if list.length($missing) != 0 {
+        @error meta.inspect(string.unquote("Missing theme properties:") #{$missing});
+    }
 
     $icon-sizes: map.get((
         'material': rem(18px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
new file mode 100644
index 00000000000..9ecc8857f99
--- /dev/null
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_outlined-icon-button-theme.scss
@@ -0,0 +1,232 @@
+@use 'sass:map';
+@use '../../base' as *;
+@use '../../themes/schemas' as *;
+
+@function outlined-icon-button-theme(
+    $schema: $light-material-schema,
+
+    $background: null,
+    $foreground: null,
+    $shadow-color: null,
+
+    $hover-background: null,
+    $hover-foreground: null,
+
+    $focus-background: null,
+    $focus-foreground: null,
+
+    $focus-hover-background: null,
+    $focus-hover-foreground: null,
+
+    $active-background: null,
+    $active-foreground: null,
+
+    $border-radius: null,
+    $border-color: null,
+    $focus-border-color: null,
+
+    $disabled-background: null,
+    $disabled-foreground: null,
+    $disabled-border-color: null,
+
+    $size: null,
+) {
+    $name: 'igx-outlined-icon-button';
+    $icon-button-schema: ();
+
+    @if map.has-key($schema, 'icon-button') {
+        $icon-button-schema: map.get($schema, 'icon-button');
+        @if map.has-key($icon-button-schema, 'outlined') {
+            $icon-button-schema: map.get($icon-button-schema, 'outlined');
+        } @else {
+            $icon-button-schema: $schema;
+        }
+    }
+
+    $theme: digest-schema($icon-button-schema);
+    $variant: map.get($schema, '_meta', 'theme');
+
+    @if not($hover-foreground) and $hover-background {
+        $hover-foreground: adaptive-contrast(var(--hover-background));
+    }
+
+    @if not($focus-foreground) and $focus-background {
+        $focus-foreground: adaptive-contrast(var(--focus-background));
+    }
+
+    @if not($focus-hover-foreground) and $focus-hover-background {
+        $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+    }
+
+    @if not($active-foreground) and $active-background {
+        $active-foreground: adaptive-contrast(var(--active-background));
+    }
+
+    @if $variant == 'material' or $variant == 'fluent' {
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: var(--foreground);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-hover-foreground) and $foreground {
+            $focus-hover-foreground: var(--foreground);
+        }
+
+        @if not($active-foreground) and $foreground {
+            $active-foreground: var(--foreground);
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.08);
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsla(from var(--foreground) h s l / 0.24);
+        }
+
+        @if $variant == 'material' {
+            @if not($focus-background) and $foreground {
+                $focus-background: hsla(from var(--foreground) h s l / 0.16);
+            }
+
+            @if not($focus-hover-background) and $foreground {
+                $focus-hover-background: hsla(from var(--foreground) h s l / 0.24);
+            }
+
+            @if not($border-color) and $foreground {
+                $border-color: hsla(from var(--foreground) h s l / 0.4);
+            }
+        } @else {
+            @if not($focus-hover-background) and $hover-background {
+                $focus-hover-background: var(--hover-background);
+            }
+
+            @if not($focus-border-color) and $foreground {
+                $focus-border-color: var(--foreground);
+            }
+
+            @if not($border-color) and $foreground {
+                $border-color: hsla(from var(--foreground) h s l / 0.7);
+            }
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($border-color) and $foreground {
+            $border-color: hsla(from var(--foreground) h s l / 0.8);
+        }
+
+        @if not($hover-foreground) and $foreground {
+            $hover-foreground: hsl(from var(--foreground) h s calc(l * 0.9));
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: hsla(from var(--foreground) h s l / 0.1);
+        }
+
+        @if not($focus-foreground) and $foreground {
+            $focus-foreground: var(--foreground);
+        }
+
+        @if not($focus-border-color) and $foreground {
+            $focus-border-color: hsla(from var(--foreground) h s l / 0.2);
+        }
+
+        @if not($focus-hover-foreground) and $hover-foreground {
+            $focus-hover-foreground: var(--hover-foreground);
+        }
+
+        @if not($active-foreground) and $hover-foreground {
+            $active-foreground: var(--hover-foreground);
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($border-color) and $foreground {
+            $border-color: var(--foreground);
+        }
+
+        @if not($hover-background) and $foreground {
+            $hover-background: var(--foreground);
+        }
+
+        @if not($hover-foreground) and $hover-background {
+            $hover-foreground: adaptive-contrast(var(--hover-background));
+        }
+
+        @if not($focus-background) and $foreground {
+            $focus-background: var(--foreground);
+        }
+
+        @if not($focus-foreground) and $focus-background {
+            $focus-foreground: adaptive-contrast(var(--focus-background));
+        }
+
+        @if not($focus-hover-background) and $focus-background {
+            $focus-hover-background: hsl(from var(--focus-background) h s calc(l * 0.9));
+        }
+
+        @if not($focus-hover-foreground) and $focus-hover-background {
+            $focus-hover-foreground: adaptive-contrast(var(--focus-hover-background));
+        }
+
+        @if not($active-background) and $foreground {
+            $active-background: hsl(from var(--foreground) h s calc(l * 0.8));
+        }
+
+        @if not($active-foreground) and $active-background {
+            $active-foreground: adaptive-contrast(var(--active-background));
+        }
+
+        @if not($focus-border-color) and $active-background {
+            $focus-border-color: var(--active-background);
+        }
+
+        @if not($shadow-color) and $focus-background {
+            $shadow-color: hsla(from var(--focus-background) h s l / 0.5);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($disabled-foreground) and $foreground {
+            $disabled-foreground: hsla(from var(--foreground) h s l / 0.5);
+        }
+
+        @if not($disabled-border-color) and $border-color {
+            $disabled-border-color: hsla(from var(--border-color) h s l / 0.2);
+        }
+    }
+
+    @return extend(
+    $theme,
+    (
+        name: $name,
+        background: $background,
+        foreground: $foreground,
+        shadow-color: $shadow-color,
+
+        hover-background: $hover-background,
+        hover-foreground: $hover-foreground,
+
+        focus-background: $focus-background,
+        focus-foreground: $focus-foreground,
+
+        focus-hover-background: $focus-hover-background,
+        focus-hover-foreground: $focus-hover-foreground,
+
+        active-background: $active-background,
+        active-foreground: $active-foreground,
+
+        border-radius: $border-radius,
+        border-color: $border-color,
+        focus-border-color: $focus-border-color,
+
+        disabled-background: $disabled-background,
+        disabled-foreground: $disabled-foreground,
+        disabled-border-color: $disabled-border-color,
+        size: $size,
+    ));
+}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
index e2b5249ac41..a70edbc4dd4 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss
@@ -41,7 +41,6 @@
         color: $color,
         size: $size,
         disabled-color: $disabled-color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
index 7c301ffee81..a716c1b2434 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -139,24 +139,247 @@
     }
 
     $theme: digest-schema($input-group-schema);
+    $variant: map.get($theme, '_meta', 'theme');
+
     $search-resting-elevation: map.get($input-group-schema, 'search-resting-elevation');
     $search-hover-elevation: map.get($input-group-schema, 'search-hover-elevation');
     $search-disabled-elevation: map.get($input-group-schema, 'search-disabled-elevation');
 
-    @if not($placeholder-color) and $box-background {
-        $placeholder-color: text-contrast($box-background);
+    @if $variant == 'material' {
+        @if not($box-background-hover) and $box-background {
+            $box-background-hover: var(--box-background);
+        }
+
+        @if not($box-background-focus) and $box-background {
+            $box-background-focus: hsl(from var(--box-background) h s calc(l * 0.9));
+        }
+
+        @if not($placeholder-color) and $box-background {
+            $placeholder-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($hover-placeholder-color) and $box-background-hover {
+            $hover-placeholder-color: hsla(from adaptive-contrast(var(--box-background-hover)) h s l / 0.9);
+        }
+
+        @if not($idle-text-color) and $box-background {
+            $idle-text-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($filled-text-color) and $box-background {
+            $filled-text-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($filled-text-hover-color) and $box-background {
+            $filled-text-hover-color: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($focused-text-color) and $box-background-focus {
+            $focused-text-color: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if not($idle-secondary-color) and $box-background {
+            $idle-secondary-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-prefix-color) and $box-background {
+            $input-prefix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-prefix-color--filled) and $box-background {
+            $input-prefix-color--filled: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($input-prefix-color--focused) and $box-background-focus {
+            $input-prefix-color--focused: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if not($input-suffix-color) and $box-background {
+            $input-suffix-color: hsla(from adaptive-contrast(var(--box-background)) h s l / 0.9);
+        }
+
+        @if not($input-suffix-color--filled) and $box-background {
+            $input-suffix-color--filled: adaptive-contrast(var(--box-background));
+        }
+
+        @if not($input-suffix-color--focused) and $box-background-focus {
+            $input-suffix-color--focused: adaptive-contrast(var(--box-background-focus));
+        }
+
+        @if $box-background != transparent {
+            @if not($box-disabled-background) and $box-background {
+                $box-disabled-background: hsla(from var(--box-background) h s l / 0.4);
+            }
+
+            @if not($disabled-placeholder-color) and $box-disabled-background {
+                $disabled-placeholder-color: adaptive-contrast(var(--box-disabled-background));
+            }
+
+            @if not($disabled-text-color) and $box-disabled-background {
+                $disabled-text-color: adaptive-contrast(var(--box-disabled-background));
+            }
+        } @else {
+            @if not($box-disabled-background) and $box-background {
+                $box-disabled-background: var(--box-background);
+            }
+
+            @if not($disabled-placeholder-color) and $placeholder-color {
+                $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+            }
+
+            @if not($disabled-text-color) and $idle-text-color {
+                $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+            }
+        }
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap' {
+        @if not($input-prefix-background) and $input-suffix-background {
+            $input-prefix-background: var(--input-suffix-background);
+        }
+
+        @if not($input-suffix-background) and $input-prefix-background {
+            $input-suffix-background: var(--input-prefix-background);
+        }
     }
 
-    @if not($placeholder-color) and $box-background-hover {
-        $placeholder-color: text-contrast($box-background-hover);
+    @if $variant == 'material' or $variant == 'indigo' {
+        //bottom line color
+        @if not($hover-bottom-line-color) and $idle-bottom-line-color {
+            $hover-bottom-line-color: hsl(from var(--idle-bottom-line-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-bottom-line-color) and $hover-bottom-line-color {
+            $focused-bottom-line-color: var(--hover-bottom-line-color);
+        }
+
+        @if $variant == 'material' {
+            @if not($focused-secondary-color) and $focused-bottom-line-color {
+                $focused-secondary-color: var(--focused-bottom-line-color);
+            }
+
+            @if not($border-color) and $idle-bottom-line-color {
+                $border-color: var(--idle-bottom-line-color);
+            }
+        }
+    }
+
+    //border-color
+    @if $variant == 'bootstrap' {
+        @if not($focused-border-color) and $border-color {
+            $focused-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-secondary-color) and $focused-border-color {
+            $focused-secondary-color: hsla(from var(--focused-border-color) h s l / 0.4);
+        }
+    } @else {
+        @if not($hover-border-color) and $border-color {
+            $hover-border-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($focused-border-color) and $hover-border-color {
+            $focused-border-color: var(--hover-border-color);
+        }
+
+        @if $variant != 'indigo' {
+            @if not($focused-secondary-color) and $focused-border-color {
+                $focused-secondary-color: var(--focused-border-color);
+            }
+        }
     }
 
-    @if not($placeholder-color) and $box-background-focus {
-        $placeholder-color: text-contrast($box-background-focus);
+    @if $variant == 'material' {
+        @if not($focused-bottom-line-color) and $focused-border-color {
+            $focused-bottom-line-color: var(--focused-border-color);
+        }
     }
 
+    //search input
     @if not($placeholder-color) and $search-background {
-        $placeholder-color: text-contrast($search-background);
+        $placeholder-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if not($hover-placeholder-color) and $placeholder-color {
+        $hover-placeholder-color: var(--placeholder-color);
+    }
+
+    @if $variant == 'indigo' {
+        @if not($box-background-hover) and $search-background {
+            $box-background-hover: var(--search-background);
+        }
+    } @else {
+        @if not($idle-secondary-color) and $placeholder-color {
+            $idle-secondary-color: var(--placeholder-color);
+        }
+    }
+
+    @if not($idle-text-color) and $search-background {
+        $idle-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($filled-text-color) and $search-background {
+        $filled-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($filled-text-hover-color) and $search-background {
+        $filled-text-hover-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($focused-text-color) and $search-background {
+        $focused-text-color: adaptive-contrast(var(--search-background));
+    }
+
+    @if not($input-prefix-color) and $search-background {
+        $input-prefix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if not($input-suffix-color) and $search-background {
+        $input-suffix-color: hsla(from adaptive-contrast(var(--search-background)) h s l / 0.9);
+    }
+
+    @if $variant != 'indigo' {
+        @if not($input-prefix-color--filled) and $search-background {
+            $input-prefix-color--filled: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-prefix-color--focused) and $search-background {
+            $input-prefix-color--focused: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-suffix-color--filled) and $search-background {
+            $input-suffix-color--filled: adaptive-contrast(var(--search-background));
+        }
+
+        @if not($input-suffix-color--focused) and $search-background {
+            $input-suffix-color--focused: adaptive-contrast(var(--search-background));
+        }
+    }
+
+    @if $search-background != transparent {
+        @if not($search-disabled-background) and $search-background {
+            $search-disabled-background: hsla(from var(--search-background) h s l / 0.4);
+        }
+
+        @if not($disabled-placeholder-color) and $search-disabled-background {
+            $disabled-placeholder-color: adaptive-contrast(var(--search-disabled-background));
+        }
+
+        @if not($disabled-text-color) and $search-disabled-background {
+            $disabled-text-color: adaptive-contrast(var(--search-disabled-background));
+        }
+    } @else {
+        @if not($search-disabled-background) and $search-background {
+            $search-disabled-background: var(--search-background);
+        }
+
+        @if not($disabled-placeholder-color) and $placeholder-color {
+            $disabled-placeholder-color: hsla(from var(--placeholder-color) h s l / 0.7);
+        }
+
+        @if not($disabled-text-color) and $idle-text-color {
+            $disabled-text-color: hsla(from var(--idle-text-color) h s l / 0.7);
+        }
     }
 
     @if not($search-resting-shadow) {
@@ -170,37 +393,70 @@
     @if not($search-disabled-shadow) {
         $search-disabled-shadow: elevation($search-disabled-elevation);
     }
+    //end search input
+
+    @if not($input-prefix-color) and $input-suffix-color {
+        $input-prefix-color: var(--input-suffix-color);
+    }
+
+    @if not($input-suffix-color) and $input-prefix-color {
+        $input-suffix-color: var(--input-prefix-color);
+    }
 
     @if not($input-prefix-background--filled) and $input-prefix-background {
-        $input-prefix-background--filled: $input-prefix-background;
+        $input-prefix-background--filled: var(--input-prefix-background);
     }
 
     @if not($input-prefix-background--focused) and $input-prefix-background {
-        $input-prefix-background--focused: $input-prefix-background;
+        $input-prefix-background--focused: var(--input-prefix-background);
     }
 
     @if not($input-prefix-color) and $input-prefix-background {
-        $input-prefix-color: text-contrast($input-prefix-background);
+        $input-prefix-color: adaptive-contrast(var(--input-prefix-background));
+    }
+
+    @if not($input-prefix-color--filled) and $input-prefix-color {
+        $input-prefix-color--filled: var(--input-prefix-color);
+    }
+
+    @if not($input-prefix-color--focused) and $input-prefix-color--filled {
+        $input-prefix-color--focused: var(--input-prefix-color--filled);
     }
 
     @if not($input-prefix-color--filled) and $input-prefix-background--filled {
-        $input-prefix-color--filled: text-contrast($input-prefix-background--filled);
+        $input-prefix-color--filled: adaptive-contrast(var(--input-prefix-background--filled));
     }
 
     @if not($input-prefix-color--focused) and $input-prefix-background--focused {
-        $input-prefix-color--focused: text-contrast($input-prefix-background--focused);
+        $input-prefix-color--focused: adaptive-contrast(var(--input-prefix-background--focused));
+    }
+
+    @if not($input-suffix-background--filled) and $input-suffix-background {
+        $input-suffix-background--filled: var(--input-suffix-background);
+    }
+
+    @if not($input-suffix-background--focused) and $input-suffix-background {
+        $input-suffix-background--focused: var(--input-suffix-background);
     }
 
     @if not($input-suffix-color) and $input-suffix-background {
-        $input-suffix-color: text-contrast($input-suffix-background);
+        $input-suffix-color: adaptive-contrast(var(--input-suffix-background));
+    }
+
+    @if not($input-suffix-color--filled) and $input-suffix-color {
+        $input-suffix-color--filled: var(--input-suffix-color);
+    }
+
+    @if not($input-suffix-color--focused) and $input-suffix-color--filled {
+        $input-suffix-color--focused: var(--input-suffix-color--filled);
     }
 
     @if not($input-suffix-color--filled) and $input-suffix-background--filled {
-        $input-suffix-color--filled: text-contrast($input-suffix-background--filled);
+        $input-suffix-color--filled: adaptive-contrast(var(--input-suffix-background--filled));
     }
 
     @if not($input-suffix-color--focused) and $input-suffix-background--focused {
-        $input-suffix-color--focused: text-contrast($input-suffix-background--focused);
+        $input-suffix-color--focused: adaptive-contrast(var(--input-suffix-background--focused));
     }
 
     @if not($box-border-radius) {
@@ -268,8 +524,6 @@
         input-suffix-background--filled: $input-suffix-background--filled,
         input-suffix-color--focused: $input-suffix-color--focused,
         input-suffix-background--focused: $input-suffix-background--focused,
-        theme: map.get($schema, '_meta', 'theme'),
-        variant: map.get($schema, '_meta', 'theme'),
         size: $size,
     ));
 }
@@ -282,7 +536,7 @@
     // when dynamically switching between the input `type` attribute.
     @include css-vars($theme);
 
-    $variant: map.get($theme, 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $transition-timing: .25s $out-cubic;
     $material-theme: $variant == 'material';
     $indigo-theme: $variant == 'indigo';
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
index ddd9e5dede5..e43cdf6fba2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/label/_label-theme.scss
@@ -33,9 +33,7 @@
         name: $name,
         selector: $selector,
         color: $color,
-        disabled-color: $disabled-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        variant: map.get($schema, '_meta', 'theme'),
+        disabled-color: $disabled-color
     ));
 }
 
@@ -46,7 +44,7 @@
     // The --variant CSS produced by css-vars is needed also
     // when dynamically switching between the input `type` attribute.
     @include css-vars($theme);
-    $variant: map.get($theme, 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %label-base {
         @include ellipsis();
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
index ee2f3119d64..e74b152efc6 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -94,160 +94,140 @@
     }
 
     $theme: digest-schema($list-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($header-background) and $background {
-        $header-background: $background;
+        $header-background: var(--background);
     }
 
     @if not($header-background) and $item-background {
-        $header-background: $item-background;
+        $header-background: var(--item-background);
     }
 
     @if not($item-background) and $background {
-        $item-background: $background;
+        $item-background: var(--background);
     }
 
     @if not($background) and $item-background {
-        $background: $item-background;
+        $background: var(--item-background);
     }
 
     @if not($item-background-hover) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-hover: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-hover: color.scale($item-background, $lightness: -8%);
-            }
-        }
+        $item-background-hover: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-background-active) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-active: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-active: color.scale($item-background, $lightness: -8%);
-            }
-        }
+    @if not($item-background-active) and $item-background-hover {
+        $item-background-active: var(--item-background-hover);
     }
 
-    @if not($item-background-selected) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            @if luminance($item-background) < .5 {
-                $item-background-selected: color.scale($item-background, $lightness: 8%);
-            } @else {
-                $item-background-selected: color.scale($item-background, $lightness: -8%);
-            }
-        }
+    @if not($item-background-selected) and $item-background-active {
+        $item-background-selected: var(--item-background-active);
     }
 
     @if not($header-text-color) and $header-background {
-        $header-text-color: text-contrast($header-background);
+        $header-text-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($item-text-color) and $item-background {
-        $item-text-color: text-contrast($item-background);
+        $item-text-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-title-color) and $item-background {
-        $item-title-color: text-contrast($item-background);
+        $item-title-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-action-color) and $item-background {
-        $item-action-color: text-contrast($item-background);
+        $item-action-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-thumbnail-color) and $item-background {
-        $item-thumbnail-color: text-contrast($item-background);
+        $item-thumbnail-color: adaptive-contrast(var(--item-background));
     }
 
     @if not($item-subtitle-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-subtitle-color: rgba(text-contrast($item-background), .74);
-        }
+        $item-subtitle-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .74);
     }
 
     @if not($item-subtitle-color) and $item-text-color {
-        $item-subtitle-color: $item-text-color;
+        $item-subtitle-color: var(--item-text-color);
     }
 
     @if not($item-text-color-hover) and $item-background-hover {
-        $item-text-color-hover: text-contrast($item-background-hover);
+        $item-text-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-title-color-hover) and $item-background-hover {
-        $item-title-color-hover: text-contrast($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: text-contrast($item-background-hover);
+        $item-action-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-thumbnail-color-hover) and $item-background-hover {
-        $item-thumbnail-color-hover: text-contrast($item-background-hover);
+        $item-thumbnail-color-hover: adaptive-contrast(var(--item-background-hover));
     }
 
     @if not($item-subtitle-color-hover) and $item-background-hover {
-        @if meta.type-of($item-background-hover) == 'color' {
-            $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);
-        }
+        $item-subtitle-color-hover: hsla(from adaptive-contrast(var(--item-background-hover)) h s l / .74);
     }
 
     @if not($item-subtitle-color-hover) and $item-text-color-hover {
-        $item-subtitle-color-hover: $item-text-color-hover;
+        $item-subtitle-color-hover: var(--item-text-color-hover);
     }
 
     @if not($item-text-color-active) and $item-background-active {
-        $item-text-color-active: text-contrast($item-background-active);
+        $item-text-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-text-color-selected) and $item-background-selected {
-        $item-text-color-selected: text-contrast($item-background-selected);
+        $item-text-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-title-color-active) and $item-background-active {
-        $item-title-color-active: text-contrast($item-background-active);
+        $item-title-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-title-color-selected) and $item-background-selected {
-        $item-title-color-selected: text-contrast($item-background-selected);
+        $item-title-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-action-color-active) and $item-background-active {
-        $item-action-color-active: text-contrast($item-background-active);
+        $item-action-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-action-color-selected) and $item-background-selected {
-        $item-action-color-selected: text-contrast($item-background-selected);
+        $item-action-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-thumbnail-color-active) and $item-background-active {
-        $item-thumbnail-color-active: text-contrast($item-background-active);
+        $item-thumbnail-color-active: adaptive-contrast(var(--item-background-active));
     }
 
     @if not($item-thumbnail-color-selected) and $item-background-selected {
-        $item-thumbnail-color-selected: text-contrast($item-background-selected);
+        $item-thumbnail-color-selected: adaptive-contrast(var(--item-background-selected));
     }
 
     @if not($item-subtitle-color-active) and $item-background-active {
-        @if meta.type-of($item-background-active) == 'color' {
-            $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);
-        }
+        $item-subtitle-color-active: hsla(from adaptive-contrast(var(--item-background-active)) h s l / .74);
     }
 
     @if not($item-subtitle-color-selected) and $item-background-selected {
-        @if meta.type-of($item-background-selected) == 'color' {
-            $item-subtitle-color-selected: rgba(text-contrast($item-background-selected), .74);
-        }
+        $item-subtitle-color-selected: hsla(from adaptive-contrast(var(--item-background-selected)) h s l / .74);
     }
 
     @if not($item-subtitle-color-active) and $item-text-color-active {
-        $item-subtitle-color-active: $item-text-color-active;
+        $item-subtitle-color-active: var(--item-text-color-active);
     }
 
     @if not($item-subtitle-color-selected) and $item-text-color-selected {
-        $item-subtitle-color-selected: $item-text-color-selected;
+        $item-subtitle-color-selected: var(--item-text-color-selected);
+    }
+
+    @if $variant == 'fluent' or $variant == 'bootstrap'{
+        @if not($border-color) and $item-background {
+            $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / .15);
+        }
     }
 
     @return extend($theme, (
@@ -283,10 +263,6 @@
         item-thumbnail-color-selected: $item-thumbnail-color-selected,
         border-color: $border-color,
         border-width: $border-width,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -296,7 +272,7 @@
 @mixin list($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $bootstrap-theme: $variant == 'bootstrap';
 
     $theme-padding-block-l: map.get((
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
index 0b2cb70cb10..adef165709e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -43,18 +43,32 @@
     }
 
     $theme: digest-schema($navbar-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($hover-icon-color) and $idle-icon-color {
+        $hover-icon-color: hsl(from (var(--idle-icon-color)) h s calc(l * 1.1));
     }
 
     @if not($idle-icon-color) and $background {
-        $idle-icon-color: text-contrast($background);
+        $idle-icon-color: adaptive-contrast(var(--background));
     }
 
-    @if not($hover-icon-color) and $background {
-        $hover-icon-color: text-contrast($background);
+    @if $variant == 'indigo' {
+        @if not($border-color) and $background {
+            $border-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.3);
+        }
+
+        @if not($hover-icon-color) and $background {
+            $hover-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.7);
+        }
+    } @else {
+        @if not($hover-icon-color) and $background {
+            $hover-icon-color: adaptive-contrast(var(--background));
+        }
     }
 
     @if not($shadow) {
@@ -74,10 +88,6 @@
         idle-icon-color: $idle-icon-color,
         hover-icon-color: $hover-icon-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -86,7 +96,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin navbar($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $navbar-padding: rem(16px);
     $navbar-title-fz: rem(18px, 16px);
@@ -194,19 +204,19 @@
         igx-icon,
         igc-icon {
             --component-size: 3;
+
             cursor: pointer;
+            user-select: none;
+            transition: color .15s $out-quad;
         }
 
-        > igx-icon,
-        > igc-icon {
-            transition: color .15s $out-quad;
+        >igx-icon,
+        >igc-icon {
             color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
-
-            user-select: none;
         }
 
         @if $variant == 'indigo' {
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
index 69f4ef7e25d..e9a91d6658f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss
@@ -73,42 +73,48 @@
     }
 
     $theme: digest-schema($navdrawer-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($item-header-text-color) and $background {
-        $item-header-text-color: text-contrast($background);
+        $item-header-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-text-color) and $background {
-        $item-text-color: text-contrast($background);
+        $item-text-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-icon-color) and $background {
-        $item-icon-color: text-contrast($background);
+        $item-icon-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($item-hover-background) and $background {
+        $item-hover-background: hsla(from adaptive-contrast(var(--background)) h s l / .08);
+    }
+
+    @if not($item-hover-text-color) and $background {
+        $item-hover-text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($item-hover-icon-color) and $background {
+        $item-hover-icon-color: adaptive-contrast(var(--background));
     }
 
     @if not($item-active-background) and $background {
-        @if meta.type-of($background) == 'color' {
-            $item-active-background: rgba(text-contrast($background), .24);
-        }
+        $item-active-background: hsla(from adaptive-contrast(var(--background)) h s l / .24);
     }
 
     @if not($item-active-text-color) and $item-active-background {
-        $item-active-text-color: text-contrast($item-active-background);
+        $item-active-text-color: adaptive-contrast(var(--item-active-background));
     }
 
     @if not($item-active-icon-color) and $item-active-background {
-        $item-active-icon-color: text-contrast($item-active-background);
+        $item-active-icon-color: adaptive-contrast(var(--item-active-background));
     }
 
-    @if not($item-hover-background) and $background {
-        @if meta.type-of($background) == 'color' {
-            $item-hover-background: rgba(text-contrast($background), .08);
-        }
+    @if not($item-disabled-text-color) and $background {
+        $item-disabled-text-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
     }
-
-    @if not($item-hover-text-color) and $background {
-        $item-hover-text-color: text-contrast($background);
+    @if not($item-disabled-icon-color) and $background {
+        $item-disabled-icon-color: hsla(from adaptive-contrast(var(--background)) h s l / .38);
     }
 
     @if not($shadow) {
@@ -133,11 +139,7 @@
         item-hover-icon-color: $item-hover-icon-color,
         item-disabled-text-color:$item-disabled-text-color,
         item-disabled-icon-color: $item-disabled-icon-color,
-        shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
+        shadow: $shadow
     ));
 }
 
@@ -147,7 +149,7 @@
 @mixin navdrawer($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $drawer-icon-size: rem(24px);
 
     $aside-padding: map.get((
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
index 68c4d19e3ae..45034ddb62c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/overlay/_overlay-theme.scss
@@ -37,7 +37,6 @@
         name: $name,
         selector: $selector,
         background-color: $background-color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
index 1e4883f8678..14130e74bbc 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss
@@ -38,10 +38,9 @@
     }
 
     $theme: digest-schema($grid-paginator-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: adaptive-contrast($background-color);
     }
 
     @return extend($theme, (
@@ -49,10 +48,6 @@
         text-color: $text-color,
         background-color: $background-color,
         border-color: $border-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -62,7 +57,7 @@
 @mixin paginator($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $paginator-padding-inline: (
         comfortable: rem(24px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
index 8c0512966e6..d2486da8ee3 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss
@@ -46,7 +46,6 @@
     }
 
     $theme: digest-schema($circular-bar-schema);
-    $meta: map.get($theme, '_meta');
 
     $fill-color-default-start: map.get($theme, 'fill-color-default');
     $fill-color-default-end: map.get($theme, 'fill-color-default');
@@ -73,10 +72,6 @@
         fill-color-success: $fill-color-success,
         text-color: $text-color,
         diameter: $diameter,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -94,7 +89,7 @@
     $diameter: calc(var(--circular-size) + var(--stroke-thickness));
     $radius: calc(var(--circular-size) / 2 - var(--stroke-thickness) * .5);
     $circumference: calc(#{$radius} * 2 * 3.1416);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %display-circular {
         --circular-size: calc(#{var-get($theme, 'diameter')} - var(--stroke-thickness));
@@ -136,7 +131,7 @@
 
             %outer {
 	            stroke: var-get($theme, 'fill-color-default');
-	            
+
                 @if $variant != 'bootstrap' {
                     animation: igx-initial-dashoffset var(--_transition-duration) linear;
                 } @else {
@@ -313,7 +308,7 @@
     %text--hidden {
         visibility: hidden;
     }
-	
+
 	%gradient-start {
 		stop-color: var-get($theme, 'fill-color-default-end');
 	}
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
index c4d3cfa10ec..fb381552206 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss
@@ -52,7 +52,6 @@
     $linear-bar-schema: if(map.has-key($schema, 'linear-bar'), map.get($schema, 'linear-bar'), $schema);
 
     $theme: digest-schema($linear-bar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($track-border-radius) {
         $track-border-radius: map.get($theme, 'track-border-radius');
@@ -71,10 +70,6 @@
         track-border-radius: $track-border-radius,
         track-height: $track-height,
         strip-size: $strip-size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -127,7 +122,7 @@ $easing-curves: (
 @mixin progress-linear($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %display-linear {
         position: relative;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
index e1d2cafd988..63c4d7aa15b 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss
@@ -52,14 +52,36 @@
     }
 
     $theme: digest-schema($query-builder-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
-    @if not($header-foreground) and $header-background {
-        $header-foreground: text-contrast($header-background);
+    @if not($label-foreground) and $background {
+        $label-foreground: hsla(from adaptive-contrast(var(--background)) h s l / 0.6);
     }
 
     @if not($header-background) and $background {
-        $header-background: $background;
+        $header-background: var(--background);
+    }
+
+    @if not($header-foreground) and $header-background {
+        $header-foreground: adaptive-contrast(var(--header-background));
+    }
+
+    @if not($subquery-header-background) and $header-background {
+        $subquery-header-background: hsl(from var(--header-background) h s calc(l * 0.9));
+    }
+
+    @if not($subquery-border-color) and $subquery-header-background {
+        $subquery-border-color: hsl(from var(--subquery-header-background) h s calc(l * 0.9));
+    }
+
+    @if not($separator-color) and $subquery-border-color {
+        $separator-color: hsl(from var(--subquery-border-color) h s calc(l * 0.9));
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($header-border) and $subquery-border-color {
+            $header-border: var(--subquery-border-color);
+        }
     }
 
     @return extend($theme, (
@@ -77,11 +99,6 @@
         separator-color: $separator-color,
         border-radius: $border-radius,
         label-foreground: $label-foreground,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -98,8 +115,8 @@
 @mixin query-builder($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: not($bootstrap-theme);
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
index 20db6a0ea35..522fbb0de5f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss
@@ -24,6 +24,7 @@
 /// @param {Color} $hover-color [null] - The border and dot colors on hover.
 /// @param {Color} $fill-color-hover [null] - The checked dot color on hover.
 /// @param {Color} $fill-hover-border-color [null] - The checked border color on hover.
+/// @param {Color} $focus-border-color [null] - The focus border color.
 /// @param {Color} $focus-outline-color [null] - The focus outlined color.
 /// @param {Color} $focus-outline-color-filled [null] - The focus outline color when radio is filled.
 /// @param {Color} $error-color [null] - The label, border and dot color in invalid state.
@@ -46,6 +47,7 @@
     $empty-fill-color: null,
     $fill-color: null,
     $fill-hover-border-color: null,
+    $focus-border-color: null,
     $focus-outline-color: null,
     $focus-outline-color-filled: null,
     $disabled-color: null,
@@ -67,7 +69,53 @@
     }
 
     $theme: digest-schema($radio-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($hover-color) and $empty-color {
+        $hover-color: hsl(from var(--empty-color) h s calc(l * 0.9));
+    }
+
+    @if not($fill-color-hover) and $fill-color {
+        $fill-color-hover: hsl(from var(--fill-color) h s calc(l * 0.9));
+    }
+
+    @if $variant != 'bootstrap' {
+        @if not($fill-hover-border-color) and $fill-color-hover {
+            $fill-hover-border-color: var(--fill-color-hover);
+        }
+    }
+
+    @if not($label-color-hover) and $label-color {
+        $label-color-hover: hsl(from var(--label-color) h s calc(l * 0.9));
+    }
+
+    @if not($error-color-hover) and $error-color {
+        $error-color-hover: hsl(from var(--error-color) h s calc(l * 0.9));
+    }
+
+    @if not($focus-outline-color-error) and $error-color {
+        $focus-outline-color-error: hsla(from var(--error-color) h s l / .5);
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($focus-border-color) and $fill-color {
+            $focus-border-color: var(--fill-color);
+        }
+
+        @if not($focus-outline-color) and $fill-color {
+            $focus-outline-color: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
+
+    @if $variant == 'indigo' {
+        @if not($focus-outline-color) and $empty-color {
+            $focus-outline-color: hsla(from var(--empty-color) h s l / .5);
+        }
+
+        @if not($focus-outline-color-filled) and $fill-color {
+            $focus-outline-color-filled: hsla(from var(--fill-color) h s l / .5);
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -82,16 +130,12 @@
         disabled-fill-color: $disabled-fill-color,
         hover-color: $hover-color,
         fill-color-hover: $fill-color-hover,
+        focus-border-color: $focus-border-color,
         focus-outline-color: $focus-outline-color,
         focus-outline-color-filled: $focus-outline-color-filled,
         error-color: $error-color,
         error-color-hover: $error-color-hover,
         focus-outline-color-error: $focus-outline-color-error,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -102,8 +146,8 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
-    $variant: map.get($theme, '_meta', 'variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $material-theme: $variant == 'material';
     $bootstrap-theme: $variant == 'bootstrap';
     $not-bootstrap-theme: $variant != 'bootstrap';
@@ -462,7 +506,7 @@
                 box-shadow: 0 0 0 rem(4px) var-get($theme, 'focus-outline-color');
 
                 &::after {
-                    border-color: color($color: 'primary', $variant: 200);
+                    border-color: var-get($theme, 'focus-border-color');
                 }
             }
         }
@@ -478,7 +522,7 @@
     %igx-checkbox--focused-hovered {
         @if $variant == 'bootstrap' {
             %radio-composite:after {
-                border-color: color($color: 'primary', $variant: 300);
+                border-color: hsl(from var-get($theme, 'focus-border-color') h calc(s * 1.12) calc(l * 0.82));
             }
         }
     }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
index 30d91d77268..4321a330a90 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/ripple/_ripple-theme.scss
@@ -37,7 +37,6 @@
         name: $name,
         selector: $selector,
         color: $color,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
index 66ce8b4857e..83149b01395 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/scrollbar/scrollbar-theme.scss
@@ -81,7 +81,6 @@
         sb-corner-bg: $sb-corner-bg,
         sb-corner-border-color: $sb-corner-border-color,
         sb-corner-border-size: $sb-corner-border-size,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
index 0829bce9fad..682f6ccc616 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -46,7 +46,39 @@
     }
 
     $theme: digest-schema($select-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if not($toggle-button-foreground) and $toggle-button-background {
+        $toggle-button-foreground: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if not($toggle-button-foreground-filled) and $toggle-button-background {
+        $toggle-button-foreground-filled: adaptive-contrast(var(--toggle-button-background));
+    }
+
+    @if $variant == 'material' {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: hsl(from var(--toggle-button-background) h s calc(l * 0.9));
+        }
+    } @else {
+        @if not($toggle-button-background-focus) and $toggle-button-background {
+            $toggle-button-background-focus: var(--toggle-button-background);
+        }
+    }
+
+    @if $variant == 'bootstrap' or $variant == 'indigo' {
+        @if not($toggle-button-background-focus--border) and $toggle-button-background {
+            $toggle-button-background-focus--border: var(--toggle-button-background)
+        }
+
+        @if not($toggle-button-foreground-focus) and $toggle-button-background-focus--border {
+            $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus--border));
+        }
+    } @else {
+        @if not($toggle-button-foreground-focus) and $toggle-button-background-focus {
+            $toggle-button-foreground-focus: adaptive-contrast(var(--toggle-button-background-focus));
+        }
+    }
 
     @return extend($theme, (
         name: $name,
@@ -59,10 +91,6 @@
         toggle-button-foreground-disabled: $toggle-button-foreground-disabled,
         toggle-button-foreground-filled: $toggle-button-foreground-filled,
         toggle-button-background-focus--border: $toggle-button-background-focus--border,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -71,7 +99,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin select($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %igx-select {
         position: relative;
@@ -127,7 +155,7 @@
     }
 
     .igx-input-group.igx-input-group--focused:not(.igx-input-group--box) {
-        @if $variant != 'fluent' {
+        @if $variant != 'fluent' and $variant != 'material' {
             %igx-select__toggle-button {
                 background: var-get($theme, 'toggle-button-background-focus--border');
             }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
index 850d59d8df1..313d3e25ccb 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss
@@ -71,10 +71,99 @@
     }
 
     $theme: digest-schema($slider-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'fluent' or $variant == 'indigo' {
+        @if not($thumb-border-color) and $track-color {
+            $thumb-border-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-border-color {
+            $track-color: var(--thumb-border-color);
+        }
+
+        @if not($thumb-border-hover-color) and $thumb-border-color {
+            $thumb-border-hover-color: hsl(from var(--thumb-border-color) h s calc(l * 1.1));
+        }
+
+        @if $variant == 'fluent' {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsl(from var(--thumb-border-color) h s calc(l * 1.2));
+            }
+        } @else {
+            @if not($thumb-focus-color) and $thumb-border-color {
+                $thumb-focus-color: hsla(from var(--thumb-border-color) h s l / 0.3);
+            }
+        }
+    }
+
+    @if $variant == 'material' {
+        @if not($thumb-color) and $track-color {
+            $thumb-color: var(--track-color);
+        }
+
+        @if not($track-color) and $thumb-color {
+            $track-color: var(--thumb-color);
+        }
+
+        @if not($base-track-color) and $track-color {
+            $base-track-color: hsla(from var(--track-color) h s l / 0.4);
+        }
+    }
+
+    @if $variant == 'bootstrap' {
+        @if not($thumb-border-color) and $thumb-color {
+            $thumb-border-color: var(--thumb-color);
+        }
+
+        @if not($thumb-focus-color) and $thumb-color {
+            $thumb-focus-color: hsla(from var(--thumb-color) h s l / 0.5);
+        }
+    }
+
+    @if not($track-hover-color) and $track-color {
+        $track-hover-color: hsl(from var(--track-color) h s calc(l * 1.1));
+    }
+
+    @if $variant != 'bootstrap' {
+        @if not($label-background-color) and $track-color {
+            $label-background-color: var(--track-color);
+        }
+    } @else {
+        @if not($label-background-color) and $thumb-color {
+            $label-background-color: var(--thumb-color);
+        }
+    }
+
 
     @if not($label-text-color) and $label-background-color {
-        $label-text-color: text-contrast($label-background-color);
+        $label-text-color: adaptive-contrast($label-background-color);
+    }
+
+    @if $variant != 'indigo' {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: var(--base-track-color);
+        }
+    } @else {
+        @if not($base-track-hover-color) and $base-track-color {
+            $base-track-hover-color: hsl(from var(--base-track-color) h s calc(l * 0.8));
+        }
+    }
+
+    @if not($disabled-base-track-color) and $base-track-color {
+        $disabled-base-track-color: hsla(from var(--base-track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-fill-track-color) and $track-color {
+        $disabled-fill-track-color: hsla(from var(--track-color) h s l / 0.5);
+    }
+
+    @if not($disabled-thumb-color) and $thumb-color {
+        $disabled-thumb-color: hsl(from var(--thumb-color) h calc(s * 0.5) calc(l * 1.2));
+    }
+
+    @if not($thumb-disabled-border-color) and $thumb-border-color {
+        $thumb-disabled-border-color: hsla(from var(--thumb-border-color) h s l / 0.5);
     }
 
     @return extend($theme, (
@@ -98,10 +187,6 @@
         disabled-fill-track-color: $disabled-fill-track-color,
         tick-label-color: $tick-label-color,
         tick-color: $tick-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -111,7 +196,7 @@
 @mixin slider($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $slider-height: rem(48px);
     $ripple-size: rem(40px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
index a1323ecae76..9b5b8a2922f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss
@@ -42,14 +42,13 @@
     }
 
     $theme: digest-schema($snackbar-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($button-color) and $background {
-        $button-color: text-contrast($background);
+        $button-color: adaptive-contrast(var(--background));
     }
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast(var(--background));
     }
 
     @if not($shadow) {
@@ -64,10 +63,6 @@
         text-color: $text-color,
         button-color: $button-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -78,7 +73,7 @@
     @include css-vars($theme);
     @include fade-in();
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $snackbar-min-height: rem(48px);
     $snackbar-padding: rem(7px) rem(24px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
index e2fabbea5b9..4993a71ce78 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss
@@ -42,16 +42,27 @@
     }
 
     $theme: digest-schema($splitter-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
     @if not($handle-color) and $bar-color {
-        $handle-color: text-contrast($bar-color);
+        $handle-color: adaptive-contrast(var(--bar-color));
     }
 
     @if not($expander-color) and $bar-color {
-        $expander-color: text-contrast($bar-color);
+        $expander-color: adaptive-contrast(var(--bar-color));
     }
 
+    @if $variant != 'indigo' {
+        @if not($focus-color) and $bar-color {
+            $focus-color: hsl(from var(--bar-color) h s calc(l * 0.7));
+        }
+    } @else {
+        @if not($focus-color) and $bar-color {
+            $focus-color: var(--bar-color);
+        }
+    }
+
+
     @return extend($theme, (
         name: $name,
         bar-color: $bar-color,
@@ -60,10 +71,6 @@
         border-radius: $border-radius,
         focus-color: $focus-color,
         size: $size,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -77,7 +84,7 @@
     $debug-hitbox: false;
     $hitbox-debug-color: rgba(coral, .24);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     //splitter-size + borders
     $splitter-size: unitless(map.get($theme, 'size')) + 2;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
index 5c4a6ecac35..2dd36102d7e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss
@@ -186,50 +186,222 @@
     }
 
     $theme: digest-schema($stepper-schema);
-    $meta: map.get($theme, '_meta');
 
-    @if not($indicator-background) and $step-background {
-        $indicator-background: text-contrast($step-background);
+    //default step
+    @if not($step-hover-background) and $step-background {
+        $step-hover-background: hsl(from var(--step-background) h s calc(l * 0.8));
     }
 
-    @if not($indicator-color) and $indicator-background {
-        $indicator-color: text-contrast($indicator-background);
+    @if not($step-focus-background) and $step-background {
+        $step-focus-background: hsl(from var(--step-background) h s calc(l * 0.9));
     }
 
-    @if not($complete-indicator-color) and $complete-indicator-background {
-        $complete-indicator-color: text-contrast($complete-indicator-background);
+    @if not($indicator-background) and $step-background {
+        $indicator-background: hsla(from adaptive-contrast(var(--step-background)) h s l / .6);
     }
 
-    @if not($invalid-indicator-color) and $invalid-indicator-background {
-        $invalid-indicator-color: text-contrast($invalid-indicator-background);
+    @if not($indicator-outline) and $indicator-background {
+        $indicator-outline: var(--indicator-background);
     }
 
-    @if not($current-indicator-color) and $current-indicator-background {
-        $current-indicator-color: text-contrast($current-indicator-background);
+    @if not($indicator-color) and $indicator-background {
+        $indicator-color: adaptive-contrast(var(--indicator-background));
     }
 
     @if not($title-color) and $step-background {
-        $title-color: text-contrast($step-background);
+        $title-color: adaptive-contrast(var(--step-background));
     }
 
     @if not($subtitle-color) and $step-background {
-        $subtitle-color: text-contrast($step-background);
+        $subtitle-color: adaptive-contrast(var(--step-background));
     }
 
     @if not($title-hover-color) and $step-hover-background {
-        $title-hover-color: text-contrast($step-hover-background);
+        $title-hover-color: adaptive-contrast(var(--step-hover-background));
     }
 
     @if not($subtitle-hover-color) and $step-hover-background {
-        $subtitle-hover-color: text-contrast($step-hover-background);
+        $subtitle-hover-color: adaptive-contrast(var(--step-hover-background));
     }
 
     @if not($title-focus-color) and $step-focus-background {
-        $title-focus-color: text-contrast($step-focus-background);
+        $title-focus-color: adaptive-contrast(var(--step-focus-background));
     }
 
     @if not($subtitle-focus-color) and $step-focus-background {
-        $subtitle-focus-color: text-contrast($step-focus-background);
+        $subtitle-focus-color: adaptive-contrast(var(--step-focus-background));
+    }
+
+    //current step
+    @if not($current-step-background) and $step-background {
+        $current-step-background: var(--step-background);
+    }
+
+    @if not($current-step-hover-background) and $current-step-background {
+        $current-step-hover-background: hsl(from var(--current-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($current-step-focus-background) and $current-step-background {
+        $current-step-focus-background: hsl(from var(--current-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($current-indicator-background) and $current-step-background {
+        $current-indicator-background: hsl(from var(--current-step-background) h s calc(l * 0.6));
+    }
+
+    @if not($current-indicator-outline) and $current-indicator-background {
+        $current-indicator-outline: var(--current-indicator-background);
+    }
+
+    @if not($current-indicator-color) and $current-indicator-background {
+        $current-indicator-color: adaptive-contrast(var(--current-indicator-background));
+    }
+
+    @if not($current-title-color) and $current-step-background {
+        $current-title-color: adaptive-contrast(var(--current-step-background));
+    }
+
+    @if not($current-subtitle-color) and $current-step-background {
+        $current-subtitle-color: adaptive-contrast(var(--current-step-background));
+    }
+
+    @if not($current-title-hover-color) and $current-step-hover-background {
+        $current-title-hover-color: adaptive-contrast(var(--current-step-hover-background));
+    }
+
+    @if not($current-subtitle-hover-color) and $current-step-hover-background {
+        $current-subtitle-hover-color: adaptive-contrast(var(--current-step-hover-background));
+    }
+
+    @if not($current-title-focus-color) and $current-step-focus-background {
+        $current-title-focus-color: adaptive-contrast(var(--current-step-focus-background));
+    }
+
+    @if not($current-subtitle-focus-color) and $current-step-focus-background {
+        $current-subtitle-focus-color: adaptive-contrast(var(--current-step-focus-background));
+    }
+
+    //invalid step
+    @if not($invalid-step-background) and $step-background {
+        $invalid-step-background: var(--step-background);
+    }
+
+    @if not($invalid-step-hover-background) and $invalid-step-background {
+        $invalid-step-hover-background: hsl(from var(--invalid-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($invalid-step-focus-background) and $invalid-step-background {
+        $invalid-step-focus-background: hsl(from var(--invalid-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($invalid-indicator-background) and not($step-background) and $invalid-step-background {
+        $invalid-indicator-background: adaptive-contrast(var(--invalid-step-background));
+    }
+
+    @if not($invalid-indicator-outline) and $invalid-indicator-background {
+        $invalid-indicator-outline: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-indicator-color) and not($step-background) and $invalid-indicator-background {
+        $invalid-indicator-color: adaptive-contrast(var(--invalid-indicator-background));
+    }
+
+    @if not($invalid-title-color) and $invalid-indicator-background {
+        $invalid-title-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-color) and $invalid-indicator-background {
+        $invalid-subtitle-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-title-hover-color) and $invalid-indicator-background {
+        $invalid-title-hover-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-hover-color) and $invalid-indicator-background {
+        $invalid-subtitle-hover-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-title-focus-color) and $invalid-indicator-background {
+        $invalid-title-focus-color: var(--invalid-indicator-background);
+    }
+
+    @if not($invalid-subtitle-focus-color) and $invalid-indicator-background {
+        $invalid-subtitle-focus-color: var(--invalid-indicator-background);
+    }
+
+    //completed step
+    @if not($complete-step-background) and $step-background {
+        $complete-step-background: var(--step-background);
+    }
+
+    @if not($complete-step-hover-background) and $complete-step-background {
+        $complete-step-hover-background: hsl(from var(--complete-step-background) h s calc(l * 0.8));
+    }
+
+    @if not($complete-step-focus-background) and $complete-step-background {
+        $complete-step-focus-background: hsl(from var(--complete-step-background) h s calc(l * 0.9));
+    }
+
+    @if not($complete-indicator-background) and $complete-step-background {
+        $complete-indicator-background: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-indicator-color) and $complete-indicator-background {
+        $complete-indicator-color: adaptive-contrast(var(--complete-indicator-background));
+    }
+
+    @if not($complete-title-color) and $complete-step-background {
+        $complete-title-color: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-subtitle-color) and $complete-step-background {
+        $complete-subtitle-color: adaptive-contrast(var(--complete-step-background));
+    }
+
+    @if not($complete-title-hover-color) and $complete-step-hover-background {
+        $complete-title-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+    }
+
+    @if not($complete-subtitle-hover-color) and $complete-step-hover-background {
+        $complete-subtitle-hover-color: adaptive-contrast(var(--complete-step-hover-background));
+    }
+
+    @if not($complete-title-focus-color) and $complete-step-focus-background {
+        $complete-title-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+    }
+
+    @if not($complete-subtitle-focus-color) and $complete-step-focus-background {
+        $complete-subtitle-focus-color: adaptive-contrast(var(--complete-step-focus-background));
+    }
+
+    //disabled step
+    @if not($disabled-indicator-background) and $step-background {
+        $disabled-indicator-background: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.5));
+    }
+
+    @if not($disabled-indicator-color) and $disabled-indicator-background {
+        $disabled-indicator-color: hsla(from (adaptive-contrast(var(--disabled-indicator-background)) h s l / 0.5));
+    }
+
+    @if not($disabled-indicator-outline) and $disabled-indicator-background {
+        $disabled-indicator-outline: var(--disabled-indicator-background);
+    }
+
+    @if not($disabled-title-color) and $step-background {
+        $disabled-title-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+    }
+
+    @if not($disabled-subtitle-color) and $step-background {
+        $disabled-subtitle-color: hsla(from (adaptive-contrast(var(--step-background)) h s l / 0.3));
+    }
+
+    @if not($step-separator-color) and $step-background {
+        $step-separator-color: var(--step-background);
+    }
+
+    @if not($step-separator-color) and $indicator-background {
+        $step-separator-color: var(--indicator-background);
     }
 
     @if not($border-radius-indicator) {
@@ -318,10 +490,6 @@
         // Border-radius
         border-radius-indicator: $border-radius-indicator,
         border-radius-step-header: $border-radius-step-header,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -331,7 +499,7 @@
 @mixin stepper($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     $indicator-size: map.get((
         'material': rem(24px),
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
index fc4dda80469..6a6055ffa76 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss
@@ -91,7 +91,116 @@
     }
 
     $theme: digest-schema($switch-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
+
+    @if $variant == 'material' {
+        @if not($track-off-color) and $thumb-off-color {
+            $track-off-color: hsl(from var(--thumb-off-color) h s calc(l * 0.5));
+        }
+
+        @if not($thumb-off-color) and $track-off-color {
+            $thumb-off-color: hsl(from var(--track-off-color) h s calc(l * 1.3));
+        }
+
+        @if not($thumb-disabled-color) and $thumb-off-color {
+            $thumb-disabled-color: hsl(from var(--thumb-off-color) h s calc(l + 20));
+        }
+
+        @if not($track-on-color) and $thumb-on-color {
+            $track-on-color: hsl(from var(--thumb-on-color) h s calc(l * 1.3));
+        }
+
+        @if not($track-on-hover-color) and $track-on-color {
+            $track-on-hover-color: var(--track-on-color);
+        }
+
+        @if not($thumb-on-color) and $track-on-color {
+            $thumb-on-color: hsl(from var(--track-on-color) h s calc(l * 0.6));
+        }
+
+        @if not($thumb-on-disabled-color) and $thumb-on-color {
+            $thumb-on-disabled-color: hsl(from var(--thumb-on-color) h s calc(l + 20));
+        }
+    } @else {
+        @if not($thumb-off-color) and $track-off-color {
+            $thumb-off-color: hsla(from adaptive-contrast(var(--track-off-color)) h s l / 0.8);
+        }
+        @if not($border-color) and $thumb-off-color {
+            $border-color: var(--thumb-off-color);
+        }
+
+        @if not($thumb-off-color) and $border-color {
+            $thumb-off-color: var(--border-color);
+        }
+
+        @if not($border-hover-color) and $track-off-color {
+            $border-hover-color: hsla(from var(--thumb-off-color) h s l / 0.9);
+        }
+
+        @if not($border-hover-color) and $border-color {
+            $border-hover-color: hsl(from var(--border-color) h s calc(l * 0.8));
+        }
+
+        @if not($thumb-on-color) and $track-on-color {
+            $thumb-on-color: adaptive-contrast(var(--track-on-color));
+        }
+
+        @if not($track-on-hover-color) and $track-on-color {
+            $track-on-hover-color: hsl(from var(--track-on-color) h s calc(l * 0.9));
+        }
+
+        @if not($border-on-color) and $track-on-color {
+            $border-on-color: var(--track-on-color);
+        }
+
+        @if not($border-on-hover-color) and $border-on-color {
+            $border-on-hover-color: hsl(from var(--border-on-color) h s calc(l * 0.9));
+        }
+
+        @if not($thumb-disabled-color) and $thumb-off-color {
+            $thumb-disabled-color: hsla(from var(--thumb-off-color) h s l / 0.3);
+        }
+
+        @if not($border-disabled-color) and $border-color {
+            $border-disabled-color: hsla(from var(--border-color) h s l / 0.3);
+        }
+
+        @if not($thumb-on-disabled-color) and $thumb-on-color {
+            $thumb-on-disabled-color: hsla(from var(--thumb-on-color) h s l / 0.3);
+        }
+
+        @if $variant == 'bootstrap' {
+            @if not($focus-fill-color) and $track-on-color {
+                $focus-fill-color: hsl(from var(--track-on-color) h s calc(l * 1.2));
+            }
+
+            @if not($focus-outline-color) and $focus-fill-color {
+                $focus-outline-color: hsla(from var(--focus-fill-color) h s l / 0.5);
+            }
+
+            @if not($focus-fill-hover-color) and $focus-fill-color {
+                $focus-fill-hover-color: hsl(from var(--focus-fill-color) h s calc(l * 0.9));
+            }
+        }
+
+        @if $variant == 'indigo' {
+            @if not($focus-outline-color) and $border-color {
+                $focus-outline-color: hsla(from var(--border-color) h s l / 0.5);
+            }
+
+            @if not($focus-outline-color-focused) and $border-on-color {
+                $focus-outline-color-focused: hsla(from var(--border-on-color) h s l / 0.5);
+            }
+        }
+    }
+
+    @if not($track-disabled-color) and $track-off-color {
+        $track-disabled-color: hsla(from var(--track-off-color) h s l / 0.5);
+    }
+
+    @if not($track-on-disabled-color) and $track-on-color {
+        $track-on-disabled-color: hsla(from var(--track-on-color) h s l / 0.5);
+    }
 
     @if not($resting-shadow) {
         $resting-elevation: map.get($switch-schema, 'resting-elevation');
@@ -155,11 +264,6 @@
         focus-outline-color-focused: $focus-outline-color-focused,
         focus-fill-color: $focus-fill-color,
         focus-fill-hover-color: $focus-fill-hover-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
     ));
 }
 
@@ -170,8 +274,8 @@
     @include css-vars($theme);
     @include scale-in-out($start-scale: .9);
 
-    $variant: map.get($theme, '_meta', 'variant');
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $variant: map.get($theme, '_meta', 'theme');
+    $theme-variant: map.get($theme, '_meta', 'variant');
 
     $switch-width: map.get((
         'material': 36px,
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
index 14db55a9061..60b4c2acbf2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss
@@ -78,82 +78,155 @@
     }
 
     $theme: digest-schema($tabs-schema);
-    $meta: map.get($theme, '_meta');
+    $variant: map.get($theme, '_meta', 'theme');
 
-    @if not($item-text-color) and $item-background {
-        @if meta.type-of($item-background) == 'color' {
-            $item-text-color: rgba(text-contrast($item-background), .54);
-        }
+    @if not($item-active-background) and $item-background {
+        $item-active-background: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-hover-color) and $item-background {
-        $item-hover-color: text-contrast($item-background);
-    }
+    @if not($item-background) {
+        @if not($item-text-color) and $item-icon-color {
+            $item-text-color: var(--item-icon-color);
+        }
+
+        @if not($item-icon-color) and $item-text-color {
+            $item-icon-color: var(--item-text-color);
+        }
+    } @else {
+        @if not($item-text-color) and $item-background {
+            $item-text-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.8);
+         }
 
-    @if not($item-hover-color) and $item-hover-background {
-        $item-hover-color: text-contrast($item-hover-background);
+         @if not($item-icon-color) and $item-background {
+             $item-icon-color: hsla(from adaptive-contrast(var(--item-background) h s l / 0.8));
+         }
     }
 
-    @if not($item-active-icon-color) and $item-active-background {
-        $item-active-icon-color: text-contrast($item-active-background);
+    @if not($item-active-background) {
+        @if $variant != 'bootstrap' {
+            @if not($item-active-icon-color) and $item-icon-color {
+                $item-active-icon-color: var(--item-icon-color);
+            }
+
+            @if not($item-active-color) and $item-text-color {
+                $item-active-color: var(--item-text-color);
+            }
+        }
+    } @else {
+        @if not($item-active-icon-color) and $item-active-color {
+            $item-active-icon-color: var(--item-active-color);
+        }
+
+        @if not($item-active-color) and $item-active-icon-color {
+            $item-active-color: var(--item-active-icon-color);
+        }
+
+        @if not($item-active-icon-color) and $item-active-background {
+            $item-active-icon-color: adaptive-contrast(var(--item-active-background));
+        }
+
+        @if not($item-active-color) and $item-active-background {
+            $item-active-color: adaptive-contrast(var(--item-active-background));
+        }
     }
 
-    @if not($item-active-icon-color) and $item-background {
-        $item-active-icon-color: text-contrast($item-background);
+    @if not($item-hover-background) {
+        @if not($item-hover-color) and $item-text-color {
+            $item-hover-color: hsla(from var(--item-text-color) h s l / 1);
+        }
+
+        @if not($item-hover-icon-color) and $item-icon-color {
+            $item-hover-icon-color: hsla(from var(--item-icon-color) h s l / 1);
+        }
+    } @else {
+        @if not($item-hover-color) {
+            $item-hover-color: adaptive-contrast(var(--item-hover-background));
+        }
+
+        @if not($item-hover-icon-color) {
+            $item-hover-icon-color: adaptive-contrast(var(--item-hover-background));
+        }
     }
 
-    @if not($indicator-color) and $item-background {
-        $indicator-color: text-contrast($item-background);
+    @if not($item-hover-background) and $item-background {
+        $item-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
     }
 
-    @if not($item-active-color) and $item-active-icon-color {
-        $item-active-color: $item-active-icon-color;
+    @if $variant == 'bootstrap' {
+        @if not($border-color) and $item-background {
+            $border-color: hsla(from adaptive-contrast(var(--item-background)) h s l / 0.5);
+        }
+
+        @if not($border-color--hover) and $border-color {
+            $border-color--hover: var(--border-color);
+        }
+    } @else {
+        @if not($item-background) {
+            @if not($indicator-color) and $item-text-color {
+                $indicator-color: var(--item-text-color);
+            }
+
+            @if not($indicator-color) and $item-icon-color {
+                $indicator-color: var(--item-icon-color);
+            }
+        } @else {
+            @if not($indicator-color) and $item-active-color {
+                $indicator-color: var(--item-active-color);
+            }
+
+            @if not($indicator-color) {
+                $indicator-color: adaptive-contrast(var(--item-background));
+            }
+        }
     }
 
     // Button
-    @if not($button-color) and $item-background {
-        $button-color: text-contrast($item-background);
-    }
+    @if $item-background {
+        @if not($button-background) and $item-background {
+            $button-background: var(--item-background);
+        }
 
-    @if not($button-color) and $button-background {
-        $button-color: text-contrast($button-background);
-    }
+        @if not($button-hover-background) and $item-background {
+            $button-hover-background: hsl(from var(--item-background) h s calc(l * 0.9));
+        }
+    } @else if not($button-background) {
+        @if $variant != 'material' {
+            @if not($button-color) and $item-text-color {
+                $button-color: var(--item-text-color);
+            }
+
+            @if not($button-hover-color) and $button-color {
+                $button-hover-color: hsl(from var(--button-color) h s calc(l * 0.9));
+            }
 
-    @if not($button-color) and $item-background {
-        $button-background: transparent;
+            @if not($button-disabled-color) and $button-color {
+                $button-disabled-color: hsla(from var(--button-color) h s l / 0.5);
+            }
+        }
     }
 
-    @if not($button-hover-color) and $button-hover-background {
-        $button-hover-color: text-contrast($button-hover-background);
+    @if $button-background {
+        @if not($button-hover-background) and $button-background {
+            $button-hover-background: hsl(from var(--button-background) h s calc(l * 0.9));
+        }
     }
 
-    @if not($button-hover-background) and $item-background {
-        $button-hover-color: text-contrast($item-background);
+    @if not($button-color) and $button-background {
+        $button-color: adaptive-contrast(var(--button-background));
     }
 
-    @if not($button-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-background: transparent;
-        } @else {
-            $button-background: rgba(255, 255, 255 , .1);
-        }
+    @if not($button-hover-color) and $button-hover-background {
+        $button-hover-color: adaptive-contrast(var(--button-hover-background));
     }
 
-    @if not($button-hover-background) and $item-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-hover-background: rgba(0, 0, 0, .05);
-        } @else {
-            $button-hover-background: rgba(255, 255, 255 , .14);
-        }
+    @if not($button-ripple-color) and $button-color {
+        $button-ripple-color: var(--button-color);
     }
 
-    @if not($button-ripple-color) and $button-background {
-        @if meta.type-of($item-background) == 'color' and lightness($item-background) > 50 {
-            $button-ripple-color: rgba(0, 0, 0, .4);
-        } @else {
-            $button-ripple-color: rgba(255, 255, 255, .4);
-        }
+    @if not($button-disabled-color) and $button-color {
+        $button-disabled-color: hsla(from var(--button-color) h s l / 0.4);
     }
+
     // Button end
 
     @if not($tab-ripple-color) and $item-active-background {
@@ -186,13 +259,8 @@
         tab-ripple-color: $tab-ripple-color,
         button-ripple-color: $button-ripple-color,
         border-color: $border-color,
-        border-radius: $border-radius,
         border-color--hover: $border-color--hover,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme'),
-            theme-variant: map.get($schema, '_meta', 'variant')
-        )),
+        border-radius: $border-radius,
     ));
 }
 
@@ -204,11 +272,11 @@
 @mixin tabs($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo';
-    $theme-variant: map.get($theme, '_meta', 'theme-variant');
+    $theme-variant: map.get($theme, '_meta', 'variant');
 
     $item-min-width: rem(90px);
     $item-max-width: rem(360px);
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
index b91921d5877..13d9f0b869f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -71,36 +71,57 @@
     }
 
     $theme: digest-schema($time-picker-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($text-color) and $background-color {
-        $text-color: text-contrast($background-color);
+        $text-color: hsla(from adaptive-contrast(var(--background-color)) h s l / 0.7);
+    }
+
+    @if not($hover-text-color) and $text-color {
+        $hover-text-color: hsla(from var(--text-color) h s l / 1);
+    }
+
+    @if not($header-background) and $selected-text-color {
+        $header-background: var(--selected-text-color);
+    }
+
+    @if not($header-background) and $background-color {
+        $header-background: var(--background-color);
     }
 
     @if not($header-hour-text-color) and $header-background {
-        $header-hour-text-color: text-contrast($header-background);
+        $header-hour-text-color: adaptive-contrast(var(--header-background));
     }
 
     @if not($selected-text-color) and $active-item-background {
-        $selected-text-color: text-contrast($active-item-background);
+        $selected-text-color: var(--active-item-background);
+    }
+
+    @if not($active-item-background) and $selected-text-color {
+        $active-item-background: var(--selected-text-color);
     }
 
     @if not($active-item-background) and $background-color {
-        @if meta.type-of($background-color) == 'color' {
-            $active-item-background: rgba(text-contrast($background-color), .12);
-        }
+        $active-item-background: hsla(from adaptive-contrast(var(--background-color)) h s l / .5);
+    }
+
+    @if not($active-item-foreground) and $active-item-background {
+        $active-item-foreground: adaptive-contrast(var(--active-item-background));
+    }
+
+    @if not($selected-text-color) and $background-color {
+        $selected-text-color: adaptive-contrast(var(--background-color));
     }
 
     @if not($disabled-text-color) and $disabled-item-background {
-        @if meta.type-of($disabled-item-background) == 'color' {
-            $disabled-text-color: rgba(text-contrast($disabled-item-background), .6);
-        }
+        $disabled-text-color: hsla(from adaptive-contrast(var(--disabled-item-background)) h s l / .6);
+    }
+
+    @if not($border-color) and $background-color {
+        $border-color: hsla(from adaptive-contrast(var(--background-color)) h s l / .6);
     }
 
     @if not($divider-color) and $border-color {
-        @if meta.type-of($border-color) == 'color' {
-            $divider-color: $border-color;
-        }
+        $divider-color: var(--border-color);
     }
 
     @if not($modal-shadow) {
@@ -133,10 +154,6 @@
         divider-color: $divider-color,
         time-item-size: $time-item-size,
         active-item-border-radius: $active-item-border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -146,7 +163,7 @@
 @mixin time-picker($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $not-bootstrap-theme: $variant != 'bootstrap';
 
     $picker-buttons-padding: map.get((
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
index e7cee91389c..acce0d38e78 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss
@@ -46,17 +46,20 @@
     }
 
     $theme: digest-schema($toast-schema);
-    $meta: map.get($theme, '_meta');
+
+    @if not($text-color) and $background {
+        $text-color: adaptive-contrast(var(--background));
+    }
+
+    @if not($border-color) and $text-color {
+        $border-color: hsla(from var(--text-color) h s l / 0.3);
+    }
 
     @if not($shadow) {
         $elevation: map.get($toast-schema, 'elevation');
         $shadow: elevation($elevation);
     }
 
-    @if not($text-color) and $background {
-        $text-color: text-contrast($background);
-    }
-
     @return extend($theme, (
         name: $name,
         background: $background,
@@ -64,10 +67,6 @@
         text-color: $text-color,
         border-color: $border-color,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -77,8 +76,8 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin toast($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
 
+    $variant: map.get($theme, '_meta', 'theme');
     $width: rem(52px);
     $margin: rem(42px) auto;
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
index 6ddc20f8d80..d3e21b45036 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss
@@ -43,7 +43,6 @@
     }
 
     $theme: digest-schema($tooltip-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($shadow) {
         $elevation: map.get($tooltip-schema, 'elevation');
@@ -51,7 +50,7 @@
     }
 
     @if not($text-color) and $background {
-        $text-color: text-contrast($background);
+        $text-color: adaptive-contrast($background);
     }
 
     @return extend($theme, (
@@ -61,10 +60,6 @@
         text-color: $text-color,
         border-radius: $border-radius,
         shadow: $shadow,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
     ));
 }
 
@@ -73,7 +68,7 @@
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tooltip($theme) {
     @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
 
     %tooltip-display {
         display: inline-flex;
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
index f5e40bcb62e..f64a00a367d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss
@@ -62,22 +62,49 @@
     }
 
     $theme: digest-schema($tree-schema);
-    $meta: map.get($theme, '_meta');
 
     @if not($foreground) and $background {
-        $foreground: text-contrast($background);
+        $foreground: adaptive-contrast(var(--background));
+    }
+
+    @if not($background-selected) and $background {
+        $background-selected: hsl(from var(--background) h s calc(l * 0.9));
+    }
+
+    @if not($hover-color) and $background {
+        $hover-color: hsla(from adaptive-contrast(var(--background)) h s l / 0.1);
+    }
+
+    @if not($hover-selected-color) and $background-selected {
+        $hover-selected-color: hsl(from var(--background-selected) h s calc(l * 0.9));
     }
 
     @if not($foreground-selected) and $background-selected {
-        $foreground-selected: text-contrast($background-selected);
+        $foreground-selected: adaptive-contrast(var(--background-selected));
+    }
+
+    @if not($background-active) and $background {
+        $background-active: hsl(from var(--background) h s calc(l * 0.9));
     }
 
     @if not($foreground-active) and $background-active {
-        $foreground-active: text-contrast($background-active);
+        $foreground-active: adaptive-contrast(var(--background-active));
+    }
+
+    @if not($background-active-selected) and $background-active {
+        $background-active-selected: hsl(from var(--background-active) h s calc(l * 0.9));
     }
 
     @if not($foreground-active-selected) and $background-active-selected {
-        $foreground-active-selected: text-contrast($background-active-selected);
+        $foreground-active-selected: adaptive-contrast(var(--background-active-selected));
+    }
+
+    @if not($background-disabled) and $background {
+        $background-disabled: color-mix(in hsl, var(--background), transparent 50%);
+    }
+
+    @if not($foreground-disabled) and $background-disabled {
+        $foreground-disabled: adaptive-contrast(var(--background-disabled));
     }
 
     @return extend($theme, (
@@ -98,10 +125,6 @@
         border-color: $border-color,
         hover-color: $hover-color,
         hover-selected-color: $hover-selected-color,
-        theme: map.get($schema, '_meta', 'theme'),
-        _meta: map.merge(if($meta, $meta, ()), (
-            variant: map.get($schema, '_meta', 'theme')
-        )),
         size: $size,
     ));
 }
@@ -112,7 +135,7 @@
 @mixin tree($theme) {
     @include css-vars($theme);
 
-    $variant: map.get($theme, '_meta', 'variant');
+    $variant: map.get($theme, '_meta', 'theme');
     $indigo-theme: $variant == 'indigo';
 
     $node-indent-default: (
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
index d43f68ae3f6..1fa70ac2dd5 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/watermark/_watermark-theme.scss
@@ -58,7 +58,6 @@
         color: $color,
         border-color: $border-color,
         border-radius: $border-radius,
-        theme: map.get($schema, '_meta', 'theme'),
     ));
 }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
index 28be2e20fee..072eeaf10e8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_base.scss
@@ -12,6 +12,7 @@
 @use 'igniteui-theming/sass/utils' as *;
 @use 'igniteui-theming/sass/themes' as *;
 @use 'igniteui-theming/sass/themes/charts' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/button' as *;
 
 ////
 /// @group themes
@@ -21,7 +22,9 @@
 
 /// Default noop handler for theme map transforms
 /// @access private
-@function theme-noop($arg) { @return $arg; }
+@function theme-noop($arg) {
+    @return $arg;
+}
 
 /// Generates an Ignite UI for Angular global theme.
 /// @param {Map} $palette - An palette to be used by the global theme.
@@ -39,7 +42,7 @@
     $exclude: (),
     $roundness: null,
     $elevation: true,
-    $elevations: elevations.$material-elevations,
+    $elevations: elevations.$material-elevations
 ) {
     @include theme-internal(
         $palette: $palette,
@@ -48,7 +51,7 @@
         $roundness: $roundness,
         $elevation: $elevation,
         $elevations: $elevations
-    )
+    );
 }
 
 /// Generates an Ignite UI for Angular global theme.
@@ -69,7 +72,7 @@
     $roundness: null,
     $elevation: true,
     $elevations: elevations.$material-elevations,
-    $theme-handler: meta.get-function('theme-noop'),
+    $theme-handler: meta.get-function('theme-noop')
 ) {
     // Stores all excluded component styles
     $excluded: ();
@@ -146,7 +149,10 @@
         $action-strip-theme-map: action-strip-theme(
             $schema: $schema,
         );
-        $action-strip-theme-map: meta.call($theme-handler, $action-strip-theme-map);
+        $action-strip-theme-map: meta.call(
+            $theme-handler,
+            $action-strip-theme-map
+        );
         @include action-strip($action-strip-theme-map);
     }
 
@@ -167,18 +173,38 @@
     }
 
     @if is-used('igx-button', $exclude) {
-        $button-theme-map: button-theme(
+        $flat-theme-map: flat-button-theme(
+            $schema: $schema,
+        );
+
+        $contained-theme-map: contained-button-theme(
             $schema: $schema,
         );
-        $button-theme-map: meta.call($theme-handler, $button-theme-map);
-        @include button($button-theme-map);
+
+        $outlined-theme-map: outlined-button-theme(
+            $schema: $schema,
+        );
+
+        $fab-theme-map: fab-button-theme(
+            $schema: $schema,
+        );
+
+        @include button(
+            $flat: meta.call($theme-handler, $flat-theme-map),
+            $contained: meta.call($theme-handler, $contained-theme-map),
+            $outlined: meta.call($theme-handler, $outlined-theme-map),
+            $fab:meta.call($theme-handler, $fab-theme-map)
+        );
     }
 
     @if is-used('igx-button-group', $exclude) {
         $button-group-theme-map: button-group-theme(
             $schema: $schema,
         );
-        $button-group-theme-map: meta.call($theme-handler, $button-group-theme-map);
+        $button-group-theme-map: meta.call(
+            $theme-handler,
+            $button-group-theme-map
+        );
         @include button-group($button-group-theme-map);
     }
 
@@ -227,55 +253,73 @@
             $schema: $schema,
         );
         $data-chart-theme-map: meta.call($theme-handler, $data-chart-theme-map);
-        @include  css-vars($data-chart-theme-map);
+        @include css-vars($data-chart-theme-map);
     }
 
     @if is-used('doughnut-chart', $exclude) {
         $doughnut-chart-theme-map: doughnut-chart-theme(
             $schema: $schema,
         );
-        $doughnut-chart-theme-map: meta.call($theme-handler, $doughnut-chart-theme-map);
-        @include  css-vars($doughnut-chart-theme-map);
+        $doughnut-chart-theme-map: meta.call(
+            $theme-handler,
+            $doughnut-chart-theme-map
+        );
+        @include css-vars($doughnut-chart-theme-map);
     }
 
     @if is-used('linear-gauge', $exclude) {
         $linear-gauge-theme-map: linear-gauge-theme(
             $schema: $schema,
         );
-        $linear-gauge-theme-map: meta.call($theme-handler, $linear-gauge-theme-map);
-        @include  css-vars($linear-gauge-theme-map);
+        $linear-gauge-theme-map: meta.call(
+            $theme-handler,
+            $linear-gauge-theme-map
+        );
+        @include css-vars($linear-gauge-theme-map);
     }
 
     @if is-used('radial-gauge', $exclude) {
         $radial-gauge-theme-map: radial-gauge-theme(
             $schema: $schema,
         );
-        $radial-gauge-theme-map: meta.call($theme-handler, $radial-gauge-theme-map);
-        @include  css-vars($radial-gauge-theme-map);
+        $radial-gauge-theme-map: meta.call(
+            $theme-handler,
+            $radial-gauge-theme-map
+        );
+        @include css-vars($radial-gauge-theme-map);
     }
 
     @if is-used('financial-chart', $exclude) {
         $financial-chart-theme-map: financial-chart-theme(
             $schema: $schema,
         );
-        $financial-chart-theme-map: meta.call($theme-handler, $financial-chart-theme-map);
-        @include  css-vars($financial-chart-theme-map);
+        $financial-chart-theme-map: meta.call(
+            $theme-handler,
+            $financial-chart-theme-map
+        );
+        @include css-vars($financial-chart-theme-map);
     }
 
     @if is-used('bullet-graph', $exclude) {
         $bullet-graph-theme-map: bullet-graph-theme(
             $schema: $schema,
         );
-        $bullet-graph-theme-map: meta.call($theme-handler, $bullet-graph-theme-map);
-        @include  css-vars($bullet-graph-theme-map);
+        $bullet-graph-theme-map: meta.call(
+            $theme-handler,
+            $bullet-graph-theme-map
+        );
+        @include css-vars($bullet-graph-theme-map);
     }
 
     @if is-used('category-chart', $exclude) {
         $category-chart-theme-map: category-chart-theme(
             $schema: $schema,
         );
-        $category-chart-theme-map: meta.call($theme-handler, $category-chart-theme-map);
-        @include  css-vars($category-chart-theme-map);
+        $category-chart-theme-map: meta.call(
+            $theme-handler,
+            $category-chart-theme-map
+        );
+        @include css-vars($category-chart-theme-map);
     }
 
     @if is-used('geo-map', $exclude) {
@@ -283,7 +327,7 @@
             $schema: $schema,
         );
         $geo-map-theme-map: meta.call($theme-handler, $geo-map-theme-map);
-        @include  css-vars($geo-map-theme-map);
+        @include css-vars($geo-map-theme-map);
     }
 
     @if is-used('pie-chart', $exclude) {
@@ -291,7 +335,7 @@
             $schema: $schema,
         );
         $pie-chart-theme-map: meta.call($theme-handler, $pie-chart-theme-map);
-        @include  css-vars($pie-chart-theme-map);
+        @include css-vars($pie-chart-theme-map);
     }
 
     @if is-used('sparkline', $exclude) {
@@ -299,23 +343,29 @@
             $schema: $schema,
         );
         $sparkline-theme-map: meta.call($theme-handler, $sparkline-theme-map);
-        @include  css-vars($sparkline-theme-map);
+        @include css-vars($sparkline-theme-map);
     }
 
     @if is-used('funnel-chart', $exclude) {
         $funnel-chart-theme-map: funnel-chart-theme(
             $schema: $schema,
         );
-        $funnel-chart-theme-map: meta.call($theme-handler, $funnel-chart-theme-map);
-        @include  css-vars($funnel-chart-theme-map);
+        $funnel-chart-theme-map: meta.call(
+            $theme-handler,
+            $funnel-chart-theme-map
+        );
+        @include css-vars($funnel-chart-theme-map);
     }
 
     @if is-used('shape-chart', $exclude) {
         $shape-chart-theme-map: shape-chart-theme(
             $schema: $schema,
         );
-        $shape-chart-theme-map: meta.call($theme-handler, $shape-chart-theme-map);
-        @include  css-vars($shape-chart-theme-map);
+        $shape-chart-theme-map: meta.call(
+            $theme-handler,
+            $shape-chart-theme-map
+        );
+        @include css-vars($shape-chart-theme-map);
     }
 
     @if is-used('igx-checkbox', $exclude) {
@@ -338,7 +388,10 @@
         $column-actions-theme-map: column-actions-theme(
             $schema: $schema,
         );
-        $column-actions-theme-map: meta.call($theme-handler, $column-actions-theme-map);
+        $column-actions-theme-map: meta.call(
+            $theme-handler,
+            $column-actions-theme-map
+        );
         @include column-actions($column-actions-theme-map);
     }
 
@@ -370,7 +423,10 @@
         $date-range-picker-theme-map: date-range-picker-theme(
             $schema: $schema,
         );
-        $date-range-picker-theme-map: meta.call($theme-handler, $date-range-picker-theme-map);
+        $date-range-picker-theme-map: meta.call(
+            $theme-handler,
+            $date-range-picker-theme-map
+        );
         @include date-range-picker($date-range-picker-theme-map);
     }
 
@@ -394,7 +450,10 @@
         $dock-manager-theme-map: dock-manager-theme(
             $schema: $schema,
         );
-        $dock-manager-theme-map: meta.call($theme-handler, $dock-manager-theme-map);
+        $dock-manager-theme-map: meta.call(
+            $theme-handler,
+            $dock-manager-theme-map
+        );
         @include dock-manager($dock-manager-theme-map);
     }
 
@@ -418,7 +477,10 @@
         $expansion-panel-theme-map: expansion-panel-theme(
             $schema: $schema,
         );
-        $expansion-panel-theme-map: meta.call($theme-handler, $expansion-panel-theme-map);
+        $expansion-panel-theme-map: meta.call(
+            $theme-handler,
+            $expansion-panel-theme-map
+        );
         @include expansion-panel($expansion-panel-theme-map);
     }
 
@@ -434,7 +496,10 @@
         $grid-summary-theme-map: grid-summary-theme(
             $schema: $schema,
         );
-        $grid-summary-theme-map: meta.call($theme-handler, $grid-summary-theme-map);
+        $grid-summary-theme-map: meta.call(
+            $theme-handler,
+            $grid-summary-theme-map
+        );
         @include grid-summary($grid-summary-theme-map);
     }
 
@@ -442,7 +507,10 @@
         $grid-toolbar-theme-map: grid-toolbar-theme(
             $schema: $schema,
         );
-        $grid-toolbar-theme-map: meta.call($theme-handler, $grid-toolbar-theme-map);
+        $grid-toolbar-theme-map: meta.call(
+            $theme-handler,
+            $grid-toolbar-theme-map
+        );
         @include grid-toolbar($grid-toolbar-theme-map);
     }
 
@@ -450,7 +518,10 @@
         $pivot-data-selector-theme-map: pivot-data-selector-theme(
             $schema: $schema,
         );
-        $pivot-data-selector-theme-map: meta.call($theme-handler, $pivot-data-selector-theme-map);
+        $pivot-data-selector-theme-map: meta.call(
+            $theme-handler,
+            $pivot-data-selector-theme-map
+        );
         @include pivot-data-selector($pivot-data-selector-theme-map);
     }
 
@@ -471,18 +542,33 @@
     }
 
     @if is-used('igx-icon-button', $exclude) {
-        $icon-button-theme-map: icon-button-theme(
+        $flat-theme-map: flat-icon-button-theme(
+            $schema: $schema,
+        );
+
+        $contained-theme-map: contained-icon-button-theme(
+            $schema: $schema,
+        );
+
+        $outlined-theme-map: outlined-icon-button-theme(
             $schema: $schema,
         );
-        $icon-button-theme-map: meta.call($theme-handler, $icon-button-theme-map);
-        @include icon-button($icon-button-theme-map);
+
+        @include icon-button(
+            $flat: meta.call($theme-handler, $flat-theme-map),
+            $contained: meta.call($theme-handler, $contained-theme-map),
+            $outlined: meta.call($theme-handler, $outlined-theme-map),
+        );
     }
 
     @if is-used('igx-input-group', $exclude) {
         $input-group-theme-map: input-group-theme(
             $schema: $schema,
         );
-        $input-group-theme-map: meta.call($theme-handler, $input-group-theme-map);
+        $input-group-theme-map: meta.call(
+            $theme-handler,
+            $input-group-theme-map
+        );
         @include input-group($input-group-theme-map);
     }
 
@@ -538,7 +624,10 @@
         $progress-circular-theme-map: progress-circular-theme(
             $schema: $schema,
         );
-        $progress-circular-theme-map: meta.call($theme-handler, $progress-circular-theme-map);
+        $progress-circular-theme-map: meta.call(
+            $theme-handler,
+            $progress-circular-theme-map
+        );
         @include progress-circular($progress-circular-theme-map);
     }
 
@@ -546,7 +635,10 @@
         $progress-linear-theme-map: progress-linear-theme(
             $schema: $schema,
         );
-        $progress-linear-theme-map: meta.call($theme-handler, $progress-linear-theme-map);
+        $progress-linear-theme-map: meta.call(
+            $theme-handler,
+            $progress-linear-theme-map
+        );
         @include progress-linear($progress-linear-theme-map);
     }
 
@@ -562,7 +654,10 @@
         $query-builder-theme-map: query-builder-theme(
             $schema: $schema,
         );
-        $query-builder-theme-map: meta.call($theme-handler, $query-builder-theme-map);
+        $query-builder-theme-map: meta.call(
+            $theme-handler,
+            $query-builder-theme-map
+        );
         @include query-builder($query-builder-theme-map);
     }
 
@@ -634,7 +729,10 @@
         $time-picker-theme-map: time-picker-theme(
             $schema: $schema,
         );
-        $time-picker-theme-map: meta.call($theme-handler, $time-picker-theme-map);
+        $time-picker-theme-map: meta.call(
+            $theme-handler,
+            $time-picker-theme-map
+        );
         @include time-picker($time-picker-theme-map);
     }
 
@@ -664,12 +762,7 @@
 /// @param {List} $exclude [( )] - A list of ig components to be excluded from the global theme styles.
 /// @see {mixin} theme
 /// @deprecated - Use the theme mixin instead.
-@mixin light-theme(
-    $palette,
-    $exclude: (),
-    $roundness: null,
-    $elevation: true,
-) {
+@mixin light-theme($palette, $exclude: (), $roundness: null, $elevation: true) {
     $gray: color($palette, gray);
     $surface: color($palette, surface);
 
@@ -689,7 +782,7 @@
         $schema: $light-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,
-        $elevation: $elevation,
+        $elevation: $elevation
     );
 }
 
@@ -698,12 +791,7 @@
 /// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.
 /// @see {mixin} theme
 /// @deprecated - Use the theme mixin instead.
-@mixin dark-theme(
-    $palette,
-    $exclude: (),
-    $roundness: null,
-    $elevation: true,
-) {
+@mixin dark-theme($palette, $exclude: (), $roundness: null, $elevation: true) {
     $gray: color($palette, gray);
     $surface: color($palette, surface);
 
@@ -723,6 +811,6 @@
         $schema: $dark-material-schema,
         $exclude: $exclude,
         $roundness: $roundness,
-        $elevation: $elevation,
+        $elevation: $elevation
     );
 }