Choices text box: make sure all choice tokens are readable

app/client/widgets/ChoiceListEditor.ts

@@ -15,8 +15,8 @@ import {CellValue} from "app/common/DocActions";
 import {CompiledPredicateFormula} from 'app/common/PredicateFormula';
 import {EmptyRecordView} from 'app/common/RecordView';
 import {decodeObject, encodeObject} from 'app/plugin/objtypes';
-import {ChoiceOptions, getRenderFillColor, getRenderTextColor} from 'app/client/widgets/ChoiceTextBox';
-import {choiceToken, cssChoiceACItem, cssChoiceToken} from 'app/client/widgets/ChoiceToken';
+import {ChoiceOptions} from 'app/client/widgets/ChoiceTextBox';
+import {choiceToken, choiceTokenDomArgs, cssChoiceACItem} from 'app/client/widgets/ChoiceToken';
 import {icon} from 'app/client/ui2018/icons';
 import {dom, styled} from 'grainjs';
 
@@ -95,17 +95,14 @@ export class ChoiceListEditor extends NewBaseEditor {
 
     this._tokenField = TokenField.ctor<ChoiceItem>().create(this, {
       initialValue: startTokens,
-      renderToken: item => [
+      renderToken: item => choiceTokenDomArgs(
         item.isBlank ? '[Blank]' : item.label,
-        dom.style('background-color', getRenderFillColor(this._choiceOptionsByName[item.label])),
-        dom.style('color', getRenderTextColor(this._choiceOptionsByName[item.label])),
-        dom.cls('font-bold', this._choiceOptionsByName[item.label]?.fontBold ?? false),
-        dom.cls('font-underline', this._choiceOptionsByName[item.label]?.fontUnderline ?? false),
-        dom.cls('font-italic', this._choiceOptionsByName[item.label]?.fontItalic ?? false),
-        dom.cls('font-strikethrough', this._choiceOptionsByName[item.label]?.fontStrikethrough ?? false),
-        cssChoiceToken.cls('-invalid', item.isInvalid),
-        cssChoiceToken.cls('-blank', item.isBlank),
-      ],
+        {
+          ...(this._choiceOptionsByName[item.label] || {}),
+          invalid: item.isInvalid,
+          blank: item.isBlank,
+        },
+      ),
       createToken: label => new ChoiceItem(label, !this._choicesSet.has(label), label.trim() === ''),
       acOptions,
       openAutocompleteOnFocus: true,

app/client/widgets/ChoiceTextBox.ts

@@ -14,7 +14,7 @@ import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
 import {testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {ChoiceListEntry} from 'app/client/widgets/ChoiceListEntry';
-import {choiceToken, DEFAULT_BACKGROUND_COLOR, DEFAULT_COLOR} from 'app/client/widgets/ChoiceToken';
+import {choiceToken} from 'app/client/widgets/ChoiceToken';
 import {NTextBox} from 'app/client/widgets/NTextBox';
 import {Computed, dom, styled} from 'grainjs';
 
@@ -24,14 +24,6 @@ export type ChoiceOptionsByName = Map<string, IChoiceOptions | undefined>;
 
 const t = makeT('ChoiceTextBox');
 
-export function getRenderFillColor(choiceOptions?: IChoiceOptions) {
-  return choiceOptions?.fillColor ?? DEFAULT_BACKGROUND_COLOR;
-}
-
-export function getRenderTextColor(choiceOptions?: IChoiceOptions) {
-  return choiceOptions?.textColor ?? DEFAULT_COLOR;
-}
-
 /**
  * ChoiceTextBox - A textbox for choice values.
  */

app/client/widgets/ChoiceToken.ts

@@ -34,10 +34,21 @@ export function choiceToken(
   options: IChoiceTokenOptions,
   ...args: DomElementArg[]
 ): DomContents {
+  return cssChoiceToken(choiceTokenDomArgs(label, options), ...args);
+}
+
+/**
+ * Exposes the choiceToken dom args outside of cssChoiceToken to allow
+ * easy usage of them with TokenField#renderToken, that has its own wrapper dom el.
+ */
+export function choiceTokenDomArgs(
+  label: DomElementArg,
+  options: IChoiceTokenOptions,
+): DomElementArg {
   const {fillColor, textColor, fontBold, fontItalic, fontUnderline,
-         fontStrikethrough, invalid, blank} = options;
+    fontStrikethrough, invalid, blank} = options;
   const {bg, fg} = getReadableColorsCombo({fillColor, textColor});
-  return cssChoiceToken(
+  return [
     label,
     dom.style('background-color', bg),
     dom.style('color', fg),
@@ -47,8 +58,7 @@ export function choiceToken(
     dom.cls('font-strikethrough', fontStrikethrough ?? false),
     invalid ? cssChoiceToken.cls('-invalid') : null,
     blank ? cssChoiceToken.cls('-blank') : null,
-    ...args
-  );
+  ];
 }
 
 export const cssChoiceToken = styled('div', `