diff --git a/app/client/app.css b/app/client/app.css
index b707a2583b..cf1742ec25 100644
--- a/app/client/app.css
+++ b/app/client/app.css
@@ -1,4 +1,5 @@
/* global variables */
+@layer grist-base, grist-tokens, grist-theme, grist-custom;
:root {
--color-logo-row: #F9AE41;
--color-logo-col: #2CB0AF;
diff --git a/app/client/lib/getOrCreateStyleElement.ts b/app/client/lib/getOrCreateStyleElement.ts
new file mode 100644
index 0000000000..f29046726a
--- /dev/null
+++ b/app/client/lib/getOrCreateStyleElement.ts
@@ -0,0 +1,14 @@
+/**
+ * Gets or creates a style element in the head of the document with the given `id`.
+ *
+ * Useful for grouping CSS values such as theme custom properties without needing to
+ * pollute the document with in-line styles.
+ */
+export function getOrCreateStyleElement(id: string) {
+ let style = document.head.querySelector(`#${id}`);
+ if (style) { return style; }
+ style = document.createElement('style');
+ style.setAttribute('id', id);
+ document.head.append(style);
+ return style;
+}
diff --git a/app/client/ui/PagePanels.ts b/app/client/ui/PagePanels.ts
index 6a95877954..ba09819a2d 100644
--- a/app/client/ui/PagePanels.ts
+++ b/app/client/ui/PagePanels.ts
@@ -1,6 +1,3 @@
-/**
- * Note that it assumes the presence of cssVars.cssRootVars on
.
- */
import {makeT} from 'app/client/lib/localization';
import * as commands from 'app/client/components/commands';
import {watchElementForBlur} from 'app/client/lib/FocusLayer';
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
index 88aaa8cc99..1472c77796 100644
--- a/app/client/ui2018/cssVars.ts
+++ b/app/client/ui2018/cssVars.ts
@@ -8,14 +8,15 @@
*/
import {urlState} from 'app/client/models/gristUrlState';
import {getTheme, ProductFlavor} from 'app/client/ui/CustomThemes';
-import {dom, DomElementMethod, makeTestId, Observable, styled, TestId} from 'grainjs';
+import {getOrCreateStyleElement} from 'app/client/lib/getOrCreateStyleElement';
+import {DomElementMethod, makeTestId, Observable, styled, TestId} from 'grainjs';
import debounce = require('lodash/debounce');
import values = require('lodash/values');
const VAR_PREFIX = 'grist';
class CustomProp {
- constructor(public name: string, public value?: string, public fallback?: string | CustomProp) {
+ constructor(public name: string, public value?: string | CustomProp, public fallback?: string | CustomProp) {
}
@@ -77,6 +78,89 @@ export const colors = {
};
+/**
+ * Example of new "design tokens" that are a mix of current `colors`, `vars` and `theme` props.
+ *
+ * The css variables defined here take precedence over the ones in `colors` and `vars`, but are
+ * overriden by variables re-declared in a theme or a custom css file.
+ *
+ * The idea is we would not need `colors` and `vars` anymore.
+ *
+ * 1) List the `colors` above but rename them to have more abstracted names, ie "lightGreen" becomes "primaryLight".
+ * Grays are an exception here as I assume they will always be targetted as such, but we could name them differently
+ * if we want to stick to non-visual names here, like "shadeXX", "neutralXX". Or "secondaryXX", renaming the current
+ * "secondary" color to "tertiary" or "accent"? I just followed original naming for now.
+ *
+ * 2) Whenever possible, design tokens target other design tokens instead of copying color codes, ie "primaryBg"
+ * directly targets "primaryLight" instead of being "#16B378". Here I use getters to define tokens that target other
+ * tokens to prevent having to define multiple temporary vars.
+ *
+ * 3) Follow the `vars` object idea and add more semantic/global tokens to the list.
+ * What I have in mind is to move most of `vars` props here, and some of the pretty-much global things listed in `theme`
+ * (like text colors or panel global things). The endgoal would be to list all colors and tokens globally used in
+ * Grist here. I guess it might not make sense to list here a few really specific components (for example, code view).
+ *
+ * 4) Either have component-specific variables listed in `theme` below consume these designTokens, *or* remove
+ * them and make it so that components directly consume the designTokens in their own code.
+ *
+ * Colors listed here default to Grist light theme colors.
+ * Contrary to `colors` and `vars`, all tokens here are meant to be overridable by a theme,
+ * allowing a theme to only override what it wants instead of having to redefine everything.
+ */
+export const designTokens = {
+ /* first list hard-coded colors, then other colors consuming them and other non-color tokens */
+ white: new CustomProp('color-white', '#FFFFFF'),
+ greyLight: new CustomProp('color-grey-light', '#F7F7F7'),
+ greyMediumOpaque: new CustomProp('color-grey-medium-opaque', '#E8E8E8'),
+ greyMedium: new CustomProp('color-grey-medium', 'rgba(217,217,217,0.6)'),
+ greyDark: new CustomProp('color-grey-dark', '#D9D9D9'),
+ slate: new CustomProp('color-slate', '#929299'),
+ darkText: new CustomProp('color-dark-text', '#494949'),
+ dark: new CustomProp('color-dark', '#262633'),
+ black: new CustomProp('color-black', '#000000'),
+
+ primaryLighter: new CustomProp('color-primary-lighter', '#b1ffe2'),
+ primaryLight: new CustomProp('color-primary-light', '#16B378'),
+ primaryDark: new CustomProp('color-primary-dark', '#009058'),
+ primaryDarker: new CustomProp('color-primary-darker', '#007548'),
+
+ secondaryLighter: new CustomProp('color-secondary-lighter', '#87b2f9'),
+ secondaryLight: new CustomProp('color-secondary-light', '#3B82F6'),
+
+ error: new CustomProp('color-error', '#D0021B'),
+ warningLight: new CustomProp('color-warning-light', '#F9AE41'),
+ warningDark: new CustomProp('color-warning-dark', '#dd962c'),
+
+ cursorInactive: new CustomProp('color-cursor-inactive', '#A2E1C9'),
+ selection: new CustomProp('color-selection', 'rgba(22,179,120,0.15)'),
+ selectionOpaque: new CustomProp('color-selection-opaque', '#DCF4EB'),
+ selectionDarkerOpaque: new CustomProp('color-selection-darker-opaque', '#d6eee5'),
+ hover: new CustomProp('color-hover', '#bfbfbf'),
+ backdrop: new CustomProp('color-backdrop', 'rgba(38,38,51,0.9)'),
+
+ get warningBg() { return new CustomProp('color-warning-bg', this.warningDark); },
+
+ get primaryBg() { return new CustomProp('primary-bg', this.primaryLight); },
+ get primaryBgHover() { return new CustomProp('primary-bg-hover', this.primaryDark); },
+ get primaryFg() { return new CustomProp('primary-fg', this.white); },
+
+ get controlBg() { return new CustomProp('control-bg', this.white); },
+ get controlFg() { return new CustomProp('control-fg', this.primaryLight); },
+ get controlFgHover() { return new CustomProp('primary-fg-hover', this.primaryDark); },
+ get controlBorderColor() { return new CustomProp('control-border-color', this.primaryLight); },
+ controlBorderRadius: new CustomProp('border-radius', '4px'),
+
+ get cursor() { return new CustomProp('color-cursor', this.primaryLight); },
+
+ get mainBg() { return new CustomProp('main-bg', this.white); },
+ get text() { return new CustomProp('text', this.dark); },
+ get textLight() { return new CustomProp('text-light', this.slate); },
+
+ get panelBg() { return new CustomProp('panel-bg', this.greyLight); },
+ get panelFg() { return new CustomProp('panel-fg', this.dark); },
+ get panelBorder() { return new CustomProp('panel-border', this.greyMedium); },
+};
+
export const vars = {
/* Fonts */
fontFamily: new CustomProp('font-family', `-apple-system,BlinkMacSystemFont,Segoe UI,Liberation Sans,
@@ -177,11 +261,11 @@ export const theme = {
pageBackdrop: new CustomProp('theme-page-backdrop', undefined, 'grey'),
/* Page Panels */
- mainPanelBg: new CustomProp('theme-page-panels-main-panel-bg', undefined, 'white'),
- leftPanelBg: new CustomProp('theme-page-panels-left-panel-bg', undefined, colors.lightGrey),
- rightPanelBg: new CustomProp('theme-page-panels-right-panel-bg', undefined, colors.lightGrey),
- topHeaderBg: new CustomProp('theme-page-panels-top-header-bg', undefined, 'white'),
- bottomFooterBg: new CustomProp('theme-page-panels-bottom-footer-bg', undefined, 'white'),
+ mainPanelBg: new CustomProp('theme-page-panels-main-panel-bg', undefined, designTokens.mainBg),
+ leftPanelBg: new CustomProp('theme-page-panels-left-panel-bg', undefined, designTokens.panelBg),
+ rightPanelBg: new CustomProp('theme-page-panels-right-panel-bg', undefined, designTokens.panelBg),
+ topHeaderBg: new CustomProp('theme-page-panels-top-header-bg', undefined, designTokens.mainBg),
+ bottomFooterBg: new CustomProp('theme-page-panels-bottom-footer-bg', undefined, designTokens.mainBg),
pagePanelsBorder: new CustomProp('theme-page-panels-border', undefined, colors.mediumGrey),
pagePanelsBorderResizing: new CustomProp('theme-page-panels-border-resizing', undefined,
colors.lightGreen),
@@ -437,20 +521,20 @@ export const theme = {
colors.darkGrey),
/* Right Panel */
- rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, colors.slate),
- rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, colors.light),
- rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, colors.slate),
+ rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, designTokens.textLight),
+ rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, designTokens.mainBg),
+ rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, designTokens.textLight),
rightPanelTabIconHover: new CustomProp('theme-right-panel-tab-icon-hover', undefined,
- colors.dark),
- rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, colors.mediumGrey),
- rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, colors.light),
- rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, colors.dark),
+ designTokens.panelFg),
+ rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, designTokens.panelBorder),
+ rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, designTokens.mainBg),
+ rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, designTokens.panelFg),
rightPanelTabSelectedFg: new CustomProp('theme-right-panel-tab-selected-fg', undefined,
- colors.dark),
+ designTokens.panelFg),
rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
- colors.lightGrey),
+ designTokens.panelBg),
rightPanelTabSelectedIcon: new CustomProp('theme-right-panel-tab-selected-icon', undefined,
- colors.lightGreen),
+ designTokens.primaryBg),
rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
undefined, colors.darkGreen),
rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen),
@@ -922,12 +1006,7 @@ export const theme = {
const cssColors = values(colors).map(v => v.decl()).join('\n');
const cssVars = values(vars).map(v => v.decl()).join('\n');
-const cssFontParams = `
- font-family: ${vars.fontFamily};
- font-size: ${vars.mediumFontSize};
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
-`;
+const cssTokens = values(designTokens).map(v => v.decl()).join('\n');
// We set box-sizing globally to match bootstrap's setting of border-box, since we are integrating
// into an app which already has it set, and it's impossible to make things look consistently with
@@ -969,8 +1048,8 @@ const cssFontStyles = `
}
`;
-const cssVarsOnly = styled('div', cssColors + cssVars);
-const cssBodyVars = styled('div', cssFontParams + cssColors + cssVars + cssBorderBox + cssInputFonts + cssFontStyles);
+const cssRootVars = cssColors + cssVars;
+const cssReset = cssBorderBox + cssInputFonts + cssFontStyles;
const cssBody = styled('body', `
margin: 0;
@@ -980,10 +1059,12 @@ const cssBody = styled('body', `
const cssRoot = styled('html', `
height: 100%;
overflow: hidden;
+ font-family: ${vars.fontFamily};
+ font-size: ${vars.mediumFontSize};
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
`);
-export const cssRootVars = cssBodyVars.className;
-
// Also make a globally available testId, with a simple "test-" prefix (i.e. in tests, query css
// class ".test-{name}". Ideally, we'd use noTestId() instead in production.
export const testId: TestId = makeTestId('test-');
@@ -1060,7 +1141,20 @@ export function isScreenResizing(): Observable {
* Attaches the global css properties to the document's root to make them available in the page.
*/
export function attachCssRootVars(productFlavor: ProductFlavor, varsOnly: boolean = false) {
- dom.update(document.documentElement, varsOnly ? dom.cls(cssVarsOnly.className) : dom.cls(cssRootVars));
+ /* apply each group of rules and variables in the correct css layer
+ * see app/client/app.css for layers order */
+ getOrCreateStyleElement('grist-root-css').textContent = `
+@layer grist-base {
+ :root {
+ ${cssRootVars}
+ }
+ ${!varsOnly && cssReset}
+}
+@layer grist-tokens {
+ :root {
+ ${cssTokens}
+ }
+}`;
document.documentElement.classList.add(cssRoot.className);
document.body.classList.add(cssBody.className);
const customTheme = getTheme(productFlavor);
diff --git a/app/client/ui2018/theme.ts b/app/client/ui2018/theme.ts
index 642732adae..54aa1e3151 100644
--- a/app/client/ui2018/theme.ts
+++ b/app/client/ui2018/theme.ts
@@ -1,5 +1,6 @@
import { createPausableObs, PausableObservable } from 'app/client/lib/pausableObs';
import { getStorage } from 'app/client/lib/storage';
+import { getOrCreateStyleElement } from 'app/client/lib/getOrCreateStyleElement';
import { urlState } from 'app/client/models/gristUrlState';
import { Theme, ThemeAppearance, ThemeColors, ThemePrefs } from 'app/common/ThemePrefs';
import { getThemeColors } from 'app/common/Themes';
@@ -119,10 +120,13 @@ function getThemeFromPrefs(themePrefs: ThemePrefs, userAgentPrefersDarkTheme: bo
}
function attachCssThemeVars({appearance, colors: themeColors}: Theme) {
- // Prepare the custom properties needed for applying the theme.
- const properties = Object.entries(themeColors)
+ const properties = Object.entries(themeColors.legacyVariables || {})
.map(([name, value]) => `--grist-theme-${name}: ${value};`);
+ properties.push(...Object.entries(themeColors || {})
+ .filter(([name]) => name !== 'legacyVariables')
+ .map(([name, value]) => `--grist-${name}: ${value};`));
+
// Include properties for styling the scrollbar.
properties.push(...getCssThemeScrollbarProperties(appearance));
@@ -130,9 +134,13 @@ function attachCssThemeVars({appearance, colors: themeColors}: Theme) {
properties.push(...getCssThemeBackgroundProperties(appearance));
// Apply the properties to the theme style element.
- getOrCreateStyleElement('grist-theme').textContent = `:root {
+ // The 'grist-theme' layer takes precedence over the 'grist-base' and 'grist-tokens'layers where
+ // default CSS variables are defined.
+ getOrCreateStyleElement('grist-theme').textContent = `@layer grist-theme {
+ :root {
${properties.join('\n')}
- }`;
+ }
+}`;
// Make the browser aware of the color scheme.
document.documentElement.style.setProperty(`color-scheme`, appearance);
@@ -174,18 +182,3 @@ function getCssThemeBackgroundProperties(appearance: ThemeAppearance) {
: 'url("img/gplaypattern.png")';
return [`--grist-theme-bg: ${value};`];
}
-
-/**
- * Gets or creates a style element in the head of the document with the given `id`.
- *
- * Useful for grouping CSS values such as theme custom properties without needing to
- * pollute the document with in-line styles.
- */
-function getOrCreateStyleElement(id: string) {
- let style = document.head.querySelector(`#${id}`);
- if (style) { return style; }
- style = document.createElement('style');
- style.setAttribute('id', id);
- document.head.append(style);
- return style;
-}
diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts
index 281c220ea5..6a13ef5b5c 100644
--- a/app/common/ThemePrefs.ts
+++ b/app/common/ThemePrefs.ts
@@ -22,6 +22,11 @@ export interface Theme {
}
export interface ThemeColors {
+ legacyVariables?: Partial;
+ [key: string]: any; /* TODO: improve typings, we should list explicit list of designTokens */
+}
+
+interface LegacyThemeVariables {
/* Text */
'text': string;
'text-light': string;
diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
index 92d14e9577..c5633207ad 100644
--- a/app/common/themes/GristDark.ts
+++ b/app/common/themes/GristDark.ts
@@ -1,584 +1,582 @@
import {ThemeColors} from 'app/common/ThemePrefs';
export const GristDark: ThemeColors = {
- /* Text */
- 'text': '#EFEFEF',
+ // example of overriding default designTokens instead of specific component ones (used on right panel header tabs)
+ 'main-bg': '#32323f',
+ 'panel-bg': '#262633',
+ 'panel-fg': '#EFEFEF',
+ 'panel-border': '#60606D',
'text-light': '#A4A4B1',
- 'text-medium': '#D5D5D5',
- 'text-dark': '#FFFFFF',
- 'text-error': '#E63946',
- 'text-error-hover': '#FF5C5C',
- 'text-danger': '#FFA500',
- 'text-disabled': '#A4A4B1',
-
- /* Page */
- 'page-bg': '#262633',
- 'page-backdrop': 'black',
-
- /* Page Panels */
- 'page-panels-main-panel-bg': '#32323F',
- 'page-panels-left-panel-bg': '#262633',
- 'page-panels-right-panel-bg': '#262633',
- 'page-panels-top-header-bg': '#32323F',
- 'page-panels-bottom-footer-bg': '#32323F',
- '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': '#17B378',
-
- /* Add New */
- 'add-new-circle-fg': '#FFFFFF',
- 'add-new-circle-bg': '#0A5438',
- 'add-new-circle-hover-bg': '#157A54',
- 'add-new-circle-small-fg': '#FFFFFF',
- 'add-new-circle-small-bg': '#157A54',
- 'add-new-circle-small-hover-bg': '#1DA270',
-
- /* Top Bar */
- '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': '#70707D',
-
- /* Toasts */
- 'toast-text': '#FFFFFF',
- 'toast-text-light': '#929299',
- 'toast-bg': '#040404',
- 'toast-memo-text': '#EFEFEF',
- 'toast-memo-bg': '#555563',
- 'toast-error-icon': '#D0021B',
- 'toast-error-bg': '#D0021B',
- 'toast-success-icon': '#009058',
- 'toast-success-bg': '#009058',
- 'toast-warning-icon': '#F9AE41',
- 'toast-warning-bg': '#DD962C',
- 'toast-info-icon': '#3B82F6',
- 'toast-info-bg': '#3B82F6',
- 'toast-control-fg': '#16B378',
- 'toast-control-info-fg': '#87B2F9',
-
- /* Tooltips */
- 'tooltip-fg': 'white',
- 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
- 'tooltip-icon': '#A4A4B1',
- 'tooltip-close-button-fg': 'white',
- 'tooltip-close-button-hover-fg': 'black',
- 'tooltip-close-button-hover-bg': 'white',
-
- /* Modals */
- 'modal-bg': '#32323F',
- 'modal-backdrop': 'rgba(0,0,0,0.6)',
- 'modal-border': '#60606D',
- 'modal-border-dark': '#70707D',
- 'modal-border-hover': '#A4A4B1',
- 'modal-shadow-inner': '#000000',
- 'modal-shadow-outer': '#000000',
- 'modal-close-button-fg': '#A4A4B1',
- 'modal-backdrop-close-button-fg': '#17B378',
- 'modal-backdrop-close-button-hover-fg': '#13D78D',
-
- /* Popups */
- 'popup-bg': '#32323F',
- 'popup-secondary-bg': '#262633',
- 'popup-shadow-inner': '#000000',
- 'popup-shadow-outer': '#000000',
- 'popup-close-button-fg': '#A4A4B1',
-
- /* Prompts */
- 'prompt-fg': '#A4A4B1',
-
- /* Progress Bars */
- 'progress-bar-fg': '#17B378',
- 'progress-bar-error-fg': '#FF6666',
- 'progress-bar-bg': '#70707D',
-
- /* Links */
- 'link': '#17B378',
- 'link-hover': '#17B378',
-
- /* Hover */
- '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': '#A4A4B1',
-
- /* Tables */
- 'table-header-fg': '#EFEFEF',
- 'table-header-selected-fg': '#EFEFEF',
- 'table-header-bg': '#262633',
- 'table-header-selected-bg': '#414358',
- 'table-header-border': '#70707D',
- 'table-body-bg': '#32323F',
- 'table-body-border': '#60606D',
- 'table-add-new-bg': '#4A4A5D',
- 'table-scroll-shadow': '#000000',
- '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': '#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': '#70707D',
-
- /* Card Lists */
- 'card-list-form-border': '#60606D',
- 'card-list-blocks-border': '#60606D',
-
- /* Selection */
- 'selection': 'rgba(22,179,120,0.15)',
- 'selection-darker': 'rgba(22,179,120,0.25)',
- 'selection-darkest': 'rgba(22,179,120,0.35)',
- 'selection-opaque-fg': 'white',
- 'selection-opaque-bg': '#2F4748',
- 'selection-opaque-dark-bg': '#253E3E',
- 'selection-header': 'rgba(107,107,144,0.4)',
-
- /* Widgets */
- 'widget-bg': '#32323F',
- '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': '#60606D',
- 'pinned-doc-border-hover': '#A4A4B1',
- 'pinned-doc-editor-bg': '#60606D',
-
- /* Raw Data */
- 'raw-data-table-border': '#60606D',
- 'raw-data-table-border-hover': '#A4A4B1',
-
- /* Controls */
- 'control-fg': '#17B378',
- 'control-primary-fg': '#FFFFFF',
- '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': '#60606D',
- 'control-disabled-fg': '#A4A4B1',
- 'control-disabled-bg': '#70707D',
- 'control-border': '1px solid #17B378',
-
- /* Checkboxes */
- 'checkbox-bg': '#32323F',
- 'checkbox-disabled-bg': '#70707D',
- 'checkbox-border': '#70707D',
- 'checkbox-border-hover': '#A4A4B1',
-
- /* Move Docs */
- 'move-docs-selected-fg': '#FFFFFF',
- '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': '#70707D',
-
- /* Icons */
- 'icon-disabled': '#A4A4B1',
- 'icon-error': '#FFA500',
-
- /* Icon Buttons */
- 'icon-button-fg': '#FFFFFF',
- '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': '#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': '#70707D',
- 'left-panel-page-options-selected-hover-bg': '#A4A4B1',
- 'left-panel-page-initials-fg': 'white',
- 'left-panel-page-initials-bg': '#8E8EA0',
- 'left-panel-page-emoji-fg': 'black',
- 'left-panel-page-emoji-outline': '#70707D',
-
- /* Right Panel */
- 'right-panel-tab-fg': '#A4A4B1',
- 'right-panel-tab-bg': '#32323f',
- 'right-panel-tab-icon': '#A4A4B1',
- 'right-panel-tab-icon-hover': '#EFEFEF',
- 'right-panel-tab-border': '#60606D',
- 'right-panel-tab-hover-bg': '#32323f',
- 'right-panel-tab-hover-fg': '#EFEFEF',
- 'right-panel-tab-selected-fg': '#EFEFEF',
- 'right-panel-tab-selected-bg': '#262633',
- 'right-panel-tab-selected-icon': '#16B378',
- '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': '#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': '#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',
- 'right-panel-custom-widget-button-fg': '#EFEFEF',
- 'right-panel-custom-widget-button-bg': '#60606D',
-
- /* Document History */
- 'document-history-snapshot-fg': '#EFEFEF',
- 'document-history-snapshot-selected-fg': '#EFEFEF',
- 'document-history-snapshot-bg': '#32323F',
- 'document-history-snapshot-selected-bg': '#646473',
- 'document-history-snapshot-border': '#70707D',
- 'document-history-activity-text': '#EFEFEF',
- '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': '#17B378',
- 'accent-border': '#157A54',
- 'accent-text': '#17B378',
-
- /* Inputs */
- 'input-fg': '#EFEFEF',
- 'input-bg': '#32323F',
- 'input-disabled-fg': '#A4A4B1',
- 'input-disabled-bg': '#262633',
- 'input-placeholder-fg': '#A4A4B1',
- 'input-border': '#70707D',
- 'input-valid': '#17B378',
- 'input-invalid': '#FF6666',
- 'input-focus': '#5E9ED6',
- 'input-readonly-bg': '#262633',
- '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': '#70707D',
- 'choice-entry-border-hover': '#A4A4B1',
-
- /* Select Buttons */
- 'select-button-fg': '#EFEFEF',
- 'select-button-placeholder-fg': '#A4A4B1',
- 'select-button-bg': '#32323F',
- 'select-button-border': '#70707D',
- 'select-button-border-invalid': '#FF6666',
-
- /* Menus */
- 'menu-text': '#A4A4B1',
- 'menu-light-text': '#A4A4B1',
- 'menu-bg': '#32323F',
- 'menu-subheader-fg': '#EFEFEF',
- 'menu-border': '#70707D',
- 'menu-shadow': '#000000',
-
- /* Menu Items */
- 'menu-item-fg': '#FFFFFF',
- 'menu-item-selected-fg': '#FFFFFF',
- 'menu-item-selected-bg': '#157A54',
- 'menu-item-disabled-fg': '#70707D',
- 'menu-item-icon-fg': '#A4A4B1',
- 'menu-item-icon-selected-fg': '#FFFFFF',
-
- /* Autocomplete */
- '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': '#70707D',
- 'search-prev-next-button-fg': '#A4A4B1',
- 'search-prev-next-button-bg': '#24242F',
-
- /* Loading Spinners */
- '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': '#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': '#A4A4B1',
- 'shortcut-key-bg': '#32323F',
- 'shortcut-key-border': '#A4A4B1',
-
- /* Breadcrumbs */
- '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,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 */
- 'code-view-text': '#D2D2D2',
- 'code-view-keyword': '#D2D2D2',
- 'code-view-comment': '#888888',
- 'code-view-meta': '#7CD4FF',
- 'code-view-title': '#ED7373',
- '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': '#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',
- 'importer-active-file-fg': '#FFFFFF',
- 'importer-inactive-file-bg': '#808080',
- 'importer-inactive-file-fg': '#FFFFFF',
-
- /* Menu Toggles */
- 'menu-toggle-fg': '#A4A4B1',
- 'menu-toggle-hover-fg': '#17B378',
- 'menu-toggle-active-fg': '#13D78D',
- 'menu-toggle-bg': '#32323F',
- 'menu-toggle-border': '#A4A4B1',
-
- /* Info Button */
- 'info-button-fg': '#8F8F8F',
- 'info-button-hover-fg': '#707070',
- 'info-button-active-fg': '#5C5C5C',
-
- /* Button Groups */
- 'button-group-fg': '#EFEFEF',
- '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': '#17B378',
- 'button-group-selected-bg': '#646473',
- 'button-group-selected-border': '#646473',
-
- /* Access Rules */
- 'access-rules-table-header-fg': '#EFEFEF',
- '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': '#60606D',
- 'access-rules-column-item-icon-fg': '#A4A4B1',
- 'access-rules-column-item-icon-hover-fg': '#EFEFEF',
- 'access-rules-column-item-icon-hover-bg': '#A4A4B1',
- 'access-rules-formula-editor-bg': '#32323F',
- 'access-rules-formula-editor-border-hover': '#70707D',
- 'access-rules-formula-editor-bg-disabled': '#60606D',
- 'access-rules-formula-editor-focus': '#17B378',
-
- /* Cells */
- 'cell-fg': '#FFFFFF',
- 'cell-bg': '#32323F',
- 'cell-zebra-bg': '#262633',
-
- /* Charts */
- 'chart-fg': '#A4A4B1',
- 'chart-bg': '#32323F',
- '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': '#70707D',
- 'comments-user-name-fg': '#EFEFEF',
- 'comments-panel-topic-bg': '#32323F',
- 'comments-panel-topic-border': '#555563',
- 'comments-panel-resolved-topic-bg': '#262633',
-
- /* Date Picker */
- 'date-picker-selected-fg': '#FFFFFF',
- 'date-picker-selected-bg': '#7A7A8D',
- 'date-picker-selected-bg-hover': '#8D8D9C',
- 'date-picker-today-fg': '#FFFFFF',
- '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': '#70707D',
- 'tutorials-popup-header-fg': '#FFFFFF',
- 'tutorials-popup-box-bg': '#60606D',
- 'tutorials-popup-code-fg': '#FFFFFF',
- 'tutorials-popup-code-bg': '#262633',
- 'tutorials-popup-code-border': '#929299',
-
- /* Ace */
- 'ace-editor-bg': '#32323F',
- 'ace-autocomplete-primary-fg': '#EFEFEF',
- 'ace-autocomplete-secondary-fg': '#A4A4B1',
- 'ace-autocomplete-highlighted-fg': '#FFFFFF',
- 'ace-autocomplete-bg': '#32323F',
- '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,125,0.3)',
- 'ace-autocomplete-line-bg-hover': 'rgba(111,111,125,0.3)',
-
- /* Color Select */
- 'color-select-fg': '#A4A4B1',
- 'color-select-bg': '#32323F',
- 'color-select-shadow': '#000000',
- 'color-select-font-options-border': '#555563',
- 'color-select-font-option-fg': '#EFEFEF',
- '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': '#646473',
- 'color-select-color-square-border': '#A4A4B1',
- 'color-select-color-square-border-empty': '#EFEFEF',
- 'color-select-input-fg': '#A4A4B1',
- 'color-select-input-bg': '#32323F',
- 'color-select-input-border': '#70707D',
-
- /* Highlighted Code */
- 'highlighted-code-block-bg': '#262633',
- 'highlighted-code-block-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': '#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': '#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',
-
- /* Custom Widget Gallery */
- 'widget-gallery-border': '#555563',
- 'widget-gallery-border-selected': '#17B378',
- 'widget-gallery-shadow': '#00000080',
- 'widget-gallery-bg-hover': '#262633',
- 'widget-gallery-secondary-header-fg': '#FFFFFF',
- 'widget-gallery-secondary-header-bg': '#70707D',
- 'widget-gallery-secondary-header-bg-hover': '#60606D',
-
- /* Markdown Cell */
- 'markdown-cell-light-bg': '#494958',
- 'markdown-cell-light-border': '#32323F',
- 'markdown-cell-medium-border': '#555563',
-
- /* App Header */
- 'app-header-bg': '#32323F',
- 'app-header-border': '#32323f',
- 'app-header-border-hover': '#78788c',
-
- /* Card Button */
- 'card-button-border': '#555563',
- 'card-button-border-selected': '#17B378',
- 'card-button-shadow': '#0000001A',
+ legacyVariables: {
+ /* Text */
+ 'text': '#EFEFEF',
+ 'text-light': '#A4A4B1',
+ 'text-medium': '#D5D5D5',
+ 'text-dark': '#FFFFFF',
+ 'text-error': '#E63946',
+ 'text-error-hover': '#FF5C5C',
+ 'text-danger': '#FFA500',
+ 'text-disabled': '#A4A4B1',
+
+ /* Page */
+ 'page-bg': '#262633',
+ 'page-backdrop': 'black',
+
+ /* Page Panels */
+ 'page-panels-main-panel-bg': '#32323F',
+ 'page-panels-left-panel-bg': '#262633',
+ 'page-panels-right-panel-bg': '#262633',
+ 'page-panels-top-header-bg': '#32323F',
+ 'page-panels-bottom-footer-bg': '#32323F',
+ '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': '#17B378',
+
+ /* Add New */
+ 'add-new-circle-fg': '#FFFFFF',
+ 'add-new-circle-bg': '#0A5438',
+ 'add-new-circle-hover-bg': '#157A54',
+ 'add-new-circle-small-fg': '#FFFFFF',
+ 'add-new-circle-small-bg': '#157A54',
+ 'add-new-circle-small-hover-bg': '#1DA270',
+
+ /* Top Bar */
+ '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': '#70707D',
+
+ /* Toasts */
+ 'toast-text': '#FFFFFF',
+ 'toast-text-light': '#929299',
+ 'toast-bg': '#040404',
+ 'toast-memo-text': '#EFEFEF',
+ 'toast-memo-bg': '#555563',
+ 'toast-error-icon': '#D0021B',
+ 'toast-error-bg': '#D0021B',
+ 'toast-success-icon': '#009058',
+ 'toast-success-bg': '#009058',
+ 'toast-warning-icon': '#F9AE41',
+ 'toast-warning-bg': '#DD962C',
+ 'toast-info-icon': '#3B82F6',
+ 'toast-info-bg': '#3B82F6',
+ 'toast-control-fg': '#16B378',
+ 'toast-control-info-fg': '#87B2F9',
+
+ /* Tooltips */
+ 'tooltip-fg': 'white',
+ 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
+ 'tooltip-icon': '#A4A4B1',
+ 'tooltip-close-button-fg': 'white',
+ 'tooltip-close-button-hover-fg': 'black',
+ 'tooltip-close-button-hover-bg': 'white',
+
+ /* Modals */
+ 'modal-bg': '#32323F',
+ 'modal-backdrop': 'rgba(0,0,0,0.6)',
+ 'modal-border': '#60606D',
+ 'modal-border-dark': '#70707D',
+ 'modal-border-hover': '#A4A4B1',
+ 'modal-shadow-inner': '#000000',
+ 'modal-shadow-outer': '#000000',
+ 'modal-close-button-fg': '#A4A4B1',
+ 'modal-backdrop-close-button-fg': '#17B378',
+ 'modal-backdrop-close-button-hover-fg': '#13D78D',
+
+ /* Popups */
+ 'popup-bg': '#32323F',
+ 'popup-secondary-bg': '#262633',
+ 'popup-shadow-inner': '#000000',
+ 'popup-shadow-outer': '#000000',
+ 'popup-close-button-fg': '#A4A4B1',
+
+ /* Prompts */
+ 'prompt-fg': '#A4A4B1',
+
+ /* Progress Bars */
+ 'progress-bar-fg': '#17B378',
+ 'progress-bar-error-fg': '#FF6666',
+ 'progress-bar-bg': '#70707D',
+
+ /* Links */
+ 'link': '#17B378',
+ 'link-hover': '#17B378',
+
+ /* Hover */
+ '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': '#A4A4B1',
+
+ /* Tables */
+ 'table-header-fg': '#EFEFEF',
+ 'table-header-selected-fg': '#EFEFEF',
+ 'table-header-bg': '#262633',
+ 'table-header-selected-bg': '#414358',
+ 'table-header-border': '#70707D',
+ 'table-body-bg': '#32323F',
+ 'table-body-border': '#60606D',
+ 'table-add-new-bg': '#4A4A5D',
+ 'table-scroll-shadow': '#000000',
+ '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': '#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': '#70707D',
+
+ /* Card Lists */
+ 'card-list-form-border': '#60606D',
+ 'card-list-blocks-border': '#60606D',
+
+ /* Selection */
+ 'selection': 'rgba(22,179,120,0.15)',
+ 'selection-darker': 'rgba(22,179,120,0.25)',
+ 'selection-darkest': 'rgba(22,179,120,0.35)',
+ 'selection-opaque-fg': 'white',
+ 'selection-opaque-bg': '#2F4748',
+ 'selection-opaque-dark-bg': '#253E3E',
+ 'selection-header': 'rgba(107,107,144,0.4)',
+
+ /* Widgets */
+ 'widget-bg': '#32323F',
+ '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': '#60606D',
+ 'pinned-doc-border-hover': '#A4A4B1',
+ 'pinned-doc-editor-bg': '#60606D',
+
+ /* Raw Data */
+ 'raw-data-table-border': '#60606D',
+ 'raw-data-table-border-hover': '#A4A4B1',
+
+ /* Controls */
+ 'control-fg': '#17B378',
+ 'control-primary-fg': '#FFFFFF',
+ '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': '#60606D',
+ 'control-disabled-fg': '#A4A4B1',
+ 'control-disabled-bg': '#70707D',
+ 'control-border': '1px solid #17B378',
+
+ /* Checkboxes */
+ 'checkbox-bg': '#32323F',
+ 'checkbox-disabled-bg': '#70707D',
+ 'checkbox-border': '#70707D',
+ 'checkbox-border-hover': '#A4A4B1',
+
+ /* Move Docs */
+ 'move-docs-selected-fg': '#FFFFFF',
+ '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': '#70707D',
+
+ /* Icons */
+ 'icon-disabled': '#A4A4B1',
+ 'icon-error': '#FFA500',
+
+ /* Icon Buttons */
+ 'icon-button-fg': '#FFFFFF',
+ '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': '#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': '#70707D',
+ 'left-panel-page-options-selected-hover-bg': '#A4A4B1',
+ 'left-panel-page-initials-fg': 'white',
+ 'left-panel-page-initials-bg': '#8E8EA0',
+ 'left-panel-page-emoji-fg': 'black',
+ 'left-panel-page-emoji-outline': '#70707D',
+
+ /* Right Panel */
+ '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': '#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': '#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',
+ 'right-panel-custom-widget-button-fg': '#EFEFEF',
+ 'right-panel-custom-widget-button-bg': '#60606D',
+
+ /* Document History */
+ 'document-history-snapshot-fg': '#EFEFEF',
+ 'document-history-snapshot-selected-fg': '#EFEFEF',
+ 'document-history-snapshot-bg': '#32323F',
+ 'document-history-snapshot-selected-bg': '#646473',
+ 'document-history-snapshot-border': '#70707D',
+ 'document-history-activity-text': '#EFEFEF',
+ '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': '#17B378',
+ 'accent-border': '#157A54',
+ 'accent-text': '#17B378',
+
+ /* Inputs */
+ 'input-fg': '#EFEFEF',
+ 'input-bg': '#32323F',
+ 'input-disabled-fg': '#A4A4B1',
+ 'input-disabled-bg': '#262633',
+ 'input-placeholder-fg': '#A4A4B1',
+ 'input-border': '#70707D',
+ 'input-valid': '#17B378',
+ 'input-invalid': '#FF6666',
+ 'input-focus': '#5E9ED6',
+ 'input-readonly-bg': '#262633',
+ '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': '#70707D',
+ 'choice-entry-border-hover': '#A4A4B1',
+
+ /* Select Buttons */
+ 'select-button-fg': '#EFEFEF',
+ 'select-button-placeholder-fg': '#A4A4B1',
+ 'select-button-bg': '#32323F',
+ 'select-button-border': '#70707D',
+ 'select-button-border-invalid': '#FF6666',
+
+ /* Menus */
+ 'menu-text': '#A4A4B1',
+ 'menu-light-text': '#A4A4B1',
+ 'menu-bg': '#32323F',
+ 'menu-subheader-fg': '#EFEFEF',
+ 'menu-border': '#70707D',
+ 'menu-shadow': '#000000',
+
+ /* Menu Items */
+ 'menu-item-fg': '#FFFFFF',
+ 'menu-item-selected-fg': '#FFFFFF',
+ 'menu-item-selected-bg': '#157A54',
+ 'menu-item-disabled-fg': '#70707D',
+ 'menu-item-icon-fg': '#A4A4B1',
+ 'menu-item-icon-selected-fg': '#FFFFFF',
+
+ /* Autocomplete */
+ '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': '#70707D',
+ 'search-prev-next-button-fg': '#A4A4B1',
+ 'search-prev-next-button-bg': '#24242F',
+
+ /* Loading Spinners */
+ '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': '#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': '#A4A4B1',
+ 'shortcut-key-bg': '#32323F',
+ 'shortcut-key-border': '#A4A4B1',
+
+ /* Breadcrumbs */
+ '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,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 */
+ 'code-view-text': '#D2D2D2',
+ 'code-view-keyword': '#D2D2D2',
+ 'code-view-comment': '#888888',
+ 'code-view-meta': '#7CD4FF',
+ 'code-view-title': '#ED7373',
+ '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': '#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',
+ 'importer-active-file-fg': '#FFFFFF',
+ 'importer-inactive-file-bg': '#808080',
+ 'importer-inactive-file-fg': '#FFFFFF',
+
+ /* Menu Toggles */
+ 'menu-toggle-fg': '#A4A4B1',
+ 'menu-toggle-hover-fg': '#17B378',
+ 'menu-toggle-active-fg': '#13D78D',
+ 'menu-toggle-bg': '#32323F',
+ 'menu-toggle-border': '#A4A4B1',
+
+ /* Info Button */
+ 'info-button-fg': '#8F8F8F',
+ 'info-button-hover-fg': '#707070',
+ 'info-button-active-fg': '#5C5C5C',
+
+ /* Button Groups */
+ 'button-group-fg': '#EFEFEF',
+ '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': '#17B378',
+ 'button-group-selected-bg': '#646473',
+ 'button-group-selected-border': '#646473',
+
+ /* Access Rules */
+ 'access-rules-table-header-fg': '#EFEFEF',
+ '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': '#60606D',
+ 'access-rules-column-item-icon-fg': '#A4A4B1',
+ 'access-rules-column-item-icon-hover-fg': '#EFEFEF',
+ 'access-rules-column-item-icon-hover-bg': '#A4A4B1',
+ 'access-rules-formula-editor-bg': '#32323F',
+ 'access-rules-formula-editor-border-hover': '#70707D',
+ 'access-rules-formula-editor-bg-disabled': '#60606D',
+ 'access-rules-formula-editor-focus': '#17B378',
+
+ /* Cells */
+ 'cell-fg': '#FFFFFF',
+ 'cell-bg': '#32323F',
+ 'cell-zebra-bg': '#262633',
+
+ /* Charts */
+ 'chart-fg': '#A4A4B1',
+ 'chart-bg': '#32323F',
+ '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': '#70707D',
+ 'comments-user-name-fg': '#EFEFEF',
+ 'comments-panel-topic-bg': '#32323F',
+ 'comments-panel-topic-border': '#555563',
+ 'comments-panel-resolved-topic-bg': '#262633',
+
+ /* Date Picker */
+ 'date-picker-selected-fg': '#FFFFFF',
+ 'date-picker-selected-bg': '#7A7A8D',
+ 'date-picker-selected-bg-hover': '#8D8D9C',
+ 'date-picker-today-fg': '#FFFFFF',
+ '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': '#70707D',
+ 'tutorials-popup-header-fg': '#FFFFFF',
+ 'tutorials-popup-box-bg': '#60606D',
+ 'tutorials-popup-code-fg': '#FFFFFF',
+ 'tutorials-popup-code-bg': '#262633',
+ 'tutorials-popup-code-border': '#929299',
+
+ /* Ace */
+ 'ace-editor-bg': '#32323F',
+ 'ace-autocomplete-primary-fg': '#EFEFEF',
+ 'ace-autocomplete-secondary-fg': '#A4A4B1',
+ 'ace-autocomplete-highlighted-fg': '#FFFFFF',
+ 'ace-autocomplete-bg': '#32323F',
+ '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,125,0.3)',
+ 'ace-autocomplete-line-bg-hover': 'rgba(111,111,125,0.3)',
+
+ /* Color Select */
+ 'color-select-fg': '#A4A4B1',
+ 'color-select-bg': '#32323F',
+ 'color-select-shadow': '#000000',
+ 'color-select-font-options-border': '#555563',
+ 'color-select-font-option-fg': '#EFEFEF',
+ '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': '#646473',
+ 'color-select-color-square-border': '#A4A4B1',
+ 'color-select-color-square-border-empty': '#EFEFEF',
+ 'color-select-input-fg': '#A4A4B1',
+ 'color-select-input-bg': '#32323F',
+ 'color-select-input-border': '#70707D',
+
+ /* Highlighted Code */
+ 'highlighted-code-block-bg': '#262633',
+ 'highlighted-code-block-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': '#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': '#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',
+
+ /* Custom Widget Gallery */
+ 'widget-gallery-border': '#555563',
+ 'widget-gallery-border-selected': '#17B378',
+ 'widget-gallery-shadow': '#00000080',
+ 'widget-gallery-bg-hover': '#262633',
+ 'widget-gallery-secondary-header-fg': '#FFFFFF',
+ 'widget-gallery-secondary-header-bg': '#70707D',
+ 'widget-gallery-secondary-header-bg-hover': '#60606D',
+
+ /* Markdown Cell */
+ 'markdown-cell-light-bg': '#494958',
+ 'markdown-cell-light-border': '#32323F',
+ 'markdown-cell-medium-border': '#555563',
+
+ /* App Header */
+ 'app-header-bg': '#32323F',
+ 'app-header-border': '#32323f',
+ 'app-header-border-hover': '#78788c',
+
+ /* Card Button */
+ 'card-button-border': '#555563',
+ 'card-button-border-selected': '#17B378',
+ 'card-button-shadow': '#0000001A',
+ }
};
diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
index e03f295c52..51b6effb4f 100644
--- a/app/common/themes/GristLight.ts
+++ b/app/common/themes/GristLight.ts
@@ -1,584 +1,576 @@
import {ThemeColors} from 'app/common/ThemePrefs';
export const GristLight: ThemeColors = {
- /* Text */
- 'text': '#262633',
- 'text-light': '#929299',
- 'text-medium': '#494949',
- 'text-dark': 'black',
- 'text-error': '#D0021B',
- 'text-error-hover': '#A10000',
- 'text-danger': '#FFA500',
- 'text-disabled': '#929299',
-
- /* Page */
- 'page-bg': '#F7F7F7',
- 'page-backdrop': 'grey',
-
- /* Page Panels */
- 'page-panels-main-panel-bg': 'white',
- 'page-panels-left-panel-bg': '#F7F7F7',
- 'page-panels-right-panel-bg': '#F7F7F7',
- 'page-panels-top-header-bg': 'white',
- 'page-panels-bottom-footer-bg': 'white',
- 'page-panels-border': 'rgba(217,217,217,0.6)',
- 'page-panels-border-resizing': '#16B378',
- 'page-panels-side-panel-opener-fg': '#929299',
- 'page-panels-side-panel-opener-active-fg': 'white',
- 'page-panels-side-panel-opener-active-bg': '#16B378',
-
- /* Add New */
- 'add-new-circle-fg': '#FFFFFF',
- 'add-new-circle-bg': '#009058',
- 'add-new-circle-hover-bg': '#007548',
- 'add-new-circle-small-fg': '#FFFFFF',
- 'add-new-circle-small-bg': '#16B378',
- 'add-new-circle-small-hover-bg': '#009058',
-
- /* Top Bar */
- 'top-bar-button-primary-fg': '#16B378',
- 'top-bar-button-secondary-fg': '#929299',
- 'top-bar-button-disabled-fg': '#D9D9D9',
- 'top-bar-button-error-fg': '#D0021B',
-
- /* Notifications */
- 'notifications-panel-header-bg': '#F7F7F7',
- 'notifications-panel-body-bg': 'white',
- 'notifications-panel-border': '#D9D9D9',
-
- /* Toasts */
- 'toast-text': '#FFFFFF',
- 'toast-text-light': '#929299',
- 'toast-bg': '#040404',
- 'toast-memo-text': '#FFFFFF',
- 'toast-memo-bg': '#262633',
- 'toast-error-icon': '#D0021B',
- 'toast-error-bg': '#D0021B',
- 'toast-success-icon': '#009058',
- 'toast-success-bg': '#009058',
- 'toast-warning-icon': '#F9AE41',
- 'toast-warning-bg': '#DD962C',
- 'toast-info-icon': '#3B82F6',
- 'toast-info-bg': '#3B82F6',
- 'toast-control-fg': '#16B378',
- 'toast-control-info-fg': '#87B2F9',
-
- /* Tooltips */
- 'tooltip-fg': 'white',
- 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
- 'tooltip-icon': '#929299',
- 'tooltip-close-button-fg': 'white',
- 'tooltip-close-button-hover-fg': 'black',
- 'tooltip-close-button-hover-bg': 'white',
-
- /* Modals */
- 'modal-bg': 'white',
- 'modal-backdrop': 'rgba(38,38,51,0.9)',
- 'modal-border': '#E8E8E8',
- 'modal-border-dark': '#D9D9D9',
- 'modal-border-hover': '#929299',
- 'modal-shadow-inner': 'rgba(31,37,50,0.31)',
- 'modal-shadow-outer': 'rgba(76,86,103,0.24)',
- 'modal-close-button-fg': '#929299',
- 'modal-backdrop-close-button-fg': '#16B378',
- 'modal-backdrop-close-button-hover-fg': '#B1FFE2',
-
- /* Popups */
- 'popup-bg': 'white',
- 'popup-secondary-bg': '#F7F7F7',
- 'popup-shadow-inner': 'rgba(31, 37, 50, 0.31)',
- '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',
- 'progress-bar-bg': '#D9D9D9',
-
- /* Links */
- 'link': '#16B378',
- 'link-hover': '#16B378',
-
- /* Hover */
- 'hover': 'rgba(217,217,217,0.6)',
- 'hover-light': '#F7F7F7',
-
- /* Cell Editor */
- 'cell-editor-fg': '#262633',
- 'cell-editor-placeholder-fg': '#929299',
- 'cell-editor-bg': '#FFFFFF',
-
- /* Cursor */
- 'cursor': '#16B378',
- 'cursor-inactive': '#A2E1C9',
- 'cursor-readonly': '#929299',
-
- /* Tables */
- 'table-header-fg': '#000',
- 'table-header-selected-fg': '#000',
- 'table-header-bg': '#F7F7F7',
- 'table-header-selected-bg': '#E8E8E8',
- 'table-header-border': 'lightgray',
- 'table-body-bg': 'white',
- 'table-body-border': '#D9D9D9',
- 'table-add-new-bg': 'inherit',
- 'table-scroll-shadow': '#444444',
- '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)',
- 'card-compact-record-bg': 'white',
- 'card-blocks-bg': 'rgba(217,217,217,0.6)',
- 'card-form-label': '#929299',
- 'card-compact-label': '#929299',
- 'card-blocks-label': '#929299',
- 'card-form-border': 'lightgrey',
- 'card-compact-border': '#D9D9D9',
- 'card-editing-layout-bg': 'rgba(192, 192, 192, 0.2)',
- 'card-editing-layout-border': '#D9D9D9',
-
- /* Card Lists */
- 'card-list-form-border': '#D9D9D9',
- 'card-list-blocks-border': '#D9D9D9',
-
- /* Selection */
- 'selection': 'rgba(22,179,120,0.15)',
- 'selection-darker': 'rgba(22,179,120,0.25)',
- 'selection-darkest': 'rgba(22,179,120,0.35)',
- 'selection-opaque-fg': 'black',
- 'selection-opaque-bg': '#DCF4EB',
- 'selection-opaque-dark-bg': '#D6EEE5',
- 'selection-header': 'rgba(217,217,217,0.6)',
-
- /* Widgets */
- 'widget-bg': 'white',
- 'widget-border': '#D9D9D9',
- 'widget-active-border': '#16B378',
- 'widget-inactive-stripes-light': '#F7F7F7',
- 'widget-inactive-stripes-dark': '#E8E8E8',
-
- /* Pinned Docs */
- 'pinned-doc-footer-bg': 'white',
- 'pinned-doc-border': 'rgba(217,217,217,0.6)',
- 'pinned-doc-border-hover': '#929299',
- 'pinned-doc-editor-bg': 'rgba(217,217,217,0.6)',
-
- /* Raw Data */
- 'raw-data-table-border': 'rgba(217,217,217,0.6)',
- 'raw-data-table-border-hover': '#929299',
-
- /* Controls */
- 'control-fg': '#16B378',
- '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-border': '1px solid #11B683',
-
- /* Checkboxes */
- 'checkbox-bg': '#FFFFFF',
- 'checkbox-disabled-bg': '#D9D9D9',
- 'checkbox-border': '#D9D9D9',
- 'checkbox-border-hover': '#BFBFBF',
-
- /* Move Docs */
- 'move-docs-selected-fg': 'white',
- 'move-docs-selected-bg': '#16B378',
- 'move-docs-disabled-bg': '#D9D9D9',
-
- /* Filter Bar */
- 'filter-bar-button-saved-fg': '#FFFFFF',
- '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',
- 'icon-button-primary-hover-bg': '#009058',
- 'icon-button-secondary-bg': '#D9D9D9',
- 'icon-button-secondary-hover-bg': '#929299',
-
- /* Left Panel */
- 'left-panel-page-hover-bg': 'rgba(217,217,217,0.6)',
- 'left-panel-active-page-fg': '#FFFFFF',
- 'left-panel-active-page-bg': '#262633',
- 'left-panel-disabled-page-fg': '#BDBDBD',
- 'left-panel-page-options-fg': '#929299',
- 'left-panel-page-options-hover-fg': 'white',
- 'left-panel-page-options-hover-bg': '#D9D9D9',
- 'left-panel-page-options-selected-hover-bg': '#929299',
- 'left-panel-page-initials-fg': 'white',
- 'left-panel-page-initials-bg': '#929299',
- 'left-panel-page-emoji-fg': 'white',
- 'left-panel-page-emoji-outline': '#BDBDBD',
-
- /* Right Panel */
- 'right-panel-tab-fg': '#929299',
- 'right-panel-tab-bg': 'white',
- 'right-panel-tab-icon': '#929299',
- 'right-panel-tab-icon-hover': '#262633',
- 'right-panel-tab-border': 'rgba(217,217,217,0.6)',
- 'right-panel-tab-hover-bg': 'white',
- 'right-panel-tab-hover-fg': '#262633',
- 'right-panel-tab-selected-fg': '#262633',
- 'right-panel-tab-selected-bg': '#F7F7F7',
- 'right-panel-tab-selected-icon': '#16B378',
- 'right-panel-tab-button-hover-bg': '#009058',
- 'right-panel-subtab-fg': '#16B378',
- 'right-panel-subtab-selected-fg': '#262633',
- 'right-panel-subtab-selected-underline': '#16B378',
- 'right-panel-subtab-hover-fg': '#009058',
- 'right-panel-subtab-hover-underline': '#16B378',
- 'right-panel-disabled-overlay': '#F7F7F7',
- 'right-panel-toggle-button-enabled-fg': '#FFFFFF',
- 'right-panel-toggle-button-enabled-bg': '#262633',
- 'right-panel-toggle-button-disabled-fg': '#FFFFFF',
- 'right-panel-toggle-button-disabled-bg': '#E8E8E8',
- 'right-panel-field-settings-bg': '#E8E8E8',
- 'right-panel-field-settings-button-bg': 'lightgrey',
- 'right-panel-custom-widget-button-fg': '#262633',
- 'right-panel-custom-widget-button-bg': '#D9D9D9',
-
- /* Document History */
- 'document-history-snapshot-fg': '#262633',
- 'document-history-snapshot-selected-fg': '#FFFFFF',
- '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': '#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',
- 'accent-border': '#16B378',
- 'accent-text': '#16B378',
-
- /* Inputs */
- 'input-fg': 'black',
- 'input-bg': 'white',
- 'input-disabled-fg': '#929299',
- 'input-disabled-bg': '#F7F7F7',
- 'input-placeholder-fg': '#929299',
- 'input-border': '#D9D9D9',
- 'input-valid': '#16B378',
- 'input-invalid': '#D0021B',
- 'input-focus': '#5E9ED6',
- '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',
- 'choice-entry-border-hover': '#BFBFBF',
-
- /* Select Buttons */
- 'select-button-fg': '#262633',
- 'select-button-placeholder-fg': '#929299',
- 'select-button-bg': 'white',
- 'select-button-border': '#D9D9D9',
- 'select-button-border-invalid': '#D0021B',
-
- /* Menus */
- 'menu-text': '#929299',
- 'menu-light-text': '#929299',
- 'menu-bg': 'white',
- 'menu-subheader-fg': '#262633',
- 'menu-border': '#E8E8E8',
- 'menu-shadow': 'rgba(38, 38, 51, 0.6)',
-
- /* Menu Items */
- 'menu-item-fg': 'black',
- 'menu-item-selected-fg': '#FFFFFF',
- 'menu-item-selected-bg': '#16B378',
- 'menu-item-disabled-fg': '#D9D9D9',
- 'menu-item-icon-fg': '#929299',
- 'menu-item-icon-selected-fg': 'white',
-
- /* 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',
- 'search-prev-next-button-fg': '#929299',
- 'search-prev-next-button-bg': 'rgba(217,217,217,0.6)',
-
- /* Loaders */
- 'loader-fg': '#16B378',
- 'loader-bg': '#D9D9D9',
-
- /* Site Switcher */
- 'site-switcher-active-fg': '#FFFFFF',
- 'site-switcher-active-bg': '#262633',
-
- /* Doc Menu */
- 'doc-menu-doc-options-fg': '#D9D9D9',
- 'doc-menu-doc-options-hover-fg': '#929299',
- 'doc-menu-doc-options-hover-bg': '#D9D9D9',
-
- /* Shortcut Keys */
- 'shortcut-key-fg': 'black',
- 'shortcut-key-primary-fg': '#009058',
- 'shortcut-key-secondary-fg': '#929299',
- 'shortcut-key-bg': 'white',
- 'shortcut-key-border': '#929299',
-
- /* Breadcrumbs */
- 'breadcrumbs-tag-fg': 'white',
- 'breadcrumbs-tag-bg': '#929299',
- 'breadcrumbs-tag-alert-bg': '#D0021B',
-
- /* Page Widget Picker */
- 'widget-picker-primary-bg': 'white',
- 'widget-picker-secondary-bg': '#F7F7F7',
- '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',
- 'widget-picker-primary-icon': '#16B378',
- 'widget-picker-summary-icon': '#009058',
- 'widget-picker-border': 'rgba(217,217,217,0.6)',
- 'widget-picker-shadow': 'rgba(38,38,51,0.20)',
-
- /* Code View */
- 'code-view-text': '#444',
- 'code-view-keyword': '#444',
- 'code-view-comment': '#888888',
- 'code-view-meta': '#1F7199',
- 'code-view-title': '#880000',
- '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',
- 'importer-preview-border': '#D9D9D9',
- 'importer-skipped-table-overlay': 'rgba(217,217,217,0.6)',
- 'importer-match-icon': '#D9D9D9',
- 'importer-outside-bg': '#F7F7F7',
- 'importer-main-content-bg': '#FFFFFF',
- 'importer-active-file-bg': '#16B378',
- 'importer-active-file-fg': '#FFFFFF',
- 'importer-inactive-file-bg': 'rgba(217,217,217,0.6)',
- 'importer-inactive-file-fg': '#FFFFFF',
-
- /* Menu Toggles */
- 'menu-toggle-fg': '#929299',
- 'menu-toggle-hover-fg': '#009058',
- 'menu-toggle-active-fg': '#007548',
- 'menu-toggle-bg': 'white',
- 'menu-toggle-border': '#929299',
-
- /* Info Button */
- 'info-button-fg': '#8F8F8F',
- 'info-button-hover-fg': '#707070',
- 'info-button-active-fg': '#5C5C5C',
-
- /* Button Groups */
- 'button-group-fg': '#262633',
- 'button-group-light-fg': '#929299',
- 'button-group-bg': 'transparent',
- 'button-group-bg-hover': '#D9D9D9',
- 'button-group-icon': '#929299',
- 'button-group-border': '#D9D9D9',
- 'button-group-border-hover': '#BFBFBF',
- 'button-group-selected-fg': '#FFFFFF',
- 'button-group-light-selected-fg': '#16B378',
- 'button-group-selected-bg': '#262633',
- 'button-group-selected-border': '#262633',
-
- /* Access Rules */
- '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',
- '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',
- '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',
- 'cell-bg': 'white',
- 'cell-zebra-bg': '#F8F8F8',
-
- /* Charts */
- 'chart-fg': '#444',
- 'chart-bg': '#fff',
- 'chart-legend-bg': '#FFFFFF80',
- 'chart-x-axis': '#444',
- 'chart-y-axis': '#444',
-
- /* Comments */
- 'comments-popup-header-bg': '#F7F7F7',
- 'comments-popup-body-bg': 'white',
- 'comments-popup-border': '#D9D9D9',
- 'comments-user-name-fg': '#494949',
- 'comments-panel-topic-bg': 'white',
- 'comments-panel-topic-border': '#ccc',
- 'comments-panel-resolved-topic-bg': '#F0F0F0',
-
- /* Date Picker */
- 'date-picker-selected-fg': '#262633',
- 'date-picker-selected-bg': '#D9D9D9',
- 'date-picker-selected-bg-hover': '#CFCFCF',
- 'date-picker-today-fg': '#FFFFFF',
- 'date-picker-today-bg': '#16B378',
- 'date-picker-today-bg-hover': '#009058',
- 'date-picker-range-start-end-bg': '#D9D9D9',
- 'date-picker-range-start-end-bg-hover': '#CFCFCF',
- 'date-picker-range-bg': '#EEEEEE',
- 'date-picker-range-bg-hover': '#D9D9D9',
-
- /* Tutorials */
- 'tutorials-popup-border': '#D9D9D9',
- 'tutorials-popup-header-fg': '#FFFFFF',
- 'tutorials-popup-box-bg': '#F5F5F5',
- 'tutorials-popup-code-fg': '#333333',
- 'tutorials-popup-code-bg': '#FFFFFF',
- 'tutorials-popup-code-border': '#E1E4E5',
-
- /* Ace */
- 'ace-editor-bg': 'white',
- '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-hover': '#D9D9D9',
- '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',
-
- /* Login Page */
- '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',
-
- /* Custom Widget Gallery */
- 'widget-gallery-border': '#D9D9D9',
- 'widget-gallery-border-selected': '#16B378',
- 'widget-gallery-shadow': '#0000001A',
- 'widget-gallery-bg-hover': '#F7F7F7',
- 'widget-gallery-secondary-header-fg': '#FFFFFF',
- 'widget-gallery-secondary-header-bg': '#929299',
- 'widget-gallery-secondary-header-bg-hover': '#7E7E85',
-
- /* Markdown Cell */
- 'markdown-cell-light-bg': '#F7F7F7',
- 'markdown-cell-light-border': '#E8E8E8',
- 'markdown-cell-medium-border': '#D9D9D9',
-
- /* App header */
- 'app-header-bg': 'var(--grist-theme-page-panels-main-panel-bg)',
- 'app-header-border': 'var(--grist-theme-menu-border)',
- 'app-header-border-hover': '#B0B0B0',
-
- /* Card Button */
- 'card-button-border': '#D9D9D9',
- 'card-button-border-selected': '#16B378',
- 'card-button-shadow': '#0000001A',
+ legacyVariables: {
+ /* Text */
+ 'text': '#262633',
+ 'text-light': '#929299',
+ 'text-medium': '#494949',
+ 'text-dark': 'black',
+ 'text-error': '#D0021B',
+ 'text-error-hover': '#A10000',
+ 'text-danger': '#FFA500',
+ 'text-disabled': '#929299',
+
+ /* Page */
+ 'page-bg': '#F7F7F7',
+ 'page-backdrop': 'grey',
+
+ /* Page Panels */
+ 'page-panels-main-panel-bg': 'white',
+ 'page-panels-left-panel-bg': '#F7F7F7',
+ 'page-panels-right-panel-bg': '#F7F7F7',
+ 'page-panels-top-header-bg': 'white',
+ 'page-panels-bottom-footer-bg': 'white',
+ 'page-panels-border': 'rgba(217,217,217,0.6)',
+ 'page-panels-border-resizing': '#16B378',
+ 'page-panels-side-panel-opener-fg': '#929299',
+ 'page-panels-side-panel-opener-active-fg': 'white',
+ 'page-panels-side-panel-opener-active-bg': '#16B378',
+
+ /* Add New */
+ 'add-new-circle-fg': '#FFFFFF',
+ 'add-new-circle-bg': '#009058',
+ 'add-new-circle-hover-bg': '#007548',
+ 'add-new-circle-small-fg': '#FFFFFF',
+ 'add-new-circle-small-bg': '#16B378',
+ 'add-new-circle-small-hover-bg': '#009058',
+
+ /* Top Bar */
+ 'top-bar-button-primary-fg': '#16B378',
+ 'top-bar-button-secondary-fg': '#929299',
+ 'top-bar-button-disabled-fg': '#D9D9D9',
+ 'top-bar-button-error-fg': '#D0021B',
+
+ /* Notifications */
+ 'notifications-panel-header-bg': '#F7F7F7',
+ 'notifications-panel-body-bg': 'white',
+ 'notifications-panel-border': '#D9D9D9',
+
+ /* Toasts */
+ 'toast-text': '#FFFFFF',
+ 'toast-text-light': '#929299',
+ 'toast-bg': '#040404',
+ 'toast-memo-text': '#FFFFFF',
+ 'toast-memo-bg': '#262633',
+ 'toast-error-icon': '#D0021B',
+ 'toast-error-bg': '#D0021B',
+ 'toast-success-icon': '#009058',
+ 'toast-success-bg': '#009058',
+ 'toast-warning-icon': '#F9AE41',
+ 'toast-warning-bg': '#DD962C',
+ 'toast-info-icon': '#3B82F6',
+ 'toast-info-bg': '#3B82F6',
+ 'toast-control-fg': '#16B378',
+ 'toast-control-info-fg': '#87B2F9',
+
+ /* Tooltips */
+ 'tooltip-fg': 'white',
+ 'tooltip-bg': 'rgba(0, 0, 0, 0.75)',
+ 'tooltip-icon': '#929299',
+ 'tooltip-close-button-fg': 'white',
+ 'tooltip-close-button-hover-fg': 'black',
+ 'tooltip-close-button-hover-bg': 'white',
+
+ /* Modals */
+ 'modal-bg': 'white',
+ 'modal-backdrop': 'rgba(38,38,51,0.9)',
+ 'modal-border': '#E8E8E8',
+ 'modal-border-dark': '#D9D9D9',
+ 'modal-border-hover': '#929299',
+ 'modal-shadow-inner': 'rgba(31,37,50,0.31)',
+ 'modal-shadow-outer': 'rgba(76,86,103,0.24)',
+ 'modal-close-button-fg': '#929299',
+ 'modal-backdrop-close-button-fg': '#16B378',
+ 'modal-backdrop-close-button-hover-fg': '#B1FFE2',
+
+ /* Popups */
+ 'popup-bg': 'white',
+ 'popup-secondary-bg': '#F7F7F7',
+ 'popup-shadow-inner': 'rgba(31, 37, 50, 0.31)',
+ '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',
+ 'progress-bar-bg': '#D9D9D9',
+
+ /* Links */
+ 'link': '#16B378',
+ 'link-hover': '#16B378',
+
+ /* Hover */
+ 'hover': 'rgba(217,217,217,0.6)',
+ 'hover-light': '#F7F7F7',
+
+ /* Cell Editor */
+ 'cell-editor-fg': '#262633',
+ 'cell-editor-placeholder-fg': '#929299',
+ 'cell-editor-bg': '#FFFFFF',
+
+ /* Cursor */
+ 'cursor': '#16B378',
+ 'cursor-inactive': '#A2E1C9',
+ 'cursor-readonly': '#929299',
+
+ /* Tables */
+ 'table-header-fg': '#000',
+ 'table-header-selected-fg': '#000',
+ 'table-header-bg': '#F7F7F7',
+ 'table-header-selected-bg': '#E8E8E8',
+ 'table-header-border': 'lightgray',
+ 'table-body-bg': 'white',
+ 'table-body-border': '#D9D9D9',
+ 'table-add-new-bg': 'inherit',
+ 'table-scroll-shadow': '#444444',
+ '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)',
+ 'card-compact-record-bg': 'white',
+ 'card-blocks-bg': 'rgba(217,217,217,0.6)',
+ 'card-form-label': '#929299',
+ 'card-compact-label': '#929299',
+ 'card-blocks-label': '#929299',
+ 'card-form-border': 'lightgrey',
+ 'card-compact-border': '#D9D9D9',
+ 'card-editing-layout-bg': 'rgba(192, 192, 192, 0.2)',
+ 'card-editing-layout-border': '#D9D9D9',
+
+ /* Card Lists */
+ 'card-list-form-border': '#D9D9D9',
+ 'card-list-blocks-border': '#D9D9D9',
+
+ /* Selection */
+ 'selection': 'rgba(22,179,120,0.15)',
+ 'selection-darker': 'rgba(22,179,120,0.25)',
+ 'selection-darkest': 'rgba(22,179,120,0.35)',
+ 'selection-opaque-fg': 'black',
+ 'selection-opaque-bg': '#DCF4EB',
+ 'selection-opaque-dark-bg': '#D6EEE5',
+ 'selection-header': 'rgba(217,217,217,0.6)',
+
+ /* Widgets */
+ 'widget-bg': 'white',
+ 'widget-border': '#D9D9D9',
+ 'widget-active-border': '#16B378',
+ 'widget-inactive-stripes-light': '#F7F7F7',
+ 'widget-inactive-stripes-dark': '#E8E8E8',
+
+ /* Pinned Docs */
+ 'pinned-doc-footer-bg': 'white',
+ 'pinned-doc-border': 'rgba(217,217,217,0.6)',
+ 'pinned-doc-border-hover': '#929299',
+ 'pinned-doc-editor-bg': 'rgba(217,217,217,0.6)',
+
+ /* Raw Data */
+ 'raw-data-table-border': 'rgba(217,217,217,0.6)',
+ 'raw-data-table-border-hover': '#929299',
+
+ /* Controls */
+ 'control-fg': '#16B378',
+ '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-border': '1px solid #11B683',
+
+ /* Checkboxes */
+ 'checkbox-bg': '#FFFFFF',
+ 'checkbox-disabled-bg': '#D9D9D9',
+ 'checkbox-border': '#D9D9D9',
+ 'checkbox-border-hover': '#BFBFBF',
+
+ /* Move Docs */
+ 'move-docs-selected-fg': 'white',
+ 'move-docs-selected-bg': '#16B378',
+ 'move-docs-disabled-bg': '#D9D9D9',
+
+ /* Filter Bar */
+ 'filter-bar-button-saved-fg': '#FFFFFF',
+ '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',
+ 'icon-button-primary-hover-bg': '#009058',
+ 'icon-button-secondary-bg': '#D9D9D9',
+ 'icon-button-secondary-hover-bg': '#929299',
+
+ /* Left Panel */
+ 'left-panel-page-hover-bg': 'rgba(217,217,217,0.6)',
+ 'left-panel-active-page-fg': '#FFFFFF',
+ 'left-panel-active-page-bg': '#262633',
+ 'left-panel-disabled-page-fg': '#BDBDBD',
+ 'left-panel-page-options-fg': '#929299',
+ 'left-panel-page-options-hover-fg': 'white',
+ 'left-panel-page-options-hover-bg': '#D9D9D9',
+ 'left-panel-page-options-selected-hover-bg': '#929299',
+ 'left-panel-page-initials-fg': 'white',
+ 'left-panel-page-initials-bg': '#929299',
+ 'left-panel-page-emoji-fg': 'white',
+ 'left-panel-page-emoji-outline': '#BDBDBD',
+
+ /* Right Panel */
+ 'right-panel-tab-button-hover-bg': '#009058',
+ 'right-panel-subtab-fg': '#16B378',
+ 'right-panel-subtab-selected-fg': '#262633',
+ 'right-panel-subtab-selected-underline': '#16B378',
+ 'right-panel-subtab-hover-fg': '#009058',
+ 'right-panel-subtab-hover-underline': '#16B378',
+ 'right-panel-disabled-overlay': '#F7F7F7',
+ 'right-panel-toggle-button-enabled-fg': '#FFFFFF',
+ 'right-panel-toggle-button-enabled-bg': '#262633',
+ 'right-panel-toggle-button-disabled-fg': '#FFFFFF',
+ 'right-panel-toggle-button-disabled-bg': '#E8E8E8',
+ 'right-panel-field-settings-bg': '#E8E8E8',
+ 'right-panel-field-settings-button-bg': 'lightgrey',
+ 'right-panel-custom-widget-button-fg': '#262633',
+ 'right-panel-custom-widget-button-bg': '#D9D9D9',
+
+ /* Document History */
+ 'document-history-snapshot-fg': '#262633',
+ 'document-history-snapshot-selected-fg': '#FFFFFF',
+ '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': '#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',
+ 'accent-border': '#16B378',
+ 'accent-text': '#16B378',
+
+ /* Inputs */
+ 'input-fg': 'black',
+ 'input-bg': 'white',
+ 'input-disabled-fg': '#929299',
+ 'input-disabled-bg': '#F7F7F7',
+ 'input-placeholder-fg': '#929299',
+ 'input-border': '#D9D9D9',
+ 'input-valid': '#16B378',
+ 'input-invalid': '#D0021B',
+ 'input-focus': '#5E9ED6',
+ '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',
+ 'choice-entry-border-hover': '#BFBFBF',
+
+ /* Select Buttons */
+ 'select-button-fg': '#262633',
+ 'select-button-placeholder-fg': '#929299',
+ 'select-button-bg': 'white',
+ 'select-button-border': '#D9D9D9',
+ 'select-button-border-invalid': '#D0021B',
+
+ /* Menus */
+ 'menu-text': '#929299',
+ 'menu-light-text': '#929299',
+ 'menu-bg': 'white',
+ 'menu-subheader-fg': '#262633',
+ 'menu-border': '#E8E8E8',
+ 'menu-shadow': 'rgba(38, 38, 51, 0.6)',
+
+ /* Menu Items */
+ 'menu-item-fg': 'black',
+ 'menu-item-selected-fg': '#FFFFFF',
+ 'menu-item-selected-bg': '#16B378',
+ 'menu-item-disabled-fg': '#D9D9D9',
+ 'menu-item-icon-fg': '#929299',
+ 'menu-item-icon-selected-fg': 'white',
+
+ /* 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',
+ 'search-prev-next-button-fg': '#929299',
+ 'search-prev-next-button-bg': 'rgba(217,217,217,0.6)',
+
+ /* Loaders */
+ 'loader-fg': '#16B378',
+ 'loader-bg': '#D9D9D9',
+
+ /* Site Switcher */
+ 'site-switcher-active-fg': '#FFFFFF',
+ 'site-switcher-active-bg': '#262633',
+
+ /* Doc Menu */
+ 'doc-menu-doc-options-fg': '#D9D9D9',
+ 'doc-menu-doc-options-hover-fg': '#929299',
+ 'doc-menu-doc-options-hover-bg': '#D9D9D9',
+
+ /* Shortcut Keys */
+ 'shortcut-key-fg': 'black',
+ 'shortcut-key-primary-fg': '#009058',
+ 'shortcut-key-secondary-fg': '#929299',
+ 'shortcut-key-bg': 'white',
+ 'shortcut-key-border': '#929299',
+
+ /* Breadcrumbs */
+ 'breadcrumbs-tag-fg': 'white',
+ 'breadcrumbs-tag-bg': '#929299',
+ 'breadcrumbs-tag-alert-bg': '#D0021B',
+
+ /* Page Widget Picker */
+ 'widget-picker-primary-bg': 'white',
+ 'widget-picker-secondary-bg': '#F7F7F7',
+ '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',
+ 'widget-picker-primary-icon': '#16B378',
+ 'widget-picker-summary-icon': '#009058',
+ 'widget-picker-border': 'rgba(217,217,217,0.6)',
+ 'widget-picker-shadow': 'rgba(38,38,51,0.20)',
+
+ /* Code View */
+ 'code-view-text': '#444',
+ 'code-view-keyword': '#444',
+ 'code-view-comment': '#888888',
+ 'code-view-meta': '#1F7199',
+ 'code-view-title': '#880000',
+ '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',
+ 'importer-preview-border': '#D9D9D9',
+ 'importer-skipped-table-overlay': 'rgba(217,217,217,0.6)',
+ 'importer-match-icon': '#D9D9D9',
+ 'importer-outside-bg': '#F7F7F7',
+ 'importer-main-content-bg': '#FFFFFF',
+ 'importer-active-file-bg': '#16B378',
+ 'importer-active-file-fg': '#FFFFFF',
+ 'importer-inactive-file-bg': 'rgba(217,217,217,0.6)',
+ 'importer-inactive-file-fg': '#FFFFFF',
+
+ /* Menu Toggles */
+ 'menu-toggle-fg': '#929299',
+ 'menu-toggle-hover-fg': '#009058',
+ 'menu-toggle-active-fg': '#007548',
+ 'menu-toggle-bg': 'white',
+ 'menu-toggle-border': '#929299',
+
+ /* Info Button */
+ 'info-button-fg': '#8F8F8F',
+ 'info-button-hover-fg': '#707070',
+ 'info-button-active-fg': '#5C5C5C',
+
+ /* Button Groups */
+ 'button-group-fg': '#262633',
+ 'button-group-light-fg': '#929299',
+ 'button-group-bg': 'transparent',
+ 'button-group-bg-hover': '#D9D9D9',
+ 'button-group-icon': '#929299',
+ 'button-group-border': '#D9D9D9',
+ 'button-group-border-hover': '#BFBFBF',
+ 'button-group-selected-fg': '#FFFFFF',
+ 'button-group-light-selected-fg': '#16B378',
+ 'button-group-selected-bg': '#262633',
+ 'button-group-selected-border': '#262633',
+
+ /* Access Rules */
+ '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',
+ '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',
+ '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',
+ 'cell-bg': 'white',
+ 'cell-zebra-bg': '#F8F8F8',
+
+ /* Charts */
+ 'chart-fg': '#444',
+ 'chart-bg': '#fff',
+ 'chart-legend-bg': '#FFFFFF80',
+ 'chart-x-axis': '#444',
+ 'chart-y-axis': '#444',
+
+ /* Comments */
+ 'comments-popup-header-bg': '#F7F7F7',
+ 'comments-popup-body-bg': 'white',
+ 'comments-popup-border': '#D9D9D9',
+ 'comments-user-name-fg': '#494949',
+ 'comments-panel-topic-bg': 'white',
+ 'comments-panel-topic-border': '#ccc',
+ 'comments-panel-resolved-topic-bg': '#F0F0F0',
+
+ /* Date Picker */
+ 'date-picker-selected-fg': '#262633',
+ 'date-picker-selected-bg': '#D9D9D9',
+ 'date-picker-selected-bg-hover': '#CFCFCF',
+ 'date-picker-today-fg': '#FFFFFF',
+ 'date-picker-today-bg': '#16B378',
+ 'date-picker-today-bg-hover': '#009058',
+ 'date-picker-range-start-end-bg': '#D9D9D9',
+ 'date-picker-range-start-end-bg-hover': '#CFCFCF',
+ 'date-picker-range-bg': '#EEEEEE',
+ 'date-picker-range-bg-hover': '#D9D9D9',
+
+ /* Tutorials */
+ 'tutorials-popup-border': '#D9D9D9',
+ 'tutorials-popup-header-fg': '#FFFFFF',
+ 'tutorials-popup-box-bg': '#F5F5F5',
+ 'tutorials-popup-code-fg': '#333333',
+ 'tutorials-popup-code-bg': '#FFFFFF',
+ 'tutorials-popup-code-border': '#E1E4E5',
+
+ /* Ace */
+ 'ace-editor-bg': 'white',
+ '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-hover': '#D9D9D9',
+ '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',
+
+ /* Login Page */
+ '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',
+
+ /* Custom Widget Gallery */
+ 'widget-gallery-border': '#D9D9D9',
+ 'widget-gallery-border-selected': '#16B378',
+ 'widget-gallery-shadow': '#0000001A',
+ 'widget-gallery-bg-hover': '#F7F7F7',
+ 'widget-gallery-secondary-header-fg': '#FFFFFF',
+ 'widget-gallery-secondary-header-bg': '#929299',
+ 'widget-gallery-secondary-header-bg-hover': '#7E7E85',
+
+ /* Markdown Cell */
+ 'markdown-cell-light-bg': '#F7F7F7',
+ 'markdown-cell-light-border': '#E8E8E8',
+ 'markdown-cell-medium-border': '#D9D9D9',
+
+ /* App header */
+ 'app-header-bg': 'var(--grist-theme-page-panels-main-panel-bg)',
+ 'app-header-border': 'var(--grist-theme-menu-border)',
+ 'app-header-border-hover': '#B0B0B0',
+
+ /* Card Button */
+ 'card-button-border': '#D9D9D9',
+ 'card-button-border-selected': '#16B378',
+ 'card-button-shadow': '#0000001A',
+ }
};
diff --git a/static/custom.css b/static/custom.css
index fc5f332c48..a06b5b83a9 100644
--- a/static/custom.css
+++ b/static/custom.css
@@ -1,42 +1,44 @@
-:root {
- /* logo */
- --icon-GristLogo: url("ui-icons/Logo/GristLogo.svg") !important;
- --grist-logo-bg: #040404 !important;
- --grist-logo-size: 22px 22px !important;
+@layer grist-custom {
+ :root {
+ /* logo */
+ --icon-GristLogo: url("ui-icons/Logo/GristLogo.svg") !important;
+ --grist-logo-bg: #040404 !important;
+ --grist-logo-size: 22px 22px !important;
- /* colors */
- --grist-color-light-grey: #F7F7F7 !important;
- --grist-color-medium-grey: rgba(217,217,217,0.6) !important;
- --grist-color-medium-grey-opaque: #E8E8E8 !important;
- --grist-color-dark-grey: #D9D9D9 !important;
- --grist-color-light: #FFFFFF !important;
- --grist-color-dark: #262633 !important;
- --grist-color-dark-bg: #262633 !important;
- --grist-color-slate: #929299 !important;
- --grist-color-light-green: #16B378 !important;
- --grist-color-dark-green: #009058 !important;
- --grist-color-darker-green: #007548 !important;
- --grist-color-lighter-green: #b1ffe2 !important;
- --grist-color-lighter-blue: #87b2f9 !important;
- --grist-color-light-blue: #3B82F6 !important;
- --grist-color-cursor: #16B378 !important;
- --grist-color-selection: rgba(22,179,120,0.15) !important;
- --grist-color-selection-opaque: #DCF4EB !important;
- --grist-color-selection-darker-opaque: #d6eee5 !important;
- --grist-color-inactive-cursor: #A2E1C9 !important;
- --grist-color-hover: #bfbfbf !important;
- --grist-color-error: #D0021B !important;
- --grist-color-warning: #F9AE41 !important;
- --grist-color-warning-bg: #dd962c !important;
- --grist-color-backdrop: rgba(38,38,51,0.9) !important;
- --grist-label-text-bg: #FFFFFF !important;
- --grist-label-active-bg: #F0F0F0 !important;
- --grist-primary-fg: #16B378 !important;
- --grist-primary-fg-hover: #009058 !important;
- --grist-primary-bg: #ffffff !important;
- --grist-control-bg: #ffffff !important;
- --grist-control-fg: #16B378 !important;
- --grist-primary-fg-hover: #009058 !important;
- --grist-control-border: 1px solid #11B683 !important;
- --grist-toast-bg: #040404 !important;
+ /* colors */
+ --grist-color-light-grey: #F7F7F7 !important;
+ --grist-color-medium-grey: rgba(217,217,217,0.6) !important;
+ --grist-color-medium-grey-opaque: #E8E8E8 !important;
+ --grist-color-dark-grey: #D9D9D9 !important;
+ --grist-color-light: #FFFFFF !important;
+ --grist-color-dark: #262633 !important;
+ --grist-color-dark-bg: #262633 !important;
+ --grist-color-slate: #929299 !important;
+ --grist-color-light-green: #16B378 !important;
+ --grist-color-dark-green: #009058 !important;
+ --grist-color-darker-green: #007548 !important;
+ --grist-color-lighter-green: #b1ffe2 !important;
+ --grist-color-lighter-blue: #87b2f9 !important;
+ --grist-color-light-blue: #3B82F6 !important;
+ --grist-color-cursor: #16B378 !important;
+ --grist-color-selection: rgba(22,179,120,0.15) !important;
+ --grist-color-selection-opaque: #DCF4EB !important;
+ --grist-color-selection-darker-opaque: #d6eee5 !important;
+ --grist-color-inactive-cursor: #A2E1C9 !important;
+ --grist-color-hover: #bfbfbf !important;
+ --grist-color-error: #D0021B !important;
+ --grist-color-warning: #F9AE41 !important;
+ --grist-color-warning-bg: #dd962c !important;
+ --grist-color-backdrop: rgba(38,38,51,0.9) !important;
+ --grist-label-text-bg: #FFFFFF !important;
+ --grist-label-active-bg: #F0F0F0 !important;
+ --grist-primary-fg: #16B378 !important;
+ --grist-primary-fg-hover: #009058 !important;
+ --grist-primary-bg: #ffffff !important;
+ --grist-control-bg: #ffffff !important;
+ --grist-control-fg: #16B378 !important;
+ --grist-primary-fg-hover: #009058 !important;
+ --grist-control-border: 1px solid #11B683 !important;
+ --grist-toast-bg: #040404 !important;
+ }
}