(core) Switching the order that colors are applied to a cell

Summary:
Switching an order that colors are applied to a cell.
Previously a default cell style was applied after style
that came from a row style. Now the row style is
applied after (so it overrides default cell style).

Also, background color that comes from a field options
(either from default style or rule) is applied to a whole field,
so it also includes icons for formula/reference field.

Test Plan: Updated

Reviewers: paulfitz

Reviewed By: paulfitz

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

app/client/components/GridView.js

@@ -1199,8 +1199,8 @@ GridView.prototype.buildDom = function() {
         kd.toggleClass('font-underline', fontUnderline),
         kd.toggleClass('font-italic', fontItalic),
         kd.toggleClass('font-strikethrough', fontStrikethrough),
-        kd.style('--grist-row-background-color', fillColor),
+        kd.style('--grist-row-rule-background-color', fillColor),
-        kd.style('--grist-row-background-color-zebra', zebraColor),
+        kd.style('--grist-row-rule-background-color-zebra', zebraColor),
         kd.style('--grist-row-color', textColor),
         //These are grabbed from v.optionsObj at start of GridView buildDom
         kd.toggleClass('record-hlines', vHorizontalGridlines),

app/client/components/viewCommon.css

@@ -13,13 +13,14 @@
   border-color: var(--grist-theme-table-body-border, var(--grist-color-dark-grey));
   border-left-style: solid;  /* left border, against rownumbers div, always on */
   border-bottom-width: 1px; /* style: none, set by record-hlines*/
-  /* Record background is white by default.
+  /* Record background is white (or theme default) by default.
      It gets overridden by the add row, zebra stripes.
      It also gets overridden by selecting rows - but in that case background comes from
-     selected fields - this still remains white.
+     selected fields.
-     TODO: consider making this color the single source
   */
-  background: var(--grist-row-background-color, var(--grist-theme-cell-bg, white));
+  background-color: var(--grist-diff-background-color, /* diffing view */
+                    var(--grist-row-rule-background-color, /* conditional row style */
+                    var(--grist-theme-cell-bg, white))); /* default, not transparent */
   color: var(--grist-row-color, var(--grist-theme-cell-fg, black));
 }
 
@@ -28,11 +29,14 @@
 }
 
 .record.record-zebra.record-even {
-  background-color: var(--grist-row-background-color-zebra, var(--grist-theme-cell-zebra-bg, #f8f8f8));
+  background-color: var(--grist-diff-background-color,
+                    var(--grist-row-rule-background-color-zebra,
+                    var(--grist-row-rule-background-color,
+                    var(--grist-theme-cell-zebra-bg, #f8f8f8))));
 }
 
 .record.record-add {
-  background-color: var(--grist-theme-table-add-new-bg, #f6f6ff) !important;  /* important to win over zebra stripes */
+  background-color: var(--grist-theme-table-add-new-bg, #f6f6ff) !important;  /* important to win over every thing */
 }
 
 .field {
@@ -44,6 +48,34 @@
   white-space: pre;
   /* make border exist always so content doesn't shift on v-gridline toggle */
   border: 0px solid transparent;  /* width set by js, border exists but is transparent */
+/**
+* Order of precedence for field is as follows: diff color, column rule, row rule, static (default) style, transparent.
+* 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))));
+}
+
+/** Similar order is for detail view, but there is no row rules */
+.g_record_detail_value {
+  background-color: var(--grist-diff-background-color,
+                    var(--grist-column-rule-background-color,
+                    var(--grist-cell-background-color, unset)));
+}
+
+.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)))));
+}
+
+.record.record-add .field {
+  background-color: unset !important;  /* important to win over zebra stripes */
 }
 
 .record-vlines > .field {
@@ -55,8 +87,6 @@
   outline: 2px dashed var(--grist-theme-cursor, var(--grist-color-cursor));
 }
 
-
-
 .field.draft {
   padding-right: 18px;
 }
@@ -70,8 +100,12 @@
   text-overflow: ellipsis;
   width: 100%;
   height: 100%;
-  background-color: var(--grist-diff-background-color, var(--grist-cell-background-color, var(--grist-row-background-color, unset)));
+  /* We need to repeat background color here, as it might also be applied on a widget level (through DiffBox.ts)*/
-  --grist-actual-cell-color: var(--grist-diff-color, var(--grist-cell-color, var(--grist-row-color)));
+  background-color: var(--grist-diff-background-color, inherit);
+  --grist-actual-cell-color: var(--grist-diff-color,
+                             var(--grist-rule-color,
+                             var(--grist-row-color,
+                             var(--grist-cell-color))));
   color: var(--grist-actual-cell-color, unset);
 }
 

app/client/widgets/FieldBuilder.ts

@@ -484,18 +484,14 @@ export class FieldBuilder extends Disposable {
       }
     }).extend({ deferred: true })).onlyNotifyUnequal();
 
