diff --git a/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss b/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss
index ed1f961e748..0084a10ee22 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/_mixins.scss
@@ -1,4 +1,5 @@
 @use 'igniteui-theming/sass/color/functions' as *;
+@use 'igniteui-theming/sass/color/presets/light/material' as *;
 @use 'variables' as *;
 @use 'functions' as *;
 @use 'sass:color';
@@ -112,7 +113,7 @@
 ///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-class
-@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {
+@mixin gen-color-classes($prop, $prefix, $suffix) {
     @each $name, $color in $palette {
         @each $variant, $value in $color {
             @if meta.type-of($value) != 'map' {
@@ -140,6 +141,6 @@
 ///     $suffix: 'bg'
 ///   );
 /// @requires {mixin} gen-color-classes
-@mixin color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {
-    @include gen-color-classes($prop, $prefix, $suffix, $palette);
+@mixin color-classes($prop, $suffix: null, $prefix: 'igx') {
+    @include gen-color-classes($prop, $prefix, $suffix);
 }
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 b7618e3e9c2..28be2e20fee 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
@@ -670,16 +670,16 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $gray: color($palette, 'gray');
-    $surface: color($palette, 'surface');
+    $gray: color($palette, gray);
+    $surface: color($palette, surface);
 
     $_light-palette: palette(
-        $primary: color($palette, 'primary'),
-        $secondary: color($palette, 'secondary'),
-        $info: color($palette, 'info'),
-        $success: color($palette, 'success'),
-        $warn: color($palette, 'warn'),
-        $error: color($palette, 'error'),
+        $primary: color($palette, primary),
+        $secondary: color($palette, secondary),
+        $info: color($palette, info),
+        $success: color($palette, success),
+        $warn: color($palette, warn),
+        $error: color($palette, error),
         $surface: if($surface != #fff, $surface, #fff),
         $gray: if($gray != #9e9e9e, $gray, #000),
     );
@@ -704,16 +704,16 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $gray: color($palette, 'gray');
-    $surface: color($palette, 'surface');
+    $gray: color($palette, gray);
+    $surface: color($palette, surface);
 
     $_dark-palette: palette(
-        $primary: color($palette, 'primary'),
-        $secondary: color($palette, 'secondary'),
-        $info: color($palette, 'info'),
-        $success: color($palette, 'success'),
-        $warn: color($palette, 'warn'),
-        $error: color($palette, 'error'),
+        $primary: color($palette, primary),
+        $secondary: color($palette, secondary),
+        $info: color($palette, info),
+        $success: color($palette, success),
+        $warn: color($palette, warn),
+        $error: color($palette, error),
         $surface: if($surface != #fff, $surface, #222),
         $gray: if($gray != #9e9e9e, $gray, #fff),
     );
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss
index 0a60109d537..b2d67fc8ad5 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_bootstrap.scss
@@ -20,14 +20,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-bootstrap-palette, 'gray');
-    $surface: color($light-bootstrap-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-bootstrap-palette, gray);
+    $surface: color($light-bootstrap-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -58,14 +58,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-bootstrap-palette, 'gray');
-    $surface: color($dark-bootstrap-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-bootstrap-palette, gray);
+    $surface: color($dark-bootstrap-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss
index 865f2e37b6b..939ac05bd41 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_fluent.scss
@@ -20,14 +20,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-fluent-palette, 'gray');
-    $surface: color($light-fluent-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-fluent-palette, gray);
+    $surface: color($light-fluent-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -58,14 +58,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-fluent-palette, 'gray');
-    $surface: color($dark-fluent-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-fluent-palette, gray);
+    $surface: color($dark-fluent-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss
index d4b231236f7..db86ea6464a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/generators/_indigo.scss
@@ -21,14 +21,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($light-indigo-palette, 'gray');
-    $surface: color($light-indigo-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($light-indigo-palette, gray);
+    $surface: color($light-indigo-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
@@ -60,14 +60,14 @@
     $roundness: null,
     $elevation: true,
 ) {
-    $primary: color($palette, 'primary');
-    $secondary: color($palette, 'secondary');
-    $gray: color($dark-indigo-palette, 'gray');
-    $surface: color($dark-indigo-palette, 'surface');
-    $info: color($palette, 'info');
-    $success: color($palette, 'success');
-    $warn: color($palette, 'warn');
-    $error: color($palette, 'error');
+    $primary: color($palette, primary);
+    $secondary: color($palette, secondary);
+    $gray: color($dark-indigo-palette, gray);
+    $surface: color($dark-indigo-palette, surface);
+    $info: color($palette, info);
+    $success: color($palette, success);
+    $warn: color($palette, warn);
+    $error: color($palette, error);
 
     @include theme(
         $palette: palette(
diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss
index b0c5d94bd6f..8e8f69b6f13 100644
--- a/src/app/styleguide/colors/color.sample.scss
+++ b/src/app/styleguide/colors/color.sample.scss
@@ -53,13 +53,11 @@
 }
 
 @include color-classes(
-    $palette: $palette,
     $prop: 'background',
     $prefix: 'bg'
 );
 
 @include color-classes(
-    $palette: $palette,
     $prop: 'color',
     $prefix: 'color'
 );
diff --git a/src/app/styleguide/shadows/shadows.sample.css b/src/app/styleguide/shadows/shadows.sample.css
index a0a9c4ee00e..92f8ed95849 100644
--- a/src/app/styleguide/shadows/shadows.sample.css
+++ b/src/app/styleguide/shadows/shadows.sample.css
@@ -34,52 +34,42 @@
     font-size: 14px;
 }
 
-.elevation-sample.elevate-1 {
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .26), 0 1px 1px 0 rgba(0, 0, 0, .12),
-        0 2px 1px -1px rgba(0, 0, 0, .08);
+.elevate-1 {
+    box-shadow: var(--ig-elevation-1);
 }
 
-.elevation-sample.elevate-2 {
-    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .26), 0 2px 2px 0 rgba(0, 0, 0, .12),
-        0 3px 1px -2px rgba(0, 0, 0, .08);
+.elevate-2 {
+    box-shadow: var(--ig-elevation-2);
 }
 
-.elevation-sample.elevate-3 {
-    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .26), 0 3px 4px 0 rgba(0, 0, 0, .12),
-        0 3px 3px -2px rgba(0, 0, 0, .08);
+.elevate-3 {
+    box-shadow: var(--ig-elevation-3);
 }
 
-.elevation-sample.elevate-4 {
-    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .26),
-        0 4px 5px 0 rgba(0, 0, 0, .12), 0 1px 10px 0 rgba(0, 0, 0, .08);
+.elevate-4 {
+    box-shadow: var(--ig-elevation-4);
 }
 
-.elevation-sample.elevate-6 {
-    box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .26),
-        0 6px 10px 0 rgba(0, 0, 0, .12), 0 1px 18px 0 rgba(0, 0, 0, .08);
+.elevate-6 {
+    box-shadow: var(--ig-elevation-6);
 }
 
-.elevation-sample.elevate-8 {
-    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .26),
-        0 8px 10px 1px rgba(0, 0, 0, .12), 0 3px 14px 2px rgba(0, 0, 0, .08);
+.elevate-8 {
+    box-shadow: var(--ig-elevation-8);
 }
 
-.elevation-sample.elevate-9 {
-    box-shadow: 0 5px 6px -3px rgba(0, 0, 0, .26),
-        0 9px 12px 1px rgba(0, 0, 0, .12), 0 3px 16px 2px rgba(0, 0, 0, .08);
+.elevate-9 {
+    box-shadow: var(--ig-elevation-9);
 }
 
-.elevation-sample.elevate-12 {
-    box-shadow: 0 7px 8px -4px rgba(0, 0, 0, .26),
-        0 12px 17px 2px rgba(0, 0, 0, .12), 0 5px 22px 4px rgba(0, 0, 0, .08);
+.elevate-12 {
+    box-shadow: var(--ig-elevation-12);
 }
 
-.elevation-sample.elevate-16 {
-    box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .26),
-        0 16px 24px 2px rgba(0, 0, 0, .12), 0 6px 30px 5px rgba(0, 0, 0, .08);
+.elevate-16 {
+    box-shadow: var(--ig-elevation-16);
 }
 
-.elevation-sample.elevate-24 {
-    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .26),
-        0 24px 38px 3px rgba(0, 0, 0, .12), 0 9px 46px 8px rgba(0, 0, 0, .08);
+.elevate-24 {
+    box-shadow: var(--ig-elevation-24);
 }
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 245a0915f92..fa429165538 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -11,26 +11,26 @@ $background-color: var(--ig-gray-900-contrast);
 $foreground-color: var(--ig-gray-900);
 
 // $handmade-palette: (
-//     primary: (
-//         50: #e6eff8,
+//     'primary': (
+//         '50': #e6eff8,
 //         '50-contrast': black,
-//         100: #bfd7f2,
+//         '100': #bfd7f2,
 //         '100-contrast': black,
-//         200: #98bfec,
+//         '200': #98bfec,
 //         '200-contrast': black,
-//         300: #85b5e9,
+//         '300': #85b5e9,
 //         '300-contrast': white,
-//         400: #73a6e4,
+//         '400': #73a6e4,
 //         '400-contrast': white,
-//         500: #6797de,
+//         '500': #6797de,
 //         '500-contrast': white,
-//         600: #3681dd,
+//         '600': #3681dd,
 //         '600-contrast': white,
-//         700: #357fda,
+//         '700': #357fda,
 //         '700-contrast': white,
-//         800: #306dc8,
+//         '800': #306dc8,
 //         '800-contrast': white,
-//         900: #284ea8,
+//         '900': #284ea8,
 //         '900-contrast': white,
 //         'A100': #98bfec,
 //         'A100-contrast': white,
@@ -41,26 +41,26 @@ $foreground-color: var(--ig-gray-900);
 //         'A700': #284ea8,
 //         'A700-contrast': white
 //     ),
-//     secondary: (
-//         50: #fef7e2,
-//         '50-contrast': black,
-//         100: #fdeab7,
+//     'secondary': (
+//         '50': #fef7e2,
+//         '50-coNtrast': black,
+//         '100': #fdeab7,
 //         '100-contrast': black,
-//         200: #fbdd89,
+//         '200': #fbdd89,
 //         '200-contrast': black,
-//         300: #fad15c,
+//         '300': #fad15c,
 //         '300-contrast': black,
-//         400: #f9c63f,
+//         '400': #f9c63f,
 //         '400-contrast': black,
-//         500: #f7bd32,
+//         '500': #f7bd32,
 //         '500-contrast': white,
-//         600: #f6b02d,
+//         '600': #f6b02d,
 //         '600-contrast': white,
-//         700: #f49e2a,
+//         '700': #f49e2a,
 //         '700-contrast': white,
-//         800: #f38e28,
+//         '800': #f38e28,
 //         '800-contrast': white,
-//         900: #f38e28,
+//         '900': #f38e28,
 //         '900-contrast': white,
 //         'A100': #fbdd89,
 //         'A100-contrast': black,
@@ -71,46 +71,46 @@ $foreground-color: var(--ig-gray-900);
 //         'A700': #f38e28,
 //         'A700-contrast': white
 //     ),
-//     gray: (
-//         50: #fff,
+//     'gray':(
+//         '50': #fff,
 //         '50-contrast': black,
-//         100: #fafafa,
+//         '100': #fafafa,
 //         '100-contrast': black,
-//         200: #f5f5f5,
+//         '200': #f5f5f5,
 //         '200-contrast': black,
-//         300: #f0f0f0,
+//         '300': #f0f0f0,
 //         '300-contrast': black,
-//         400: #dedede,
+//         '400': #dedede,
 //         '400-contrast': black,
-//         500: #b3b2b2,
+//         '500': #b3b2b2,
 //         '500-contrast': black,
-//         600: #979696,
+//         '600': #979696,
 //         '600-contrast': white,
-//         700: #7b7a7a,
+//         '700': #7b7a7a,
 //         '700-contrast': white,
-//         800: #404040,
+//         '800': #404040,
 //         '800-contrast': white,
-//         900: #1a1a1a,
+//         '900': #1a1a1a,
 //         '900-contrast': white
 //     ),
-//     info: (
-//         500: rgb(18, 118, 211),
+//     'info': (
+//         '500': rgb(18, 118, 211),
 //         '500-contrast': black
 //     ),
-//     success: (
-//         500: rgb(76, 184, 96),
+//     'success': (
+//         '500': rgb(76, 184, 96),
 //         '500-contrast': black
 //     ),
-//     warn: (
-//         500: rgb(251, 178, 60),
+//     'warn': (
+//         '500': rgb(251, 178, 60),
 //         '500-contrast': black
 //     ),
-//     error: (
-//         500: rgb(255, 20, 75),
+//     'error': (
+//         '500': rgb(255, 20, 75),
 //         '500-contrast': black
 //     ),
-//     surface: (
-//         500: rgb(255, 255, 255),
+//     'surface': (
+//         '500': rgb(255, 255, 255),
 //         '500-contrast': black
 //     )
 // );