diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe57fcc22f6..8593cb382d3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,7 +3,9 @@
 All notable changes for each version of this project will be documented in this file.
 
 ## 7.2.2
-- **Themes** - Add support for gradients and images as values for component themes via the component theme functions.
+- **Themes** 
+    - Add support for gradients and images as values for component themes via the component theme functions.
+    - `Palettes` - added surface color to the palette. The surface color is used by cards, pickers, dialog windows, etc. as the default background.
 
 ## 7.2.1
 - **Feature** Column Hiding and Column Pinning components now expose a `disableFilter` property which allows hiding the filter columns input from the UI.
diff --git a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
index be6a0fab286..f0045c6b90c 100644
--- a/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss
@@ -289,6 +289,7 @@
 /// @param {Color} $warn [#fbb13c] - The warning color used throughout the application.
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
 /// @param {Color} $grays [#000] - The color used for generating the grayscale palette.
+/// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
 @function igx-palette(
@@ -298,7 +299,8 @@
     $success: #4eb862,
     $warn: #fbb13c,
     $error: #ff134a,
-    $grays: #000
+    $grays: #000,
+    $surface: #fff,
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
     $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);
@@ -318,7 +320,8 @@
         info: (500: $info),
         success: (500: $success),
         warn: (500: $warn),
-        error: (500: $error)
+        error: (500: $error),
+        surface: (500: $surface)
     );
 }
 
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 cfb07b36d93..3e0eabbf69d 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
@@ -253,6 +253,8 @@
         user-select: none;
         outline: transparent;
         white-space: nowrap;
