Choices text box: make sure all choice tokens are readable (#1982)

## Context

This is a follow-up to
#1529, where we made sure
that choice tokens with custom bg color but no custom fg color would not
become unreadable when switching from light to dark themes.

The tokens that were rendered when editing a text cell did not benefit
from the previous fix. So while the tokens stayed readable when looking
at them, they could go back to being unreadable when editing them after
double clicking a cell (with automatic light text in dark theme, on a
light custom bg, for example).

## Proposed solution

Make sure the choices text box also applies the "readable colors combo"
calculation.

## Related issues

#1155, see this comment:
#1155 (comment)

## Has this been tested?

- [ ] 👍 yes, I added tests to the test suite
- [ ] 💭 no, because this PR is a draft and still needs work
- [x] 🙅 no, because this is not relevant here
- [ ] 🙋 no, because I need help <!-- Detail how we can help you -->

## Screenshots / Screencasts

Before:


https://github.com/user-attachments/assets/2d87d047-3678-4e39-a079-7fb98c9142ae

After:


https://github.com/user-attachments/assets/732bd4dc-b041-4caf-b2bb-8f227c8bd3e3




Sorry it took so long @S7venLights 😬

Author: manuhabitela

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', `