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; + } }