+        border-radius: 4px;
+        margin: 8px;
 
         > igx-icon + span {
             margin-left: 32px;
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
index 47e5aaef974..b2999b45a04 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/_index.scss
@@ -272,9 +272,15 @@
 ) {
     $primary: igx-color($palette, 'primary');
     $secondary: igx-color($palette, 'secondary');
+    $surface: igx-color($palette, 'surface');
 
     @include igx-theme(
-        $palette: igx-palette($primary, $secondary, $grays: #000),
+        $palette: igx-palette(
+            $primary,
+            $secondary,
+            $surface: if($surface != #fff, $surface, #fff),
+            $grays: #000
+        ),
         $schema: $light-schema,
         $legacy-support: $legacy-support,
         $exclude: $exclude
@@ -292,9 +298,15 @@
 ) {
     $primary: igx-color($palette, 'primary');
     $secondary: igx-color($palette, 'secondary');
+    $surface: igx-color($palette, 'surface');
 
     @include igx-theme(
-        $palette: igx-palette($primary, $secondary, $grays: #fff),
+        $palette: igx-palette(
+            $primary,
+            $secondary,
+            $surface: if($surface != #fff, $surface, #222),
+            $grays: #fff
+        ),
         $schema: $dark-schema,
         $legacy-support: $legacy-support,
         $exclude: $exclude
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss
index 2e50b3ac437..05e4b4bbad1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_banner.scss
@@ -7,11 +7,8 @@
 
 /// Generates a dark banner schema.
 /// @type {Map}
-/// @prop {Color} banner-background [#222]- The background color used banner background.
 /// @requires extend
 /// @requires $_light-banner
 /// @see $default-palette
 
-$_dark-banner: extend($_light-banner, (
-    banner-background: #222,
-));
+$_dark-banner: extend($_light-banner, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss
index bc1f14741f2..6c25031829f 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_calendar.scss
@@ -7,10 +7,7 @@
 
 /// Generates a dark calendar schema.
 /// @type {Map}
-/// @prop {Color} content-background [#222] - The main content background color.
 /// @requires extend
 /// @requires $_light-calendar
 /// @see $default-palette
-$_dark-calendar: extend($_light-calendar, (
-    content-background: #222
-));
+$_dark-calendar: extend($_light-calendar, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss
index 70ca43b6579..19e00a2d9cd 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_card.scss
@@ -7,10 +7,7 @@
 
 /// Generates a dark card schema.
 /// @type {Map}
-/// @prop {Color} background [#222]- The card background color.
 /// @requires extend
 /// @requires $_light-card
 /// @see $default-palette
-$_dark-card: extend($_light-card, (
-    background: #222
-));
+$_dark-card: extend($_light-card, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss
index 5bc494d2344..4fc02516221 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_combo.scss
@@ -8,10 +8,7 @@
 
 /// Generates a dark combo schema.
 /// @type {Map}
-/// @prop {Color} empty-list-background [#222] - The combo list background color.
 /// @requires extend
 /// @requires $_light-combo
 /// @see $default-palette
-$_dark-combo: extend($_light-combo, (
-    empty-list-background: #222,
-));
+$_dark-combo: extend($_light-combo, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss
index 26b35bf3c9c..a83f0b7d7ef 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_dialog.scss
@@ -7,10 +7,7 @@
 
 /// Generates a dark dialog schema.
 /// @type {Map}
-/// @prop {Color} background [#222] - The dialog background color.
 /// @requires extend
 /// @requires $_light-dialog
 /// @see $default-palette
-$_dark-dialog: extend($_light-dialog, (
-    background: #222
-));
+$_dark-dialog: extend($_light-dialog, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss
index a197a5d3c24..7b2d80d8f32 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_drop-down.scss
@@ -8,10 +8,7 @@
 /// Generates a dark drop-down schema.
 /// @type {Map}
 /// @requires extend
-/// @prop {Color} background-color [#222] - The drop-down background color.
 /// @requires $_light-drop-down
 /// @requires extend
 /// @see $default-palette
-$_dark-drop-down: extend($_light-drop-down, (
-    background-color: #222
-));
+$_dark-drop-down: extend($_light-drop-down, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss
index b63eea0a80e..ada8e7833e2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_list.scss
@@ -8,16 +8,7 @@
 
 /// Generates a dark list schema.
 /// @type {Map}
-/// @property {Color} background [#222] - The list background color.
-/// @property {Color} header-background [#222] - The list header background color.
-/// @property {Color} item-background [#222] - The list item background color.
-/// @property {Color} item-background-active [lighten(#222, 10%)] - The active list item background color.
 /// @requires {function} extend
 /// @requires $_light-list
 /// @see $default-palette
-$_dark-list: extend($_light-list, (
-    background: #222,
-    header-background: #222,
-    item-background: #222,
-    item-background-active: lighten(#222, 10%)
-));
+$_dark-list: extend($_light-list, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss
index f7cf5bab078..c37c91dea79 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_navdrawer.scss
@@ -8,11 +8,8 @@
 
 /// Generates a dark navdrawer schema.
 /// @type {Map}
-/// @prop {Color} background [#222] - The navigation drawer background color.
 /// @requires {function} extend
 /// @requires $_light-navdrawer
 /// @see $default-palette
 
-$_dark-navdrawer: extend($_light-navdrawer, (
-    background: #222
-));
+$_dark-navdrawer: extend($_light-navdrawer, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss
index 611c3ddce16..9caed7955c8 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_time-picker.scss
@@ -8,12 +8,9 @@
 
 /// Generates a dark time-picker schema.
 /// @type {Map}
-/// @property {Color} background-color [#222] - The time-picker panel background color.
 /// @requires {function} extend
 /// @requires $_light-time-picker
 /// @see $default-palette
 
 
-$_dark-time-picker: extend($_light-time-picker, (
-    background-color: #222
-));
+$_dark-time-picker: extend($_light-time-picker, ());
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss
index 53041fab36e..8ef577ea870 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss
@@ -6,18 +6,22 @@
 
 /// Generates a light banner schema.
 /// @type {Map}
-/// @property {Color} banner-background [#fff]- The background color used banner background.
-/// @property {Color} banner-message-color [igx-color: ('grays', 900)]- The color used for banner label.
-/// @property {Color} banner-border-color [igx-color: ('grays', 400)] - The border color used banner border.
-/// @property {Color} banner-illustration-background [igx-color: ('grays', 100)] - The background color used for banner illustration.
-/// @property {Color} banner-illustration-color [igx-color: ('grays', 900)] - The color used banner illustration.
+/// @property {Map} banner-background [igx-color: 'surface']- The background color used banner background.
+/// @property {Map} banner-message-color [igx-color: 'surface', text-contrast: (), rgba: .87]- The color used for banner label.
+/// @property {Map} banner-border-color [igx-color: ('grays', 400)] - The border color used banner border.
+/// @property {Map} banner-illustration-background [igx-color: ('grays', 100)] - The background color used for banner illustration.
+/// @property {Map} banner-illustration-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The color used banner illustration.
 /// @see $default-palette
 
 $_light-banner: (
-    banner-background: #fff,
+    banner-background: (
+        igx-color: 'surface'
+    ),
 
     banner-message-color: (
-        igx-color: ('grays', 900)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     banner-border-color: (
@@ -25,6 +29,8 @@ $_light-banner: (
     ),
 
     banner-illustration-color: (
-        igx-color: ('grays', 900)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     )
 );
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss
index 75e3383745b..b28b095c209 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_calendar.scss
@@ -6,20 +6,20 @@
 
 /// Generates a light calendar schema.
 /// @type {Map}
-/// @prop {Color} content-background [#fff] - The main content background color.
-/// @prop {Map} content-text-color [igx-color: ('grays', 900)] - The main content text color.
+/// @prop {Map} content-background [igx-color: 'surface'] - The main content background color.
+/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The main content text color.
 /// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color.
 /// @prop {Map} header-text-color [igx-contrast-color: ('secondary', 500)] - The header text color.
-/// @prop {Map} picker-arrow-color [igx-color: ('grays', 800)] - The idle picker arrow color.
+/// @prop {Map} picker-arrow-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The idle picker arrow color.
 /// @prop {Map} picker-arrow-hover-color [igx-color: ('secondary', 500)] - The picker hover arrow color.
-/// @prop {Map} picker-text-color [igx-color: ('grays', 800)]- The idle picker month/year color.
+/// @prop {Map} picker-text-color [igx-color: 'surface', text-contrast: (), rgba: .74]- The idle picker month/year color.
 /// @prop {Map} picker-text-hover-color [igx-color: ('secondary', 500)]-  The hover picker month/year color.
-/// @prop {Map} inactive-text-color [igx-color: ('grays', 400)] - The text color for weekday labels and other month dates.
-/// @prop {Map} weekend-text-color [igx-color: ('grays', 500)] - The text color for weekend days.
+/// @prop {Map} inactive-text-color [igx-color: 'surface', text-contrast: (), rgba: .26] - The text color for weekday labels and other month dates.
+/// @prop {Map} weekend-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The text color for weekend days.
 /// @prop {Map} year-current-text-color [igx-color: ('secondary', 500)] - The text color for the current/selected year.
 /// @prop {Map} month-current-text-color [igx-color: ('secondary', 500)]- The text color for the current/selected month.
 /// @prop {Map} year-hover-text-color [igx-color: ('secondary', 500)] - The year hover text color.
-/// @prop {Map} month-hover-text-color [igx-color: ('grays', 900)] - The month hover text color.
+/// @prop {Map} month-hover-text-color [igx-color: 'surface', text-contrast: ()] - The month hover text color.
 /// @prop {Map} month-hover-background [igx-color: ('grays', 200)] - The month hover text color.
 /// @prop {Map} date-selected-background [igx-color: ('secondary', 500)] - The background color for the selected date.
 /// @prop {Map} date-selected-text-color [igx-contrast-color: ('secondary', 500)] - The text color for the selected date.
@@ -32,12 +32,16 @@
 
 /// @see $default-palette
 $_light-calendar: (
-    content-background: #fff,
+    content-background: (
+        igx-color: 'surface'
+    ),
 
     border-radius: .2,
 
     content-text-color: (
-        igx-color: ('grays', 900)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     header-background: (
@@ -49,7 +53,9 @@ $_light-calendar: (
     ),
 
     picker-arrow-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     picker-arrow-hover-color: (
@@ -57,7 +63,9 @@ $_light-calendar: (
     ),
 
     picker-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     picker-text-hover-color: (
@@ -65,11 +73,15 @@ $_light-calendar: (
     ),
 
     inactive-text-color: (
-        igx-color: ('grays', 400)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .26
     ),
 
     weekend-text-color: (
-        igx-color: ('grays', 500)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .38
     ),
 
     year-current-text-color: (
@@ -84,14 +96,15 @@ $_light-calendar: (
         igx-color: ('secondary', 500)
     ),
 
-    month-hover-text-color: (
-        igx-color: ('grays', 900)
-    ),
-
     month-hover-background: (
         igx-color: ('grays', 200)
     ),
 
+    month-hover-text-color: (
+        igx-color: 'surface',
+        text-contrast: ()
+    ),
+
     date-selected-background: (
         igx-color: ('secondary', 500)
     ),
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss
index e2b7d66f13f..5f2caa3b22a 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_card.scss
@@ -6,34 +6,44 @@
 
 /// Generates a light card schema.
 /// @type {Map}
-/// @prop {Color} background [#fff]- The card background color.
-/// @prop {Map} header-text-color [igx-color: ('grays', 800)] - The text color of the card title.
-/// @prop {Map} subtitle-text-color [igx-color: ('grays', 600)] - The text color of the card subtitle.
-/// @prop {Map} content-text-color [igx-color: ('grays', 600)] - The text color of the card content.
-/// @prop {Map} actions-text-color [igx-color: ('grays', 600)] - The text color of the card buttons.
+/// @prop {Map} background [igx-color: 'surface']- The card background color.
+/// @prop {Map} header-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The text color of the card title.
+/// @prop {Map} subtitle-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card subtitle.
+/// @prop {Map} content-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card content.
+/// @prop {Map} actions-text-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The text color of the card buttons.
 /// @prop {Number} resting-elevation [2] - The elevation level, between 0-24, to be used for the resting state.
 /// @prop {Number} hover-elevation [8] - The elevation level, between 0-24, to be used for the hover state.
 /// @prop {Number} border-radius [.17] - The border radius fraction, between 0-1 to be used for card date.
 /// @see $default-palette
 $_light-card: (
-    background: #fff,
+    background: (
+        igx-color: 'surface'
+    ),
 
     border-radius: .17,
 
     header-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     subtitle-text-color: (
-        igx-color: ('grays', 600)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .6
     ),
 
     content-text-color: (
-        igx-color: ('grays', 600)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .6
     ),
 
     actions-text-color: (
-        igx-color: ('grays', 600)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .6
     ),
 
     resting-elevation: 2,
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss
index 26895012334..c5f6433a45e 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_combo.scss
@@ -6,18 +6,26 @@
 
 /// Generates a light combo schema.
 /// @type {Map}
-/// @prop {Color} empty-list-background [#fff] - The combo list background color.
-/// @prop {Color} search-separator-border-color [igx-color: ('grays', 300)] - The combo search box separator color.
-/// @prop {Color} empty-list-placeholder-color [igx-color: ('grays', 400)] - The combo placeholder text color.
+/// @prop {Map} empty-list-background [igx-color: 'surface'] - The combo list background color.
+/// @prop {Map} search-separator-border-color [igx-color: 'surface', hexrgba: (), text-contrast: (), rgba: .12] - The combo search box separator color.
+/// @prop {Map} empty-list-placeholder-color [igx-color: 'surface', hexrgba: (), text-contrast: (), rgba: .26] - The combo placeholder text color.
 /// @see $default-palette
 $_light-combo: (
-    empty-list-background: #fff,
+    empty-list-background: (
+        igx-color: 'surface'
+    ),
 
     search-separator-border-color: (
-        igx-color: ('grays', 300)
+        igx-color: 'surface',
+        hexrgba: (),
+        text-contrast: (),
+        rgba: .12
     ),
 
     empty-list-placeholder-color: (
-        igx-color: ('grays', 400)
+        igx-color: 'surface',
+        hexrgba: (),
+        text-contrast: (),
+        rgba: .26
     )
 );
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss
index 9a0031240e8..28180a8da97 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_dialog.scss
@@ -6,24 +6,29 @@
 
 /// Generates a light dialog schema.
 /// @type {Map}
-/// @prop {Color} background [#fff] - The dialog background color.
-/// @prop {Map} title-color [igx-color: ('grays', 800)] - The dialog title text color.
-/// @prop {Map} message-color [igx-color: ('grays', 600)] - The dialog message text color.
+/// @prop {Map} background [igx-color: 'surface'] - The dialog background color.
+/// @prop {Map} title-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The dialog title text color.
+/// @prop {Map} message-color [igx-color: 'surface', text-contrast: (), rgba: .6] - The dialog message text color.
 /// @prop {number} elevation [24] - The elevation level for the dialog.
 /// @prop {Number} border-radius [.1] - The border radius fraction, between 0-1 to be used for dialog component.
 /// @see $default-palette
 $_light-dialog: (
-
     border-radius: .1,
 
-    background: #fff,
+    background: (
+        igx-color: 'surface'
+    ),
 
     title-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     message-color: (
-        igx-color: ('grays', 600)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .6
     ),
 
     elevation: 24
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss
index ab828929c70..5f528041b1d 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_drop-down.scss
@@ -6,13 +6,13 @@
 
 /// Generates a light drop-down schema.
 /// @type {Map}
-/// @prop {Color} background-color [#fff] - The drop-down background color.
+/// @prop {Map} background-color [igx-color: 'surface'] - The drop-down background color.
 /// @prop {Map} header-text-color [igx-color: ('secondary', 500)] - The drop-down header text color.
-/// @prop {Map} item-text-color [igx-color: ('grays', 800)] - The drop-down text color.
-/// @prop {Map} hover-item-text-color [igx-color: ('grays', 800)] - The drop-down hover text color.
-/// @prop {Map} hover-item-background [igx-color: ('grays', 100)] - The drop-down hover item background color.
-/// @prop {Map} focused-item-background [igx-color: ('grays', 100)] - The drop-down focused item background color.
-/// @prop {Map} focused-item-text-color [igx-color: ('grays', 800)] - The drop-down focused item text color.
+/// @prop {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down text color.
+/// @prop {Map} hover-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down hover text color.
+/// @prop {Map} hover-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down hover item background color.
+/// @prop {Map} focused-item-background [igx-color: 'surface', text-contrast: (), rgba: .04] - The drop-down focused item background color.
+/// @prop {Map} focused-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The drop-down focused item text color.
 /// @prop {Map} selected-item-background [igx-color: ('secondary', 500)] - The drop-down selected item background color.
 /// @prop {Map} selected-item-text-color [igx-contrast-color: ('secondary', 500)] - The drop-down selected item text color.
 /// @prop {Map} selected-hover-item-background [igx-color: ('secondary', 300)] - The drop-down selected item hover background color.
@@ -20,12 +20,14 @@
 /// @prop {Map} selected-focus-item-background [igx-color: ('secondary', 300)] - The drop-down selected item focus background color.
 /// @prop {Map} selected-focus-item-text-color [igx-contrast-color: ('secondary', 300)] - The drop-down selected item focus text color.
 /// @prop {Color} disabled-item-background [transparent] - The drop-down disabled item background color.
-/// @prop {Map} disabled-item-text-color [igx-color: ('grays', 500)] - The drop-down disabled item text color.
+/// @prop {Map} disabled-item-text-color [igx-color: 'surface', text-contrast: (), rgba: .38] - The drop-down disabled item text color.
 /// @prop {Number} elevation [8] - The elevation level, between 0-24, to be used for the badge shadow.
 /// @prop {Number} border-radius [.2] - The border radius fraction, between 0-1 to be used for drop-down component.
 /// @see $default-palette
 $_light-drop-down: (
-    background-color: #fff,
+    background-color: (
+        igx-color: 'surface'
+    ),
 
     border-radius: .2,
 
@@ -34,23 +36,33 @@ $_light-drop-down: (
     ),
 
     item-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     hover-item-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     hover-item-background: (
-        igx-color: ('grays', 100)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .04
     ),
 
     focused-item-background: (
-        igx-color: ('grays', 100)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .04
     ),
 
     focused-item-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     selected-item-background: (
@@ -80,7 +92,9 @@ $_light-drop-down: (
     disabled-item-background: transparent,
 
     disabled-item-text-color: (
-        igx-color: ('grays', 500)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .38
     ),
 
     elevation: 8
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss
index 5d119ba40e2..1adb92630c0 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_list.scss
@@ -7,13 +7,13 @@
 /// Generates a light list schema.
 /// @type {Map}
 ///
-/// @property {Color} background [#fff] - The list background color.
-/// @property {Color} header-background [#fff] - The list header background color.
-/// @property {map} header-text-color [igx-color: ('secondary', 500)] - The list header text color.
-/// @property {Color} item-background [#fff] - The list item background color.
-/// @property {map} item-text-color [igx-color: ('grays', 800)] - The list item text color.
-/// @property {map} item-background-active [igx-color: ('grays', 100), hexrgba: ()] - The active list item background color.
-/// @property {map} item-text-color-active [igx-color: ('grays', 800)] - The active list item text color.
+/// @property {Map} background [igx-color: 'surface'] - The list background color.
+/// @property {Map} header-background [igx-color: 'surface'] - The list header background color.
+/// @property {Color} header-text-color [igx-color: ('secondary', 500)] - The list header text color.
+/// @property {Map} item-background [igx-color: 'surface'] - The list item background color.
+/// @property {Map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .74] - The list item text color.
+/// @property {Map} item-background-active [igx-color: ('grays', 200)] - The active list item background color.
+/// @property {Map} item-text-color-active [igx-color: 'surface', text-contrast: ()] - The active list item text color.
 ///
 /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for list component.
 /// @prop {Number} item-border-radius [0] - The border radius fraction, between 0-1 to be used for list item.
@@ -25,26 +25,34 @@ $_light-list: (
     border-radius: 0,
     item-border-radius: 0,
 
-    background: #fff,
+    background: (
+        igx-color: 'surface'
+    ),
 
-    header-background: #fff,
+    header-background: (
+        igx-color: 'surface'
+    ),
 
     header-text-color:  (
         igx-color: ('secondary', 500)
     ),
 
-    item-background: #fff,
+    item-background: (
+        igx-color: 'surface'
+    ),
 
     item-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     item-background-active: (
-        igx-color: ('grays', 100),
-        hexrgba: ()
+        igx-color: ('grays', 200)
     ),
 
     item-text-color-active: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: ()
     )
 );
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss
index bb8d61e9b13..16b0d8a5699 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_navdrawer.scss
@@ -9,38 +9,45 @@
 ///
 /// @prop {Color} background [#fff] - The navigation drawer background color.
 /// @prop {Color} border-color [rgba(0, 0, 0, .14)] - The navigation drawer right border color.
-/// @prop {map} item-header-text-color [igx-color: ('grays', 600)] - The header's idle text color.
-/// @prop {map} item-text-color [igx-color: ('grays', 700)] - The item's idle text color.
-/// @prop {map} item-icon-color [igx-color: ('grays', 700)] - The item's icon color.
+/// @prop {map} item-header-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The header's idle text color.
+/// @prop {map} item-text-color [igx-color: 'surface', text-contrast: (), rgba: .54] - The item's idle text color.
+/// @prop {map} item-icon-color [igx-color: 'surface', text-contrast: (), rgba: .54] - The item's icon color.
 /// @prop {map} item-active-text-color [igx-color: ('primary', 500)] - The item's active text color.
-/// @prop {map} item-active-background [igx-color: ('grays', 100)] - The item's active background color.
+/// @prop {map} item-active-background [igx-color: ('primary', 500), rgba: .12] - The item's active background color.
 /// @prop {map} item-active-icon-color [igx-color: ('primary', 500)] - The item's icon active color.
-/// @prop {map} item-hover-background [igx-color: ('grays', 200)] - The item's hover background color.
-/// @prop {map} item-hover-text-color [igx-color: ('grays', 800)] - The item's hover text color.
-/// @prop {map} item-hover-icon-color [igx-color: ('primary', 500)] - The item's hover icon color.
-/// @prop {map} item-hover-icon-color [igx-color: ('primary', 500)] - The item's hover icon color.
+/// @prop {map} item-hover-background [ igx-color: 'surface', text-contrast: (), rgba: .08] - The item's hover background color.
+/// @prop {map} item-hover-text-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover text color.
+/// @prop {map} item-hover-icon-color [igx-color: 'surface', text-contrast: (), rgba: .87] - The item's hover icon color.
 /// @prop {map} elevation [16] - The elevation level of the drawer, between 0 - 24.
 /// @prop {Number} border-radius [0] - The border radius fraction, between 0-1 to be used for navdrawer component.
 ///
 /// @see $default-palette
 
 $_light-navdrawer: (
-    background: #fff,
+    background: (
+        igx-color: 'surface'
+    ),
 
     border-radius: 0,
 
     border-color: rgba(0, 0, 0, .14),
 
     item-header-text-color: (
-        igx-color: ('grays', 600)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     item-text-color: (
-        igx-color: ('grays', 700)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .54
     ),
 
     item-icon-color: (
-        igx-color: ('grays', 700)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .54
     ),
 
     item-active-text-color: (
@@ -48,15 +55,20 @@ $_light-navdrawer: (
     ),
 
     item-active-background: (
-        igx-color: ('grays', 100)
+        igx-color: ('primary', 500),
+        rgba: .12
     ),
 
     item-hover-background: (
-        igx-color: ('grays', 200)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .08
     ),
 
     item-hover-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     item-active-icon-color: (
@@ -64,7 +76,9 @@ $_light-navdrawer: (
     ),
 
     item-hover-icon-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     ),
 
     elevation: 16
diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss
index b801f387b73..85ebe497ed2 100644
--- a/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_time-picker.scss
@@ -7,22 +7,25 @@
 /// Generates a light time-picker schema.
 /// @type {Map}
 ///
-/// @prop {map} text-color [igx-color: ('grays', 500)] - The text color of a open time picker.
-/// @prop {map} hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a open time picker.
-/// @prop {map} selected-text-color [igx-color: ('secondary', 500)] -  The text color of a selected item in time picker.
-/// @prop {map} active-item-background [igx-color: ('grays', 100)] - The background color for current item in focused column inside the time picker.
-/// @prop {map} header-background [igx-color: ('secondary', 500)] - The header background color of a time picker.
-/// @prop {map} header-hour-text-color [igx-contrast-color: ('secondary', 500)] - The header hour text color of a time picker.
-/// @prop {map} header-time-period-color [igx-contrast-color: ('secondary', 500), rgba: .8] - The header AM/PM text color of a time picker.
-/// @prop {Color} background-color [#fff] - The time-picker panel background color.
-/// @prop {number} modal-elevation [24] - The elevation level used for the time picker in modal mode.
-/// @prop {number} dropdown-elevation [24] - The elevation level used for the time picker in dropdown mode.
+/// @prop {Map} text-color [igx-color: 'surface', hexrgba: (), text-contrast: (), rgba: .38] - The text color of a open time picker.
+/// @prop {Map} hover-text-color [igx-color: ('secondary', 500)] - The hover text color of a open time picker.
+/// @prop {Map} selected-text-color [igx-color: ('secondary', 500)] -  The text color of a selected item in time picker.
+/// @prop {Map} active-item-background [igx-color: ('grays', 100)] - The background color for current item in focused column inside the time picker.
+/// @prop {Map} header-background [igx-color: ('secondary', 500)] - The header background color of a time picker.
+/// @prop {Map} header-hour-text-color [igx-contrast-color: ('secondary', 500)] - The header hour text color of a time picker.
+/// @prop {Map} header-time-period-color [igx-contrast-color: ('secondary', 500), rgba: .8] - The header AM/PM text color of a time picker.
+/// @prop {Map} background-color [igx-color: 'surface'] - The time-picker panel background color.
+/// @prop {Number} modal-elevation [24] - The elevation level used for the time picker in modal mode.
+/// @prop {Number} dropdown-elevation [24] - The elevation level used for the time picker in dropdown mode.
 ///
 /// @see $default-palette
 
 $_light-time-picker: (
     text-color: (
-        igx-color: ('grays', 500)
+        igx-color: 'surface',
+        hexrgba: (),
+        text-contrast: (),
+        rgba: .38
     ),
 
     hover-text-color: (
@@ -50,7 +53,9 @@ $_light-time-picker: (
         rgba: .8
     ),
 
-    background-color: #fff,
+    background-color: (
+        igx-color: 'surface'
+    ),
 
     modal-elevation: 24,