(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
This commit is contained in:
George Gevoian
2023-09-21 12:57:58 -04:00
parent d1826987bb
commit 273b976cab
87 changed files with 979 additions and 651 deletions

View File

@@ -77,8 +77,6 @@ export const ThemeColors = t.iface([], {
"tooltip-close-button-fg": "string",
"tooltip-close-button-hover-fg": "string",
"tooltip-close-button-hover-bg": "string",
"tooltip-popup-header-fg": "string",
"tooltip-popup-header-bg": "string",
"modal-bg": "string",
"modal-backdrop": "string",
"modal-border": "string",
@@ -102,6 +100,7 @@ export const ThemeColors = t.iface([], {
"hover": "string",
"hover-light": "string",
"cell-editor-fg": "string",
"cell-editor-placeholder-fg": "string",
"cell-editor-bg": "string",
"cursor": "string",
"cursor-inactive": "string",
@@ -111,7 +110,6 @@ export const ThemeColors = t.iface([], {
"table-header-bg": "string",
"table-header-selected-bg": "string",
"table-header-border": "string",
"table-header-border-dark": "string",
"table-body-bg": "string",
"table-body-border": "string",
"table-add-new-bg": "string",
@@ -119,6 +117,7 @@ export const ThemeColors = t.iface([], {
"table-frozen-columns-border": "string",
"table-drag-drop-indicator": "string",
"table-drag-drop-shadow": "string",
"table-cell-summary-bg": "string",
"card-compact-widget-bg": "string",
"card-compact-record-bg": "string",
"card-blocks-bg": "string",
@@ -153,13 +152,13 @@ export const ThemeColors = t.iface([], {
"control-primary-fg": "string",
"control-primary-bg": "string",
"control-secondary-fg": "string",
"control-secondary-disabled-fg": "string",
"control-hover-fg": "string",
"control-primary-hover-bg": "string",
"control-secondary-hover-fg": "string",
"control-secondary-hover-bg": "string",
"control-disabled-fg": "string",
"control-disabled-bg": "string",
"control-primary-disabled": "string",
"control-border": "string",
"checkbox-bg": "string",
"checkbox-disabled-bg": "string",
@@ -206,7 +205,6 @@ export const ThemeColors = t.iface([], {
"right-panel-disabled-overlay": "string",
"right-panel-toggle-button-enabled-fg": "string",
"right-panel-toggle-button-enabled-bg": "string",
"right-panel-toggle-button-enabled-hover-fg": "string",
"right-panel-toggle-button-disabled-fg": "string",
"right-panel-toggle-button-disabled-bg": "string",
"right-panel-field-settings-bg": "string",
@@ -218,6 +216,9 @@ export const ThemeColors = t.iface([], {
"document-history-snapshot-border": "string",
"document-history-activity-text": "string",
"document-history-activity-text-light": "string",
"document-history-table-header-fg": "string",
"document-history-table-border": "string",
"document-history-table-border-light": "string",
"accent-icon": "string",
"accent-border": "string",
"accent-text": "string",
@@ -232,12 +233,19 @@ export const ThemeColors = t.iface([], {
"input-focus": "string",
"input-readonly-bg": "string",
"input-readonly-border": "string",
"choice-token-fg": "string",
"choice-token-blank-fg": "string",
"choice-token-bg": "string",
"choice-token-selected-bg": "string",
"choice-token-selected-border": "string",
"choice-token-invalid-fg": "string",
"choice-token-invalid-bg": "string",
"choice-token-invalid-border": "string",
"choice-entry-bg": "string",
"choice-entry-border": "string",
"choice-entry-border-hover": "string",
"select-button-fg": "string",
"select-button-placeholder-fg": "string",
"select-button-disabled-fg": "string",
"select-button-bg": "string",
"select-button-border": "string",
"select-button-border-invalid": "string",
@@ -253,12 +261,12 @@ export const ThemeColors = t.iface([], {
"menu-item-disabled-fg": "string",
"menu-item-icon-fg": "string",
"menu-item-icon-selected-fg": "string",
"menu-item-link-fg": "string",
"menu-item-link-selected-fg": "string",
"menu-item-link-selected-bg": "string",
"autocomplete-match-text": "string",
"autocomplete-selected-match-text": "string",
"autocomplete-item-selected-bg": "string",
"autocomplete-add-new-circle-fg": "string",
"autocomplete-add-new-circle-bg": "string",
"autocomplete-add-new-circle-selected-bg": "string",
"search-border": "string",
"search-prev-next-button-fg": "string",
"search-prev-next-button-bg": "string",
@@ -318,6 +326,7 @@ export const ThemeColors = t.iface([], {
"button-group-fg": "string",
"button-group-light-fg": "string",
"button-group-bg": "string",
"button-group-bg-hover": "string",
"button-group-icon": "string",
"button-group-border": "string",
"button-group-border-hover": "string",
@@ -328,6 +337,7 @@ export const ThemeColors = t.iface([], {
"access-rules-table-header-fg": "string",
"access-rules-table-header-bg": "string",
"access-rules-table-body-fg": "string",
"access-rules-table-body-light-fg": "string",
"access-rules-table-border": "string",
"access-rules-column-list-border": "string",
"access-rules-column-item-fg": "string",
@@ -383,7 +393,6 @@ export const ThemeColors = t.iface([], {
"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",
@@ -400,9 +409,30 @@ export const ThemeColors = t.iface([], {
"login-page-bg": "string",
"login-page-backdrop": "string",
"login-page-line": "string",
"login-page-google-button-fg": "string",
"login-page-google-button-bg": "string",
"login-page-google-button-bg-hover": "string",
"login-page-google-button-border": "string",
"formula-assistant-header-bg": "string",
"formula-assistant-border": "string",
"formula-assistant-preformatted-text-bg": "string",
"attachments-editor-button-fg": "string",
"attachments-editor-button-hover-fg": "string",
"attachments-editor-button-bg": "string",
"attachments-editor-button-hover-bg": "string",
"attachments-editor-button-border": "string",
"attachments-editor-button-icon": "string",
"attachments-editor-border": "string",
"attachments-cell-icon-fg": "string",
"attachments-cell-icon-bg": "string",
"attachments-cell-icon-hover-bg": "string",
"switch-slider-fg": "string",
"switch-circle-fg": "string",
"announcement-popup-fg": "string",
"announcement-popup-bg": "string",
"scroll-shadow": "string",
"toggle-checkbox-fg": "string",
"numeric-spinner-fg": "string",
});
const exportedTypeSuite: t.ITypeSuite = {

View File

@@ -89,8 +89,6 @@ export interface ThemeColors {
'tooltip-close-button-fg': string;
'tooltip-close-button-hover-fg': string;
'tooltip-close-button-hover-bg': string;
'tooltip-popup-header-fg': string;
'tooltip-popup-header-bg': string;
/* Modals */
'modal-bg': string;
@@ -128,6 +126,7 @@ export interface ThemeColors {
/* Cell Editor */
'cell-editor-fg': string;
'cell-editor-placeholder-fg': string;
'cell-editor-bg': string;
/* Cursor */
@@ -141,7 +140,6 @@ export interface ThemeColors {
'table-header-bg': string;
'table-header-selected-bg': string;
'table-header-border': string;
'table-header-border-dark': string;
'table-body-bg': string;
'table-body-border': string;
'table-add-new-bg': string;
@@ -149,6 +147,7 @@ export interface ThemeColors {
'table-frozen-columns-border': string;
'table-drag-drop-indicator': string;
'table-drag-drop-shadow': string;
'table-cell-summary-bg': string;
/* Cards */
'card-compact-widget-bg': string;
@@ -197,13 +196,13 @@ export interface ThemeColors {
'control-primary-fg': string;
'control-primary-bg': string;
'control-secondary-fg': string;
'control-secondary-disabled-fg': string;
'control-hover-fg': string;
'control-primary-hover-bg': string;
'control-secondary-hover-fg': string;
'control-secondary-hover-bg': string;
'control-disabled-fg': string;
'control-disabled-bg': string;
'control-primary-disabled': string;
'control-border': string;
/* Checkboxes */
@@ -264,7 +263,6 @@ export interface ThemeColors {
'right-panel-disabled-overlay': string;
'right-panel-toggle-button-enabled-fg': string;
'right-panel-toggle-button-enabled-bg': string;
'right-panel-toggle-button-enabled-hover-fg': string;
'right-panel-toggle-button-disabled-fg': string;
'right-panel-toggle-button-disabled-bg': string;
'right-panel-field-settings-bg': string;
@@ -278,6 +276,9 @@ export interface ThemeColors {
'document-history-snapshot-border': string;
'document-history-activity-text': string;
'document-history-activity-text-light': string;
'document-history-table-header-fg': string;
'document-history-table-border': string;
'document-history-table-border-light': string;
/* Accents */
'accent-icon': string;
@@ -297,6 +298,16 @@ export interface ThemeColors {
'input-readonly-bg': string;
'input-readonly-border': string;
/* Choice Tokens */
'choice-token-fg': string;
'choice-token-blank-fg': string;
'choice-token-bg': string;
'choice-token-selected-bg': string;
'choice-token-selected-border': string;
'choice-token-invalid-fg': string;
'choice-token-invalid-bg': string;
'choice-token-invalid-border': string;
/* Choice Entry */
'choice-entry-bg': string;
'choice-entry-border': string;
@@ -305,7 +316,6 @@ export interface ThemeColors {
/* Select Buttons */
'select-button-fg': string;
'select-button-placeholder-fg': string;
'select-button-disabled-fg': string;
'select-button-bg': string;
'select-button-border': string;
'select-button-border-invalid': string;
@@ -325,14 +335,14 @@ export interface ThemeColors {
'menu-item-disabled-fg': string;
'menu-item-icon-fg': string;
'menu-item-icon-selected-fg': string;
'menu-item-link-fg': string;
'menu-item-link-selected-fg': string;
'menu-item-link-selected-bg': string;
/* Autocomplete */
'autocomplete-match-text': string;
'autocomplete-selected-match-text': string;
'autocomplete-item-selected-bg': string;
'autocomplete-add-new-circle-fg': string;
'autocomplete-add-new-circle-bg': string;
'autocomplete-add-new-circle-selected-bg': string;
/* Search */
'search-border': string;
@@ -416,6 +426,7 @@ export interface ThemeColors {
'button-group-fg': string;
'button-group-light-fg': string;
'button-group-bg': string;
'button-group-bg-hover': string;
'button-group-icon': string;
'button-group-border': string;
'button-group-border-hover': string;
@@ -428,6 +439,7 @@ export interface ThemeColors {
'access-rules-table-header-fg': string;
'access-rules-table-header-bg': string;
'access-rules-table-body-fg': string;
'access-rules-table-body-light-fg': string;
'access-rules-table-border': string;
'access-rules-column-list-border': string;
'access-rules-column-item-fg': string;
@@ -497,7 +509,6 @@ export interface ThemeColors {
'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;
@@ -518,11 +529,44 @@ export interface ThemeColors {
'login-page-bg': string;
'login-page-backdrop': string;
'login-page-line': string;
'login-page-google-button-fg': string;
'login-page-google-button-bg': string;
'login-page-google-button-bg-hover': string;
'login-page-google-button-border': string;
/* Formula Assistant */
'formula-assistant-header-bg': string;
'formula-assistant-border': string;
'formula-assistant-preformatted-text-bg': string;
/* Attachments */
'attachments-editor-button-fg': string;
'attachments-editor-button-hover-fg': string;
'attachments-editor-button-bg': string;
'attachments-editor-button-hover-bg': string;
'attachments-editor-button-border': string;
'attachments-editor-button-icon': string;
'attachments-editor-border': string;
'attachments-cell-icon-fg': string;
'attachments-cell-icon-bg': string;
'attachments-cell-icon-hover-bg': string;
/* Switches */
'switch-slider-fg': string;
'switch-circle-fg': string;
/* Announcement Popups */
'announcement-popup-fg': string;
'announcement-popup-bg': string;
/* Scroll Shadow */
'scroll-shadow': string;
/* Toggle Checkboxes */
'toggle-checkbox-fg': string;
/* Numeric Spinners */
'numeric-spinner-fg': string;
}
export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT<ThemePrefs>;
@@ -532,7 +576,7 @@ export const ThemeNameChecker = createCheckers(ThemePrefsTI).ThemeName as Checke
export function getDefaultThemePrefs(): ThemePrefs {
return {
appearance: 'light',
syncWithOS: false,
syncWithOS: true,
colors: {
light: 'GristLight',
dark: 'GristDark',

View File

@@ -3,11 +3,11 @@ import {ThemeColors} from 'app/common/ThemePrefs';
export const GristDark: ThemeColors = {
/* Text */
'text': '#EFEFEF',
'text-light': '#A4A4A4',
'text-light': '#A4A4B1',
'text-dark': '#FFFFFF',
'text-error': '#FF6666',
'text-danger': '#FFA500',
'text-disabled': '#A4A4A4',
'text-disabled': '#A4A4B1',
/* Page */
'page-bg': '#262633',
@@ -19,30 +19,30 @@ export const GristDark: ThemeColors = {
'page-panels-right-panel-bg': '#262633',
'page-panels-top-header-bg': '#32323F',
'page-panels-bottom-footer-bg': '#32323F',
'page-panels-border': '#57575F',
'page-panels-border-resizing': '#1DA270',
'page-panels-side-panel-opener-fg': '#A4A4A4',
'page-panels-border': '#60606D',
'page-panels-border-resizing': '#17B378',
'page-panels-side-panel-opener-fg': '#A4A4B1',
'page-panels-side-panel-opener-active-fg': '#FFFFFF',
'page-panels-side-panel-opener-active-bg': '#1DA270',
'page-panels-side-panel-opener-active-bg': '#17B378',
/* Add New */
'add-new-circle-fg': '#FFFFFF',
'add-new-circle-bg': '#157A54',
'add-new-circle-hover-bg': '#0A5438',
'add-new-circle-bg': '#0A5438',
'add-new-circle-hover-bg': '#157A54',
'add-new-circle-small-fg': '#FFFFFF',
'add-new-circle-small-bg': '#1DA270',
'add-new-circle-small-hover-bg': '#157A54',
'add-new-circle-small-bg': '#157A54',
'add-new-circle-small-hover-bg': '#1DA270',
/* Top Bar */
'top-bar-button-primary-fg': '#1DA270',
'top-bar-button-secondary-fg': '#A4A4A4',
'top-bar-button-disabled-fg': '#69697D',
'top-bar-button-primary-fg': '#17B378',
'top-bar-button-secondary-fg': '#A4A4B1',
'top-bar-button-disabled-fg': '#70707D',
'top-bar-button-error-fg': 'FF6666',
/* Notifications */
'notifications-panel-header-bg': '#262633',
'notifications-panel-body-bg': '#32323F',
'notifications-panel-border': '#69697D',
'notifications-panel-border': '#70707D',
/* Toasts */
'toast-text': '#FFFFFF',
@@ -64,86 +64,85 @@ export const GristDark: ThemeColors = {
/* Tooltips */
'tooltip-fg': 'white',
'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
'tooltip-icon': '#A4A4A4',
'tooltip-icon': '#A4A4B1',
'tooltip-close-button-fg': 'white',
'tooltip-close-button-hover-fg': 'black',
'tooltip-close-button-hover-bg': 'white',
'tooltip-popup-header-fg': '#EFEFEF',
'tooltip-popup-header-bg': '#1DA270',
/* Modals */
'modal-bg': '#32323F',
'modal-backdrop': 'rgba(0,0,0,0.6)',
'modal-border': '#57575F',
'modal-border-dark': '#69697D',
'modal-border-hover': '#A4A4A4',
'modal-border': '#60606D',
'modal-border-dark': '#70707D',
'modal-border-hover': '#A4A4B1',
'modal-shadow-inner': '#000000',
'modal-shadow-outer': '#000000',
'modal-close-button-fg': '#A4A4A4',
'modal-backdrop-close-button-fg': '#1DA270',
'modal-backdrop-close-button-hover-fg': '#157A54',
'modal-close-button-fg': '#A4A4B1',
'modal-backdrop-close-button-fg': '#17B378',
'modal-backdrop-close-button-hover-fg': '#13D78D',
/* Popups */
'popup-bg': '#32323F',
'popup-shadow-inner': '#000000',
'popup-shadow-outer': '#000000',
'popup-close-button-fg': '#A4A4A4',
'popup-close-button-fg': '#A4A4B1',
/* Prompts */
'prompt-fg': '#A4A4A4',
'prompt-fg': '#A4A4B1',
/* Progress Bars */
'progress-bar-fg': '#1DA270',
'progress-bar-fg': '#17B378',
'progress-bar-error-fg': '#FF6666',
'progress-bar-bg': '#69697D',
'progress-bar-bg': '#70707D',
/* Links */
'link': '#1DA270',
'link-hover': '#1DA270',
'link': '#17B378',
'link-hover': '#17B378',
/* Hover */
'hover': 'rgba(111,111,117,0.6)',
'hover-light': 'rgba(111,111,117,0.4)',
'hover': 'rgba(111,111,125,0.6)',
'hover-light': 'rgba(111,111,125,0.4)',
/* Cell Editor */
'cell-editor-fg': '#FFFFFF',
'cell-editor-placeholder-fg': '#A4A4B1',
'cell-editor-bg': '#32323F',
/* Cursor */
'cursor': '#1DA270',
'cursor-inactive': 'rgba(29,162,112,0.5)',
'cursor-readonly': '#A4A4A4',
'cursor-readonly': '#A4A4B1',
/* Tables */
'table-header-fg': '#EFEFEF',
'table-header-selected-fg': '#EFEFEF',
'table-header-bg': '#262633',
'table-header-selected-bg': '#414358',
'table-header-border': '#57575F',
'table-header-border-dark': '#69697D',
'table-header-border': '#70707D',
'table-body-bg': '#32323F',
'table-body-border': '#69697D',
'table-body-border': '#60606D',
'table-add-new-bg': '#4A4A5D',
'table-scroll-shadow': '#000000',
'table-frozen-columns-border': '#A4A4A4',
'table-drag-drop-indicator': '#A4A4A4',
'table-drag-drop-shadow': 'rgba(111,111,117,0.6)',
'table-frozen-columns-border': '#A4A4B1',
'table-drag-drop-indicator': '#A4A4B1',
'table-drag-drop-shadow': 'rgba(111,111,125,0.6)',
'table-cell-summary-bg': 'rgba(111,111,125,0.6)',
/* Cards */
'card-compact-widget-bg': '#262633',
'card-compact-record-bg': '#32323F',
'card-blocks-bg': '#404150',
'card-form-label': '#A4A4A4',
'card-compact-label': '#A4A4A4',
'card-blocks-label': '#A4A4A4',
'card-form-border': '#69697D',
'card-compact-border': '#69697D',
'card-form-label': '#A4A4B1',
'card-compact-label': '#A4A4B1',
'card-blocks-label': '#A4A4B1',
'card-form-border': '#70707D',
'card-compact-border': '#70707D',
'card-editing-layout-bg': 'rgba(85, 85, 99, 0.2)',
'card-editing-layout-border': '#69697D',
'card-editing-layout-border': '#70707D',
/* Card Lists */
'card-list-form-border': '#57575F',
'card-list-blocks-border': '#57575F',
'card-list-form-border': '#60606D',
'card-list-blocks-border': '#60606D',
/* Selection */
'selection': 'rgba(22,179,120,0.15)',
@@ -156,203 +155,214 @@ export const GristDark: ThemeColors = {
/* Widgets */
'widget-bg': '#32323F',
'widget-border': '#57575F',
'widget-active-border': '#1DA270',
'widget-border': '#70707D',
'widget-active-border': '#157A54',
'widget-inactive-stripes-light': '#262633',
'widget-inactive-stripes-dark': '#32323F',
/* Pinned Docs */
'pinned-doc-footer-bg': '#32323F',
'pinned-doc-border': '#57575F',
'pinned-doc-border-hover': '#A4A4A4',
'pinned-doc-editor-bg': '#57575F',
'pinned-doc-border': '#60606D',
'pinned-doc-border-hover': '#A4A4B1',
'pinned-doc-editor-bg': '#60606D',
/* Raw Data */
'raw-data-table-border': '#57575F',
'raw-data-table-border-hover': '#A4A4A4',
'raw-data-table-border': '#60606D',
'raw-data-table-border-hover': '#A4A4B1',
/* Controls */
'control-fg': '#1DA270',
'control-fg': '#17B378',
'control-primary-fg': '#FFFFFF',
'control-primary-bg': '#1DA270',
'control-secondary-fg': '#A4A4A4',
'control-hover-fg': '#157A54',
'control-primary-hover-bg': '#157A54',
'control-primary-bg': '#157A54',
'control-secondary-fg': '#A4A4B1',
'control-secondary-disabled-fg': '#60606D',
'control-hover-fg': '#13D78D',
'control-primary-hover-bg': '#1DA270',
'control-secondary-hover-fg': '#EFEFEF',
'control-secondary-hover-bg': '#57575F',
'control-disabled-fg': '#A4A4A4',
'control-disabled-bg': '#69697D',
'control-primary-disabled': '#5F8C7B',
'control-border': '1px solid #1DA270',
'control-secondary-hover-bg': '#60606D',
'control-disabled-fg': '#A4A4B1',
'control-disabled-bg': '#70707D',
'control-border': '1px solid #17B378',
/* Checkboxes */
'checkbox-bg': '#32323F',
'checkbox-disabled-bg': '#69697D',
'checkbox-border': '#69697D',
'checkbox-border-hover': '#57575F',
'checkbox-disabled-bg': '#70707D',
'checkbox-border': '#70707D',
'checkbox-border-hover': '#A4A4B1',
/* Move Docs */
'move-docs-selected-fg': '#FFFFFF',
'move-docs-selected-bg': '#1DA270',
'move-docs-disabled-bg': '#69697D',
'move-docs-selected-bg': '#157A54',
'move-docs-disabled-bg': '#70707D',
/* Filter Bar */
'filter-bar-button-saved-fg': '#FFFFFF',
'filter-bar-button-saved-bg': '#555563',
'filter-bar-button-saved-hover-bg': '#69697D',
'filter-bar-button-saved-hover-bg': '#70707D',
/* Icons */
'icon-disabled': '#A4A4A4',
'icon-disabled': '#A4A4B1',
'icon-error': '#FFA500',
/* Icon Buttons */
'icon-button-fg': '#FFFFFF',
'icon-button-primary-bg': '#1DA270',
'icon-button-primary-hover-bg': '#157A54',
'icon-button-secondary-bg': '#69697D',
'icon-button-secondary-hover-bg': '#A4A4A4',
'icon-button-primary-bg': '#17B378',
'icon-button-primary-hover-bg': '#13D78D',
'icon-button-secondary-bg': '#70707D',
'icon-button-secondary-hover-bg': '#A4A4B1',
/* Left Panel */
'left-panel-page-hover-bg': 'rgba(111,111,117,0.25)',
'left-panel-active-page-fg': '#EFEFEF',
'left-panel-active-page-bg': '#555563',
'left-panel-disabled-page-fg': '#69697D',
'left-panel-page-options-fg': '#A4A4A4',
'left-panel-active-page-bg': '#646473',
'left-panel-disabled-page-fg': '#70707D',
'left-panel-page-options-fg': '#A4A4B1',
'left-panel-page-options-hover-fg': '#FFFFFF',
'left-panel-page-options-hover-bg': '#69697D',
'left-panel-page-options-selected-hover-bg': '#A4A4A4',
'left-panel-page-options-hover-bg': '#70707D',
'left-panel-page-options-selected-hover-bg': '#A4A4B1',
'left-panel-page-initials-fg': 'white',
'left-panel-page-initials-bg': '#929299',
'left-panel-page-initials-bg': '#8E8EA0',
'left-panel-page-emoji-fg': 'black',
'left-panel-page-emoji-outline': '#69697D',
'left-panel-page-emoji-outline': '#70707D',
/* Right Panel */
'right-panel-tab-fg': '#EFEFEF',
'right-panel-tab-bg': '#262633',
'right-panel-tab-icon': '#A4A4A4',
'right-panel-tab-icon-hover': '#1DA270',
'right-panel-tab-icon': '#A4A4B1',
'right-panel-tab-icon-hover': '#13D78D',
'right-panel-tab-hover-bg': 'rgba(111,111,117,0.6)',
'right-panel-tab-selected-fg': '#FFFFFF',
'right-panel-tab-selected-bg': '#1DA270',
'right-panel-tab-button-hover-bg': '#157A54',
'right-panel-subtab-fg': '#1DA270',
'right-panel-tab-selected-bg': '#157A54',
'right-panel-tab-button-hover-bg': '#0A5438',
'right-panel-subtab-fg': '#17B378',
'right-panel-subtab-selected-fg': '#EFEFEF',
'right-panel-subtab-selected-underline': '#1DA270',
'right-panel-subtab-hover-fg': '#157A54',
'right-panel-subtab-hover-underline': '#1DA270',
'right-panel-subtab-hover-fg': '#13D78D',
'right-panel-subtab-hover-underline': '#13D78D',
'right-panel-disabled-overlay': '#262633',
'right-panel-toggle-button-enabled-fg': '#FFFFFF',
'right-panel-toggle-button-enabled-bg': '#555563',
'right-panel-toggle-button-enabled-hover-fg': '#D9D9D9',
'right-panel-toggle-button-disabled-fg': '#FFFFFF',
'right-panel-toggle-button-disabled-bg': '#333333',
'right-panel-field-settings-bg': '#414358',
'right-panel-field-settings-button-bg': '#57575F',
'right-panel-toggle-button-enabled-bg': '#646473',
'right-panel-toggle-button-disabled-fg': '#646473',
'right-panel-toggle-button-disabled-bg': '#32323F',
'right-panel-field-settings-bg': '#404150',
'right-panel-field-settings-button-bg': '#646473',
/* Document History */
'document-history-snapshot-fg': '#EFEFEF',
'document-history-snapshot-selected-fg': '#EFEFEF',
'document-history-snapshot-bg': '#32323F',
'document-history-snapshot-selected-bg': '#555563',
'document-history-snapshot-border': '#69697D',
'document-history-snapshot-selected-bg': '#646473',
'document-history-snapshot-border': '#70707D',
'document-history-activity-text': '#EFEFEF',
'document-history-activity-text-light': '#A4A4A4',
'document-history-activity-text-light': '#A4A4B1',
'document-history-table-header-fg': '#EFEFEF',
'document-history-table-border': '#70707D',
'document-history-table-border-light': '#60606D',
/* Accents */
'accent-icon': '#1DA270',
'accent-border': '#1DA270',
'accent-text': '#1DA270',
'accent-icon': '#17B378',
'accent-border': '#157A54',
'accent-text': '#17B378',
/* Inputs */
'input-fg': '#EFEFEF',
'input-bg': '#32323F',
'input-disabled-fg': '#A4A4A4',
'input-disabled-fg': '#A4A4B1',
'input-disabled-bg': '#262633',
'input-placeholder-fg': '#A4A4A4',
'input-border': '#69697D',
'input-valid': '#1DA270',
'input-placeholder-fg': '#A4A4B1',
'input-border': '#70707D',
'input-valid': '#17B378',
'input-invalid': '#FF6666',
'input-focus': '#5E9ED6',
'input-readonly-bg': '#262633',
'input-readonly-border': '#69697D',
'input-readonly-border': '#70707D',
/* Choice Tokens */
'choice-token-fg': '#FFFFFF',
'choice-token-blank-fg': '#A4A4B1',
'choice-token-bg': '#70707D',
'choice-token-selected-bg': '#555563',
'choice-token-selected-border': '#17B378',
'choice-token-invalid-fg': '#FFFFFF',
'choice-token-invalid-bg': '#323240',
'choice-token-invalid-border': '#D0021B',
/* Choice Entry */
'choice-entry-bg': '#32323F',
'choice-entry-border': '#69697D',
'choice-entry-border-hover': '#A4A4A4',
'choice-entry-border': '#70707D',
'choice-entry-border-hover': '#A4A4B1',
/* Select Buttons */
'select-button-fg': '#EFEFEF',
'select-button-placeholder-fg': '#A4A4A4',
'select-button-disabled-fg': '#A4A4A4',
'select-button-placeholder-fg': '#A4A4B1',
'select-button-bg': '#32323F',
'select-button-border': '#69697D',
'select-button-border': '#70707D',
'select-button-border-invalid': '#FF6666',
/* Menus */
'menu-text': '#A4A4A4',
'menu-light-text': '#A4A4A4',
'menu-text': '#A4A4B1',
'menu-light-text': '#A4A4B1',
'menu-bg': '#32323F',
'menu-subheader-fg': '#EFEFEF',
'menu-border': '#69697D',
'menu-border': '#70707D',
'menu-shadow': '#000000',
/* Menu Items */
'menu-item-fg': '#FFFFFF',
'menu-item-selected-fg': '#FFFFFF',
'menu-item-selected-bg': '#1DA270',
'menu-item-disabled-fg': '#69697D',
'menu-item-icon-fg': '#A4A4A4',
'menu-item-selected-bg': '#157A54',
'menu-item-disabled-fg': '#70707D',
'menu-item-icon-fg': '#A4A4B1',
'menu-item-icon-selected-fg': '#FFFFFF',
'menu-item-link-fg': '#1DA270',
'menu-item-link-selected-fg': '#157A54',
'menu-item-link-selected-bg': '#484859',
/* Autocomplete */
'autocomplete-match-text': '#1DA270',
'autocomplete-selected-match-text': '#0A5438',
'autocomplete-item-selected-bg': '#69697D',
'autocomplete-match-text': '#17B378',
'autocomplete-selected-match-text': '#13D78D',
'autocomplete-item-selected-bg': '#70707D',
'autocomplete-add-new-circle-fg': '#FFFFFF',
'autocomplete-add-new-circle-bg': '#157A54',
'autocomplete-add-new-circle-selected-bg': '#1DA270',
/* Search */
'search-border': '#69697D',
'search-prev-next-button-fg': '#A4A4A4',
'search-border': '#70707D',
'search-prev-next-button-fg': '#A4A4B1',
'search-prev-next-button-bg': '#24242F',
/* Loading Spinners */
'loader-fg': '#1DA270',
'loader-bg': '#69697D',
'loader-fg': '#17B378',
'loader-bg': '#70707D',
/* Site Switcher */
'site-switcher-active-fg': '#FFFFFF',
'site-switcher-active-bg': '#000000',
/* Doc Menu */
'doc-menu-doc-options-fg': '#69697D',
'doc-menu-doc-options-hover-fg': '#A4A4A4',
'doc-menu-doc-options-hover-bg': '#69697D',
'doc-menu-doc-options-fg': '#70707D',
'doc-menu-doc-options-hover-fg': '#A4A4B1',
'doc-menu-doc-options-hover-bg': '#70707D',
/* Shortcut Keys */
'shortcut-key-fg': '#FFFFFF',
'shortcut-key-primary-fg': '#17B378',
'shortcut-key-secondary-fg': '#A4A4A4',
'shortcut-key-secondary-fg': '#A4A4B1',
'shortcut-key-bg': '#32323F',
'shortcut-key-border': '#A4A4A4',
'shortcut-key-border': '#A4A4B1',
/* Breadcrumbs */
'breadcrumbs-tag-fg': 'white',
'breadcrumbs-tag-bg': '#929299',
'breadcrumbs-tag-fg': '#FFFFFF',
'breadcrumbs-tag-bg': '#70707D',
'breadcrumbs-tag-alert-bg': '#D0021B',
/* Page Widget Picker */
'widget-picker-primary-bg': '#32323F',
'widget-picker-secondary-bg': '#262633',
'widget-picker-item-fg': '#FFFFFF',
'widget-picker-item-selected-bg': 'rgba(111,111,117,0.6)',
'widget-picker-item-disabled-bg': 'rgba(111,111,117,0.6)',
'widget-picker-icon': '#A4A4A4',
'widget-picker-primary-icon': '#1DA270',
'widget-picker-summary-icon': '#1DA270',
'widget-picker-border': 'rgba(111,111,117,0.6)',
'widget-picker-item-selected-bg': 'rgba(111,111,125,0.6)',
'widget-picker-item-disabled-bg': 'rgba(111,111,125,0.6)',
'widget-picker-icon': '#A4A4B1',
'widget-picker-primary-icon': '#17B378',
'widget-picker-summary-icon': '#17B378',
'widget-picker-border': 'rgba(111,111,125,0.6)',
'widget-picker-shadow': '#000000',
/* Code View */
@@ -368,10 +378,10 @@ export const GristDark: ThemeColors = {
'code-view-literal': '#9ED682',
/* Importer */
'importer-table-info-border': '#69697D',
'importer-preview-border': '#69697D',
'importer-skipped-table-overlay': 'rgba(111,111,117,0.6)',
'importer-match-icon': '#69697D',
'importer-table-info-border': '#70707D',
'importer-preview-border': '#70707D',
'importer-skipped-table-overlay': 'rgba(111,111,125,0.6)',
'importer-match-icon': '#70707D',
'importer-outside-bg': '#32323F',
'importer-main-content-bg': '#262633',
'importer-active-file-bg': '#16B378',
@@ -380,11 +390,11 @@ export const GristDark: ThemeColors = {
'importer-inactive-file-fg': '#FFFFFF',
/* Menu Toggles */
'menu-toggle-fg': '#A4A4A4',
'menu-toggle-hover-fg': '#1DA270',
'menu-toggle-active-fg': '#157A54',
'menu-toggle-fg': '#A4A4B1',
'menu-toggle-hover-fg': '#17B378',
'menu-toggle-active-fg': '#13D78D',
'menu-toggle-bg': '#32323F',
'menu-toggle-border': '#A4A4A4',
'menu-toggle-border': '#A4A4B1',
/* Info Button */
'info-button-fg': '#8F8F8F',
@@ -393,31 +403,33 @@ export const GristDark: ThemeColors = {
/* Button Groups */
'button-group-fg': '#EFEFEF',
'button-group-light-fg': '#A4A4A4',
'button-group-bg': 'unset',
'button-group-icon': '#A4A4A4',
'button-group-border': '#69697D',
'button-group-border-hover': '#555563',
'button-group-light-fg': '#A4A4B1',
'button-group-bg': 'transparent',
'button-group-bg-hover': 'rgba(111,111,125,0.25)',
'button-group-icon': '#A4A4B1',
'button-group-border': '#70707D',
'button-group-border-hover': '#646473',
'button-group-selected-fg': '#EFEFEF',
'button-group-light-selected-fg': '#1DA270',
'button-group-selected-bg': '#555563',
'button-group-selected-border': '#555563',
'button-group-light-selected-fg': '#17B378',
'button-group-selected-bg': '#646473',
'button-group-selected-border': '#646473',
/* Access Rules */
'access-rules-table-header-fg': '#EFEFEF',
'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-table-header-bg': '#60606D',
'access-rules-table-body-fg': '#A4A4B1',
'access-rules-table-body-light-fg': '#70707D',
'access-rules-table-border': '#A4A4B1',
'access-rules-column-list-border': '#70707D',
'access-rules-column-item-fg': '#EFEFEF',
'access-rules-column-item-bg': '#57575F',
'access-rules-column-item-icon-fg': '#A4A4A4',
'access-rules-column-item-bg': '#60606D',
'access-rules-column-item-icon-fg': '#A4A4B1',
'access-rules-column-item-icon-hover-fg': '#EFEFEF',
'access-rules-column-item-icon-hover-bg': '#A4A4A4',
'access-rules-column-item-icon-hover-bg': '#A4A4B1',
'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',
'access-rules-formula-editor-border-hover': '#70707D',
'access-rules-formula-editor-bg-disabled': '#60606D',
'access-rules-formula-editor-focus': '#17B378',
/* Cells */
'cell-fg': '#FFFFFF',
@@ -425,81 +437,113 @@ export const GristDark: ThemeColors = {
'cell-zebra-bg': '#262633',
/* Charts */
'chart-fg': '#A4A4A4',
'chart-fg': '#A4A4B1',
'chart-bg': '#32323F',
'chart-legend-bg': '#32323F80',
'chart-x-axis': '#A4A4A4',
'chart-y-axis': '#A4A4A4',
'chart-legend-bg': 'rgba(50,50,63,0.5)',
'chart-x-axis': '#A4A4B1',
'chart-y-axis': '#A4A4B1',
/* Comments */
'comments-popup-header-bg': '#262633',
'comments-popup-body-bg': '#32323F',
'comments-popup-border': '#69697D',
'comments-user-name-fg': '#DFDFDF',
'comments-popup-border': '#70707D',
'comments-user-name-fg': '#EFEFEF',
'comments-panel-topic-bg': '#32323F',
'comments-panel-topic-border': '#555563',
'comments-panel-resolved-topic-bg': '#262634',
'comments-panel-resolved-topic-bg': '#262633',
/* Date Picker */
'date-picker-selected-fg': '#FFFFFF',
'date-picker-selected-bg': '#7F7F7F',
'date-picker-selected-bg-hover': '#8F8F8F',
'date-picker-selected-bg': '#7A7A8D',
'date-picker-selected-bg-hover': '#8D8D9C',
'date-picker-today-fg': '#FFFFFF',
'date-picker-today-bg': '#1DA270',
'date-picker-today-bg-hover': '#157A54',
'date-picker-range-start-end-bg': '#7F7F7F',
'date-picker-range-start-end-bg-hover': '#8F8F8F',
'date-picker-range-bg': '#57575F',
'date-picker-range-bg-hover': '#7F7F7F',
'date-picker-today-bg': '#157A54',
'date-picker-today-bg-hover': '#1DA270',
'date-picker-range-start-end-bg': '#7A7A8D',
'date-picker-range-start-end-bg-hover': '#8D8D9C',
'date-picker-range-bg': '#60606D',
'date-picker-range-bg-hover': '#7A7A8D',
/* Tutorials */
'tutorials-popup-border': '#69697D',
'tutorials-popup-border': '#70707D',
'tutorials-popup-header-fg': '#FFFFFF',
'tutorials-popup-box-bg': '#57575F',
'tutorials-popup-box-bg': '#60606D',
/* Ace */
'ace-editor-bg': '#32323F',
'ace-autocomplete-primary-fg': '#EFEFEF',
'ace-autocomplete-secondary-fg': '#A4A4A4',
'ace-autocomplete-secondary-fg': '#A4A4B1',
'ace-autocomplete-highlighted-fg': '#FFFFFF',
'ace-autocomplete-bg': '#32323F',
'ace-autocomplete-border': '#69697D',
'ace-autocomplete-border': '#70707D',
'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)',
'ace-autocomplete-line-border-hover': 'rgba(111,111,125,0.3)',
'ace-autocomplete-line-bg-hover': 'rgba(111,111,125,0.3)',
/* Color Select */
'color-select-fg': '#EFEFEF',
'color-select-fg': '#A4A4B1',
'color-select-bg': '#32323F',
'color-select-shadow': '#000000',
'color-select-font-options-border': '#69697D',
'color-select-font-options-border': '#555563',
'color-select-font-option-fg': '#EFEFEF',
'color-select-font-option-bg': '#32323F',
'color-select-font-option-bg-hover': '#262633',
'color-select-font-option-bg-hover': 'rgba(111,111,125,0.25)',
'color-select-font-option-fg-selected': '#EFEFEF',
'color-select-font-option-bg-selected': '#555563',
'color-select-color-square-border': '#A4A4A4',
'color-select-font-option-bg-selected': '#646473',
'color-select-color-square-border': '#A4A4B1',
'color-select-color-square-border-empty': '#EFEFEF',
'color-select-input-fg': '#EFEFEF',
'color-select-input-fg': '#A4A4B1',
'color-select-input-bg': '#32323F',
'color-select-input-border': '#69697D',
'color-select-input-border': '#70707D',
/* 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',
'highlighted-code-fg': '#A4A4B1',
'highlighted-code-border': '#70707D',
'highlighted-code-bg-disabled': '#32323F',
/* Login Page */
'login-page-bg': '#32323F',
'login-page-backdrop': '#404150',
'login-page-line': '#57575F',
'login-page-line': '#60606D',
'login-page-google-button-fg': '#FFFFFF',
'login-page-google-button-bg': '#404150',
'login-page-google-button-bg-hover': '#555563',
'login-page-google-button-border': '#70707D',
/* Formula Assistant */
'formula-assistant-header-bg': '#262633',
'formula-assistant-border': '#69697D',
'formula-assistant-border': '#70707D',
'formula-assistant-preformatted-text-bg': '#262633',
/* Attachments */
'attachments-editor-button-fg': '#17B378',
'attachments-editor-button-hover-fg': '#13D78D',
'attachments-editor-button-bg': '#404150',
'attachments-editor-button-hover-bg': '#555563',
'attachments-editor-button-border': '#70707D',
'attachments-editor-button-icon': '#A4A4B1',
'attachments-editor-border': '#A4A4B1',
'attachments-cell-icon-fg': '#A4A4B1',
'attachments-cell-icon-bg': '#555563',
'attachments-cell-icon-hover-bg': '#70707D',
/* Switches */
'switch-slider-fg': '#70707D',
'switch-circle-fg': '#EFEFEF',
/* Announcement Popups */
'announcement-popup-fg': '#FFFFFF',
'announcement-popup-bg': '#404150',
/* Scroll Shadow */
'scroll-shadow': 'rgba(0,0,0,0.25)',
/* Toggle Checkboxes */
'toggle-checkbox-fg': '#A4A4B1',
/* Numeric Spinners */
'numeric-spinner-fg': '#A4A4B1',
};

View File

@@ -68,8 +68,6 @@ export const GristLight: ThemeColors = {
'tooltip-close-button-fg': 'white',
'tooltip-close-button-hover-fg': 'black',
'tooltip-close-button-hover-bg': 'white',
'tooltip-popup-header-fg': 'white',
'tooltip-popup-header-bg': '#16B378',
/* Modals */
'modal-bg': 'white',
@@ -107,6 +105,7 @@ export const GristLight: ThemeColors = {
/* Cell Editor */
'cell-editor-fg': '#262633',
'cell-editor-placeholder-fg': '#929299',
'cell-editor-bg': '#FFFFFF',
/* Cursor */
@@ -115,12 +114,11 @@ export const GristLight: ThemeColors = {
'cursor-readonly': '#929299',
/* Tables */
'table-header-fg': 'unset',
'table-header-selected-fg': 'unset',
'table-header-fg': '#000',
'table-header-selected-fg': '#000',
'table-header-bg': '#F7F7F7',
'table-header-selected-bg': '#E8E8E8',
'table-header-border': 'lightgray',
'table-header-border-dark': '#D9D9D9',
'table-body-bg': 'white',
'table-body-border': '#D9D9D9',
'table-add-new-bg': 'inherit',
@@ -128,6 +126,7 @@ export const GristLight: ThemeColors = {
'table-frozen-columns-border': '#999999',
'table-drag-drop-indicator': 'gray',
'table-drag-drop-shadow': '#F0F0F0',
'table-cell-summary-bg': 'rgba(217,217,217,0.6)',
/* Cards */
'card-compact-widget-bg': 'rgba(217,217,217,0.6)',
@@ -176,13 +175,13 @@ export const GristLight: ThemeColors = {
'control-primary-fg': '#FFFFFF',
'control-primary-bg': '#16B378',
'control-secondary-fg': '#929299',
'control-secondary-disabled-fg': '#D9D9D9',
'control-hover-fg': '#009058',
'control-primary-hover-bg': '#009058',
'control-secondary-hover-fg': '#262633',
'control-secondary-hover-bg': '#D9D9D9',
'control-disabled-fg': '#FFFFFF',
'control-disabled-bg': '#929299',
'control-primary-disabled': '#A2E1C9',
'control-border': '1px solid #11B683',
/* Checkboxes */
@@ -243,7 +242,6 @@ export const GristLight: ThemeColors = {
'right-panel-disabled-overlay': '#F7F7F7',
'right-panel-toggle-button-enabled-fg': '#FFFFFF',
'right-panel-toggle-button-enabled-bg': '#262633',
'right-panel-toggle-button-enabled-hover-fg': '#D9D9D9',
'right-panel-toggle-button-disabled-fg': '#FFFFFF',
'right-panel-toggle-button-disabled-bg': '#E8E8E8',
'right-panel-field-settings-bg': '#E8E8E8',
@@ -255,8 +253,11 @@ export const GristLight: ThemeColors = {
'document-history-snapshot-bg': 'white',
'document-history-snapshot-selected-bg': '#262633',
'document-history-snapshot-border': 'rgba(217,217,217,0.6)',
'document-history-activity-text': '#000000',
'document-history-activity-text-light': '#333333',
'document-history-activity-text': '#262633',
'document-history-activity-text-light': '#929299',
'document-history-table-header-fg': '#000',
'document-history-table-border': 'lightgray',
'document-history-table-border-light': '#D9D9D9',
/* Accents */
'accent-icon': '#16B378',
@@ -276,6 +277,16 @@ export const GristLight: ThemeColors = {
'input-readonly-bg': '#F7F7F7',
'input-readonly-border': '#E8E8E8',
/* Choice Tokens */
'choice-token-fg': '#000000',
'choice-token-blank-fg': '#929299',
'choice-token-bg': '#E8E8E8',
'choice-token-selected-bg': '#D9D9D9',
'choice-token-selected-border': '#16B378',
'choice-token-invalid-fg': '#000000',
'choice-token-invalid-bg': 'white',
'choice-token-invalid-border': '#D0021B',
/* Choice Entry */
'choice-entry-bg': 'white',
'choice-entry-border': '#D9D9D9',
@@ -284,7 +295,6 @@ export const GristLight: ThemeColors = {
/* Select Buttons */
'select-button-fg': '#262633',
'select-button-placeholder-fg': '#929299',
'select-button-disabled-fg': 'grey',
'select-button-bg': 'white',
'select-button-border': '#D9D9D9',
'select-button-border-invalid': '#D0021B',
@@ -293,7 +303,7 @@ export const GristLight: ThemeColors = {
'menu-text': '#929299',
'menu-light-text': '#929299',
'menu-bg': 'white',
'menu-subheader-fg': 'unset',
'menu-subheader-fg': '#262633',
'menu-border': '#E8E8E8',
'menu-shadow': 'rgba(38, 38, 51, 0.6)',
@@ -304,14 +314,14 @@ export const GristLight: ThemeColors = {
'menu-item-disabled-fg': '#D9D9D9',
'menu-item-icon-fg': '#929299',
'menu-item-icon-selected-fg': 'white',
'menu-item-link-fg': '#16B378',
'menu-item-link-selected-fg': '#009058',
'menu-item-link-selected-bg': '#E8E8E8',
/* Autocomplete */
'autocomplete-match-text': '#16B378',
'autocomplete-selected-match-text': '#B1FFE2',
'autocomplete-item-selected-bg': '#E8E8E8',
'autocomplete-add-new-circle-fg': '#FFFFFF',
'autocomplete-add-new-circle-bg': '#16B378',
'autocomplete-add-new-circle-selected-bg': '#009058',
/* Search */
'search-border': 'grey',
@@ -346,7 +356,7 @@ export const GristLight: ThemeColors = {
/* Page Widget Picker */
'widget-picker-primary-bg': 'white',
'widget-picker-secondary-bg': '#F7F7F7',
'widget-picker-item-fg': 'unset',
'widget-picker-item-fg': '#262633',
'widget-picker-item-selected-bg': 'rgba(217,217,217,0.6)',
'widget-picker-item-disabled-bg': 'rgba(217,217,217,0.6)',
'widget-picker-icon': '#929299',
@@ -394,7 +404,8 @@ export const GristLight: ThemeColors = {
/* Button Groups */
'button-group-fg': '#262633',
'button-group-light-fg': '#929299',
'button-group-bg': 'unset',
'button-group-bg': 'transparent',
'button-group-bg-hover': '#D9D9D9',
'button-group-icon': '#929299',
'button-group-border': '#D9D9D9',
'button-group-border-hover': '#BFBFBF',
@@ -407,6 +418,7 @@ export const GristLight: ThemeColors = {
'access-rules-table-header-fg': '#262633',
'access-rules-table-header-bg': 'rgba(217,217,217,0.6)',
'access-rules-table-body-fg': '#929299',
'access-rules-table-body-light-fg': '#D9D9D9',
'access-rules-table-border': '#929299',
'access-rules-column-list-border': '#D9D9D9',
'access-rules-column-item-fg': '#262633',
@@ -476,8 +488,7 @@ export const GristLight: ThemeColors = {
'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-bg-hover': '#D9D9D9',
'color-select-font-option-fg-selected': '#FFFFFF',
'color-select-font-option-bg-selected': '#262633',
'color-select-color-square-border': '#D9D9D9',
@@ -497,9 +508,42 @@ export const GristLight: ThemeColors = {
'login-page-bg': 'white',
'login-page-backdrop': '#F5F8FA',
'login-page-line': '#F7F7F7',
'login-page-google-button-fg': '#262633',
'login-page-google-button-bg': '#F7F7F7',
'login-page-google-button-bg-hover': '#E8E8E8',
'login-page-google-button-border': '#D9D9D9',
/* Formula Assistant */
'formula-assistant-header-bg': '#F7F7F7',
'formula-assistant-border': '#D9D9D9',
'formula-assistant-preformatted-text-bg': '#F7F7F7',
/* Attachments */
'attachments-editor-button-fg': '#009058',
'attachments-editor-button-hover-fg': '#16B378',
'attachments-editor-button-bg': '#FFFFFF',
'attachments-editor-button-hover-bg': '#E8E8E8',
'attachments-editor-button-border': '#D9D9D9',
'attachments-editor-button-icon': '#929299',
'attachments-editor-border': '#E8E8E8',
'attachments-cell-icon-fg': 'white',
'attachments-cell-icon-bg': '#D9D9D9',
'attachments-cell-icon-hover-bg': '#929299',
/* Switch */
'switch-slider-fg': '#ccc',
'switch-circle-fg': 'white',
/* Announcement Popups */
'announcement-popup-fg': '#000000',
'announcement-popup-bg': '#DCF4EB',
/* Scroll Shadow */
'scroll-shadow': 'rgba(217,217,217,0.6)',
/* Toggle Checkboxes */
'toggle-checkbox-fg': '#606060',
/* Numeric Spinners */
'numeric-spinner-fg': '#606060',
};