(core) Fix CSS errors related to dark mode

Summary: Fixes a few cosmetic CSS bugs since dark mode landed.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

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

app/client/aclui/ACLColumnList.ts

@@ -3,7 +3,7 @@
  * add a new column, and allows removing already-added columns.
  */
 import {aclSelect, cssSelect} from 'app/client/aclui/ACLSelect';
-import {colors, testId} from 'app/client/ui2018/cssVars';
+import {testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {Computed, dom, Observable, styled} from 'grainjs';
 
@@ -85,7 +85,7 @@ const cssColListWidget = styled('div', `
 
   border: 1px solid transparent;
   &:not(&-editing):hover {
-    border: 1px solid ${colors.darkGrey};
+    border: 1px solid ${theme.accessRulesColumnListBorder};
   }
 `);
 
@@ -96,9 +96,10 @@ const cssColItem = styled('div', `
   border-radius: 3px;
   padding-left: 6px;
   padding-right: 2px;
+  color: ${theme.accessRulesColumnItemFg};
 
   .${cssColListWidget.className}-editing & {
-    background-color: ${colors.mediumGreyOpaque};
+    background-color: ${theme.accessRulesColumnItemBg};
   }
 `);
 
@@ -126,10 +127,10 @@ const cssColItemIcon = styled('div', `
   border-radius: 16px;
   display: none;
   cursor: default;
-  --icon-color: ${colors.slate};
+  --icon-color: ${theme.accessRulesColumnItemIconFg};
   &:hover {
-    background-color: ${colors.slate};
+    background-color: ${theme.accessRulesColumnItemIconHoverBg};
-    --icon-color: ${colors.light};
+    --icon-color: ${theme.accessRulesColumnItemIconHoverFg};
   }
   .${cssColListWidget.className}-editing & {
     display: flex;

app/client/components/GridView.css

@@ -1,5 +1,5 @@
 .gridview_data_pane {
-  background-color: var(--grist-theme-table-body-bg, unset);
+  background-color: var(--grist-theme-table-body-bg, white);
   position: relative;
   width: 100%;
   overflow: hidden;

app/client/components/ViewLayout.css

@@ -21,6 +21,7 @@
 .viewsection_content {
   overflow: visible;
   margin: 12px;
+  background-color: var(--grist-theme-widget-bg, white);
 }
 
 /* TODO should be switched to use new icon */

app/client/ui2018/cssVars.ts

@@ -282,7 +282,7 @@ export const theme = {
   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, 'unset'),
+  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'),
   tableScrollShadow: new CustomProp('theme-table-scroll-shadow', undefined, '#444444'),
@@ -320,6 +320,7 @@ export const theme = {
     colors.selectionDarkerOpaque),
 
   /* Widgets */
+  widgetBg: new CustomProp('theme-widget-bg', undefined, 'white'),
   widgetBorder: new CustomProp('theme-widget-border', undefined, colors.darkGrey),
   widgetActiveBorder: new CustomProp('theme-widget-active-border', undefined, colors.lightGreen),
   widgetInactiveStripesLight: new CustomProp('theme-widget-inactive-stripes-light', undefined,
@@ -622,6 +623,18 @@ export const theme = {
     colors.dark),
   accessRulesTableBorder: new CustomProp('theme-access-rules-table-border', undefined,
     colors.slate),
+  accessRulesColumnListBorder: new CustomProp('theme-access-rules-column-list-border', undefined,
+    colors.darkGrey),
+  accessRulesColumnItemFg: new CustomProp('theme-access-rules-column-item-fg', undefined,
+    colors.dark),
+  accessRulesColumnItemBg: new CustomProp('theme-access-rules-column-item-bg', undefined,
+    colors.mediumGreyOpaque),
+  accessRulesColumnItemIconFg: new CustomProp('theme-access-rules-column-item-icon-fg', undefined,
+    colors.slate),
+  accessRulesColumnItemIconHoverFg: new CustomProp('theme-access-rules-column-item-icon-hover-fg',
+    undefined, colors.light),
+  accessRulesColumnItemIconHoverBg: new CustomProp('theme-access-rules-column-item-icon-hover-bg',
+    undefined, colors.slate),
 
   /* Cells */
   cellFg: new CustomProp('theme-cell-fg', undefined, 'unset'),

app/common/ThemePrefs-ti.ts

@@ -130,6 +130,7 @@ export const ThemeColors = t.iface([], {
   "selection-opaque-fg": "string",
   "selection-opaque-bg": "string",
   "selection-opaque-dark-bg": "string",
+  "widget-bg": "string",
   "widget-border": "string",
   "widget-active-border": "string",
   "widget-inactive-stripes-light": "string",
@@ -305,6 +306,12 @@ export const ThemeColors = t.iface([], {
   "access-rules-table-header-bg": "string",
   "access-rules-table-body-fg": "string",
   "access-rules-table-border": "string",
+  "access-rules-column-list-border": "string",
+  "access-rules-column-item-fg": "string",
+  "access-rules-column-item-bg": "string",
+  "access-rules-column-item-icon-fg": "string",
+  "access-rules-column-item-icon-hover-fg": "string",
+  "access-rules-column-item-icon-hover-bg": "string",
   "cell-fg": "string",
   "cell-bg": "string",
   "cell-zebra-bg": "string",

app/common/ThemePrefs.ts

@@ -166,6 +166,7 @@ export interface ThemeColors {
   'selection-opaque-dark-bg': string;
 
   /* Widgets */
+  'widget-bg': string;
   'widget-border': string;
   'widget-active-border': string;
   'widget-inactive-stripes-light': string;
@@ -399,6 +400,12 @@ export interface ThemeColors {
   'access-rules-table-header-bg': string;
   'access-rules-table-body-fg': string;
   'access-rules-table-border': string;
+  'access-rules-column-list-border': string;
+  'access-rules-column-item-fg': string;
+  'access-rules-column-item-bg': string;
+  'access-rules-column-item-icon-fg': string;
+  'access-rules-column-item-icon-hover-fg': string;
+  'access-rules-column-item-icon-hover-bg': string;
 
   /* Cells */
   'cell-fg': string;

app/common/themes/GristDark.ts

@@ -145,6 +145,7 @@ export const GristDark: ThemeColors = {
   'selection-opaque-dark-bg': '#253E3E',
 
   /* Widgets */
+  'widget-bg': '#32323F',
   'widget-border': '#57575F',
   'widget-active-border': '#1DA270',
   'widget-inactive-stripes-light': '#262633',
@@ -378,6 +379,12 @@ export const GristDark: ThemeColors = {
   'access-rules-table-header-bg': '#57575F',
   'access-rules-table-body-fg': '#A4A4A4',
   'access-rules-table-border': '#A4A4A4',
+  'access-rules-column-list-border': '#69697D',
+  'access-rules-column-item-fg': '#EFEFEF',
+  'access-rules-column-item-bg': '#57575F',
+  'access-rules-column-item-icon-fg': '#A4A4A4',
+  'access-rules-column-item-icon-hover-fg': '#EFEFEF',
+  'access-rules-column-item-icon-hover-bg': '#A4A4A4',
 
   /* Cells */
   'cell-fg': '#FFFFFF',

app/common/themes/GristLight.ts

@@ -114,7 +114,7 @@ export const GristLight: ThemeColors = {
   'table-header-selected-bg': '#E8E8E8',
   'table-header-border': 'lightgray',
   'table-header-border-dark': '#D9D9D9',
-  'table-body-bg': 'unset',
+  'table-body-bg': 'white',
   'table-body-border': '#D9D9D9',
   'table-add-new-bg': 'inherit',
   'table-scroll-shadow': '#444444',
@@ -145,6 +145,7 @@ export const GristLight: ThemeColors = {
   'selection-opaque-dark-bg': '#D6EEE5',
 
   /* Widgets */
+  'widget-bg': 'white',
   'widget-border': '#D9D9D9',
   'widget-active-border': '#16B378',
   'widget-inactive-stripes-light': '#F7F7F7',
@@ -378,6 +379,12 @@ export const GristLight: ThemeColors = {
   'access-rules-table-header-bg': 'rgba(217,217,217,0.6)',
   'access-rules-table-body-fg': '#929299',
   'access-rules-table-border': '#929299',
+  'access-rules-column-list-border': '#D9D9D9',
+  'access-rules-column-item-fg': '#262633',
+  'access-rules-column-item-bg': '#E8E8E8',
+  'access-rules-column-item-icon-fg': '#929299',
+  'access-rules-column-item-icon-hover-fg': '#FFFFFF',
+  'access-rules-column-item-icon-hover-bg': '#929299',
 
   /* Cells */
   'cell-fg': 'black',