(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/components/ColumnTransform.ts

@@ -223,9 +223,13 @@ export class ColumnTransform extends Disposable {
       [
         'CopyFromColumn',
         this._tableData.tableId,
-        this.transformColumn.colId(),
-        this.origColumn.colId(),
-        JSON.stringify(this._fieldBuilder.options()),
+        this.transformColumn.colId.peek(),
+        this.origColumn.colId.peek(),
+        // Get the options from builder rather the transforming columns.
+        // Those options are supposed to be set by prepTransformColInfo(TypeTransform) and
+        // adjusted by client.
+        // TODO: is this really needed? Aren't those options already in the data-engine?
+        JSON.stringify(this._fieldBuilder.options.peek()),
       ],
     ];
   }

app/client/components/TypeConversion.ts

@@ -15,12 +15,13 @@ import {dateTimeWidgetOptions, guessDateFormat} from 'app/common/parseDate';
 import {TableData} from 'app/common/TableData';
 import {decodeObject} from 'app/plugin/objtypes';
 
-export interface ColInfo {
+interface ColInfo {
   type: string;
   isFormula: boolean;
   formula: string;
   visibleCol: number;
   widgetOptions?: string;
+  rules: gristTypes.RefListValue
 }
 
 /**
@@ -87,18 +88,21 @@ export async function prepTransformColInfo(docModel: DocModel, origCol: ColumnRe
   const toType = gristTypes.extractTypeFromColType(toTypeMaybeFull);
   const tableData: TableData = docModel.docData.getTable(origCol.table().tableId())!;
   let widgetOptions: any = null;
+  let rules: gristTypes.RefListValue = null;
 
   const colInfo: ColInfo = {
     type: addColTypeSuffix(toTypeMaybeFull, origCol, docModel),
     isFormula: true,
     visibleCol: 0,
     formula: "CURRENT_CONVERSION(rec)",
+    rules,
   };
 
   const visibleCol = origCol.visibleColModel();
   // Column used to derive previous widget options and sample values for guessing
   const sourceCol = visibleCol.getRowId() !== 0 ? visibleCol : origCol;
   const prevOptions = sourceCol.widgetOptionsJson.peek() || {};
+  const prevRules = sourceCol.rules.peek();
   switch (toType) {
     case 'Date':
     case 'DateTime': {
@@ -112,12 +116,13 @@ export async function prepTransformColInfo(docModel: DocModel, origCol: ColumnRe
     }
     case 'Numeric':
     case 'Int': {
-      if (["Numeric", "Int"].includes(sourceCol.type())) {
-        widgetOptions = prevOptions;
-      } else {
+      if (!["Numeric", "Int"].includes(sourceCol.type())) {
         const numberParse = NumberParse.fromSettings(docModel.docData.docSettings());
         const colValues = tableData.getColValues(sourceCol.colId()) || [];
         widgetOptions = numberParse.guessOptions(colValues.filter(isString));
+      } else {
+        widgetOptions = prevOptions;
+        rules = prevRules;
       }
       break;
     }
@@ -202,6 +207,9 @@ export async function prepTransformColInfo(docModel: DocModel, origCol: ColumnRe
   if (widgetOptions) {
     colInfo.widgetOptions = JSON.stringify(widgetOptions);
   }
+  if (rules) {
+    colInfo.rules = rules;
+  }
   return colInfo;
 }
 

app/client/components/TypeTransform.ts

@@ -91,11 +91,19 @@ export class TypeTransform extends ColumnTransform {
   protected async addTransformColumn(toType: string) {
     const docModel = this.gristDoc.docModel;
     const colInfo = await TypeConversion.prepTransformColInfo(docModel, this.origColumn, this.origDisplayCol, toType);
+    // NOTE: We could add rules with AddColumn action, but there are some optimizations that converts array values.
+    const rules = colInfo.rules;
+    delete colInfo.rules;
     const newColInfos = await this._tableData.sendTableActions([
       ['AddColumn', 'gristHelper_Converted', {...colInfo, isFormula: false, formula: ''}],
       ['AddColumn', 'gristHelper_Transform', colInfo],
     ]);
     const transformColRef = newColInfos[1].colRef;
+    if (rules) {
+      await this.gristDoc.docData.sendActions([
+        ['UpdateRecord', '_grist_Tables_column', transformColRef, { rules }]
+      ]);
+    }
     this.transformColumn = docModel.columns.getRowModel(transformColRef);
     await this.convertValues();
     return transformColRef;