Surface color

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.

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)
     );
 }
 

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;

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

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, ());

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, ());

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, ());

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, ());

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, ());

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, ());

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, ());

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, ());

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, ());

projects/igniteui-angular/src/lib/core/styles/themes/schemas/light/_banner.scss

@@ -6,25 +6,31 @@
 
 /// 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: (
         igx-color: ('grays', 400)
     ),
 
     banner-illustration-color: (
-        igx-color: ('grays', 900)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .87
     )
 );

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,27 +53,35 @@ $_light-calendar: (
     ),
 
     picker-arrow-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     picker-arrow-hover-color: (
         igx-color: ('secondary', 500)
     ),
 
     picker-text-color: (
-        igx-color: ('grays', 800)
+        igx-color: 'surface',
+        text-contrast: (),
+        rgba: .74
     ),
 
     picker-text-hover-color: (
         igx-color: ('secondary', 500)
     ),
 
     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)
     ),