(core) Making cells colors effective also in Card and Card List views

Summary:
 . Makes cell color work well in comparison mode
 . Do not apply cell color to the add new row
 . Allow to change color for all widget (including changing color for the checkbox and the switch widget)
 . Fix an issue that was setting color to black when opening the picker
 . Do not apply color to invalid cell

Test Plan: . Added nbrowser/CellColor

Reviewers: paulfitz, dsagal

Reviewed By: dsagal

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

app/client/widgets/CheckBox.css

@@ -42,8 +42,8 @@
   position: relative;
   width: 3px;
   height: 12px;
-  background-color: #606060;
-  border: 1px solid #606060;
+  background-color: var(--grist-cell-color, #606060);
+  border: 1px solid var(--grist-cell-color, #606060);
   left: 3px;
   top: -5px;
 }
@@ -52,7 +52,7 @@
   position: relative;
   width: 3px;
   height: 3px;
-  background-color: #606060;
-  border: 1px solid #606060;
+  background-color: var(--grist-cell-color, #606060);
+  border: 1px solid var(--grist-cell-color, #606060);
   top: 7px;
 }

app/client/widgets/DiffBox.ts

@@ -2,6 +2,7 @@ import { DataRowModel } from 'app/client/models/DataRowModel';
 import { NewAbstractWidget } from 'app/client/widgets/NewAbstractWidget';
 import { CellValue } from 'app/common/DocActions';
 import { isVersions } from 'app/common/gristTypes';
+import { inlineStyle } from 'app/common/gutil';
 import { BaseFormatter } from 'app/common/ValueFormatter';
 import { Diff, DIFF_DELETE, DIFF_INSERT, diff_match_patch as DiffMatchPatch, DIFF_EQUAL } from 'diff-match-patch';
 import { Computed, dom } from 'grainjs';
@@ -37,6 +38,8 @@ export class DiffBox extends NewAbstractWidget {
       dom.autoDispose(formattedValue),
       dom.style('text-align', this.options.prop('alignment')),
       dom.cls('text_wrapping', (use) => Boolean(use(this.options.prop('wrap')))),
+      inlineStyle('--grist-diff-color', '#000000'),
+      inlineStyle('--grist-diff-background-color', '#00000000'),
       dom.forEach(formattedValue, ([code, txt]) => {
         if (code === DIFF_DELETE) {
           return dom("span.diff-parent", txt);

app/client/widgets/FieldBuilder.ts

@@ -128,11 +128,13 @@ export class FieldBuilder extends Disposable {
       write(widget) {
         // Reset the entire JSON, so that all options revert to their defaults.
 
+        const previous = this.options.peek();
         this.options.setAndSave({
           widget,
-          // persists color settings across widgets
-          fillColor: field.fillColor.peek(),
-          textColor: field.textColor.peek()
+          // Persists color settings across widgets (note: we cannot use `field.fillColor` to get the
+          // current value because it returns a default value for `undefined`. Same for `field.textColor`.
+          fillColor: previous.fillColor,
+          textColor: previous.textColor,
         }).catch(reportError);
       }
     });
@@ -418,7 +420,9 @@ export class FieldBuilder extends Disposable {
           kd.scope(widgetObs, (widget: NewAbstractWidget) => {
             if (this.isDisposed()) { return null; }   // Work around JS errors during field removal.
             const cellDom = widget ? widget.buildDom(row) : buildErrorDom(row, this.field);
-            return dom(cellDom, kd.toggleClass('has_cursor', isActive));
+            return dom(cellDom, kd.toggleClass('has_cursor', isActive),
+                       kd.style('--grist-cell-color', this.field.textColor),
+                       kd.style('--grist-cell-background-color', this.field.fillColor));
           })
          );
     };

app/client/widgets/HyperLinkTextBox.ts

@@ -28,7 +28,7 @@ export class HyperLinkTextBox extends NTextBox {
           // from running on the same process as Grist:
           // https://developers.google.com/web/tools/lighthouse/audits/noopener
           dom.attr('rel', 'noopener noreferrer'),
-          cssLinkIcon('FieldLink'),
+          cssLinkIcon('FieldLink', testId('tb-link-icon')),
           testId('tb-link')
         )
       ),
@@ -62,10 +62,10 @@ function _constructUrl(value: string): string {
 }
 
 const cssFieldClip = styled('div.field_clip', `
-  color: ${colors.lightGreen};
+  color: var(--grist-actual-cell-color, ${colors.lightGreen});
 `);
 
 const cssLinkIcon = styled(icon, `
-  background-color: ${colors.lightGreen};
+  background-color: var(--grist-actual-cell-color, ${colors.lightGreen});
   margin: -1px 2px 2px 0;
 `);

app/client/widgets/NewAbstractWidget.ts

@@ -28,10 +28,14 @@ export abstract class NewAbstractWidget extends Disposable {
 
   protected options: SaveableObjObservable<any>;
   protected valueFormatter: Observable<BaseFormatter>;
+  protected textColor: Observable<string>;
+  protected fillColor: Observable<string>;
 
   constructor(protected field: ViewFieldRec) {
     super();
     this.options = field.widgetOptionsJson;
+    this.textColor = fromKo(this.field.textColor);
+    this.fillColor = fromKo(this.field.fillColor);
 
     // Note that its easier to create a knockout computed from the several knockout observables,
     // but then we turn it into a grainjs observable.
@@ -57,7 +61,7 @@ export abstract class NewAbstractWidget extends Disposable {
       cssRow(
         cssHalfWidth(
           colorSelect(
-            fromKo(this.field.textColor) as Observable<string>,
+            this.textColor,
             (val) => this.field.textColor.saveOnly(val),
             testId('text-color')
           ),
@@ -65,7 +69,7 @@ export abstract class NewAbstractWidget extends Disposable {
         ),
         cssHalfWidth(
           colorSelect(
-            fromKo(this.field.fillColor) as Observable<string>,
+            this.fillColor,
             (val) => this.field.fillColor.saveOnly(val),
             testId('fill-color')
           ),

app/client/widgets/Switch.css

@@ -33,7 +33,7 @@
 }
 
 .switch_on > .switch_slider {
-  background-color: #2CB0AF;
+  background-color: var(--grist-cell-color, #2CB0AF);
 }
 
 .switch_on > .switch_circle {