specify two colors for linear-gradient, overlay stripes over cell color

Author: vursen

packages/grid/src/styles/vaadin-grid-base-styles.js

@@ -227,42 +227,55 @@ export const gridStyles = css`
 
   /* stylelint-disable-next-line no-duplicate-selectors */
   [part~='row'] {
-    background: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
+    background-color: var(--vaadin-grid-row-background-color, var(--vaadin-background-color));
   }
 
   /* stylelint-disable-next-line no-duplicate-selectors */
   [part~='cell'] {
     background-color: inherit;
     background-repeat: no-repeat;
     background-origin: padding-box;
-    background-image: linear-gradient(var(--vaadin-grid-cell-background-color, transparent));
+    background-image: linear-gradient(
+      var(--vaadin-grid-cell-background-color, transparent),
+      var(--vaadin-grid-cell-background-color, transparent)
+    );
   }
 
   [part~='body-cell'] {
     background-image:
-      linear-gradient(var(--_cell-hover-background-color, transparent)),
-      linear-gradient(var(--_cell-selected-background-color, transparent)),
-      linear-gradient(var(--vaadin-grid-row-highlight-background-color, transparent)),
-      linear-gradient(var(--vaadin-grid-cell-background-color, transparent));
-  }
-
-  [part~='selected-row-cell'] {
-    --_cell-selected-background-color: var(
+      linear-gradient(var(--_row-hover-background-color, transparent), var(--_row-hover-background-color, transparent)),
+      linear-gradient(
+        var(--_row-selected-background-color, transparent),
+        var(--_row-selected-background-color, transparent)
+      ),
+      linear-gradient(
+        var(--vaadin-grid-row-highlight-background-color, transparent),
+        var(--vaadin-grid-row-highlight-background-color, transparent)
+      ),
+      linear-gradient(var(--_row-odd-background-color, transparent), var(--_row-odd-background-color, transparent)),
+      linear-gradient(
+        var(--vaadin-grid-cell-background-color, transparent),
+        var(--vaadin-grid-cell-background-color, transparent)
+      );
+  }
+
+  [part~='body-row'][selected] {
+    --_row-selected-background-color: var(
       --vaadin-grid-row-selected-background-color,
       color-mix(in srgb, currentColor 8%, transparent)
     );
   }
 
   @media (any-hover: hover) {
-    [part~='body-row']:hover [part~='body-cell'] {
-      --_cell-hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent);
+    [part~='body-row']:hover {
+      --_row-hover-background-color: var(--vaadin-grid-row-hover-background-color, transparent);
     }
   }
 
   :host([theme~='row-stripes']) [part~='odd-row'] {
-    --vaadin-grid-cell-background-color: var(
+    --_row-odd-background-color: var(
       --vaadin-grid-row-odd-background-color,
-      color-mix(in srgb, var(--vaadin-text-color) 4%, var(--vaadin-background-color))
+      color-mix(in srgb, var(--vaadin-text-color) 4%, transparent)
     );
   }