(core) Adding font options to the style picker

Summary:
Redesigning color picker:
- Single color palette (no light/dark switch)
- Ability to remove color (new empty button)

New font options in the color picker.
Font options are available on:
- Default cell style
- Conditional rules styles
- Choice/ChoiceList editor and token field
- Filters for Choice/ChoiceList columns

Design document:
https://www.figma.com/file/bRTsb47VIOVBfJPj0qF3C9/Grist-Updates?node-id=415%3A8135

Test Plan: new and updated tests

Reviewers: georgegevoian, alexmojaki

Reviewed By: georgegevoian, alexmojaki

Subscribers: alexmojaki

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

app/client/models/DocModel.ts

@@ -36,7 +36,7 @@ import {createValidationRec, ValidationRec} from 'app/client/models/entities/Val
 import {createViewFieldRec, ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {createViewRec, ViewRec} from 'app/client/models/entities/ViewRec';
 import {createViewSectionRec, ViewSectionRec} from 'app/client/models/entities/ViewSectionRec';
-import {GristObjCode} from 'app/plugin/GristData';
+import {RefListValue} from 'app/common/gristTypes';
 import {decodeObject} from 'app/plugin/objtypes';
 
 // Re-export all the entity types available. The recommended usage is like this:
@@ -97,7 +97,7 @@ export function refRecord<TRow extends MetaRowModel>(
   return ko.pureComputed(() => tableModel.getRowModel(rowIdObs() || 0, true));
 }
 
-type RefListValue = [GristObjCode.List, ...number[]]|null;
+
 /**
  * Returns an observable with a list of records from another table, selected using RefList column.
  * @param {TableModel} tableModel: The model for the table to return a record from.

app/client/models/Styles.ts

@@ -1,18 +1,34 @@
 export interface Style {
   textColor?: string;
   fillColor?: string;
+  fontBold?: boolean;
+  fontUnderline?: boolean;
+  fontItalic?: boolean;
+  fontStrikethrough?: boolean;
 }
 
 export class CombinedStyle implements Style {
   public readonly textColor?: string;
   public readonly fillColor?: string;
-  constructor(rules: Style[], flags: any[]) {
+  public readonly fontBold?: boolean;
+  public readonly fontUnderline?: boolean;
+  public readonly fontItalic?: boolean;
+  public readonly fontStrikethrough?: boolean;
+  constructor(rules: (Style|undefined|null)[], flags: any[]) {
     for (let i = 0; i < rules.length; i++) {
       if (flags[i]) {
-        const textColor = rules[i].textColor;
-        const fillColor = rules[i].fillColor;
+        const textColor = rules[i]?.textColor;
+        const fillColor = rules[i]?.fillColor;
+        const fontBold = rules[i]?.fontBold;
+        const fontUnderline = rules[i]?.fontUnderline;
+        const fontItalic = rules[i]?.fontItalic;
+        const fontStrikethrough = rules[i]?.fontStrikethrough;
         this.textColor = textColor || this.textColor;
         this.fillColor = fillColor || this.fillColor;
+        this.fontBold = fontBold || this.fontBold;
+        this.fontUnderline = fontUnderline || this.fontUnderline;
+        this.fontItalic = fontItalic || this.fontItalic;
+        this.fontStrikethrough = fontStrikethrough || this.fontStrikethrough;
       }
     }
   }

app/client/models/entities/ViewFieldRec.ts

@@ -67,10 +67,11 @@ export interface ViewFieldRec extends IRowModel<"_grist_Views_section_field"> {
   disableEditData: ko.Computed<boolean>;
 
   textColor: modelUtil.KoSaveableObservable<string|undefined>;
-  fillColor: modelUtil.KoSaveableObservable<string>;
-
-  computedColor: ko.Computed<string|undefined>;
-  computedFill: ko.Computed<string>;
+  fillColor: modelUtil.KoSaveableObservable<string|undefined>;
+  fontBold: modelUtil.KoSaveableObservable<boolean|undefined>;
+  fontUnderline: modelUtil.KoSaveableObservable<boolean|undefined>;
+  fontItalic: modelUtil.KoSaveableObservable<boolean|undefined>;
+  fontStrikethrough: modelUtil.KoSaveableObservable<boolean|undefined>;
 
   documentSettings: ko.PureComputed<DocumentSettings>;
 
@@ -227,16 +228,12 @@ export function createViewFieldRec(this: ViewFieldRec, docModel: DocModel): void
   this.disableModify = ko.pureComputed(() => this.column().disableModify());
   this.disableEditData = ko.pureComputed(() => this.column().disableEditData());
 
-  this.textColor = this.widgetOptionsJson.prop('textColor') as modelUtil.KoSaveableObservable<string>;
-
-  const fillColorProp = modelUtil.fieldWithDefault(
-    this.widgetOptionsJson.prop('fillColor') as modelUtil.KoSaveableObservable<string>, "#FFFFFF00");
-  // Store empty string in place of the default white color, so that we can keep it transparent in
-  // GridView, to avoid interfering with zebra stripes.
-  this.fillColor = modelUtil.savingComputed({
-    read: () => fillColorProp(),
-    write: (setter, val) => setter(fillColorProp, val?.toUpperCase() === '#FFFFFF' ? '' : (val ?? '')),
-  });
+  this.textColor = this.widgetOptionsJson.prop('textColor');
+  this.fillColor = this.widgetOptionsJson.prop('fillColor');
+  this.fontBold = this.widgetOptionsJson.prop('fontBold');
+  this.fontUnderline = this.widgetOptionsJson.prop('fontUnderline');
+  this.fontItalic = this.widgetOptionsJson.prop('fontItalic');
+  this.fontStrikethrough = this.widgetOptionsJson.prop('fontStrikethrough');
 
   this.documentSettings = ko.pureComputed(() => docModel.docInfoRow.documentSettingsJson());