(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/widgets/ChoiceToken.ts

@@ -1,13 +1,11 @@
 import {dom, DomContents, DomElementArg, styled} from "grainjs";
 import {colors, vars} from "app/client/ui2018/cssVars";
+import {Style} from 'app/client/models/Styles';
 
 export const DEFAULT_FILL_COLOR = colors.mediumGreyOpaque.value;
 export const DEFAULT_TEXT_COLOR = '#000000';
 
-export interface IChoiceTokenOptions {
-  fillColor?: string;
-  textColor?: string;
-}
+export type IChoiceTokenOptions = Style;
 
 /**
  * Creates a colored token representing a choice (e.g. Choice and Choice List values).
@@ -25,13 +23,17 @@ export interface IChoiceTokenOptions {
  */
 export function choiceToken(
   label: DomElementArg,
-  {fillColor, textColor}: IChoiceTokenOptions,
+  {fillColor, textColor, fontBold, fontItalic, fontUnderline, fontStrikethrough}: IChoiceTokenOptions,
   ...args: DomElementArg[]
 ): DomContents {
   return cssChoiceToken(
     label,
     dom.style('background-color', fillColor ?? DEFAULT_FILL_COLOR),
     dom.style('color', textColor ?? DEFAULT_TEXT_COLOR),
+    dom.cls('font-bold', fontBold ?? false),
+    dom.cls('font-underline', fontUnderline ?? false),
+    dom.cls('font-italic', fontItalic ?? false),
+    dom.cls('font-strikethrough', fontStrikethrough ?? false),
     ...args
   );
 }