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..ed0d3ebf0b9 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
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
+@use '../../../styles/themes/standalone' as *;
 
 ////
 /// @group themes
@@ -61,15 +62,17 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin highlight($theme) {
-    @include css-vars($theme);
+    @include layer(base) {
+        @include css-vars($theme);
 
-    %igx-highlight {
-        color: var-get($theme, 'resting-color');
-        background: var-get($theme, 'resting-background');
-    }
+        %igx-highlight {
+            color: var-get($theme, 'resting-color');
+            background: var-get($theme, 'resting-background');
+        }
 
-    %igx-highlight--active {
-        color: var-get($theme, 'active-color');
-        background: var-get($theme, 'active-background');
+        %igx-highlight--active {
+            color: var-get($theme, 'active-color');
+            background: var-get($theme, 'active-background');
+        }
     }
 }
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..c49ed86bf8d 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
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
+@use '../../../styles/themes/standalone' as *;
 
 ////
 /// @group themes
@@ -45,23 +46,25 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin ripple($theme) {
-    @include css-vars($theme);
+    @include layer(base) {
+        @include css-vars($theme);
 
-    %igx-ripple-display {
-        display: block;
-        position: absolute;
-        border-radius: border-radius(50%);
-        background: var-get($theme, 'color');
-        pointer-events: none;
-        transform-origin: center;
-        transform: translate3d(0, 0, 0) scale(0);
-        will-change: opacity, transform;
-        opacity: .5;
-        margin: 0 !important;
-        border: none !important;
-    }
+        %igx-ripple-display {
+            display: block;
+            position: absolute;
+            border-radius: border-radius(50%);
+            background: var-get($theme, 'color');
+            pointer-events: none;
+            transform-origin: center;
+            transform: translate3d(0, 0, 0) scale(0);
+            will-change: opacity, transform;
+            opacity: .5;
+            margin: 0 !important;
+            border: none !important;
+        }
 
-    %igx-ripple-wrapper {
-        overflow: hidden;
+        %igx-ripple-wrapper {
+            overflow: hidden;
+        }
     }
 }
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..316639506e7 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
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../base' as *;
 @use '../../themes/schemas' as *;
+@use '../../../styles/themes/standalone' as *;
 
 ////
 /// @group themes
@@ -72,28 +73,30 @@
 /// @see {mixin} css-vars
 /// @param {Map} $theme - The theme used to style the component.
 @mixin tooltip($theme) {
-    @include css-vars($theme);
-    $variant: map.get($theme, '_meta', 'variant');
+    @include layer(base) {
+        @include css-vars($theme);
+        $variant: map.get($theme, '_meta', 'variant');
 
-    %tooltip-display {
-        display: inline-flex;
-        justify-content: center;
-        flex-flow: column wrap;
-        background: var-get($theme, 'background');
-        color: var-get($theme, 'text-color');
-        border-radius: var-get($theme, 'border-radius');
-        box-shadow: map.get($theme, 'shadow');
-        margin: 0 auto;
-        padding: 0 rem(8px);
-        min-height: rem(24px);
+        %tooltip-display {
+            display: inline-flex;
+            justify-content: center;
+            flex-flow: column wrap;
+            background: var-get($theme, 'background');
+            color: var-get($theme, 'text-color');
+            border-radius: var-get($theme, 'border-radius');
+            box-shadow: map.get($theme, 'shadow');
+            margin: 0 auto;
+            padding: 0 rem(8px);
+            min-height: rem(24px);
 
-        @if $variant == 'indigo' {
-            padding: rem(4px) rem(8px);
+            @if $variant == 'indigo' {
+                padding: rem(4px) rem(8px);
+            }
         }
-    }
 
-    %tooltip--hidden {
-        display: none;
+        %tooltip--hidden {
+            display: none;
+        }
     }
 }