From 74c556ea8527caa96ce2d4a0cd50d483ff3fc33f Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Mon, 3 Oct 2022 17:05:55 -0700 Subject: [PATCH] (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 | 13 +++++++------ app/client/components/GridView.css | 2 +- app/client/components/ViewLayout.css | 1 + app/client/ui2018/cssVars.ts | 15 ++++++++++++++- app/common/ThemePrefs-ti.ts | 7 +++++++ app/common/ThemePrefs.ts | 7 +++++++ app/common/themes/GristDark.ts | 7 +++++++ app/common/themes/GristLight.ts | 9 ++++++++- 8 files changed, 52 insertions(+), 9 deletions(-) diff --git a/app/client/aclui/ACLColumnList.ts b/app/client/aclui/ACLColumnList.ts index 1b7492bf..4160683c 100644 --- a/app/client/aclui/ACLColumnList.ts +++ b/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}; - --icon-color: ${colors.light}; + background-color: ${theme.accessRulesColumnItemIconHoverBg}; + --icon-color: ${theme.accessRulesColumnItemIconHoverFg}; } .${cssColListWidget.className}-editing & { display: flex; diff --git a/app/client/components/GridView.css b/app/client/components/GridView.css index 0aa6e359..bb5521b7 100644 --- a/app/client/components/GridView.css +++ b/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; diff --git a/app/client/components/ViewLayout.css b/app/client/components/ViewLayout.css index 5d60c8e6..d341ae16 100644 --- a/app/client/components/ViewLayout.css +++ b/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 */ diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index 92f9fc56..3ba601b9 100644 --- a/app/client/ui2018/cssVars.ts +++ b/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'), diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts index d7acfcea..550a4a0a 100644 --- a/app/common/ThemePrefs-ti.ts +++ b/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", diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts index d984a42f..5036d7d4 100644 --- a/app/common/ThemePrefs.ts +++ b/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; diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts index d78e90cc..5a0e6ec7 100644 --- a/app/common/themes/GristDark.ts +++ b/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', diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts index 7dbefb68..8bb105d9 100644 --- a/app/common/themes/GristLight.ts +++ b/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',