(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/lib/ACUserManager.ts

@@ -3,6 +3,7 @@ import {ACIndex, ACItem, ACResults, buildHighlightedDom, normalizeText} from "ap
 import {cssSelectItem} from "app/client/lib/ACSelect";
 import {Autocomplete, IAutocompleteOptions} from "app/client/lib/autocomplete";
 import {colors, testId, theme} from "app/client/ui2018/cssVars";
+import {icon} from "app/client/ui2018/icons";
 import {menuCssClass} from "app/client/ui2018/menus";
 import {
   cssEmailInput,
@@ -104,7 +105,7 @@ export function buildACMemberEmail(
   const renderSearchItem = (item: ACUserItem, highlightFunc: any): HTMLLIElement => (item?.isNew ? cssSelectItem(
     cssMemberListItem(
       cssUserImagePlus(
-        "+",
+        cssPlusIcon('Plus'),
         cssUserImage.cls("-large"),
         cssUserImagePlus.cls('-invalid', (use) => !use(enableAdd),
         )),
@@ -199,3 +200,8 @@ const cssUserImagePlus = styled(cssUserImage, `
     color: ${theme.menuItemSelectedBg};
   }
 `);
+
+const cssPlusIcon = styled(icon, `
+  width: 20px;
+  height: 20px;
+`);

app/client/lib/TokenField.ts

@@ -652,14 +652,14 @@ const cssToken = styled('div', `
   position: relative;
   flex: none;
   border-radius: 3px;
-  background-color: ${colors.mediumGreyOpaque};
+  background-color: ${theme.choiceTokenBg};
   padding: 4px;
   margin: 3px 2px;
   user-select: none;
   cursor: grab;
 
   &.selected {
-    background-color: ${colors.darkGrey};
+    background-color: ${theme.choiceTokenSelectedBg};
   }
   &.token-dragging {
     pointer-events: none;
@@ -710,7 +710,7 @@ const cssDragTarget = styled('div', `
   &:hover::after {
     content: "";
     position: absolute;
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.controlFg};
     width: 2px;
     top: 0px;
     bottom: 0px;
@@ -740,7 +740,7 @@ const cssVerticalDragTarget = styled('div', `
   &:hover::after {
     content: "";
     position: absolute;
-    background-color: ${colors.lightGreen};
+    background-color: ${theme.controlFg};
     height: 2px;
     top: -5px;
     bottom: 0px;

app/client/lib/koForm.css

@@ -335,6 +335,7 @@ div:hover > .kf_tooltip {
 
   color: #606060;
   overflow: hidden;
+  margin-top: 3px;
   padding: 1px;
 }
 
@@ -362,11 +363,11 @@ div:hover > .kf_tooltip {
 }
 .kf_spinner_arrow.up {
   border-top: none;
-  border-bottom: 5px solid #606060;
+  border-bottom: 5px solid var(--grist-theme-numeric-spinner-fg, #606060);
   margin: 2px auto;
 }
 .kf_spinner_arrow.down {
-  border-top: 5px solid #606060;
+  border-top: 5px solid var(--grist-theme-numeric-spinner-fg, #606060);
   border-bottom: none;
   margin: 1px auto 2px auto;
 }