(core) Polish dark mode and remove beta tag

Summary:
Polishes support for dark mode and enables syncing with the OS theme
by default.

Test Plan: Manual.

Reviewers: JakubSerafin

Reviewed By: JakubSerafin

Subscribers: JakubSerafin

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

app/client/ui2018/ColorSelect.ts

@@ -274,9 +274,11 @@ interface PickerComponentOptions {
 }
 class PickerComponent extends Disposable {
 
-  private _color = Computed.create(this,
-    this._model.obs,
-    (use, val) => (val || this._options.defaultColor).toUpperCase().slice(0, 7));
+  private _colorHex = Computed.create(this, this._model.obs, (_use, val) =>
+    val?.toUpperCase().slice(0, 7));
+
+  private _colorCss = Computed.create(this, this._colorHex, (_use, color) =>
+    color || this._options.defaultColor);
 
   constructor(
     private _model: PickerModel<string|undefined>,
@@ -286,7 +288,7 @@ class PickerComponent extends Disposable {
 
   public buildDom() {
     const title = this._options.title;
-    const colorText = Computed.create(null, use => use(this._color) || this._options.noneText);
+    const colorText = Computed.create(null, use => use(this._colorHex) || this._options.noneText);
     return [
       cssHeaderRow(title),
       cssControlRow(
@@ -294,14 +296,15 @@ class PickerComponent extends Disposable {
           dom.update(
             cssColorSquare(
               cssLightBorder.cls(''),
-              dom.style('background-color', this._color),
+              dom.style('background-color', this._colorCss),
               cssNoneIcon('Empty',
-                dom.hide(use => Boolean(use(this._color)) === true)
+                dom.hide(use => Boolean(use(this._colorCss)))
               ),
+              testId(`${title}-color-square`),
             ),
             cssColorInput(
               {type: 'color'},
-              dom.attr('value', this._color),
+              dom.attr('value', use => use(this._model.obs) ?? ''),
               dom.on('input', (ev, elem) => this._setValue(elem.value || undefined)),
               testId(`${title}-input`),
             ),
@@ -321,7 +324,7 @@ class PickerComponent extends Disposable {
           )
         ),
         cssEmptyBox(
-          cssEmptyBox.cls('-selected', (use) => !use(this._color)),
+          cssEmptyBox.cls('-selected', (use) => !use(this._colorCss)),
           dom.on('click', () => this._setValue(undefined)),
           dom.hide(!this._options.allowsNone),
           cssNoneIcon('Empty'),
@@ -333,7 +336,7 @@ class PickerComponent extends Disposable {
           cssColorSquare(
             dom.style('background-color', color),
             cssLightBorder.cls('', isLight(index)),
-            cssColorSquare.cls('-selected', (use) => use(this._color) === color),
+            cssColorSquare.cls('-selected', (use) => use(this._colorHex) === color),
             dom.style('outline-color', isLight(index) ? '' : color),
             dom.on('click', () => this._setValue(color)),
             testId(`color-${color}`),
@@ -381,8 +384,6 @@ class FontComponent extends Disposable {
 
 const cssFontOptions = styled('div', `
   display: flex;
-  gap: 1px;
-  background: ${theme.colorSelectFontOptionsBorder};
   border: 1px solid ${theme.colorSelectFontOptionsBorder};
 `);
 
@@ -390,10 +391,13 @@ const cssFontOption = styled('div', `
   display: grid;
   place-items: center;
   flex-grow: 1;
-  background: ${theme.colorSelectFontOptionBg};
   --icon-color: ${theme.colorSelectFontOptionFg};
   height: 24px;
   cursor: pointer;
+
+  &:not(:last-child) {
+    border-right: 1px solid ${theme.colorSelectFontOptionsBorder};
+  }
   &:hover:not(&-selected) {
     background: ${theme.colorSelectFontOptionBgHover};
   }

app/client/ui2018/buttonSelect.ts

@@ -146,6 +146,11 @@ export const cssButtonSelect = styled('div', `
   /* Vars */
   color: ${theme.text};
   flex: 1 1 0;
+
+  &-disabled {
+    opacity: 0.4;
+    pointer-events: none;
+  }
 `);
 
 const cssSelectorBtn = styled('div', `
@@ -187,6 +192,7 @@ const cssSelectorBtn = styled('div', `
   }
 
   &:hover:not(&-selected) {
+    background-color: ${theme.buttonGroupBgHover};
     border: 1px solid ${theme.buttonGroupBorderHover};
     z-index: 5;  /* Update z-index so selected borders take precedent */
   }
@@ -218,14 +224,6 @@ const cssSelectorBtn = styled('div', `
     border: none;
     background-color: ${theme.hover};
   }
-  .${cssButtonSelect.className}-disabled > &,
-  .${cssButtonSelect.className}-disabled > &:hover {
-    --icon-color: ${theme.rightPanelToggleButtonDisabledFg};
-    color: ${theme.rightPanelToggleButtonDisabledFg};
-    background-color: ${theme.rightPanelToggleButtonDisabledBg};
-    border-color: ${theme.buttonGroupBorder};
-    pointer-events: none;
-  }
 `);
 
 const cssSelectorLabel = styled('span', `

app/client/ui2018/buttons.ts

@@ -109,7 +109,8 @@ export const textButton = styled(cssButton, `
   text-align: left;
   background-color: inherit !important;
   &:disabled {
-    color: ${theme.controlPrimaryDisabled};
+    color: ${theme.controlPrimaryBg};
+    opacity: 0.4;
   }
 `);
 

app/client/ui2018/checkbox.ts

@@ -199,7 +199,7 @@ export const cssRadioCheckboxOptions = styled('div', `
 const cssBlockCheckbox = styled('div', `
   display: flex;
   padding: 10px 8px;
-  border: 1px solid ${theme.modalBorder};
+  border: 1px solid ${theme.controlSecondaryDisabledFg};
   border-radius: 3px;
   cursor: pointer;
   & input::before, & input::after  {
@@ -207,7 +207,7 @@ const cssBlockCheckbox = styled('div', `
     left: unset;
   }
   &:hover {
-    border-color: ${theme.accentBorder};
+    border-color: ${theme.controlFg};
   }
   &-block {
     pointer-events: none;

app/client/ui2018/cssVars.ts

@@ -245,8 +245,6 @@ export const theme = {
     'black'),
   tooltipCloseButtonHoverBg: new CustomProp('theme-tooltip-close-button-hover-bg', undefined,
     'white'),
-  tooltipPopupHeaderFg: new CustomProp('theme-tooltip-popup-header-fg', undefined, colors.light),
-  tooltipPopupHeaderBg: new CustomProp('theme-tooltip-popup-header-bg', undefined, colors.lightGreen),
 
   /* Modals */
   modalBg: new CustomProp('theme-modal-bg', undefined, 'white'),
@@ -290,6 +288,7 @@ export const theme = {
 
   /* Cell Editor */
   cellEditorFg: new CustomProp('theme-cell-editor-fg', undefined, colors.dark),
+  cellEditorPlaceholderFg: new CustomProp('theme-cell-editor-placeholder-fg', undefined, colors.slate),
   cellEditorBg: new CustomProp('theme-cell-editor-bg', undefined, colors.light),
 
   /* Cursor */
@@ -298,14 +297,12 @@ export const theme = {
   cursorReadonly: new CustomProp('theme-cursor-readonly', undefined, colors.slate),
 
   /* Tables */
-  tableHeaderFg: new CustomProp('theme-table-header-fg', undefined, 'unset'),
-  tableHeaderSelectedFg: new CustomProp('theme-table-header-selected-fg', undefined, 'unset'),
+  tableHeaderFg: new CustomProp('theme-table-header-fg', undefined, '#000'),
+  tableHeaderSelectedFg: new CustomProp('theme-table-header-selected-fg', undefined, '#000'),
   tableHeaderBg: new CustomProp('theme-table-header-bg', undefined, colors.lightGrey),
   tableHeaderSelectedBg: new CustomProp('theme-table-header-selected-bg', undefined,
     colors.mediumGreyOpaque),
   tableHeaderBorder: new CustomProp('theme-table-header-border', undefined, 'lightgray'),
-  tableHeaderBorderDark: new CustomProp('theme-table-header-border-dark', undefined,
-    colors.darkGrey),
   tableBodyBg: new CustomProp('theme-table-body-bg', undefined, 'white'),
   tableBodyBorder: new CustomProp('theme-table-body-border', undefined, colors.darkGrey),
   tableAddNewBg: new CustomProp('theme-table-add-new-bg', undefined, 'inherit'),
@@ -314,6 +311,7 @@ export const theme = {
     '#999999'),
   tableDragDropIndicator: new CustomProp('theme-table-drag-drop-indicator', undefined, 'gray'),
   tableDragDropShadow: new CustomProp('theme-table-drag-drop-shadow', undefined, '#F0F0F0'),
+  tableCellSummaryBg: new CustomProp('theme-table-cell-summary-bg', undefined, colors.mediumGrey),
 
   /* Cards */
   cardCompactWidgetBg: new CustomProp('theme-card-compact-widget-bg', undefined,
@@ -339,7 +337,7 @@ export const theme = {
   selection: new CustomProp('theme-selection', undefined, colors.selection),
   selectionDarker: new CustomProp('theme-selection-darker', undefined, 'rgba(22,179,120,0.25)'),
   selectionDarkest: new CustomProp('theme-selection-darkest', undefined, 'rgba(22,179,120,0.35)'),
-  selectionOpaqueFg: new CustomProp('theme-selection-opaque-fg', undefined, 'unset'),
+  selectionOpaqueFg: new CustomProp('theme-selection-opaque-fg', undefined, 'black'),
   selectionOpaqueBg: new CustomProp('theme-selection-opaque-bg', undefined,
     colors.selectionOpaque),
   selectionOpaqueDarkBg: new CustomProp('theme-selection-opaque-dark-bg', undefined,
@@ -371,6 +369,8 @@ export const theme = {
   controlPrimaryFg: new CustomProp('theme-control-primary-fg', undefined, vars.primaryFg),
   controlPrimaryBg: new CustomProp('theme-control-primary-bg', undefined, vars.primaryBg),
   controlSecondaryFg: new CustomProp('theme-control-secondary-fg', undefined, colors.slate),
+  controlSecondaryDisabledFg: new CustomProp('theme-control-secondary-disabled-fg',
+    undefined, colors.darkGrey),
   controlHoverFg: new CustomProp('theme-control-hover-fg', undefined, vars.controlFgHover),
   controlPrimaryHoverBg: new CustomProp('theme-control-primary-hover-bg', undefined,
     vars.primaryBgHover),
@@ -380,8 +380,6 @@ export const theme = {
     colors.darkGrey),
   controlDisabledFg: new CustomProp('theme-control-disabled-fg', undefined, colors.light),
   controlDisabledBg: new CustomProp('theme-control-disabled-bg', undefined, colors.slate),
-  controlPrimaryDisabled: new CustomProp('theme-control-primary-disabled', undefined,
-    colors.inactiveCursor),
   controlBorder: new CustomProp('theme-control-border', undefined, vars.controlBorder),
 
   /* Checkboxes */
@@ -464,8 +462,6 @@ export const theme = {
     undefined, colors.light),
   rightPanelToggleButtonEnabledBg: new CustomProp('theme-right-panel-toggle-button-enabled-bg',
     undefined, colors.dark),
-  rightPanelToggleButtonEnabledHoverFg: new CustomProp(
-    'theme-right-panel-toggle-button-enabled-hover-fg', undefined, colors.darkGrey),
   rightPanelToggleButtonDisabledFg: new CustomProp('theme-right-panel-toggle-button-disabled-fg',
     undefined, colors.light),
   rightPanelToggleButtonDisabledBg: new CustomProp('theme-right-panel-toggle-button-disabled-bg',
@@ -487,9 +483,15 @@ export const theme = {
   documentHistorySnapshotBorder: new CustomProp('theme-document-history-snapshot-border',
     undefined, colors.mediumGrey),
   documentHistoryActivityText: new CustomProp('theme-document-history-activity-text', undefined,
-    'unset'),
+    colors.dark),
   documentHistoryActivityLightText: new CustomProp('theme-document-history-activity-text-light',
     undefined, '#333333'),
+  documentHistoryTableHeaderFg: new CustomProp('theme-document-history-table-header-fg',
+    undefined, '#000'),
+  documentHistoryTableBorder: new CustomProp('theme-document-history-table-border',
+    undefined, 'lightgray'),
+  documentHistoryTableBorderLight: new CustomProp('theme-document-history-table-border-light',
+    undefined, '#D9D9D9'),
 
   /* Accents */
   accentIcon: new CustomProp('theme-accent-icon', undefined, colors.lightGreen),
@@ -509,6 +511,16 @@ export const theme = {
   inputReadonlyBg: new CustomProp('theme-input-readonly-bg', undefined, colors.lightGrey),
   inputReadonlyBorder: new CustomProp('theme-input-readonly-border', undefined, colors.mediumGreyOpaque),
 
+  /* Choice Tokens */
+  choiceTokenFg: new CustomProp('theme-choice-token-fg', undefined, '#000000'),
+  choiceTokenBlankFg: new CustomProp('theme-choice-token-blank-fg', undefined, colors.slate),
+  choiceTokenBg: new CustomProp('theme-choice-token-bg', undefined, colors.mediumGreyOpaque),
+  choiceTokenSelectedBg: new CustomProp('theme-choice-token-selected-bg', undefined, colors.darkGrey),
+  choiceTokenSelectedBorder: new CustomProp('theme-choice-token-selected-border', undefined, colors.lightGreen),
+  choiceTokenInvalidFg: new CustomProp('theme-choice-token-invalid-fg', undefined, '#000000'),
+  choiceTokenInvalidBg: new CustomProp('theme-choice-token-invalid-bg', undefined, 'white'),
+  choiceTokenInvalidBorder: new CustomProp('theme-choice-token-invalid-border', undefined, colors.error),
+
   /* Choice Entry */
   choiceEntryBg: new CustomProp('theme-choice-entry-bg', undefined, 'white'),
   choiceEntryBorder: new CustomProp('theme-choice-entry-border', undefined, colors.darkGrey),
@@ -519,7 +531,6 @@ export const theme = {
   selectButtonFg: new CustomProp('theme-select-button-fg', undefined, colors.dark),
   selectButtonPlaceholderFg: new CustomProp('theme-select-button-placeholder-fg', undefined,
     colors.slate),
-  selectButtonDisabledFg: new CustomProp('theme-select-button-disabled-fg', undefined, 'grey'),
   selectButtonBg: new CustomProp('theme-select-button-bg', undefined, 'white'),
   selectButtonBorder: new CustomProp('theme-select-button-border', undefined, colors.darkGrey),
   selectButtonBorderInvalid: new CustomProp('theme-select-button-border-invalid', undefined,
@@ -529,7 +540,7 @@ export const theme = {
   menuText: new CustomProp('theme-menu-text', undefined, colors.slate),
   menuLightText: new CustomProp('theme-menu-light-text', undefined, colors.slate),
   menuBg: new CustomProp('theme-menu-bg', undefined, 'white'),
-  menuSubheaderFg: new CustomProp('theme-menu-subheader-fg', undefined, 'unset'),
+  menuSubheaderFg: new CustomProp('theme-menu-subheader-fg', undefined, colors.dark),
   menuBorder: new CustomProp('theme-menu-border', undefined, colors.mediumGreyOpaque),
   menuShadow: new CustomProp('theme-menu-shadow', undefined, 'rgba(38, 38, 51, 0.6)'),
 
@@ -540,19 +551,20 @@ export const theme = {
   menuItemDisabledFg: new CustomProp('theme-menu-item-disabled-fg', undefined, '#D9D9D9'),
   menuItemIconFg: new CustomProp('theme-menu-item-icon-fg', undefined, colors.slate),
   menuItemIconSelectedFg: new CustomProp('theme-menu-item-icon-selected-fg', undefined, 'white'),
-  menuItemLinkFg: new CustomProp('theme-menu-item-link-fg', undefined, colors.lightGreen),
-  menuItemLinkSelectedFg: new CustomProp('theme-menu-item-link-selected-fg', undefined,
-    colors.darkGreen),
-  menuItemLinkselectedBg: new CustomProp('theme-menu-item-link-selected-bg', undefined,
-    colors.mediumGreyOpaque),
 
   /* Autocomplete */
   autocompleteMatchText: new CustomProp('theme-autocomplete-match-text', undefined,
     colors.lightGreen),
   autocompleteSelectedMatchText: new CustomProp('theme-autocomplete-selected-match-text',
     undefined, colors.lighterGreen),
-  autocompleteChoiceSelectedBg: new CustomProp('theme-autocomplete-item-selected-bg', undefined,
+  autocompleteItemSelectedBg: new CustomProp('theme-autocomplete-item-selected-bg', undefined,
     colors.mediumGreyOpaque),
+  autocompleteAddNewCircleFg: new CustomProp('theme-autocomplete-add-new-circle-fg', undefined,
+    colors.light),
+  autocompleteAddNewCircleBg: new CustomProp('theme-autocomplete-add-new-circle-bg', undefined,
+    colors.lightGreen),
+  autocompleteAddNewCircleSelectedBg: new CustomProp(
+    'theme-autocomplete-add-new-circle-selected-bg', undefined, colors.darkGreen),
 
   /* Search */
   searchBorder: new CustomProp('theme-search-border', undefined, 'grey'),
@@ -594,7 +606,7 @@ export const theme = {
   widgetPickerPrimaryBg: new CustomProp('theme-widget-picker-primary-bg', undefined, 'white'),
   widgetPickerSecondaryBg: new CustomProp('theme-widget-picker-secondary-bg', undefined,
     colors.lightGrey),
-  widgetPickerItemFg: new CustomProp('theme-widget-picker-item-fg', undefined, 'unset'),
+  widgetPickerItemFg: new CustomProp('theme-widget-picker-item-fg', undefined, colors.dark),
   widgetPickerItemSelectedBg: new CustomProp('theme-widget-picker-item-selected-bg', undefined,
     colors.mediumGrey),
   widgetPickerItemDisabledBg: new CustomProp('theme-widget-picker-item-disabled-bg', undefined,
@@ -651,7 +663,9 @@ export const theme = {
   /* Button Groups */
   buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark),
   buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate),
-  buttonGroupBg: new CustomProp('theme-button-group-bg', undefined, 'unset'),
+  buttonGroupBg: new CustomProp('theme-button-group-bg', undefined, 'transparent'),
+  buttonGroupBgHover: new CustomProp('theme-button-group-bg-hover', undefined,
+  colors.hover),
   buttonGroupIcon: new CustomProp('theme-button-group-icon', undefined, colors.slate),
   buttonGroupBorder: new CustomProp('theme-button-group-border', undefined, colors.darkGrey),
   buttonGroupBorderHover: new CustomProp('theme-button-group-border-hover', undefined,
@@ -670,6 +684,8 @@ export const theme = {
     colors.mediumGrey),
   accessRulesTableBodyFg: new CustomProp('theme-access-rules-table-body-fg', undefined,
     colors.dark),
+  accessRulesTableBodyLightFg: new CustomProp('theme-access-rules-table-body-light-fg', undefined,
+    colors.darkGrey),
   accessRulesTableBorder: new CustomProp('theme-access-rules-table-border', undefined,
     colors.slate),
   accessRulesColumnListBorder: new CustomProp('theme-access-rules-column-list-border', undefined,
@@ -694,7 +710,7 @@ export const theme = {
     undefined, colors.cursor),
 
   /* Cells */
-  cellFg: new CustomProp('theme-cell-fg', undefined, 'unset'),
+  cellFg: new CustomProp('theme-cell-fg', undefined, 'black'),
   cellBg: new CustomProp('theme-cell-bg', undefined, '#FFFFFF00'),
   cellZebraBg: new CustomProp('theme-cell-zebra-bg', undefined, '#F8F8F8'),
 
@@ -772,13 +788,11 @@ export const theme = {
     undefined, colors.darkGrey),
   colorSelectFontOptionFg: new CustomProp('theme-color-select-font-option-fg',
     undefined, colors.dark),
-  colorSelectFontOptionBg: new CustomProp('theme-color-select-font-option-bg',
-    undefined, colors.light),
   colorSelectFontOptionBgHover: new CustomProp('theme-color-select-font-option-bg-hover',
     undefined, colors.lightGrey),
-  colorSelectFontOptionFgSelected: new CustomProp('theme-color-select-font-option-selected-fg',
+  colorSelectFontOptionFgSelected: new CustomProp('theme-color-select-font-option-fg-selected',
     undefined, colors.light),
-  colorSelectFontOptionBgSelected: new CustomProp('theme-color-select-font-option-selected-bg',
+  colorSelectFontOptionBgSelected: new CustomProp('theme-color-select-font-option-bg-selected',
     undefined, colors.dark),
   colorSelectColorSquareBorder: new CustomProp('theme-color-select-color-square-border',
     undefined, '#D9D9D9'),
@@ -807,6 +821,14 @@ export const theme = {
   loginPageBg: new CustomProp('theme-login-page-bg', undefined, 'white'),
   loginPageBackdrop: new CustomProp('theme-login-page-backdrop', undefined, '#F5F8FA'),
   loginPageLine: new CustomProp('theme-login-page-line', undefined, colors.lightGrey),
+  loginPageGoogleButtonFg: new CustomProp('theme-login-page-google-button-fg', undefined,
+    colors.dark),
+  loginPageGoogleButtonBg: new CustomProp('theme-login-page-google-button-bg', undefined,
+    colors.lightGrey),
+  loginPageGoogleButtonBgHover: new CustomProp('theme-login-page-google-button-bg-hover',
+    undefined, colors.mediumGrey),
+  loginPageGoogleButtonBorder: new CustomProp('theme-login-page-google-button-border', undefined,
+    colors.darkGrey),
 
   /* Formula Assistant */
   formulaAssistantHeaderBg: new CustomProp(
@@ -815,6 +837,42 @@ export const theme = {
     'theme-formula-assistant-border', undefined, colors.darkGrey),
   formulaAssistantPreformattedTextBg: new CustomProp(
     'theme-formula-assistant-preformatted-text-bg', undefined, colors.lightGrey),
+
+  /* Attachments */
+  attachmentsEditorButtonFg: new CustomProp(
+    'theme-attachments-editor-button-fg', undefined, colors.darkGreen),
+  attachmentsEditorButtonHoverFg: new CustomProp(
+    'theme-attachments-editor-button-hover-fg', undefined, colors.lightGreen),
+  attachmentsEditorButtonBg: new CustomProp(
+    'theme-attachments-editor-button-bg', undefined, colors.light),
+  attachmentsEditorButtonHoverBg: new CustomProp(
+    'theme-attachments-editor-button-hover-bg', undefined, colors.mediumGreyOpaque),
+  attachmentsEditorButtonBorder: new CustomProp(
+    'theme-attachments-editor-button-border', undefined, colors.darkGrey),
+  attachmentsEditorButtonIcon: new CustomProp(
+    'theme-attachments-editor-button-icon', undefined, colors.slate),
+  attachmentsEditorBorder: new CustomProp(
+    'theme-attachments-editor-border', undefined, colors.mediumGreyOpaque),
+  attachmentsCellIconFg: new CustomProp(
+    'theme-attachments-cell-icon-fg', undefined, 'white'),
+  attachmentsCellIconBg: new CustomProp(
+    'theme-attachments-cell-icon-bg', undefined, '#D9D9D9'),
+  attachmentsCellIconHoverBg: new CustomProp(
+    'theme-attachments-cell-icon-hover-bg', undefined, '#929299'),
+
+  /* Announcement Popups */
+  announcementPopupFg: new CustomProp('theme-announcement-popup-fg', undefined, '#000000'),
+  announcementPopupBg: new CustomProp('theme-announcement-popup-bg', undefined, '#DCF4EB'),
+
+  /* Switches */
+  switchSliderFg: new CustomProp('theme-switch-slider-fg', undefined, '#ccc'),
+  switchCircleFg: new CustomProp('theme-switch-circle-fg', undefined, 'white'),
+
+  /* Toggle Checkboxes */
+  toggleCheckboxFg: new CustomProp('theme-toggle-checkbox-fg', undefined, '#606060'),
+
+  /* Numeric Spinners */
+  numericSpinnerFg: new CustomProp('theme-numeric-spinner-fg', undefined, '#606060'),
 };
 
 const cssColors = values(colors).map(v => v.decl()).join('\n');
@@ -1038,7 +1096,7 @@ function getCssThemeBackgroundProperties(appearance: ThemeAppearance) {
  * pollute the document with in-line styles.
  */
 function getOrCreateStyleElement(id: string) {
-  let style = document.head.querySelector(id);
+  let style = document.head.querySelector(`#${id}`);
   if (style) { return style; }
   style = document.createElement('style');
   style.setAttribute('id', id);

app/client/ui2018/links.ts

@@ -1,6 +1,6 @@
 import {findLinks} from 'app/client/lib/textUtils';
 import { sameDocumentUrlState, urlState } from 'app/client/models/gristUrlState';
-import { colors, hideInPrintView, testId, theme } from 'app/client/ui2018/cssVars';
+import { hideInPrintView, testId, theme } from 'app/client/ui2018/cssVars';
 import {cssIconBackground, icon} from 'app/client/ui2018/icons';
 import { CellValue } from 'app/plugin/GristData';
 import { dom, DomArg, IDomArgs, Observable, styled } from 'grainjs';
@@ -95,7 +95,7 @@ const cssMaybeWrap = styled('span', `
 
 // A gentle transition effect on hover in, and the same effect on hover out with a little delay.
 export const cssHoverIn = (parentClass: string) => styled('span', `
-  --icon-color: var(--grist-actual-cell-color, ${colors.lightGreen});
+  --icon-color: var(--grist-actual-cell-color, ${theme.link});
   margin: -1px 2px 2px 0;
   border-radius: 3px;
   transition-property: background-color;
@@ -103,7 +103,7 @@ export const cssHoverIn = (parentClass: string) => styled('span', `
   transition-duration: 150ms;
   transition-delay: 90ms;
   .${parentClass}:hover & {
-    --icon-background: ${colors.lightGreen};
+    --icon-background: ${theme.link};
     --icon-color: white;
     transition-duration: 80ms;
     transition-delay: 0ms;
@@ -113,5 +113,5 @@ export const cssHoverIn = (parentClass: string) => styled('span', `
 const cssHoverInText = cssHoverIn(cssMaybeWrap.className);
 
 const linkColor = styled('span', `
-  color: var(--grist-actual-cell-color, ${colors.lightGreen});;
+  color: var(--grist-actual-cell-color, ${theme.link});
 `);

app/client/ui2018/pages.ts

@@ -178,7 +178,7 @@ const cssPageInitial = styled('div', `
 
   &-emoji {
     background-color: ${theme.pageInitialsEmojiBg};
-    box-shadow: 0 0 0 1px var(--grist-theme-left-panel-page-emoji-outline, var(--grist-color-dark-grey));
+    box-shadow: 0 0 0 1px ${theme.pageInitialsEmojiOutline};
     font-size: 15px;
     overflow: hidden;
     color: ${theme.text};

app/client/ui2018/select.ts

@@ -42,8 +42,8 @@ export const cssSelectBtn = styled('div', `
   }
 
   &.disabled, &-disabled {
-    --icon-color: ${theme.selectButtonDisabledFg};
-    color: ${theme.selectButtonDisabledFg};
-    cursor: pointer;
+    opacity: 0.4;
+    pointer-events: none;
+    cursor: default;
   }
 `);