Merge pull request #5985 from IgniteUI/fix-#5977

fix(grid): alter user colors for odd/even rows to avoid translucency

Author: kdinev

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -140,7 +140,7 @@
     @if type-of($color) == 'color' {
         $lightContrast: contrast($color, white);
         $darkContrast: contrast($color, black);
-        
+
         @if ($lightContrast > $darkContrast) {
             @return white;
         } @else {
@@ -224,15 +224,15 @@
 /// @returns {Map} - Returns a clean map.
 @function map-clean($map) {
     $result: ();
-    
+
     @each $key, $value in $map {
         @if($value) != null {
             $result: map-merge($result, (
                 #{$key}: $value
             ));
         }
     }
-    
+
     @return $result;
 }
 
@@ -355,9 +355,9 @@
     @if map-has-key($map, $key) {
         @if $igx-legacy-support == false {
             @if not($fallback) {
-                @return unquote('var(--#{map-get($map, 'name')}-#{$key})')
+                @return var(--#{map-get($map, 'name')}-#{$key})
             }
-            @return unquote('var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})')
+            @return var(--#{map-get($map, 'name')}-#{$key}, #{$fallback})
         } @else {
             @return map-get($map, $key);
         }
@@ -446,7 +446,7 @@
         @if type-of($value) == 'map' {
             $result: extend($result, (#{$key}: resolve-value($value, $palette)));
         } @else {
-            $result: extend($result, (#{$key}: #{$value}));
+            $result: extend($result, (#{$key}: $value));
         }
     }
     @return $result;

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

@@ -244,21 +244,33 @@
         $row-odd-background: $content-background;
     }
 
-    @if not($row-even-background) and $content-background {
-        $row-even-background: $content-background;
+    @if $row-odd-background and alpha($row-odd-background) != 1 {
+        $cbg: if($content-background, $content-background, map-get($theme, 'content-background'));
+
+        $row-odd-background: hexrgba($row-odd-background, $cbg);
     }
 
     @if not($row-odd-text-color) and $row-odd-background {
         $row-odd-text-color: text-contrast($row-odd-background);
     }
 
+    @if not($row-even-background) and $content-background {
+        $row-even-background: $content-background;
+    }
+
+    @if $row-even-background and alpha($row-even-background) != 1 {
+        $cbg: if($content-background, $content-background, map-get($theme, 'content-background'));
+
+        $row-even-background: hexrgba($row-even-background, $cbg);
+    }
+
     @if not($row-even-text-color) and $row-even-background {
         $row-even-text-color: text-contrast($row-even-background);
     }
 
     @if not($row-hover-background) and $content-background {
         @if type-of($content-background) == 'color' {
-            $row-hover-background: rgba(text-contrast($content-background), .08)
+            $row-hover-background: hexrgba(rgba(text-contrast($content-background), .08), $content-background)
         }
     }