Merge branch 'master' of https://github.com/UlissesMeira/igniteui-angular

Author: Ulisses de Paula Meira

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -17,6 +17,8 @@
 /// @param {String} $header-border-width [null] - The border width used for header borders.
 /// @param {String} $header-border-style [null] - The border style used for header borders.
 /// @param {Color} $header-border-color [null] - The color used for header borders.
+/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).
+/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).
 ///
 /// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.
 /// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.
@@ -126,6 +128,9 @@
     $header-border-style: null,
     $header-border-color: null,
 
+    $header-selected-background: null,
+    $header-selected-text-color: null,
+
     $sorted-header-icon-color: null,
 
     $content-background: null,
@@ -230,7 +235,22 @@
 
     $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);
     $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);
-    $row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);
+
+    $rs-bg: if(
+        $row-selected-background,
+        $row-selected-background,
+        map-get($theme, 'row-selected-background')
+    );
+
+    $row-selected-cell-background: null;
+
+    @if type-of($rs-bg) == 'color' {
+        @if luminance($rs-bg) < .5 {
+            $row-selected-cell-background: lighten-color($rs-bg, 8%);
+        } @else {
+            $row-selected-cell-background: darken-color($rs-bg, 8%);
+        }
+    }
 
     @if not($ghost-header-icon-color) and $ghost-header-background {
         @if type-of($ghost-header-background) == 'color' {
@@ -250,6 +270,10 @@
         $header-text-color: text-contrast($header-background);
     }
 
+    @if not($header-selected-text-color) and $header-selected-background {
+        $header-selected-text-color: text-contrast($header-selected-background);
+    }
+
     @if not($header-border-color) and $header-background {
         @if type-of($header-background) == 'color' {
             $header-border-color: rgba(text-contrast($header-background), .24);
@@ -442,6 +466,8 @@
 
         header-background: $header-background,
         header-text-color: $header-text-color,
+        header-selected-background:  $header-selected-background,
+        header-selected-text-color:  $header-selected-text-color,
         header-border-width: $header-border-width,
         header-border-style: $header-border-style,
         header-border-color: $header-border-color,
@@ -979,6 +1005,15 @@
         &:hover {
             background: --var($theme, 'row-hover-background');
             color: --var($theme, 'row-hover-text-color');
+
+            %grid-cell--column-selected {
+                background: --var($theme, 'row-selected-hover-background');
+            }
+
+            %grid-cell--cross-selected {
+                color: --var($theme, 'row-selected-text-color');
+                background: --var($theme, 'row-selected-cell-background');
+            }
         }
 
         &%igx-grid__tr--ghost {
@@ -1059,6 +1094,11 @@
         &:hover {
             background: --var($theme, 'row-selected-hover-background');
             color: --var($theme, 'row-selected-text-color');
+
+            %grid-cell--column-selected {
+                color: --var($theme, 'row-selected-text-color');
+                background: --var($theme, 'row-selected-hover-background');
+            }
         }
 
         %igx-grid__tree-grouping-indicator {
@@ -1289,14 +1329,10 @@
     %grid-cell--column-selected {
         color: --var($theme, 'row-selected-text-color');
         background: --var($theme, 'row-selected-background');
-
-        &:hover {
-            background: --var($theme, 'row-selected-hover-background');
-            color: --var($theme, 'row-selected-text-color');
-        }
     }
 
     %grid-cell--cross-selected {
+        color: --var($theme, 'row-selected-text-color');
         background: --var($theme, 'row-selected-cell-background');
     }
 
@@ -1472,14 +1508,14 @@
     }
 
     %igx-grid__th--selectable {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
         opacity: .7;
     }
 
     %igx-grid__th--selected {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-cell-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
     }
 
     %igx-grid__th--sortable {
@@ -2208,8 +2244,8 @@
     }
 
     %igx-grid__filtering-cell--selected {
-        color: --var($theme, 'row-selected-text-color');
-        background: --var($theme, 'row-selected-cell-background');
+        color: --var($theme, 'header-selected-text-color');
+        background: --var($theme, 'header-selected-background');
     }
 
     %igx-grid__filtering-cell-indicator {

projects/igniteui-angular/src/lib/core/styles/themes/_palettes.scss

@@ -47,37 +47,14 @@
 /// @requires igx-palette
 $default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;
 
-
 /// Default dark palette
 /// @type {Map}
 /// @group palettes
-$default-dark-palette: extend(
-    $default-palette,
-    (
-        surface: (500: #222)
-    )
-) !default;
-
-/// Global Overlay Color
-/// @group palettes
-/// @type Color
-/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
-/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
-/// @requires igx-color
-$overlay-color: igx-color($default-palette, 'grays') !default;
-
-/// Default elevations. Work in progress.
-/// Subject to change.
-/// @group elevations
-/// @type Map
-/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
-/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
-/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
-/// @requires igx-elevations
-$elevations: igx-elevations(
-    rgba(0, 0, 0, .26),
-    rgba(0, 0, 0, .12),
-    rgba(0, 0, 0, .08)
+$default-dark-palette: igx-palette(
+    $primary: igx-color($default-palette, 'primary'),
+    $secondary: igx-color($default-palette, 'secondary'),
+    $grays: #fff,
+    $surface: #222
 ) !default;
 
 /// Green palette
@@ -191,3 +168,25 @@ $bootstrap-dark-palette: igx-palette(
     $grays: #fff
 ) !default;
 
+/// Global Overlay Color
+/// @group palettes
+/// @type Color
+/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.
+/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.
+/// @requires igx-color
+$overlay-color: igx-color($default-palette, 'grays') !default;
+
+/// Default elevations. Work in progress.
+/// Subject to change.
+/// @group elevations
+/// @type Map
+/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
+/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
+/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
+/// @requires igx-elevations
+$elevations: igx-elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+

projects/igniteui-angular/src/lib/core/styles/themes/schemas/dark/_grid.scss

@@ -1,4 +1,5 @@
 @import '../light/grid';
+
 ////
 /// @group schemas
 /// @access private
@@ -8,13 +9,15 @@
 /// Generates the base dark grid schema.
 /// @type {Map}
 /// @prop {Map} header-background [igx-color: ('grays', 100), hexrgba: #222] - The table header background color.
+/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%] - The table header background color when selected (ex. column selection).
+/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, lighten-color: 8%, text-contrast: ()] - The table header text color when selected (ex. column selection).
 /// @prop {Color} content-background [#222] - The table body background color.
 /// @prop {Color} row-odd-background [#222] - The background color of odd rows.
 /// @prop {Color} row-even-background [#222] - The background color of even rows.
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
 /// @prop {Color} row-hover-text-color [#fff] - The hover row text color.
 /// @prop {Map} row-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The selected row background color.
-/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222] - The selected row background color on hover.
+/// @prop {Map} row-selected-hover-background [igx-color: ('secondary', 'A700'), rgba: .24, hexrgba: #222, lighten-color: 5%] - The selected row background color on hover.
 /// @prop {Color} row-selected-text-color [#fff] - The selected row text color.
 /// @prop {Color} ghost-header-background [#222] - The dragged header background color.
 /// @prop {Color} cell-editing-background [#222] - The background for the cell in editing mode.
@@ -37,6 +40,21 @@ $_base-dark-grid: (
         hexrgba: #222
     ),
 
+    header-selected-background: (
+        igx-color: ('secondary', 500),
+        rgba: .24,
+        hexrgba: #222,
+        lighten-color: 8%
+    ),
+
+    header-selected-text-color: (
+        igx-color: ('secondary', 500),
+        rgba: .24,
+        hexrgba: #222,
+        lighten-color: 8%,
+        text-contrast: ()
+    ),
+
     content-background: #222,
 
     row-odd-background: #222,
@@ -59,7 +77,8 @@ $_base-dark-grid: (
     row-selected-hover-background: (
         igx-color: ('secondary', 'A700'),
         rgba: .24,
-        hexrgba: #222
+        hexrgba: #222,
+        lighten-color: 5%
     ),
 
     row-selected-text-color: #fff,
@@ -135,6 +154,8 @@ $_dark-grid: extend($_light-grid, $_base-dark-grid);
 
 
 /// Generates a dark fluent grid schema based on a mix of $_fluent-grid and $_base-dark-grid.
+/// @prop {Map} header-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The table header background color when selected (ex. column selection).
+/// @prop {Map} header-selected-text-color [igx-color: ('grays', 200), hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
 /// @prop {Map} row-hover-background [igx-color: ('grays', 100), hexrgba: #222] - The hover row background color.
 /// @prop {Map} row-selected-background [igx-color: ('grays', 200), hexrgba: #222] - The selected row background color.
 /// @prop {Map} row-selected-hover-background [igx-color: ('grays', '300'), hexrgba: #222] - The selected row background color on hover.
@@ -145,6 +166,17 @@ $_dark-fluent-grid: extend(
     $_fluent-grid,
     $_base-dark-grid,
     (
+        header-selected-background: (
+            igx-color: ('grays', 200),
+            hexrgba: #222
+        ),
+
+        header-selected-text-color: (
+            igx-color: ('grays', 200),
+            hexrgba: #222,
+            text-contrast: ()
+        ),
+
         row-hover-background: (
             igx-color: ('grays', 100),
             hexrgba: #222
@@ -168,6 +200,8 @@ $_dark-fluent-grid: extend(
 ///
 /// @prop {Color} header-background [#222] - The table header background color.
 /// @prop {Color} header-text-color [#fff] - The table header text color.
+/// @prop {Map} header-selected-background [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222] - The table header background color when selected (ex. column selection).
+/// @prop {Map} header-selected-text-color [igx-color: ('secondary', 500), rgba: .24, hexrgba: #222, text-contrast: ()] - The table header text color when selected (ex. column selection).
 ///
 /// @requires {function} extend
 /// @requires $_bootstrap-grid
@@ -178,5 +212,18 @@ $_dark-bootstrap-grid: extend(
     (
         header-background: #222,
         header-text-color: #fff,
+
+        header-selected-background: (
+            igx-color: ('secondary', 500),
+            rgba: .24,
+            hexrgba: #222,
+        ),
+
+        header-selected-text-color: (
+            igx-color: ('secondary', 500),
+            rgba: .24,
+            hexrgba: #222,
+            text-contrast: ()
+        ),
     )
 );