Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2026-03-02 04:09:24 +00:00
Code Issues Projects Releases Wiki Activity

(core) Improve dark mode

Browse Source 
Summary:
Enhances dark mode support for the formula editor, and adds support to
the color select popup. Also fixes some bugs with dark mode.

Test Plan: Tested manually.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3847
This commit is contained in:
George Gevoian
2023-04-11 01:00:28 -04:00
parent 9d0e6694fc
commit 8a0bb4d4fe
27 changed files with 537 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/common/LoginSessionAPI.ts
View File

@@ -1,3 +1,5 @@
import {UserPrefs} from 'app/common/Prefs';
// User profile info for the user. When using Cognito, it is fetched during login.
export interface UserProfile {
email: string;
@@ -16,6 +18,7 @@ export interface FullUser extends UserProfile {
ref?: string|null; // Not filled for anonymous users.
allowGoogleLogin?: boolean; // when present, specifies whether logging in via Google is possible.
isSupport?: boolean; // set if user is a special support user.
prefs?: UserPrefs;
}
export interface LoginSessionAPI {

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

@@ -93,6 +93,7 @@ export const ThemeColors = t.iface([], {
"popup-shadow-inner": "string",
"popup-shadow-outer": "string",
"popup-close-button-fg": "string",
"prompt-fg": "string",
"progress-bar-fg": "string",
"progress-bar-error-fg": "string",
"progress-bar-bg": "string",
@@ -167,6 +168,8 @@ export const ThemeColors = t.iface([], {
"filter-bar-button-saved-fg": "string",
"filter-bar-button-saved-bg": "string",
"filter-bar-button-saved-hover-bg": "string",
"icon-disabled": "string",
"icon-error": "string",
"icon-button-fg": "string",
"icon-button-primary-bg": "string",
"icon-button-primary-hover-bg": "string",
@@ -287,6 +290,8 @@ export const ThemeColors = t.iface([], {
"code-view-params": "string",
"code-view-string": "string",
"code-view-number": "string",
"code-view-builtin": "string",
"code-view-literal": "string",
"importer-table-info-border": "string",
"importer-preview-border": "string",
"importer-skipped-table-overlay": "string",
@@ -319,6 +324,10 @@ export const ThemeColors = t.iface([], {
"access-rules-column-item-icon-fg": "string",
"access-rules-column-item-icon-hover-fg": "string",
"access-rules-column-item-icon-hover-bg": "string",
"access-rules-formula-editor-bg": "string",
"access-rules-formula-editor-border-hover": "string",
"access-rules-formula-editor-bg-disabled": "string",
"access-rules-formula-editor-focus": "string",
"cell-fg": "string",
"cell-bg": "string",
"cell-zebra-bg": "string",
@@ -348,6 +357,35 @@ export const ThemeColors = t.iface([], {
"tutorials-popup-border": "string",
"tutorials-popup-header-fg": "string",
"tutorials-popup-box-bg": "string",
"ace-autocomplete-primary-fg": "string",
"ace-autocomplete-secondary-fg": "string",
"ace-autocomplete-highlighted-fg": "string",
"ace-autocomplete-bg": "string",
"ace-autocomplete-border": "string",
"ace-autocomplete-link": "string",
"ace-autocomplete-link-highlighted": "string",
"ace-autocomplete-active-line-bg": "string",
"ace-autocomplete-line-border-hover": "string",
"ace-autocomplete-line-bg-hover": "string",
"color-select-fg": "string",
"color-select-bg": "string",
"color-select-shadow": "string",
"color-select-font-options-border": "string",
"color-select-font-option-fg": "string",
"color-select-font-option-bg": "string",
"color-select-font-option-bg-hover": "string",
"color-select-font-option-fg-selected": "string",
"color-select-font-option-bg-selected": "string",
"color-select-color-square-border": "string",
"color-select-color-square-border-empty": "string",
"color-select-input-fg": "string",
"color-select-input-bg": "string",
"color-select-input-border": "string",
"highlighted-code-block-bg": "string",
"highlighted-code-block-bg-disabled": "string",
"highlighted-code-fg": "string",
"highlighted-code-border": "string",
"highlighted-code-bg-disabled": "string",
});
const exportedTypeSuite: t.ITypeSuite = {

48
app/common/ThemePrefs.ts
View File

@@ -110,6 +110,9 @@ export interface ThemeColors {
'popup-shadow-outer': string;
'popup-close-button-fg': string;
/* Prompts */
'prompt-fg': string;
/* Progress Bars */
'progress-bar-fg': string;
'progress-bar-error-fg': string;
@@ -216,6 +219,10 @@ export interface ThemeColors {
'filter-bar-button-saved-bg': string;
'filter-bar-button-saved-hover-bg': string;
/* Icons */
'icon-disabled': string;
'icon-error': string;
/* Icon Buttons */
'icon-button-fg': string;
'icon-button-primary-bg': string;
@@ -373,6 +380,8 @@ export interface ThemeColors {
'code-view-params': string;
'code-view-string': string;
'code-view-number': string;
'code-view-builtin': string;
'code-view-literal': string;
/* Importer */
'importer-table-info-border': string;
@@ -415,6 +424,10 @@ export interface ThemeColors {
'access-rules-column-item-icon-fg': string;
'access-rules-column-item-icon-hover-fg': string;
'access-rules-column-item-icon-hover-bg': string;
'access-rules-formula-editor-bg': string;
'access-rules-formula-editor-border-hover': string;
'access-rules-formula-editor-bg-disabled': string;
'access-rules-formula-editor-focus': string;
/* Cells */
'cell-fg': string;
@@ -456,6 +469,41 @@ export interface ThemeColors {
'tutorials-popup-border': string;
'tutorials-popup-header-fg': string;
'tutorials-popup-box-bg': string;
/* Ace Autocomplete */
'ace-autocomplete-primary-fg': string;
'ace-autocomplete-secondary-fg': string;
'ace-autocomplete-highlighted-fg': string;
'ace-autocomplete-bg': string;
'ace-autocomplete-border': string;
'ace-autocomplete-link': string;
'ace-autocomplete-link-highlighted': string;
'ace-autocomplete-active-line-bg': string;
'ace-autocomplete-line-border-hover': string;
'ace-autocomplete-line-bg-hover': string;
/* Color Select */
'color-select-fg': string;
'color-select-bg': string;
'color-select-shadow': string;
'color-select-font-options-border': string;
'color-select-font-option-fg': string;
'color-select-font-option-bg': string;
'color-select-font-option-bg-hover': string;
'color-select-font-option-fg-selected': string;
'color-select-font-option-bg-selected': string;
'color-select-color-square-border': string;
'color-select-color-square-border-empty': string;
'color-select-input-fg': string;
'color-select-input-bg': string;
'color-select-input-border': string;
/* Highlighted Code */
'highlighted-code-block-bg': string;
'highlighted-code-block-bg-disabled': string;
'highlighted-code-fg': string;
'highlighted-code-border': string;
'highlighted-code-bg-disabled': string;
}
export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;

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

@@ -89,6 +89,9 @@ export const GristDark: ThemeColors = {
'popup-shadow-outer': '#000000',
'popup-close-button-fg': '#A4A4A4',
/* Prompts */
'prompt-fg': '#A4A4A4',
/* Progress Bars */
'progress-bar-fg': '#1DA270',
'progress-bar-error-fg': '#FF6666',
@@ -195,6 +198,10 @@ export const GristDark: ThemeColors = {
'filter-bar-button-saved-bg': '#555563',
'filter-bar-button-saved-hover-bg': '#69697D',
/* Icons */
'icon-disabled': '#A4A4A4',
'icon-error': '#FFA500',
/* Icon Buttons */
'icon-button-fg': '#FFFFFF',
'icon-button-primary-bg': '#1DA270',
@@ -352,6 +359,8 @@ export const GristDark: ThemeColors = {
'code-view-params': '#D2D2D2',
'code-view-string': '#ED7373',
'code-view-number': '#ED7373',
'code-view-builtin': '#BFE6D8',
'code-view-literal': '#9ED682',
/* Importer */
'importer-table-info-border': '#69697D',
@@ -394,6 +403,10 @@ export const GristDark: ThemeColors = {
'access-rules-column-item-icon-fg': '#A4A4A4',
'access-rules-column-item-icon-hover-fg': '#EFEFEF',
'access-rules-column-item-icon-hover-bg': '#A4A4A4',
'access-rules-formula-editor-bg': '#32323F',
'access-rules-formula-editor-border-hover': '#69697D',
'access-rules-formula-editor-bg-disabled': '#57575F',
'access-rules-formula-editor-focus': '#1DA270',
/* Cells */
'cell-fg': '#FFFFFF',
@@ -435,4 +448,39 @@ export const GristDark: ThemeColors = {
'tutorials-popup-border': '#69697D',
'tutorials-popup-header-fg': '#FFFFFF',
'tutorials-popup-box-bg': '#57575F',
/* Ace Autocomplete */
'ace-autocomplete-primary-fg': '#EFEFEF',
'ace-autocomplete-secondary-fg': '#A4A4A4',
'ace-autocomplete-highlighted-fg': '#FFFFFF',
'ace-autocomplete-bg': '#32323F',
'ace-autocomplete-border': '#69697D',
'ace-autocomplete-link': '#28BE86',
'ace-autocomplete-link-highlighted': '#45D48B',
'ace-autocomplete-active-line-bg': '#555563',
'ace-autocomplete-line-border-hover': 'rgba(111,111,117,0.3)',
'ace-autocomplete-line-bg-hover': 'rgba(111,111,117,0.3)',
/* Color Select */
'color-select-fg': '#EFEFEF',
'color-select-bg': '#32323F',
'color-select-shadow': '#000000',
'color-select-font-options-border': '#69697D',
'color-select-font-option-fg': '#EFEFEF',
'color-select-font-option-bg': '#32323F',
'color-select-font-option-bg-hover': '#262633',
'color-select-font-option-fg-selected': '#EFEFEF',
'color-select-font-option-bg-selected': '#555563',
'color-select-color-square-border': '#A4A4A4',
'color-select-color-square-border-empty': '#EFEFEF',
'color-select-input-fg': '#EFEFEF',
'color-select-input-bg': '#32323F',
'color-select-input-border': '#69697D',
/* Highlighted Code */
'highlighted-code-block-bg': '#262633',
'highlighted-code-block-bg-disabled': '#555563',
'highlighted-code-fg': '#A4A4A4',
'highlighted-code-border': '#69697D',
'highlighted-code-bg-disabled': '#555563',
};

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

@@ -89,6 +89,9 @@ export const GristLight: ThemeColors = {
'popup-shadow-outer': 'rgba(76, 86, 103, 0.24)',
'popup-close-button-fg': '#929299',
/* Prompts */
'prompt-fg': '#606060',
/* Progress Bars */
'progress-bar-fg': '#16B378',
'progress-bar-error-fg': '#D0021B',
@@ -195,6 +198,10 @@ export const GristLight: ThemeColors = {
'filter-bar-button-saved-bg': '#929299',
'filter-bar-button-saved-hover-bg': '#D9D9D9',
/* Icons */
'icon-disabled': '#929299',
'icon-error': '#D0021B',
/* Icon Buttons */
'icon-button-fg': '#FFFFFF',
'icon-button-primary-bg': '#16B378',
@@ -352,6 +359,8 @@ export const GristLight: ThemeColors = {
'code-view-params': '#444',
'code-view-string': '#880000',
'code-view-number': '#880000',
'code-view-builtin': '#397300',
'code-view-literal': '#78A960',
/* Importer */
'importer-table-info-border': '#D9D9D9',
@@ -394,6 +403,10 @@ export const GristLight: ThemeColors = {
'access-rules-column-item-icon-fg': '#929299',
'access-rules-column-item-icon-hover-fg': '#FFFFFF',
'access-rules-column-item-icon-hover-bg': '#929299',
'access-rules-formula-editor-bg': 'white',
'access-rules-formula-editor-border-hover': '#D9D9D9',
'access-rules-formula-editor-bg-disabled': '#E8E8E8',
'access-rules-formula-editor-focus': '#16B378',
/* Cells */
'cell-fg': 'black',
@@ -435,4 +448,39 @@ export const GristLight: ThemeColors = {
'tutorials-popup-border': '#D9D9D9',
'tutorials-popup-header-fg': '#FFFFFF',
'tutorials-popup-box-bg': '#F5F5F5',
/* Ace Autocomplete */
'ace-autocomplete-primary-fg': '#444',
'ace-autocomplete-secondary-fg': '#8F8F8F',
'ace-autocomplete-highlighted-fg': '#000',
'ace-autocomplete-bg': '#FBFBFB',
'ace-autocomplete-border': 'lightgray',
'ace-autocomplete-link': '#16B378',
'ace-autocomplete-link-highlighted': '#009058',
'ace-autocomplete-active-line-bg': '#CAD6FA',
'ace-autocomplete-line-border-hover': '#ABBFFE',
'ace-autocomplete-line-bg-hover': 'rgba(233,233,253,0.4)',
/* Color Select */
'color-select-fg': '#262633',
'color-select-bg': 'white',
'color-select-shadow': 'rgba(38,38,51,0.6)',
'color-select-font-options-border': '#D9D9D9',
'color-select-font-option-fg': '#262633',
'color-select-font-option-bg': '#FFFFFF',
'color-select-font-option-bg-hover': '#F7F7F7',
'color-select-font-option-fg-selected': '#FFFFFF',
'color-select-font-option-bg-selected': '#262633',
'color-select-color-square-border': '#D9D9D9',
'color-select-color-square-border-empty': '#262633',
'color-select-input-fg': '#929299',
'color-select-input-bg': 'white',
'color-select-input-border': '#D9D9D9',
/* Highlighted Code */
'highlighted-code-block-bg': '#FFFFFF',
'highlighted-code-block-bg-disabled': '#E8E8E8',
'highlighted-code-fg': '#929299',
'highlighted-code-border': '#D9D9D9',
'highlighted-code-bg-disabled': '#E8E8E8',
};