(core) Fixing background color in frozen columns for zebra stripes

Summary: Background for frozen columns was set to transparent in recent PR, this diff is reverting it.

Test Plan: Updated

Reviewers: georgegevoian

Reviewed By: georgegevoian

Differential Revision: https://phab.getgrist.com/D3680

app/client/components/GridView.css

@@ -313,10 +313,13 @@
   left: calc(4em + 1px + (var(--frozen-position, 0) - var(--frozen-offset, 0)) * 1px); /* 4em for row number + total width of cells + 1px for border*/
   z-index: 1;
 }
-
 /* for data field we need to reuse color from record (add-row and zebra stripes) */
 .gridview_row .record .field.frozen {
-  background-color: inherit;
+  background-color: var(--field-background-color, inherit);
+}
+
+.gridview_row .record.record-add .field.frozen {
+  background-color: inherit !important;  /* important to win over zebra stripes */
 }
 
 /* HACK: add box shadow to fix outline overflow from active cursor */
@@ -328,11 +331,6 @@
   box-shadow: 0px 1px 0px var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
 }
 
-/* selected field has a transparent color - with frozen fields we can't do it */
-.gridview_row .field.frozen.selected {
-  background-color: var(--grist-theme-selection-opaque-bg, var(--grist-color-selection-opaque));
-}
-
 /* make room for a frozen line by adding margin to first not frozen field - in header and in data */
 .field.frozen + .field:not(.frozen) {
   margin-left: 1px;

app/client/components/viewCommon.css

@@ -53,10 +53,11 @@
 * We can't use background inheritance, because row background color is more important then static (aka default)
 * column color defined on a field (so lower in the dom).
 */
-  background-color: var(--grist-diff-background-color,
-                    var(--grist-column-rule-background-color,
-                    var(--grist-row-rule-background-color,
-                    var(--grist-cell-background-color, unset))));
+  --field-background-color: var(--grist-diff-background-color,
+                            var(--grist-column-rule-background-color,
+                            var(--grist-row-rule-background-color,
+                            var(--grist-cell-background-color))));
+  background-color: var(--field-background-color, unset);
 }
 
 /** Similar order is for detail view, but there is no row rules */
@@ -67,11 +68,11 @@
 }
 
 .record.record-zebra.record-even .field {
-  background-color: var(--grist-diff-background-color,
-                    var(--grist-column-rule-background-color,
-                    var(--grist-row-rule-background-color-zebra,
-                    var(--grist-row-rule-background-color,
-                    var(--grist-cell-background-color, unset)))));
+  --field-background-color: var(--grist-diff-background-color,
+                            var(--grist-column-rule-background-color,
+                            var(--grist-row-rule-background-color-zebra,
+                            var(--grist-row-rule-background-color,
+                            var(--grist-cell-background-color)))));
 }
 
 .record.record-add .field {

test/nbrowser/gristUtils.ts

@@ -2030,8 +2030,8 @@ export async function setFont(type: 'bold'|'underline'|'italic'|'strikethrough',
 }
 
 /**
- * Returns the rgb/hex representation of `color` if it's a name (e.g. red, blue, green, white, black, or transparent),
- * or `color` unchanged if it's not a name.
+ * Returns the rgb/hex representation of `color` if it's a name (e.g. red, blue, green, white, black, addRow, or
+ * transparent), or `color` unchanged if it's not a name.
  */
 export function nameToHex(color: string) {
   switch(color) {
@@ -2041,6 +2041,7 @@ export function nameToHex(color: string) {
     case 'white': color = '#FFFFFF'; break;
     case 'black': color = '#000000'; break;
     case 'transparent': color = 'rgba(0, 0, 0, 0)'; break;
+    case 'addRow': color = 'rgba(246, 246, 255, 1)'; break;
   }
   return color;
 }