Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Fix CSS errors related to dark mode

Browse Source 
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
This commit is contained in:
George Gevoian 2022-10-03 17:05:55 -07:00
parent 303d071de1
commit 74c556ea85
8 changed files with 52 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/client/aclui/ACLColumnList.ts
View File

@ -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;

2
app/client/components/GridView.css
View File

@ -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;

1
app/client/components/ViewLayout.css
View File

@ -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 */

15
app/client/ui2018/cssVars.ts
View File

@ -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'),

7
app/common/ThemePrefs-ti.ts
View File

@ -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",

7
app/common/ThemePrefs.ts
View File

@ -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;

7
app/common/themes/GristDark.ts
View File

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

9
app/common/themes/GristLight.ts
View File

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