diff --git a/package-lock.json b/package-lock.json
index 25de3ad050a..cdae18e3989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@types/source-map": "0.5.2",
         "fflate": "^0.7.3",
         "hammerjs": "^2.0.8",
-        "igniteui-theming": "^3.0.4",
+        "igniteui-theming": "^3.0.6",
         "igniteui-trial-watermark": "^2.0.0",
         "lodash-es": "^4.17.21",
         "rxjs": "^6.6.7",
@@ -12382,9 +12382,9 @@
       }
     },
     "node_modules/igniteui-theming": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.4.tgz",
-      "integrity": "sha512-VUYLTdh/+SLWqxBqVxU3xFytDbbmlWhnT9ElkKbkBc0JwR6yyUMZ8kYHmupByHgO81l9FR/mX+wMB4uHkz4TvQ==",
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-3.0.6.tgz",
+      "integrity": "sha512-4nZN7iqp8+H9EgWWHVqXgwUekxxVn/2Bnhfy5UhP3Tn4hXoTR1RqgjgMUSmcxvAmLGwhQNFB3GlESso5YQbs2w==",
       "peerDependencies": {
         "sass": "^1.58.1"
       }
diff --git a/package.json b/package.json
index 405112b5f25..35999f8d44b 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
     "@types/source-map": "0.5.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.0.4",
+    "igniteui-theming": "^3.0.6",
     "igniteui-trial-watermark": "^2.0.0",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",
diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json
index 3f7e5463bfa..375d7f9f074 100644
--- a/projects/igniteui-angular/package.json
+++ b/projects/igniteui-angular/package.json
@@ -76,7 +76,7 @@
         "igniteui-trial-watermark": "^1.0.3",
         "lodash-es": "^4.17.21",
         "uuid": "^9.0.0",
-        "igniteui-theming": "^3.0.4",
+        "igniteui-theming": "^3.0.6",
         "@igniteui/material-icons-extended": "^3.0.0"
     },
     "peerDependencies": {
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 5554ac96fcb..1844783983d 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
@@ -205,23 +205,13 @@
         border-color: var-get($theme, 'empty-color');
         border-radius: var-get($theme, 'border-radius');
         -webkit-tap-highlight-color: transparent;
-        transition: border-color .2s $ease-out-quad;
+        transition: border-color .2s $ease-out-quad, background .2s $ease-out-quad;
         overflow: hidden;
-
-        &::after {
-            position: absolute;
-            content: '';
-            inset: 0;
-            transition: background .2s $ease-out-quad;
-        }
     }
 
     %cbx-composite--x {
         border-color: var-get($theme, 'fill-color');
-
-        &::after {
-            background: var-get($theme, 'fill-color');
-        }
+        background: var-get($theme, 'fill-color');
     }
 
     %cbx-composite--invalid {
@@ -238,33 +228,21 @@
 
     %cbx-composite--x--invalid {
         border-color: var-get($theme, 'error-color');
-
-        &::after {
-            background: var-get($theme, 'error-color');
-        }
+        background: var-get($theme, 'error-color');
     }
 
     %cbx-composite--x--hover {
         border-color: var-get($theme, 'fill-color-hover');
-
-        &::after {
-            background: var-get($theme, 'fill-color-hover');
-        }
+        background: var-get($theme, 'fill-color-hover');
     }
 
     %cbx-composite--x--invalid--hover {
         @if $variant == 'material' or  $variant == 'fluent' {
             border-color: var-get($theme, 'error-color-hover');
-
-            &::after {
-                background: var-get($theme, 'error-color-hover');
-            }
+            background: var-get($theme, 'error-color-hover');
         } @else {
             border-color: var-get($theme, 'error-color');
-
-            &::after {
-                background: var-get($theme, 'error-color');
-            }
+            background: var-get($theme, 'error-color');
         }
     }
 
@@ -278,19 +256,13 @@
     }
 
     %cbx-composite--x--disabled {
-        background: var-get($theme, 'disabled-color');
-
-        &::after {
+        @if $variant != 'indigo-design' {
             background: var-get($theme, 'disabled-color');
         }
 
         @if $variant == 'indigo-design' {
             background: var-get($theme, 'disabled-indeterminate-color');
             border-color: var-get($theme, 'disabled-indeterminate-color');
-
-            &::after {
-                background: var-get($theme, 'disabled-indeterminate-color');
-            }
         }
 
         @if $bootstrap-theme {
@@ -322,14 +294,12 @@
             %cbx-composite {
                 border-color: var-get($theme, 'fill-color-hover');
 
-                &::before {
-                    border-color: var-get($theme, 'fill-color-hover');
+                @if $variant != 'fluent' {
+                    background: var-get($theme, 'fill-color-hover');
                 }
 
-                @if $variant != 'fluent' {
-                    &::after {
-                        background: var-get($theme, 'fill-color-hover');
-                    }
+                &::before {
+                    background: var-get($theme, 'fill-color-hover');
                 }
             }
         }
@@ -337,10 +307,7 @@
         @if $variant == 'material' {
             %cbx-composite--x--disabled {
                 border-color: var-get($theme, 'disabled-indeterminate-color');
-
-                &::after {
-                    background: var-get($theme, 'disabled-indeterminate-color');
-                }
+                background: var-get($theme, 'disabled-indeterminate-color');
             }
         }
 
@@ -352,10 +319,6 @@
             %cbx-composite {
                 background: transparent;
 
-                &::after {
-                    background: transparent;
-                }
-
                 &::before {
                     content: '';
                     position: absolute;
@@ -364,7 +327,7 @@
                     width: rem(10px);
                     height: rem(10px);
                     border-radius: border-radius(rem(2px));
-                    border: rem(5px) solid var-get($theme, 'fill-color');
+                    background: var-get($theme, 'fill-color');
                     z-index: 1;
                 }
             }
@@ -372,12 +335,7 @@
             %cbx-composite--x--disabled {
                 background: transparent;
 
-                &::after {
-                    background: transparent;
-                }
-
                 &::before {
-                    border-color: var-get($theme, 'disabled-color');
                     background: var-get($theme, 'disabled-color');
                 }
             }
@@ -386,9 +344,7 @@
 
     %igx-checkbox--indeterminate--invalid {
         %cbx-composite--x {
-            &::after {
-                background: var-get($theme, 'error-color');
-            }
+            background: var-get($theme, 'error-color');
         }
 
         @if $variant == 'fluent' {
@@ -396,14 +352,12 @@
                 border-color: var-get($theme, 'error-color');
 
                 &::before {
-                    border-color: var-get($theme, 'error-color');
+                    background: var-get($theme, 'error-color');
                 }
             }
 
             %cbx-composite--x {
-                &::after {
-                    background: transparent;
-                }
+                background: transparent;
             }
 
             &:hover {
@@ -411,7 +365,7 @@
                     border-color: var-get($theme, 'error-color-hover');
 
                     &::before {
-                        border-color: var-get($theme, 'error-color-hover');
+                        background: var-get($theme, 'error-color-hover');
                     }
                 }
             }