-    const textColor = koUtil.withKoUtils(ko.computed(() => {
+    const ruleText = koUtil.withKoUtils(ko.computed(() => {
       if (this.isDisposed()) { return null; }
-      const fromRules = computedRule()?.style?.textColor;
+      return computedRule()?.style?.textColor || '';
-      return fromRules || this.field.textColor() || '';
     })).onlyNotifyUnequal();
 
-    const fillColor = koUtil.withKoUtils(ko.computed(() => {
+    const ruleFill = koUtil.withKoUtils(ko.computed(() => {
       if (this.isDisposed()) { return null; }
-      const fromRules = computedRule()?.style?.fillColor;
+      return computedRule()?.style?.fillColor || '';
-      let fill = fromRules || this.field.fillColor();
-      fill = fill ? fill.toUpperCase() : fill;
-      return fill || '';
     })).onlyNotifyUnequal();
 
     const fontBold = buildFontOptions(this, computedRule, 'fontBold');
@@ -505,19 +501,27 @@ export class FieldBuilder extends Disposable {
 
     const errorInStyle = ko.pureComputed(() => Boolean(computedRule()?.error));
 
+    const cellText = ko.pureComputed(() => this.field.textColor() || '');
+    const cllFill = ko.pureComputed(() => this.field.fillColor() || '');
+
+
     return (elem: Element) => {
       this._rowMap.set(row, elem);
       dom(elem,
           dom.autoDispose(widgetObs),
           dom.autoDispose(computedFlags),
           dom.autoDispose(errorInStyle),
-          dom.autoDispose(textColor),
+          dom.autoDispose(ruleText),
           dom.autoDispose(computedRule),
-          dom.autoDispose(fillColor),
+          dom.autoDispose(ruleFill),
           dom.autoDispose(fontBold),
           dom.autoDispose(fontItalic),
           dom.autoDispose(fontUnderline),
           dom.autoDispose(fontStrikethrough),
+          kd.style('--grist-cell-color', cellText),
+          kd.style('--grist-cell-background-color', cllFill),
+          kd.style('--grist-rule-color', ruleText),
+          kd.style('--grist-column-rule-background-color', ruleFill),
           this._options.isPreview ? null : kd.cssClass(this.field.formulaCssClass),
           kd.toggleClass("readonly", toKo(ko, this._readonly)),
           kd.maybe(isSelected, () => dom('div.selected_cursor',
@@ -531,9 +535,7 @@ export class FieldBuilder extends Disposable {
                        kd.toggleClass('font-bold', fontBold),
                        kd.toggleClass('font-underline', fontUnderline),
                        kd.toggleClass('font-italic', fontItalic),
-                       kd.toggleClass('font-strikethrough', fontStrikethrough),
+                       kd.toggleClass('font-strikethrough', fontStrikethrough));
-                       kd.style('--grist-cell-color', textColor),
-                       kd.style('--grist-cell-background-color', fillColor));
           })
          );
     };