diff --git a/app/client/app.css b/app/client/app.css index b707a2583b..8b993f80da 100644 --- a/app/client/app.css +++ b/app/client/app.css @@ -1,4 +1,5 @@ /* global variables */ +@layer grist-base, grist-theme, grist-custom; :root { --color-logo-row: #F9AE41; --color-logo-col: #2CB0AF; diff --git a/app/client/components/ChartView.ts b/app/client/components/ChartView.ts index 51e36b77b1..98669b2dc1 100644 --- a/app/client/components/ChartView.ts +++ b/app/client/components/ChartView.ts @@ -395,19 +395,19 @@ export class ChartView extends Disposable { private _getPlotlyTheme(): Partial { const {colors} = gristThemeObs().get(); return { - paper_bgcolor: colors['chart-bg'], - plot_bgcolor: colors['chart-bg'], + paper_bgcolor: colors.legacyVariables.chartBg.toString(), + plot_bgcolor: colors.legacyVariables.chartBg.toString(), xaxis: { - color: colors['chart-x-axis'], + color: colors.legacyVariables.chartXAxis.toString(), }, yaxis: { - color: colors['chart-y-axis'], + color: colors.legacyVariables.chartYAxis.toString(), }, font: { - color: colors['chart-fg'], + color: colors.legacyVariables.chartFg.toString(), }, legend: { - bgcolor: colors['chart-legend-bg'], + bgcolor: colors.legacyVariables.chartLegendBg.toString(), }, }; } 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/models/AppModel.ts b/app/client/models/AppModel.ts index d98bd8b28c..4eee3f5a97 100644 --- a/app/client/models/AppModel.ts +++ b/app/client/models/AppModel.ts @@ -21,7 +21,7 @@ import {LocalPlugin} from 'app/common/plugin'; import {DismissedPopup, DismissedReminder, UserPrefs} from 'app/common/Prefs'; import {isOwner, isOwnerOrEditor} from 'app/common/roles'; import {getTagManagerScript} from 'app/common/tagManager'; -import {getDefaultThemePrefs, ThemePrefs, ThemePrefsChecker} from 'app/common/ThemePrefs'; +import {getDefaultThemePrefs, ThemePrefs} from 'app/common/ThemePrefs'; import {getGristConfig} from 'app/common/urlUtils'; import {ExtendedUser} from 'app/common/UserAPI'; import {getOrgName, isTemplatesOrg, Organization, OrgError, UserAPI, UserAPIImpl} from 'app/common/UserAPI'; @@ -305,7 +305,6 @@ export class AppModelImpl extends Disposable implements AppModel { public readonly userPrefsObs = getUserPrefsObs(this); public readonly themePrefs = getUserPrefObs(this.userPrefsObs, 'theme', { defaultValue: getDefaultThemePrefs(), - checker: ThemePrefsChecker, }) as Observable; public readonly dismissedPopups = getUserPrefObs(this.userPrefsObs, 'dismissedPopups', 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..cb5e7c8b86 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -1,138 +1,48 @@ /** - * CSS Variables. To use in your web application, add `cssRootVars` to the class list for your app's - * root node, typically ``. + * CSS Variables. * - * The fonts used attempt to default to system fonts as described here: - * https://css-tricks.com/snippets/css/system-font-stack/ + * This file has two roles: + * - appending theme-agnosticCSS variables and global CSS rules to the DOM with `attachCssRootVars`. + * - (deprecated) exposing the design tokens to the rest of the codebase. + * Prefer using the {@link tokens} object directly. * + * Theme-related CSS variables (like colors and font families) are added to the DOM with `theme.ts#attachCssThemeVars`. */ +import {CssCustomProp as CustomProp} from 'app/common/CssCustomProp'; +import {legacyVariables, tokens} from 'app/common/ThemePrefs'; 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) { - - } - - public decl(): string | undefined { - if (this.value === undefined) { return undefined; } - - return `--${VAR_PREFIX}-${this.name}: ${this.value};`; - } - - public toString(): string { - let value = `--${VAR_PREFIX}-${this.name}`; - if (this.fallback) { - value += `, ${this.fallback}`; - } - return `var(${value})`; - } -} - /** - * Theme-agnostic color properties. + * @deprecated Consume the {@link tokens} object directly + * + * Before having most cssVars theme-related (listed in `tokens`), we had a list of colors + * defined here, consumed by the whole codebase. * - * These are appropriate for UI elements whose color should not change based on the active - * theme. Generally, you should instead use the properties defined in `theme`, which will change - * based on the active theme. + * To prevent having to update the whole codebase to target the new `tokens` structure for now, + * we just make the tokens available through this `colors` object, and match the legacy variables here. */ export const colors = { - lightGrey: new CustomProp('color-light-grey', '#F7F7F7'), - mediumGrey: new CustomProp('color-medium-grey', 'rgba(217,217,217,0.6)'), - mediumGreyOpaque: new CustomProp('color-medium-grey-opaque', '#E8E8E8'), - darkGrey: new CustomProp('color-dark-grey', '#D9D9D9'), - - light: new CustomProp('color-light', '#FFFFFF'), - dark: new CustomProp('color-dark', '#262633'), - darkText: new CustomProp('color-dark-text', '#494949'), - darkBg: new CustomProp('color-dark-bg', '#262633'), - slate: new CustomProp('color-slate', '#929299'), - - lighterGreen: new CustomProp('color-lighter-green', '#b1ffe2'), - lightGreen: new CustomProp('color-light-green', '#16B378'), - darkGreen: new CustomProp('color-dark-green', '#009058'), - darkerGreen: new CustomProp('color-darker-green', '#007548'), - - lighterBlue: new CustomProp('color-lighter-blue', '#87b2f9'), - lightBlue: new CustomProp('color-light-blue', '#3B82F6'), - orange: new CustomProp('color-orange', '#F9AE41'), - - cursor: new CustomProp('color-cursor', '#16B378'), - 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'), - - inactiveCursor: new CustomProp('color-inactive-cursor', '#A2E1C9'), - - hover: new CustomProp('color-hover', '#bfbfbf'), - error: new CustomProp('color-error', '#D0021B'), - warning: new CustomProp('color-warning', '#F9AE41'), - warningBg: new CustomProp('color-warning-bg', '#dd962c'), - backdrop: new CustomProp('color-backdrop', 'rgba(38,38,51,0.9)') - + ...tokens, + darkBg: tokens.dark, + orange: tokens.warningLight, + warning: tokens.warningLight, + lighterGreen: tokens.primaryLighter, + lightGreen: tokens.primaryLight, + darkGreen: tokens.primaryDark, + darkerGreen: tokens.primaryDarker, + lighterBlue: tokens.secondaryLighter, + lightBlue: tokens.secondaryLight, }; -export const vars = { - /* Fonts */ - fontFamily: new CustomProp('font-family', `-apple-system,BlinkMacSystemFont,Segoe UI,Liberation Sans, - Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`), - - // This is more monospace and looks better for data that should often align (e.g. to have 00000 - // take similar space to 11111). This is the main font for user data. - fontFamilyData: new CustomProp('font-family-data', - `Liberation Sans,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`), - - /* Font sizes */ - xxsmallFontSize: new CustomProp('xx-font-size', '8px'), - xsmallFontSize: new CustomProp('x-small-font-size', '10px'), - smallFontSize: new CustomProp('small-font-size', '11px'), - mediumFontSize: new CustomProp('medium-font-size', '13px'), - introFontSize: new CustomProp('intro-font-size', '14px'), // feels friendlier - largeFontSize: new CustomProp('large-font-size', '16px'), - xlargeFontSize: new CustomProp('x-large-font-size', '18px'), - xxlargeFontSize: new CustomProp('xx-large-font-size', '20px'), - xxxlargeFontSize: new CustomProp('xxx-large-font-size', '22px'), - - /* Controls size and space */ - controlFontSize: new CustomProp('control-font-size', '12px'), - smallControlFontSize: new CustomProp('small-control-font-size', '10px'), - bigControlFontSize: new CustomProp('big-control-font-size', '13px'), - headerControlFontSize: new CustomProp('header-control-font-size', '22px'), - bigControlTextWeight: new CustomProp('big-text-weight', '500'), - headerControlTextWeight: new CustomProp('header-text-weight', '600'), - - /* Labels */ - labelTextSize: new CustomProp('label-text-size', 'medium'), - labelTextBg: new CustomProp('label-text-bg', '#FFFFFF'), - labelActiveBg: new CustomProp('label-active-bg', '#F0F0F0'), - - controlMargin: new CustomProp('normal-margin', '2px'), - controlPadding: new CustomProp('normal-padding', '3px 5px'), - tightPadding: new CustomProp('tight-padding', '1px 2px'), - loosePadding: new CustomProp('loose-padding', '5px 15px'), - - /* Control colors and borders */ - primaryBg: new CustomProp('primary-fg', '#16B378'), - primaryBgHover: new CustomProp('primary-fg-hover', '#009058'), - primaryFg: new CustomProp('primary-bg', '#ffffff'), - - controlBg: new CustomProp('control-bg', '#ffffff'), - controlFg: new CustomProp('control-fg', '#16B378'), - controlFgHover: new CustomProp('primary-fg-hover', '#009058'), - - controlBorder: new CustomProp('control-border', '1px solid #11B683'), - controlBorderRadius: new CustomProp('border-radius', '4px'), - - logoBg: new CustomProp('logo-bg', '#040404'), - logoSize: new CustomProp('logo-size', '22px 22px'), - toastBg: new CustomProp('toast-bg', '#040404'), - - /* Z indexes */ +/** + * zIndexes are listed on their own and can't be modified by themes. + */ +export const zIndexes = { insertColumnLineZIndex: new CustomProp('insert-column-line-z-index', '20'), popupSectionBackdropZIndex: new CustomProp('popup-section-backdrop-z-index', '100'), menuZIndex: new CustomProp('menu-z-index', '999'), @@ -150,784 +60,28 @@ export const vars = { }; /** - * Theme-related color properties. + * @deprecated Consume the {@link tokens} object directly. * - * Unlike `colors`, these properties don't define any values as they aren't known ahead of time. - * Instead, when the application loads, CSS variables mapped to these properties are attached to - * the document based on the user's theme preferences. + * Before having most cssVars theme-related (listed in `tokens`), we had a list of various + * design tokens here, consumed by the whole codebase. * - * In the case that CSS variables aren't attached to the document, their fallback values will be - * used. This ensures that styles are still applied even when there's trouble fetching preferences, - * and also serves as a method of maintaining backwards compatibility with custom CSS rules that - * use legacy variable names (prefixed with `grist-color-`). + * To prevent having to update the whole codebase to target the new `tokens` structure, + * for now we just make the tokens available through this `vars` object. */ -export const theme = { - /* Text */ - text: new CustomProp('theme-text', undefined, colors.dark), - lightText: new CustomProp('theme-text-light', undefined, colors.slate), - mediumText: new CustomProp('theme-text-medium', undefined, colors.darkText), - darkText: new CustomProp('theme-text-dark', undefined, 'black'), - errorText: new CustomProp('theme-text-error', undefined, colors.error), - errorTextHover: new CustomProp('theme-text-error-hover', undefined, '#BF0A31'), - dangerText: new CustomProp('theme-text-danger', undefined, '#FFA500'), - disabledText: new CustomProp('theme-text-disabled', undefined, colors.slate), - - /* Page */ - pageBg: new CustomProp('theme-page-bg', undefined, colors.lightGrey), - 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'), - pagePanelsBorder: new CustomProp('theme-page-panels-border', undefined, colors.mediumGrey), - pagePanelsBorderResizing: new CustomProp('theme-page-panels-border-resizing', undefined, - colors.lightGreen), - sidePanelOpenerFg: new CustomProp('theme-page-panels-side-panel-opener-fg', undefined, - colors.slate), - sidePanelOpenerActiveFg: new CustomProp('theme-page-panels-side-panel-opener-active-fg', - undefined, 'white'), - sidePanelOpenerActiveBg: new CustomProp('theme-page-panels-side-panel-opener-active-bg', - undefined, colors.lightGreen), - - /* Add New */ - addNewCircleFg: new CustomProp('theme-add-new-circle-fg', undefined, colors.light), - addNewCircleBg: new CustomProp('theme-add-new-circle-bg', undefined, colors.darkGreen), - addNewCircleHoverBg: new CustomProp('theme-add-new-circle-hover-bg', undefined, - colors.darkerGreen), - addNewCircleSmallFg: new CustomProp('theme-add-new-circle-small-fg', undefined, colors.light), - addNewCircleSmallBg: new CustomProp('theme-add-new-circle-small-bg', undefined, - colors.lightGreen), - addNewCircleSmallHoverBg: new CustomProp('theme-add-new-circle-small-hover-bg', undefined, - colors.darkGreen), - - /* Top Bar */ - topBarButtonPrimaryFg: new CustomProp('theme-top-bar-button-primary-fg', undefined, - colors.lightGreen), - topBarButtonSecondaryFg: new CustomProp('theme-top-bar-button-secondary-fg', undefined, - colors.slate), - topBarButtonDisabledFg: new CustomProp('theme-top-bar-button-disabled-fg', undefined, - colors.darkGrey), - topBarButtonErrorFg: new CustomProp('theme-top-bar-button-error-fg', undefined, colors.error), - - /* Notifications */ - notificationsPanelHeaderBg: new CustomProp('theme-notifications-panel-header-bg', undefined, - colors.lightGrey), - notificationsPanelBodyBg: new CustomProp('theme-notifications-panel-body-bg', undefined, - 'white'), - notificationsPanelBorder: new CustomProp('theme-notifications-panel-border', undefined, - colors.darkGrey), - - /* Toasts */ - toastText: new CustomProp('theme-toast-text', undefined, colors.light), - toastLightText: new CustomProp('theme-toast-text-light', undefined, colors.slate), - toastBg: new CustomProp('theme-toast-bg', undefined, vars.toastBg), - toastMemoText: new CustomProp('theme-toast-memo-text', undefined, colors.light), - toastMemoBg: new CustomProp('theme-toast-memo-bg', undefined, colors.dark), - toastErrorIcon: new CustomProp('theme-toast-error-icon', undefined, colors.error), - toastErrorBg: new CustomProp('theme-toast-error-bg', undefined, colors.error), - toastSuccessIcon: new CustomProp('theme-toast-success-icon', undefined, colors.darkGreen), - toastSuccessBg: new CustomProp('theme-toast-success-bg', undefined, colors.darkGreen), - toastWarningIcon: new CustomProp('theme-toast-warning-icon', undefined, colors.warning), - toastWarningBg: new CustomProp('theme-toast-warning-bg', undefined, colors.warningBg), - toastInfoIcon: new CustomProp('theme-toast-info-icon', undefined, colors.lightBlue), - toastInfoBg: new CustomProp('theme-toast-info-bg', undefined, colors.lightBlue), - toastControlFg: new CustomProp('theme-toast-control-fg', undefined, colors.lightGreen), - toastInfoControlFg: new CustomProp('theme-toast-control-info-fg', undefined, colors.lighterBlue), - - /* Tooltips */ - tooltipFg: new CustomProp('theme-tooltip-fg', undefined, 'white'), - tooltipBg: new CustomProp('theme-tooltip-bg', undefined, 'rgba(0, 0, 0, 0.75)'), - tooltipIcon: new CustomProp('theme-tooltip-icon', undefined, colors.slate), - tooltipCloseButtonFg: new CustomProp('theme-tooltip-close-button-fg', undefined, 'white'), - tooltipCloseButtonHoverFg: new CustomProp('theme-tooltip-close-button-hover-fg', undefined, - 'black'), - tooltipCloseButtonHoverBg: new CustomProp('theme-tooltip-close-button-hover-bg', undefined, - 'white'), - - /* Modals */ - modalBg: new CustomProp('theme-modal-bg', undefined, 'white'), - modalBackdrop: new CustomProp('theme-modal-backdrop', undefined, colors.backdrop), - modalBorder: new CustomProp('theme-modal-border', undefined, colors.mediumGreyOpaque), - modalBorderDark: new CustomProp('theme-modal-border-dark', undefined, colors.darkGrey), - modalBorderHover: new CustomProp('theme-modal-border-hover', undefined, colors.slate), - modalInnerShadow: new CustomProp('theme-modal-shadow-inner', undefined, - 'rgba(31, 37, 50, 0.31)'), - modalOuterShadow: new CustomProp('theme-modal-shadow-outer', undefined, - 'rgba(76, 86, 103, 0.24)'), - modalCloseButtonFg: new CustomProp('theme-modal-close-button-fg', undefined, colors.slate), - modalBackdropCloseButtonFg: new CustomProp('theme-modal-backdrop-close-button-fg', undefined, - vars.primaryBg), - modalBackdropCloseButtonHoverFg: new CustomProp('theme-modal-backdrop-close-button-hover-fg', - undefined, colors.lighterGreen), - - /* Popups */ - popupBg: new CustomProp('theme-popup-bg', undefined, 'white'), - popupSecondaryBg: new CustomProp('theme-popup-secondary-bg', undefined, colors.lightGrey), - popupInnerShadow: new CustomProp('theme-popup-shadow-inner', undefined, - 'rgba(31, 37, 50, 0.31)'), - popupOuterShadow: new CustomProp('theme-popup-shadow-outer', undefined, - 'rgba(76, 86, 103, 0.24)'), - popupCloseButtonFg: new CustomProp('theme-popup-close-button-fg', undefined, colors.slate), - - /* Prompts */ - promptFg: new CustomProp('theme-prompt-fg', undefined, '#606060'), - - /* Progress Bars */ - progressBarFg: new CustomProp('theme-progress-bar-fg', undefined, colors.lightGreen), - progressBarErrorFg: new CustomProp('theme-progress-bar-error-fg', undefined, colors.error), - progressBarBg: new CustomProp('theme-progress-bar-bg', undefined, colors.darkGrey), - - /* Links */ - link: new CustomProp('theme-link', undefined, colors.lightGreen), - linkHover: new CustomProp('theme-link-hover', undefined, colors.lightGreen), - - /* Hover */ - hover: new CustomProp('theme-hover', undefined, colors.mediumGrey), - lightHover: new CustomProp('theme-hover-light', undefined, colors.lightGrey), - - /* Cell Editor */ - cellEditorFg: new CustomProp('theme-cell-editor-fg', undefined, colors.dark), - cellEditorPlaceholderFg: new CustomProp('theme-cell-editor-placeholder-fg', undefined, colors.slate), - cellEditorBg: new CustomProp('theme-cell-editor-bg', undefined, colors.light), - - /* Cursor */ - cursor: new CustomProp('theme-cursor', undefined, colors.cursor), - cursorInactive: new CustomProp('theme-cursor-inactive', undefined, colors.inactiveCursor), - cursorReadonly: new CustomProp('theme-cursor-readonly', undefined, colors.slate), - - /* Tables */ - tableHeaderFg: new CustomProp('theme-table-header-fg', undefined, '#000'), - tableHeaderSelectedFg: new CustomProp('theme-table-header-selected-fg', undefined, '#000'), - tableHeaderBg: new CustomProp('theme-table-header-bg', undefined, colors.lightGrey), - tableHeaderSelectedBg: new CustomProp('theme-table-header-selected-bg', undefined, - colors.mediumGreyOpaque), - tableHeaderBorder: new CustomProp('theme-table-header-border', undefined, 'lightgray'), - tableBodyBg: new CustomProp('theme-table-body-bg', undefined, 'white'), - tableBodyBorder: new CustomProp('theme-table-body-border', undefined, colors.darkGrey), - tableAddNewBg: new CustomProp('theme-table-add-new-bg', undefined, 'inherit'), - tableScrollShadow: new CustomProp('theme-table-scroll-shadow', undefined, '#444444'), - tableFrozenColumnsBorder: new CustomProp('theme-table-frozen-columns-border', undefined, - '#999999'), - tableDragDropIndicator: new CustomProp('theme-table-drag-drop-indicator', undefined, 'gray'), - tableDragDropShadow: new CustomProp('theme-table-drag-drop-shadow', undefined, '#F0F0F0'), - tableCellSummaryBg: new CustomProp('theme-table-cell-summary-bg', undefined, colors.mediumGrey), - - /* Cards */ - cardCompactWidgetBg: new CustomProp('theme-card-compact-widget-bg', undefined, - colors.mediumGrey), - cardCompactRecordBg: new CustomProp('theme-card-compact-record-bg', undefined, 'white'), - cardBlocksBg: new CustomProp('theme-card-blocks-bg', undefined, colors.mediumGrey), - cardFormLabel: new CustomProp('theme-card-form-label', undefined, colors.slate), - cardCompactLabel: new CustomProp('theme-card-compact-label', undefined, colors.slate), - cardBlocksLabel: new CustomProp('theme-card-blocks-label', undefined, colors.slate), - cardFormBorder: new CustomProp('theme-card-form-border', undefined, 'lightgrey'), - cardCompactBorder: new CustomProp('theme-card-compact-border', undefined, colors.darkGrey), - cardEditingLayoutBg: new CustomProp('theme-card-editing-layout-bg', undefined, - 'rgba(192, 192, 192, 0.2)'), - cardEditingLayoutBorder: new CustomProp('theme-card-editing-layout-border', undefined, - colors.darkGrey), - - /* Card Lists */ - cardListFormBorder: new CustomProp('theme-card-list-form-border', undefined, colors.darkGrey), - cardListBlocksBorder: new CustomProp('theme-card-list-blocks-border', undefined, - colors.darkGrey), - - /* Selection */ - selection: new CustomProp('theme-selection', undefined, colors.selection), - selectionDarker: new CustomProp('theme-selection-darker', undefined, 'rgba(22,179,120,0.25)'), - selectionDarkest: new CustomProp('theme-selection-darkest', undefined, 'rgba(22,179,120,0.35)'), - selectionOpaqueFg: new CustomProp('theme-selection-opaque-fg', undefined, 'black'), - selectionOpaqueBg: new CustomProp('theme-selection-opaque-bg', undefined, - colors.selectionOpaque), - selectionOpaqueDarkBg: new CustomProp('theme-selection-opaque-dark-bg', undefined, - colors.selectionDarkerOpaque), - selectionHeader: new CustomProp('theme-selection-header', undefined, colors.mediumGrey), - - /* Widgets */ - widgetBg: new CustomProp('theme-widget-bg', undefined, 'white'), - widgetBorder: new CustomProp('theme-widget-border', undefined, colors.darkGrey), - widgetActiveBorder: new CustomProp('theme-widget-active-border', undefined, colors.lightGreen), - widgetInactiveStripesLight: new CustomProp('theme-widget-inactive-stripes-light', undefined, - colors.lightGrey), - widgetInactiveStripesDark: new CustomProp('theme-widget-inactive-stripes-dark', undefined, - colors.mediumGreyOpaque), - - /* Pinned Docs */ - pinnedDocFooterBg: new CustomProp('theme-pinned-doc-footer-bg', undefined, colors.light), - pinnedDocBorder: new CustomProp('theme-pinned-doc-border', undefined, colors.mediumGrey), - pinnedDocBorderHover: new CustomProp('theme-pinned-doc-border-hover', undefined, colors.slate), - pinnedDocEditorBg: new CustomProp('theme-pinned-doc-editor-bg', undefined, colors.mediumGrey), - - /* Raw Data */ - rawDataTableBorder: new CustomProp('theme-raw-data-table-border', undefined, colors.mediumGrey), - rawDataTableBorderHover: new CustomProp('theme-raw-data-table-border-hover', - undefined, colors.slate), - - /* Controls */ - controlFg: new CustomProp('theme-control-fg', undefined, vars.controlFg), - controlPrimaryFg: new CustomProp('theme-control-primary-fg', undefined, vars.primaryFg), - controlPrimaryBg: new CustomProp('theme-control-primary-bg', undefined, vars.primaryBg), - controlSecondaryFg: new CustomProp('theme-control-secondary-fg', undefined, colors.slate), - controlSecondaryDisabledFg: new CustomProp('theme-control-secondary-disabled-fg', - undefined, colors.darkGrey), - controlHoverFg: new CustomProp('theme-control-hover-fg', undefined, vars.controlFgHover), - controlPrimaryHoverBg: new CustomProp('theme-control-primary-hover-bg', undefined, - vars.primaryBgHover), - controlSecondaryHoverFg: new CustomProp('theme-control-secondary-hover-fg', undefined, - colors.dark), - controlSecondaryHoverBg: new CustomProp('theme-control-secondary-hover-bg', undefined, - colors.darkGrey), - controlDisabledFg: new CustomProp('theme-control-disabled-fg', undefined, colors.light), - controlDisabledBg: new CustomProp('theme-control-disabled-bg', undefined, colors.slate), - controlBorder: new CustomProp('theme-control-border', undefined, vars.controlBorder), - - /* Checkboxes */ - checkboxBg: new CustomProp('theme-checkbox-bg', undefined, colors.light), - checkboxSelectedFg: new CustomProp('theme-checkbox-selected-bg', undefined, colors.lightGreen), - checkboxDisabledBg: new CustomProp('theme-checkbox-disabled-bg', undefined, colors.darkGrey), - checkboxBorder: new CustomProp('theme-checkbox-border', undefined, colors.darkGrey), - checkboxBorderHover: new CustomProp('theme-checkbox-border-hover', undefined, colors.hover), - - /* Move Docs */ - moveDocsSelectedFg: new CustomProp('theme-move-docs-selected-fg', undefined, 'white'), - moveDocsSelectedBg: new CustomProp('theme-move-docs-selected-bg', undefined, colors.lightGreen), - moveDocsDisabledFg: new CustomProp('theme-move-docs-disabled-bg', undefined, colors.darkGrey), - - /* Filter Bar */ - filterBarButtonSavedFg: new CustomProp('theme-filter-bar-button-saved-fg', undefined, - colors.light), - filterBarButtonSavedBg: new CustomProp('theme-filter-bar-button-saved-bg', undefined, - colors.slate), - filterBarButtonSavedHoverBg: new CustomProp('theme-filter-bar-button-saved-hover-bg', undefined, - colors.darkGrey), - - /* Icons */ - iconDisabled: new CustomProp('theme-icon-disabled', undefined, colors.slate), - iconError: new CustomProp('theme-icon-error', undefined, colors.error), - - /* Icon Buttons */ - iconButtonFg: new CustomProp('theme-icon-button-fg', undefined, colors.light), - iconButtonPrimaryBg: new CustomProp('theme-icon-button-primary-bg', undefined, - colors.lightGreen), - iconButtonPrimaryHoverBg: new CustomProp('theme-icon-button-primary-hover-bg', - undefined, colors.darkGreen), - iconButtonSecondaryBg: new CustomProp('theme-icon-button-secondary-bg', undefined, - colors.darkGrey), - iconButtonSecondaryHoverBg: new CustomProp('theme-icon-button-secondary-hover-bg', - undefined, colors.slate), - - /* Left Panel */ - pageHoverBg: new CustomProp('theme-left-panel-page-hover-bg', undefined, colors.mediumGrey), - activePageFg: new CustomProp('theme-left-panel-active-page-fg', undefined, 'white'), - activePageBg: new CustomProp('theme-left-panel-active-page-bg', undefined, colors.darkBg), - disabledPageFg: new CustomProp('theme-left-panel-disabled-page-fg', undefined, colors.darkGrey), - pageOptionsFg: new CustomProp('theme-left-panel-page-options-bg', undefined, colors.slate), - pageOptionsHoverFg: new CustomProp('theme-left-panel-page-options-hover-fg', undefined, 'white'), - pageOptionsHoverBg: new CustomProp('theme-left-panel-page-options-hover-bg', undefined, - colors.darkGrey), - pageOptionsSelectedHoverBg: new CustomProp('theme-left-panel-page-options-selected-hover-bg', - undefined, colors.slate), - pageInitialsFg: new CustomProp('theme-left-panel-page-initials-fg', undefined, 'white'), - pageInitialsBg: new CustomProp('theme-left-panel-page-initials-bg', undefined, colors.slate), - pageInitialsEmojiBg: new CustomProp('theme-left-panel-page-emoji-fg', undefined, 'white'), - pageInitialsEmojiOutline: new CustomProp('theme-left-panel-page-emoji-outline', undefined, - 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), - 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), - rightPanelTabSelectedFg: new CustomProp('theme-right-panel-tab-selected-fg', undefined, - colors.dark), - rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined, - colors.lightGrey), - rightPanelTabSelectedIcon: new CustomProp('theme-right-panel-tab-selected-icon', undefined, - colors.lightGreen), - rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg', - undefined, colors.darkGreen), - rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen), - rightPanelSubtabSelectedFg: new CustomProp('theme-right-panel-subtab-selected-fg', undefined, - colors.dark), - rightPanelSubtabSelectedUnderline: new CustomProp('theme-right-panel-subtab-selected-underline', - undefined, colors.lightGreen), - rightPanelSubtabHoverFg: new CustomProp('theme-right-panel-subtab-hover-fg', undefined, - colors.darkGreen), - rightPanelSubtabHoverUnderline: new CustomProp('theme-right-panel-subtab-hover-underline', - undefined, colors.lightGreen), - rightPanelDisabledOverlay: new CustomProp('theme-right-panel-disabled-overlay', undefined, - 'white'), - rightPanelToggleButtonEnabledFg: new CustomProp('theme-right-panel-toggle-button-enabled-fg', - undefined, colors.light), - rightPanelToggleButtonEnabledBg: new CustomProp('theme-right-panel-toggle-button-enabled-bg', - undefined, colors.dark), - rightPanelToggleButtonDisabledFg: new CustomProp('theme-right-panel-toggle-button-disabled-fg', - undefined, colors.light), - rightPanelToggleButtonDisabledBg: new CustomProp('theme-right-panel-toggle-button-disabled-bg', - undefined, colors.mediumGreyOpaque), - rightPanelFieldSettingsBg: new CustomProp('theme-right-panel-field-settings-bg', - undefined, colors.mediumGreyOpaque), - rightPanelFieldSettingsButtonBg: new CustomProp('theme-right-panel-field-settings-button-bg', - undefined, 'lightgrey'), - rightPanelCustomWidgetButtonFg: new CustomProp('theme-right-panel-custom-widget-button-fg', - undefined, colors.dark), - rightPanelCustomWidgetButtonBg: new CustomProp('theme-right-panel-custom-widget-button-bg', - undefined, colors.darkGrey), - - /* Document History */ - documentHistorySnapshotFg: new CustomProp('theme-document-history-snapshot-fg', undefined, - colors.dark), - documentHistorySnapshotSelectedFg: new CustomProp('theme-document-history-snapshot-selected-fg', - undefined, colors.light), - documentHistorySnapshotBg: new CustomProp('theme-document-history-snapshot-bg', undefined, - 'white'), - documentHistorySnapshotSelectedBg: new CustomProp('theme-document-history-snapshot-selected-bg', - undefined, colors.dark), - documentHistorySnapshotBorder: new CustomProp('theme-document-history-snapshot-border', - undefined, colors.mediumGrey), - documentHistoryActivityText: new CustomProp('theme-document-history-activity-text', undefined, - colors.dark), - documentHistoryActivityLightText: new CustomProp('theme-document-history-activity-text-light', - undefined, '#333333'), - documentHistoryTableHeaderFg: new CustomProp('theme-document-history-table-header-fg', - undefined, '#000'), - documentHistoryTableBorder: new CustomProp('theme-document-history-table-border', - undefined, 'lightgray'), - documentHistoryTableBorderLight: new CustomProp('theme-document-history-table-border-light', - undefined, colors.darkGrey), - - /* Accents */ - accentIcon: new CustomProp('theme-accent-icon', undefined, colors.lightGreen), - accentBorder: new CustomProp('theme-accent-border', undefined, colors.lightGreen), - accentText: new CustomProp('theme-accent-text', undefined, colors.lightGreen), - - /* Inputs */ - inputFg: new CustomProp('theme-input-fg', undefined, 'black'), - inputBg: new CustomProp('theme-input-bg', undefined, 'white'), - inputDisabledFg: new CustomProp('theme-input-disabled-fg', undefined, colors.slate), - inputDisabledBg: new CustomProp('theme-input-disabled-bg', undefined, colors.lightGrey), - inputPlaceholderFg: new CustomProp('theme-input-placeholder-fg', undefined, '#757575'), - inputBorder: new CustomProp('theme-input-border', undefined, colors.darkGrey), - inputValid: new CustomProp('theme-input-valid', undefined, colors.lightGreen), - inputInvalid: new CustomProp('theme-input-invalid', undefined, colors.error), - inputFocus: new CustomProp('theme-input-focus', undefined, '#5E9ED6'), - inputReadonlyBg: new CustomProp('theme-input-readonly-bg', undefined, colors.lightGrey), - inputReadonlyBorder: new CustomProp('theme-input-readonly-border', undefined, colors.mediumGreyOpaque), - - /* Choice Tokens */ - choiceTokenFg: new CustomProp('theme-choice-token-fg', undefined, '#000000'), - choiceTokenBlankFg: new CustomProp('theme-choice-token-blank-fg', undefined, colors.slate), - choiceTokenBg: new CustomProp('theme-choice-token-bg', undefined, colors.mediumGreyOpaque), - choiceTokenSelectedBg: new CustomProp('theme-choice-token-selected-bg', undefined, colors.darkGrey), - choiceTokenSelectedBorder: new CustomProp('theme-choice-token-selected-border', undefined, colors.lightGreen), - choiceTokenInvalidFg: new CustomProp('theme-choice-token-invalid-fg', undefined, '#000000'), - choiceTokenInvalidBg: new CustomProp('theme-choice-token-invalid-bg', undefined, 'white'), - choiceTokenInvalidBorder: new CustomProp('theme-choice-token-invalid-border', undefined, colors.error), - - /* Choice Entry */ - choiceEntryBg: new CustomProp('theme-choice-entry-bg', undefined, 'white'), - choiceEntryBorder: new CustomProp('theme-choice-entry-border', undefined, colors.darkGrey), - choiceEntryBorderHover: new CustomProp('theme-choice-entry-border-hover', undefined, - colors.hover), - - /* Select Buttons */ - selectButtonFg: new CustomProp('theme-select-button-fg', undefined, colors.dark), - selectButtonPlaceholderFg: new CustomProp('theme-select-button-placeholder-fg', undefined, - colors.slate), - selectButtonBg: new CustomProp('theme-select-button-bg', undefined, 'white'), - selectButtonBorder: new CustomProp('theme-select-button-border', undefined, colors.darkGrey), - selectButtonBorderInvalid: new CustomProp('theme-select-button-border-invalid', undefined, - colors.error), - - /* Menus */ - menuText: new CustomProp('theme-menu-text', undefined, colors.slate), - menuLightText: new CustomProp('theme-menu-light-text', undefined, colors.slate), - menuBg: new CustomProp('theme-menu-bg', undefined, 'white'), - menuSubheaderFg: new CustomProp('theme-menu-subheader-fg', undefined, colors.dark), - menuBorder: new CustomProp('theme-menu-border', undefined, colors.mediumGreyOpaque), - menuShadow: new CustomProp('theme-menu-shadow', undefined, 'rgba(38, 38, 51, 0.6)'), - - /* Menu Items */ - menuItemFg: new CustomProp('theme-menu-item-fg', undefined, 'black'), - menuItemSelectedFg: new CustomProp('theme-menu-item-selected-fg', undefined, colors.light), - menuItemSelectedBg: new CustomProp('theme-menu-item-selected-bg', undefined, vars.primaryBg), - menuItemDisabledFg: new CustomProp('theme-menu-item-disabled-fg', undefined, colors.darkGrey), - menuItemIconFg: new CustomProp('theme-menu-item-icon-fg', undefined, colors.slate), - menuItemIconSelectedFg: new CustomProp('theme-menu-item-icon-selected-fg', undefined, 'white'), - - /* Autocomplete */ - autocompleteMatchText: new CustomProp('theme-autocomplete-match-text', undefined, - colors.lightGreen), - autocompleteSelectedMatchText: new CustomProp('theme-autocomplete-selected-match-text', - undefined, colors.lighterGreen), - autocompleteItemSelectedBg: new CustomProp('theme-autocomplete-item-selected-bg', undefined, - colors.mediumGreyOpaque), - autocompleteAddNewCircleFg: new CustomProp('theme-autocomplete-add-new-circle-fg', undefined, - colors.light), - autocompleteAddNewCircleBg: new CustomProp('theme-autocomplete-add-new-circle-bg', undefined, - colors.lightGreen), - autocompleteAddNewCircleSelectedBg: new CustomProp( - 'theme-autocomplete-add-new-circle-selected-bg', undefined, colors.darkGreen), - - /* Search */ - searchBorder: new CustomProp('theme-search-border', undefined, 'grey'), - searchPrevNextButtonFg: new CustomProp('theme-search-prev-next-button-fg', undefined, - colors.slate), - searchPrevNextButtonBg: new CustomProp('theme-search-prev-next-button-bg', undefined, - colors.mediumGrey), - - /* Loaders */ - loaderFg: new CustomProp('theme-loader-fg', undefined, colors.lightGreen), - loaderBg: new CustomProp('theme-loader-bg', undefined, colors.darkGrey), - - /* Site Switcher */ - siteSwitcherActiveFg: new CustomProp('theme-site-switcher-active-fg', undefined, colors.light), - siteSwitcherActiveBg: new CustomProp('theme-site-switcher-active-bg', undefined, colors.dark), - - /* Doc Menu */ - docMenuDocOptionsFg: new CustomProp('theme-doc-menu-doc-options-fg', undefined, colors.darkGrey), - docMenuDocOptionsHoverFg: new CustomProp('theme-doc-menu-doc-options-hover-fg', undefined, - colors.slate), - docMenuDocOptionsHoverBg: new CustomProp('theme-doc-menu-doc-options-hover-bg', undefined, - colors.darkGrey), - - /* Shortcut Keys */ - shortcutKeyFg: new CustomProp('theme-shortcut-key-fg', undefined, 'black'), - shortcutKeyPrimaryFg: new CustomProp('theme-shortcut-key-primary-fg', undefined, - colors.darkGreen), - shortcutKeySecondaryFg: new CustomProp('theme-shortcut-key-secondary-fg', undefined, - colors.slate), - shortcutKeyBg: new CustomProp('theme-shortcut-key-bg', undefined, 'white'), - shortcutKeyBorder: new CustomProp('theme-shortcut-key-border', undefined, colors.slate), - - /* Breadcrumbs */ - breadcrumbsTagFg: new CustomProp('theme-breadcrumbs-tag-fg', undefined, 'white'), - breadcrumbsTagBg: new CustomProp('theme-breadcrumbs-tag-bg', undefined, colors.slate), - breadcrumbsTagAlertBg: new CustomProp('theme-breadcrumbs-tag-alert-fg', undefined, colors.error), - - /* Page Widget Picker */ - widgetPickerPrimaryBg: new CustomProp('theme-widget-picker-primary-bg', undefined, 'white'), - widgetPickerSecondaryBg: new CustomProp('theme-widget-picker-secondary-bg', undefined, - colors.lightGrey), - widgetPickerItemFg: new CustomProp('theme-widget-picker-item-fg', undefined, colors.dark), - widgetPickerItemSelectedBg: new CustomProp('theme-widget-picker-item-selected-bg', undefined, - colors.mediumGrey), - widgetPickerItemDisabledBg: new CustomProp('theme-widget-picker-item-disabled-bg', undefined, - colors.mediumGrey), - widgetPickerIcon: new CustomProp('theme-widget-picker-icon', undefined, colors.slate), - widgetPickerPrimaryIcon: new CustomProp('theme-widget-picker-primary-icon', undefined, - colors.lightGreen), - widgetPickerSummaryIcon: new CustomProp('theme-widget-picker-summary-icon', undefined, - colors.darkGreen), - widgetPickerBorder: new CustomProp('theme-widget-picker-border', undefined, colors.mediumGrey), - widgetPickerShadow: new CustomProp('theme-widget-picker-shadow', undefined, - 'rgba(38,38,51,0.20)'), - - /* Code View */ - codeViewText: new CustomProp('theme-code-view-text', undefined, '#444'), - codeViewKeyword: new CustomProp('theme-code-view-keyword', undefined, '#444'), - codeViewComment: new CustomProp('theme-code-view-comment', undefined, '#888888'), - codeViewMeta: new CustomProp('theme-code-view-meta', undefined, '#1F7199'), - codeViewTitle: new CustomProp('theme-code-view-title', undefined, '#880000'), - codeViewParams: new CustomProp('theme-code-view-params', undefined, '#444'), - codeViewString: new CustomProp('theme-code-view-string', undefined, '#880000'), - codeViewNumber: new CustomProp('theme-code-view-number', undefined, '#880000'), - codeViewBuiltin: new CustomProp('theme-code-view-builtin', undefined, '#397300'), - codeViewLiteral: new CustomProp('theme-code-view-literal', undefined, '#78A960'), - - /* Importer */ - importerTableInfoBorder: new CustomProp('theme-importer-table-info-border', undefined, colors.darkGrey), - importerPreviewBorder: new CustomProp('theme-importer-preview-border', undefined, - colors.darkGrey), - importerSkippedTableOverlay: new CustomProp('theme-importer-skipped-table-overlay', undefined, - colors.mediumGrey), - importerMatchIcon: new CustomProp('theme-importer-match-icon', undefined, colors.darkGrey), - importerOutsideBg: new CustomProp('theme-importer-outside-bg', undefined, colors.lightGrey), - importerMainContentBg: new CustomProp('theme-importer-main-content-bg', undefined, '#FFFFFF'), - - // tabs - importerActiveFileBg: new CustomProp('theme-importer-active-file-bg', undefined, colors.lightGreen), - importerActiveFileFg: new CustomProp('theme-importer-active-file-fg', undefined, colors.light), - importerInactiveFileBg: new CustomProp('theme-importer-inactive-file-bg', undefined, colors.mediumGrey), - importerInactiveFileFg: new CustomProp('theme-importer-inactive-file-fg', undefined, colors.light), - - /* Menu Toggles */ - menuToggleFg: new CustomProp('theme-menu-toggle-fg', undefined, colors.slate), - menuToggleHoverFg: new CustomProp('theme-menu-toggle-hover-fg', undefined, colors.darkGreen), - menuToggleActiveFg: new CustomProp('theme-menu-toggle-active-fg', undefined, colors.darkerGreen), - menuToggleBg: new CustomProp('theme-menu-toggle-bg', undefined, 'white'), - menuToggleBorder: new CustomProp('theme-menu-toggle-border', undefined, colors.slate), - - /* Info Button */ - infoButtonFg: new CustomProp('theme-info-button-fg', undefined, "#8F8F8F"), - infoButtonHoverFg: new CustomProp('theme-info-button-hover-fg', undefined, "#707070"), - infoButtonActiveFg: new CustomProp('theme-info-button-active-fg', undefined, "#5C5C5C"), - - /* Button Groups */ - buttonGroupFg: new CustomProp('theme-button-group-fg', undefined, colors.dark), - buttonGroupLightFg: new CustomProp('theme-button-group-light-fg', undefined, colors.slate), - buttonGroupBg: new CustomProp('theme-button-group-bg', undefined, 'transparent'), - buttonGroupBgHover: new CustomProp('theme-button-group-bg-hover', undefined, - colors.hover), - buttonGroupIcon: new CustomProp('theme-button-group-icon', undefined, colors.slate), - buttonGroupBorder: new CustomProp('theme-button-group-border', undefined, colors.darkGrey), - buttonGroupBorderHover: new CustomProp('theme-button-group-border-hover', undefined, - colors.hover), - buttonGroupSelectedFg: new CustomProp('theme-button-group-selected-fg', undefined, colors.light), - buttonGroupLightSelectedFg: new CustomProp('theme-button-group-light-selected-fg', undefined, - colors.lightGreen), - buttonGroupSelectedBg: new CustomProp('theme-button-group-selected-bg', undefined, colors.dark), - buttonGroupSelectedBorder: new CustomProp('theme-button-group-selected-border', undefined, - colors.dark), - - /* Access Rules */ - accessRulesTableHeaderFg: new CustomProp('theme-access-rules-table-header-fg', undefined, - colors.dark), - accessRulesTableHeaderBg: new CustomProp('theme-access-rules-table-header-bg', undefined, - colors.mediumGrey), - accessRulesTableBodyFg: new CustomProp('theme-access-rules-table-body-fg', undefined, - colors.dark), - accessRulesTableBodyLightFg: new CustomProp('theme-access-rules-table-body-light-fg', undefined, - colors.darkGrey), - accessRulesTableBorder: new CustomProp('theme-access-rules-table-border', undefined, - colors.slate), - accessRulesColumnListBorder: new CustomProp('theme-access-rules-column-list-border', undefined, - colors.darkGrey), - accessRulesColumnItemFg: new CustomProp('theme-access-rules-column-item-fg', undefined, - colors.dark), - accessRulesColumnItemBg: new CustomProp('theme-access-rules-column-item-bg', undefined, - colors.mediumGreyOpaque), - accessRulesColumnItemIconFg: new CustomProp('theme-access-rules-column-item-icon-fg', undefined, - colors.slate), - accessRulesColumnItemIconHoverFg: new CustomProp('theme-access-rules-column-item-icon-hover-fg', - undefined, colors.light), - accessRulesColumnItemIconHoverBg: new CustomProp('theme-access-rules-column-item-icon-hover-bg', - undefined, colors.slate), - accessRulesFormulaEditorBg: new CustomProp('theme-access-rules-formula-editor-bg', undefined, - 'white'), - accessRulesFormulaEditorBorderHover: new CustomProp( - 'theme-access-rules-formula-editor-border-hover', undefined, colors.darkGrey), - accessRulesFormulaEditorBgDisabled: new CustomProp( - 'theme-access-rules-formula-editor-bg-disabled', undefined, colors.mediumGreyOpaque), - accessRulesFormulaEditorFocus: new CustomProp('theme-access-rules-formula-editor-focus', - undefined, colors.cursor), - - /* Cells */ - cellFg: new CustomProp('theme-cell-fg', undefined, 'black'), - cellBg: new CustomProp('theme-cell-bg', undefined, '#FFFFFF00'), - cellZebraBg: new CustomProp('theme-cell-zebra-bg', undefined, '#F8F8F8'), - - /* Charts */ - chartFg: new CustomProp('theme-chart-fg', undefined, '#444'), - chartBg: new CustomProp('theme-chart-bg', undefined, '#fff'), - chartLegendBg: new CustomProp('theme-chart-legend-bg', undefined, '#FFFFFF80'), - chartXAxis: new CustomProp('theme-chart-x-axis', undefined, '#444'), - chartYAxis: new CustomProp('theme-chart-y-axis', undefined, '#444'), - - /* Comments */ - commentsPopupHeaderBg: new CustomProp('theme-comments-popup-header-bg', undefined, - colors.lightGrey), - commentsPopupBodyBg: new CustomProp('theme-comments-popup-body-bg', undefined, 'white'), - commentsPopupBorder: new CustomProp('theme-comments-popup-border', undefined, colors.darkGrey), - commentsUserNameFg: new CustomProp('theme-comments-user-name-fg', undefined, colors.darkText), - commentsPanelTopicBg: new CustomProp('theme-comments-panel-topic-bg', undefined, 'white'), - commentsPanelTopicBorder: new CustomProp('theme-comments-panel-topic-border', undefined, '#ccc'), - commentsPanelResolvedTopicBg: new CustomProp('theme-comments-panel-resolved-topic-bg', undefined, - vars.labelActiveBg), - - /* Date Picker */ - datePickerSelectedFg: new CustomProp('theme-date-picker-selected-fg', undefined, - colors.light), - datePickerSelectedBg: new CustomProp('theme-date-picker-selected-bg', undefined, - '#286090'), - datePickerSelectedBgHover: new CustomProp('theme-date-picker-selected-bg-hover', - undefined, '#204d74'), - datePickerTodayFg: new CustomProp('theme-date-picker-today-fg', undefined, - colors.light), - datePickerTodayBg: new CustomProp('theme-date-picker-today-bg', undefined, - colors.lightGreen), - datePickerTodayBgHover: new CustomProp('theme-date-picker-today-bg-hover', undefined, - colors.darkGreen), - datePickerRangeStartEndBg: new CustomProp('theme-date-picker-range-start-end-bg', undefined, - '#777'), - datePickerRangeStartEndBgHover: new CustomProp('theme-date-picker-range-start-end-bg-hover', - undefined, '#5E5E5E'), - datePickerRangeBg: new CustomProp('theme-date-picker-range-bg', undefined, - colors.mediumGreyOpaque), - datePickerRangeBgHover: new CustomProp('theme-date-picker-range-bg-hover', undefined, - colors.darkGrey), - - /* Tutorials */ - tutorialsPopupBorder: new CustomProp('theme-tutorials-popup-border', undefined, - colors.darkGrey), - tutorialsPopupHeaderFg: new CustomProp('theme-tutorials-popup-header-fg', undefined, - colors.lightGreen), - tutorialsPopupBoxBg: new CustomProp('theme-tutorials-popup-box-bg', undefined, '#F5F5F5'), - tutorialsPopupCodeFg: new CustomProp('theme-tutorials-popup-code-fg', undefined, '#333333'), - tutorialsPopupCodeBg: new CustomProp('theme-tutorials-popup-code-bg', undefined, '#FFFFFF'), - tutorialsPopupCodeBorder: new CustomProp('theme-tutorials-popup-code-border', undefined, '#E1E4E5'), - - /* Ace */ - aceEditorBg: new CustomProp('theme-ace-editor-bg', undefined, 'white'), - aceAutocompletePrimaryFg: new CustomProp('theme-ace-autocomplete-primary-fg', undefined, '#444'), - aceAutocompleteSecondaryFg: new CustomProp('theme-ace-autocomplete-secondary-fg', undefined, - '#8f8f8f'), - aceAutocompleteHighlightedFg: new CustomProp('theme-ace-autocomplete-highlighted-fg', undefined, '#000'), - aceAutocompleteBg: new CustomProp('theme-ace-autocomplete-bg', undefined, '#FBFBFB'), - aceAutocompleteBorder: new CustomProp('theme-ace-autocomplete-border', undefined, 'lightgray'), - aceAutocompleteLink: new CustomProp('theme-ace-autocomplete-link', undefined, colors.lightGreen), - aceAutocompleteLinkHighlighted: new CustomProp('theme-ace-autocomplete-link-highlighted', - undefined, colors.darkGreen), - aceAutocompleteActiveLineBg: new CustomProp('theme-ace-autocomplete-active-line-bg', - undefined, '#CAD6FA'), - aceAutocompleteLineBorderHover: new CustomProp('theme-ace-autocomplete-line-border-hover', - undefined, '#abbffe'), - aceAutocompleteLineBgHover: new CustomProp('theme-ace-autocomplete-line-bg-hover', - undefined, 'rgba(233,233,253,0.4)'), - - /* Color Select */ - colorSelectFg: new CustomProp('theme-color-select-fg', undefined, colors.dark), - colorSelectBg: new CustomProp('theme-color-select-bg', undefined, 'white'), - colorSelectShadow: new CustomProp('theme-color-select-shadow', undefined, - 'rgba(38,38,51,0.6)'), - colorSelectFontOptionsBorder: new CustomProp('theme-color-select-font-options-border', - undefined, colors.darkGrey), - colorSelectFontOptionFg: new CustomProp('theme-color-select-font-option-fg', - undefined, colors.dark), - colorSelectFontOptionBgHover: new CustomProp('theme-color-select-font-option-bg-hover', - undefined, colors.lightGrey), - colorSelectFontOptionFgSelected: new CustomProp('theme-color-select-font-option-fg-selected', - undefined, colors.light), - colorSelectFontOptionBgSelected: new CustomProp('theme-color-select-font-option-bg-selected', - undefined, colors.dark), - colorSelectColorSquareBorder: new CustomProp('theme-color-select-color-square-border', - undefined, colors.darkGrey), - colorSelectColorSquareBorderEmpty: new CustomProp('theme-color-select-color-square-border-empty', - undefined, colors.dark), - colorSelectInputFg: new CustomProp('theme-color-select-input-fg', - undefined, colors.slate), - colorSelectInputBg: new CustomProp('theme-color-select-input-bg', - undefined, 'white'), - colorSelectInputBorder: new CustomProp('theme-color-select-input-border', - undefined, colors.darkGrey), - - /* Highlighted Code */ - highlightedCodeBlockBg: new CustomProp('theme-highlighted-code-block-bg', undefined, - colors.light), - highlightedCodeBlockBgDisabled: new CustomProp('theme-highlighted-code-block-bg-disabled', - undefined, colors.mediumGreyOpaque), - highlightedCodeFg: new CustomProp('theme-highlighted-code-fg', - undefined, colors.slate), - highlightedCodeBorder: new CustomProp('theme-highlighted-code-border', - undefined, colors.darkGrey), - highlightedCodeBgDisabled: new CustomProp('theme-highlighted-code-bg-disabled', - undefined, colors.mediumGreyOpaque), - - /* Login Page */ - loginPageBg: new CustomProp('theme-login-page-bg', undefined, 'white'), - loginPageBackdrop: new CustomProp('theme-login-page-backdrop', undefined, '#F5F8FA'), - loginPageLine: new CustomProp('theme-login-page-line', undefined, colors.lightGrey), - loginPageGoogleButtonFg: new CustomProp('theme-login-page-google-button-fg', undefined, - colors.dark), - loginPageGoogleButtonBg: new CustomProp('theme-login-page-google-button-bg', undefined, - colors.lightGrey), - loginPageGoogleButtonBgHover: new CustomProp('theme-login-page-google-button-bg-hover', - undefined, colors.mediumGrey), - loginPageGoogleButtonBorder: new CustomProp('theme-login-page-google-button-border', undefined, - colors.darkGrey), - - /* Formula Assistant */ - formulaAssistantHeaderBg: new CustomProp( - 'theme-formula-assistant-header-bg', undefined, colors.lightGrey), - formulaAssistantBorder: new CustomProp( - 'theme-formula-assistant-border', undefined, colors.darkGrey), - formulaAssistantPreformattedTextBg: new CustomProp( - 'theme-formula-assistant-preformatted-text-bg', undefined, colors.lightGrey), - - /* Attachments */ - attachmentsEditorButtonFg: new CustomProp( - 'theme-attachments-editor-button-fg', undefined, colors.darkGreen), - attachmentsEditorButtonHoverFg: new CustomProp( - 'theme-attachments-editor-button-hover-fg', undefined, colors.lightGreen), - attachmentsEditorButtonBg: new CustomProp( - 'theme-attachments-editor-button-bg', undefined, colors.light), - attachmentsEditorButtonHoverBg: new CustomProp( - 'theme-attachments-editor-button-hover-bg', undefined, colors.mediumGreyOpaque), - attachmentsEditorButtonBorder: new CustomProp( - 'theme-attachments-editor-button-border', undefined, colors.darkGrey), - attachmentsEditorButtonIcon: new CustomProp( - 'theme-attachments-editor-button-icon', undefined, colors.slate), - attachmentsEditorBorder: new CustomProp( - 'theme-attachments-editor-border', undefined, colors.mediumGreyOpaque), - attachmentsCellIconFg: new CustomProp( - 'theme-attachments-cell-icon-fg', undefined, 'white'), - attachmentsCellIconBg: new CustomProp( - 'theme-attachments-cell-icon-bg', undefined, colors.darkGrey), - attachmentsCellIconHoverBg: new CustomProp( - 'theme-attachments-cell-icon-hover-bg', undefined, '#929299'), - - /* Announcement Popups */ - announcementPopupFg: new CustomProp('theme-announcement-popup-fg', undefined, '#000000'), - announcementPopupBg: new CustomProp('theme-announcement-popup-bg', undefined, colors.selectionOpaque), - - /* Switches */ - switchSliderFg: new CustomProp('theme-switch-slider-fg', undefined, '#ccc'), - switchCircleFg: new CustomProp('theme-switch-circle-fg', undefined, 'white'), - - /* Toggle Checkboxes */ - toggleCheckboxFg: new CustomProp('theme-toggle-checkbox-fg', undefined, '#606060'), - - /* Numeric Spinners */ - numericSpinnerFg: new CustomProp('theme-numeric-spinner-fg', undefined, '#606060'), - - /* Custom Widget Gallery */ - widgetGalleryBorder: new CustomProp('theme-widget-gallery-border', undefined, colors.darkGrey), - widgetGalleryBorderSelected: new CustomProp('theme-widget-gallery-border-selected', undefined, - colors.lightGreen), - widgetGalleryShadow: new CustomProp('theme-widget-gallery-shadow', undefined, '#0000001A'), - widgetGalleryBgHover: new CustomProp('theme-widget-gallery-bg-hover', undefined, - colors.lightGrey), - widgetGallerySecondaryHeaderFg: new CustomProp('theme-widget-gallery-secondary-header-fg', - undefined, colors.light), - widgetGallerySecondaryHeaderBg: new CustomProp('theme-widget-gallery-secondary-header-bg', - undefined, colors.slate), - widgetGallerySecondaryHeaderBgHover: new CustomProp( - 'theme-widget-gallery-secondary-header-bg-hover', undefined, '#7E7E85'), - - /* Markdown Cell */ - markdownCellLightBg: new CustomProp('theme-markdown-cell-light-bg', undefined, colors.lightGrey), - markdownCellLightBorder: new CustomProp('theme-markdown-cell-light-border', undefined, - colors.mediumGreyOpaque), - markdownCellMediumBorder: new CustomProp('theme-markdown-cell-medium-border', undefined, - colors.darkGrey), +export const vars = { + ...tokens, + ...zIndexes, +}; - /* App Header */ - appHeaderBg: new CustomProp('theme-app-header-bg', undefined, colors.light), - appHeaderBorder: new CustomProp('theme-app-header-border', undefined, colors.mediumGreyOpaque), - appHeaderBorderHover: new CustomProp('theme-app-header-border-hover', undefined, colors.slate), - /* Card Button */ - cardButtonBorder: new CustomProp('theme-card-button-border', undefined, colors.darkGrey), - cardButtonBorderSelected: new CustomProp('theme-card-button-border-selected', undefined, - colors.lightGreen), - cardButtonShadow: new CustomProp('theme-card-button-shadow', undefined, "#0000001A"), +/** + * @deprecated Consume the {@link tokens} object directly when creating new component-specific theme variables. + */ +export const theme = { + ...legacyVariables }; -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 cssVars = values(vars).map(v => v.decl()).filter(v => !!v).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 +123,8 @@ const cssFontStyles = ` } `; -const cssVarsOnly = styled('div', cssColors + cssVars); -const cssBodyVars = styled('div', cssFontParams + cssColors + cssVars + cssBorderBox + cssInputFonts + cssFontStyles); +const cssRootVars = cssVars; +const cssReset = cssBorderBox + cssInputFonts + cssFontStyles; const cssBody = styled('body', ` margin: 0; @@ -980,10 +134,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 +216,16 @@ 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 all base grist rules and styles in the grist-base layer. + * See app/client/app.css for layers order */ + getOrCreateStyleElement('grist-root-css').textContent = ` +@layer grist-base { + :root { + ${cssRootVars} + } + ${!varsOnly && cssReset} +}`; + 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..1032ac88a8 100644 --- a/app/client/ui2018/theme.ts +++ b/app/client/ui2018/theme.ts @@ -1,14 +1,15 @@ 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'; +import { legacyVariables, Theme, ThemeAppearance, ThemePrefs, ThemeTokens, tokens } from 'app/common/ThemePrefs'; +import { getThemeTokens } from 'app/common/Themes'; import { getGristConfig } from 'app/common/urlUtils'; import { Computed, Observable } from 'grainjs'; import isEqual from 'lodash/isEqual'; -const DEFAULT_LIGHT_THEME: Theme = {appearance: 'light', colors: getThemeColors('GristLight')}; -const DEFAULT_DARK_THEME: Theme = {appearance: 'dark', colors: getThemeColors('GristDark')}; +const DEFAULT_LIGHT_THEME: Theme = {appearance: 'light', colors: getThemeTokens('GristLight')}; +const DEFAULT_DARK_THEME: Theme = {appearance: 'dark', colors: getThemeTokens('GristDark')}; /** * A singleton observable for the current user's Grist theme preferences. @@ -66,11 +67,11 @@ export function gristThemeObs() { /** * Attaches the current theme's CSS variables to the document, and * re-attaches them whenever the theme changes. + * + * When custom CSS is enabled (and theme selection is then unavailable in the UI), + * default light theme variables are attached. */ export function attachTheme() { - // Custom CSS is incompatible with custom themes. - if (getGristConfig().enableCustomCss) { return; } - // Attach the current theme's variables to the DOM. attachCssThemeVars(gristThemeObs().get()); @@ -103,25 +104,44 @@ function getThemeFromPrefs(themePrefs: ThemePrefs, userAgentPrefersDarkTheme: bo appearance = userAgentPrefersDarkTheme ? 'dark' : 'light'; } - let nameOrColors = themePrefs.colors[appearance]; + let nameOrTokens = themePrefs.colors[appearance]; if (urlParams?.themeName) { - nameOrColors = urlParams?.themeName; + nameOrTokens = urlParams?.themeName; } - let colors: ThemeColors; - if (typeof nameOrColors === 'string') { - colors = getThemeColors(nameOrColors); + let themeTokens: ThemeTokens; + if (typeof nameOrTokens === 'string') { + themeTokens = getThemeTokens(nameOrTokens); } else { - colors = nameOrColors; + themeTokens = nameOrTokens; } - return {appearance, colors}; + return {appearance, colors: themeTokens}; } -function attachCssThemeVars({appearance, colors: themeColors}: Theme) { - // Prepare the custom properties needed for applying the theme. - const properties = Object.entries(themeColors) - .map(([name, value]) => `--grist-theme-${name}: ${value};`); +function attachCssThemeVars({appearance, colors: themeTokens}: Theme) { + const properties = Object.entries(themeTokens || {}) + .filter(([name]) => name !== 'legacyVariables') + .map(([tokenName, value]) => { + if (tokenName in tokens) { + const cssProp = tokens[tokenName as keyof typeof tokens]; + cssProp.value = value; + return cssProp.decl(); + } + return undefined; + }) + .filter((prop): prop is string => prop !== undefined); + + properties.push(...Object.entries(themeTokens.legacyVariables || {}) + .map(([tokenName, value]) => { + if (tokenName in legacyVariables) { + const cssProp = legacyVariables[tokenName as keyof typeof legacyVariables]; + cssProp.value = value; + return cssProp.decl(); + } + return undefined; + }) + .filter((prop): prop is string => prop !== undefined)); // Include properties for styling the scrollbar. properties.push(...getCssThemeScrollbarProperties(appearance)); @@ -130,9 +150,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' layer 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 +198,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/CssCustomProp.ts b/app/common/CssCustomProp.ts new file mode 100644 index 0000000000..618d5d20af --- /dev/null +++ b/app/common/CssCustomProp.ts @@ -0,0 +1,21 @@ +const VAR_PREFIX = 'grist'; + +export class CssCustomProp { + constructor(public name: string, public value?: string | CssCustomProp, public fallback?: string | CssCustomProp) { + + } + + public decl(): string | undefined { + if (this.value === undefined) { return undefined; } + + return `--${VAR_PREFIX}-${this.name}: ${this.value};`; + } + + public toString(): string { + let value = `--${VAR_PREFIX}-${this.name}`; + if (this.fallback) { + value += `, ${this.fallback}`; + } + return `var(${value})`; + } +} diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts deleted file mode 100644 index 1a6244bdb3..0000000000 --- a/app/common/ThemePrefs-ti.ts +++ /dev/null @@ -1,473 +0,0 @@ -/** - * This module was automatically generated by `ts-interface-builder` - */ -import * as t from "ts-interface-checker"; -// tslint:disable:object-literal-key-quotes - -export const ThemePrefs = t.iface([], { - "appearance": "ThemeAppearance", - "syncWithOS": "boolean", - "colors": t.iface([], { - "light": "ThemeNameOrColors", - "dark": "ThemeNameOrColors", - }), -}); - -export const ThemeAppearance = t.union(t.lit('light'), t.lit('dark')); - -export const ThemeNameOrColors = t.union("ThemeName", "ThemeColors"); - -export const ThemeName = t.union(t.lit('GristLight'), t.lit('GristDark')); - -export const Theme = t.iface([], { - "appearance": "ThemeAppearance", - "colors": "ThemeColors", -}); - -export const ThemeColors = t.iface([], { - "text": "string", - "text-light": "string", - "text-medium": "string", - "text-dark": "string", - "text-error": "string", - "text-error-hover": "string", - "text-danger": "string", - "text-disabled": "string", - "page-bg": "string", - "page-backdrop": "string", - "page-panels-main-panel-bg": "string", - "page-panels-left-panel-bg": "string", - "page-panels-right-panel-bg": "string", - "page-panels-top-header-bg": "string", - "page-panels-bottom-footer-bg": "string", - "page-panels-border": "string", - "page-panels-border-resizing": "string", - "page-panels-side-panel-opener-fg": "string", - "page-panels-side-panel-opener-active-fg": "string", - "page-panels-side-panel-opener-active-bg": "string", - "add-new-circle-fg": "string", - "add-new-circle-bg": "string", - "add-new-circle-hover-bg": "string", - "add-new-circle-small-fg": "string", - "add-new-circle-small-bg": "string", - "add-new-circle-small-hover-bg": "string", - "top-bar-button-primary-fg": "string", - "top-bar-button-secondary-fg": "string", - "top-bar-button-disabled-fg": "string", - "top-bar-button-error-fg": "string", - "notifications-panel-header-bg": "string", - "notifications-panel-body-bg": "string", - "notifications-panel-border": "string", - "toast-text": "string", - "toast-text-light": "string", - "toast-bg": "string", - "toast-memo-text": "string", - "toast-memo-bg": "string", - "toast-error-icon": "string", - "toast-error-bg": "string", - "toast-success-icon": "string", - "toast-success-bg": "string", - "toast-warning-icon": "string", - "toast-warning-bg": "string", - "toast-info-icon": "string", - "toast-info-bg": "string", - "toast-control-fg": "string", - "toast-control-info-fg": "string", - "tooltip-fg": "string", - "tooltip-bg": "string", - "tooltip-icon": "string", - "tooltip-close-button-fg": "string", - "tooltip-close-button-hover-fg": "string", - "tooltip-close-button-hover-bg": "string", - "modal-bg": "string", - "modal-backdrop": "string", - "modal-border": "string", - "modal-border-dark": "string", - "modal-border-hover": "string", - "modal-shadow-inner": "string", - "modal-shadow-outer": "string", - "modal-close-button-fg": "string", - "modal-backdrop-close-button-fg": "string", - "modal-backdrop-close-button-hover-fg": "string", - "popup-bg": "string", - "popup-secondary-bg": "string", - "popup-shadow-inner": "string", - "popup-shadow-outer": "string", - "popup-close-button-fg": "string", - "prompt-fg": "string", - "progress-bar-fg": "string", - "progress-bar-error-fg": "string", - "progress-bar-bg": "string", - "link": "string", - "link-hover": "string", - "hover": "string", - "hover-light": "string", - "cell-editor-fg": "string", - "cell-editor-placeholder-fg": "string", - "cell-editor-bg": "string", - "cursor": "string", - "cursor-inactive": "string", - "cursor-readonly": "string", - "table-header-fg": "string", - "table-header-selected-fg": "string", - "table-header-bg": "string", - "table-header-selected-bg": "string", - "table-header-border": "string", - "table-body-bg": "string", - "table-body-border": "string", - "table-add-new-bg": "string", - "table-scroll-shadow": "string", - "table-frozen-columns-border": "string", - "table-drag-drop-indicator": "string", - "table-drag-drop-shadow": "string", - "table-cell-summary-bg": "string", - "card-compact-widget-bg": "string", - "card-compact-record-bg": "string", - "card-blocks-bg": "string", - "card-form-label": "string", - "card-compact-label": "string", - "card-blocks-label": "string", - "card-form-border": "string", - "card-compact-border": "string", - "card-editing-layout-bg": "string", - "card-editing-layout-border": "string", - "card-list-form-border": "string", - "card-list-blocks-border": "string", - "selection": "string", - "selection-darker": "string", - "selection-darkest": "string", - "selection-opaque-fg": "string", - "selection-opaque-bg": "string", - "selection-opaque-dark-bg": "string", - "selection-header": "string", - "widget-bg": "string", - "widget-border": "string", - "widget-active-border": "string", - "widget-inactive-stripes-light": "string", - "widget-inactive-stripes-dark": "string", - "pinned-doc-footer-bg": "string", - "pinned-doc-border": "string", - "pinned-doc-border-hover": "string", - "pinned-doc-editor-bg": "string", - "raw-data-table-border": "string", - "raw-data-table-border-hover": "string", - "control-fg": "string", - "control-primary-fg": "string", - "control-primary-bg": "string", - "control-secondary-fg": "string", - "control-secondary-disabled-fg": "string", - "control-hover-fg": "string", - "control-primary-hover-bg": "string", - "control-secondary-hover-fg": "string", - "control-secondary-hover-bg": "string", - "control-disabled-fg": "string", - "control-disabled-bg": "string", - "control-border": "string", - "checkbox-bg": "string", - "checkbox-disabled-bg": "string", - "checkbox-border": "string", - "checkbox-border-hover": "string", - "move-docs-selected-fg": "string", - "move-docs-selected-bg": "string", - "move-docs-disabled-bg": "string", - "filter-bar-button-saved-fg": "string", - "filter-bar-button-saved-bg": "string", - "filter-bar-button-saved-hover-bg": "string", - "icon-disabled": "string", - "icon-error": "string", - "icon-button-fg": "string", - "icon-button-primary-bg": "string", - "icon-button-primary-hover-bg": "string", - "icon-button-secondary-bg": "string", - "icon-button-secondary-hover-bg": "string", - "left-panel-page-hover-bg": "string", - "left-panel-active-page-fg": "string", - "left-panel-active-page-bg": "string", - "left-panel-disabled-page-fg": "string", - "left-panel-page-options-fg": "string", - "left-panel-page-options-hover-fg": "string", - "left-panel-page-options-hover-bg": "string", - "left-panel-page-options-selected-hover-bg": "string", - "left-panel-page-initials-fg": "string", - "left-panel-page-initials-bg": "string", - "left-panel-page-emoji-fg": "string", - "left-panel-page-emoji-outline": "string", - "right-panel-tab-fg": "string", - "right-panel-tab-bg": "string", - "right-panel-tab-icon": "string", - "right-panel-tab-icon-hover": "string", - "right-panel-tab-border": "string", - "right-panel-tab-hover-bg": "string", - "right-panel-tab-hover-fg": "string", - "right-panel-tab-selected-fg": "string", - "right-panel-tab-selected-bg": "string", - "right-panel-tab-selected-icon": "string", - "right-panel-tab-button-hover-bg": "string", - "right-panel-subtab-fg": "string", - "right-panel-subtab-selected-fg": "string", - "right-panel-subtab-selected-underline": "string", - "right-panel-subtab-hover-fg": "string", - "right-panel-subtab-hover-underline": "string", - "right-panel-disabled-overlay": "string", - "right-panel-toggle-button-enabled-fg": "string", - "right-panel-toggle-button-enabled-bg": "string", - "right-panel-toggle-button-disabled-fg": "string", - "right-panel-toggle-button-disabled-bg": "string", - "right-panel-field-settings-bg": "string", - "right-panel-field-settings-button-bg": "string", - "right-panel-custom-widget-button-fg": "string", - "right-panel-custom-widget-button-bg": "string", - "document-history-snapshot-fg": "string", - "document-history-snapshot-selected-fg": "string", - "document-history-snapshot-bg": "string", - "document-history-snapshot-selected-bg": "string", - "document-history-snapshot-border": "string", - "document-history-activity-text": "string", - "document-history-activity-text-light": "string", - "document-history-table-header-fg": "string", - "document-history-table-border": "string", - "document-history-table-border-light": "string", - "accent-icon": "string", - "accent-border": "string", - "accent-text": "string", - "input-fg": "string", - "input-bg": "string", - "input-disabled-fg": "string", - "input-disabled-bg": "string", - "input-placeholder-fg": "string", - "input-border": "string", - "input-valid": "string", - "input-invalid": "string", - "input-focus": "string", - "input-readonly-bg": "string", - "input-readonly-border": "string", - "choice-token-fg": "string", - "choice-token-blank-fg": "string", - "choice-token-bg": "string", - "choice-token-selected-bg": "string", - "choice-token-selected-border": "string", - "choice-token-invalid-fg": "string", - "choice-token-invalid-bg": "string", - "choice-token-invalid-border": "string", - "choice-entry-bg": "string", - "choice-entry-border": "string", - "choice-entry-border-hover": "string", - "select-button-fg": "string", - "select-button-placeholder-fg": "string", - "select-button-bg": "string", - "select-button-border": "string", - "select-button-border-invalid": "string", - "menu-text": "string", - "menu-light-text": "string", - "menu-bg": "string", - "menu-subheader-fg": "string", - "menu-border": "string", - "menu-shadow": "string", - "menu-item-fg": "string", - "menu-item-selected-fg": "string", - "menu-item-selected-bg": "string", - "menu-item-disabled-fg": "string", - "menu-item-icon-fg": "string", - "menu-item-icon-selected-fg": "string", - "autocomplete-match-text": "string", - "autocomplete-selected-match-text": "string", - "autocomplete-item-selected-bg": "string", - "autocomplete-add-new-circle-fg": "string", - "autocomplete-add-new-circle-bg": "string", - "autocomplete-add-new-circle-selected-bg": "string", - "search-border": "string", - "search-prev-next-button-fg": "string", - "search-prev-next-button-bg": "string", - "loader-fg": "string", - "loader-bg": "string", - "site-switcher-active-fg": "string", - "site-switcher-active-bg": "string", - "doc-menu-doc-options-fg": "string", - "doc-menu-doc-options-hover-fg": "string", - "doc-menu-doc-options-hover-bg": "string", - "shortcut-key-fg": "string", - "shortcut-key-primary-fg": "string", - "shortcut-key-secondary-fg": "string", - "shortcut-key-bg": "string", - "shortcut-key-border": "string", - "breadcrumbs-tag-fg": "string", - "breadcrumbs-tag-bg": "string", - "breadcrumbs-tag-alert-bg": "string", - "widget-picker-primary-bg": "string", - "widget-picker-secondary-bg": "string", - "widget-picker-item-fg": "string", - "widget-picker-item-selected-bg": "string", - "widget-picker-item-disabled-bg": "string", - "widget-picker-icon": "string", - "widget-picker-primary-icon": "string", - "widget-picker-summary-icon": "string", - "widget-picker-border": "string", - "widget-picker-shadow": "string", - "code-view-text": "string", - "code-view-keyword": "string", - "code-view-comment": "string", - "code-view-meta": "string", - "code-view-title": "string", - "code-view-params": "string", - "code-view-string": "string", - "code-view-number": "string", - "code-view-builtin": "string", - "code-view-literal": "string", - "importer-table-info-border": "string", - "importer-preview-border": "string", - "importer-skipped-table-overlay": "string", - "importer-match-icon": "string", - "importer-outside-bg": "string", - "importer-main-content-bg": "string", - "importer-active-file-bg": "string", - "importer-active-file-fg": "string", - "importer-inactive-file-bg": "string", - "importer-inactive-file-fg": "string", - "menu-toggle-fg": "string", - "menu-toggle-hover-fg": "string", - "menu-toggle-active-fg": "string", - "menu-toggle-bg": "string", - "menu-toggle-border": "string", - "info-button-fg": "string", - "info-button-hover-fg": "string", - "info-button-active-fg": "string", - "button-group-fg": "string", - "button-group-light-fg": "string", - "button-group-bg": "string", - "button-group-bg-hover": "string", - "button-group-icon": "string", - "button-group-border": "string", - "button-group-border-hover": "string", - "button-group-selected-fg": "string", - "button-group-light-selected-fg": "string", - "button-group-selected-bg": "string", - "button-group-selected-border": "string", - "access-rules-table-header-fg": "string", - "access-rules-table-header-bg": "string", - "access-rules-table-body-fg": "string", - "access-rules-table-body-light-fg": "string", - "access-rules-table-border": "string", - "access-rules-column-list-border": "string", - "access-rules-column-item-fg": "string", - "access-rules-column-item-bg": "string", - "access-rules-column-item-icon-fg": "string", - "access-rules-column-item-icon-hover-fg": "string", - "access-rules-column-item-icon-hover-bg": "string", - "access-rules-formula-editor-bg": "string", - "access-rules-formula-editor-border-hover": "string", - "access-rules-formula-editor-bg-disabled": "string", - "access-rules-formula-editor-focus": "string", - "cell-fg": "string", - "cell-bg": "string", - "cell-zebra-bg": "string", - "chart-fg": "string", - "chart-bg": "string", - "chart-legend-bg": "string", - "chart-x-axis": "string", - "chart-y-axis": "string", - "comments-popup-header-bg": "string", - "comments-popup-body-bg": "string", - "comments-popup-border": "string", - "comments-user-name-fg": "string", - "comments-panel-topic-bg": "string", - "comments-panel-topic-border": "string", - "comments-panel-resolved-topic-bg": "string", - "date-picker-selected-fg": "string", - "date-picker-selected-bg": "string", - "date-picker-selected-bg-hover": "string", - "date-picker-today-fg": "string", - "date-picker-today-bg": "string", - "date-picker-today-bg-hover": "string", - "date-picker-range-start-end-bg": "string", - "date-picker-range-start-end-bg-hover": "string", - "date-picker-range-bg": "string", - "date-picker-range-bg-hover": "string", - "tutorials-popup-border": "string", - "tutorials-popup-header-fg": "string", - "tutorials-popup-box-bg": "string", - "tutorials-popup-code-fg": "string", - "tutorials-popup-code-bg": "string", - "tutorials-popup-code-border": "string", - "ace-editor-bg": "string", - "ace-autocomplete-primary-fg": "string", - "ace-autocomplete-secondary-fg": "string", - "ace-autocomplete-highlighted-fg": "string", - "ace-autocomplete-bg": "string", - "ace-autocomplete-border": "string", - "ace-autocomplete-link": "string", - "ace-autocomplete-link-highlighted": "string", - "ace-autocomplete-active-line-bg": "string", - "ace-autocomplete-line-border-hover": "string", - "ace-autocomplete-line-bg-hover": "string", - "color-select-fg": "string", - "color-select-bg": "string", - "color-select-shadow": "string", - "color-select-font-options-border": "string", - "color-select-font-option-fg": "string", - "color-select-font-option-bg-hover": "string", - "color-select-font-option-fg-selected": "string", - "color-select-font-option-bg-selected": "string", - "color-select-color-square-border": "string", - "color-select-color-square-border-empty": "string", - "color-select-input-fg": "string", - "color-select-input-bg": "string", - "color-select-input-border": "string", - "highlighted-code-block-bg": "string", - "highlighted-code-block-bg-disabled": "string", - "highlighted-code-fg": "string", - "highlighted-code-border": "string", - "highlighted-code-bg-disabled": "string", - "login-page-bg": "string", - "login-page-backdrop": "string", - "login-page-line": "string", - "login-page-google-button-fg": "string", - "login-page-google-button-bg": "string", - "login-page-google-button-bg-hover": "string", - "login-page-google-button-border": "string", - "formula-assistant-header-bg": "string", - "formula-assistant-border": "string", - "formula-assistant-preformatted-text-bg": "string", - "attachments-editor-button-fg": "string", - "attachments-editor-button-hover-fg": "string", - "attachments-editor-button-bg": "string", - "attachments-editor-button-hover-bg": "string", - "attachments-editor-button-border": "string", - "attachments-editor-button-icon": "string", - "attachments-editor-border": "string", - "attachments-cell-icon-fg": "string", - "attachments-cell-icon-bg": "string", - "attachments-cell-icon-hover-bg": "string", - "switch-slider-fg": "string", - "switch-circle-fg": "string", - "announcement-popup-fg": "string", - "announcement-popup-bg": "string", - "scroll-shadow": "string", - "toggle-checkbox-fg": "string", - "numeric-spinner-fg": "string", - "widget-gallery-border": "string", - "widget-gallery-border-selected": "string", - "widget-gallery-shadow": "string", - "widget-gallery-bg-hover": "string", - "widget-gallery-secondary-header-fg": "string", - "widget-gallery-secondary-header-bg": "string", - "widget-gallery-secondary-header-bg-hover": "string", - "markdown-cell-light-bg": "string", - "markdown-cell-light-border": "string", - "markdown-cell-medium-border": "string", - "app-header-bg": "string", - "app-header-border": "string", - "app-header-border-hover": "string", - "card-button-border": "string", - "card-button-border-selected": "string", - "card-button-shadow": "string", -}); - -const exportedTypeSuite: t.ITypeSuite = { - ThemePrefs, - ThemeAppearance, - ThemeNameOrColors, - ThemeName, - Theme, - ThemeColors, -}; -export default exportedTypeSuite; diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts index 281c220ea5..579f86edca 100644 --- a/app/common/ThemePrefs.ts +++ b/app/common/ThemePrefs.ts @@ -1,612 +1,1129 @@ -import ThemePrefsTI from 'app/common/ThemePrefs-ti'; -import {CheckerT, createCheckers} from 'ts-interface-checker'; +import { CssCustomProp } from './CssCustomProp'; export interface ThemePrefs { appearance: ThemeAppearance; syncWithOS: boolean; colors: { - light: ThemeNameOrColors; - dark: ThemeNameOrColors; + light: ThemeNameOrTokens; + dark: ThemeNameOrTokens; } } -export type ThemeAppearance = 'light' | 'dark'; +export const themeAppearances = ['light', 'dark'] as const; +export type ThemeAppearance = typeof themeAppearances[number]; -export type ThemeNameOrColors = ThemeName | ThemeColors; +export type ThemeNameOrTokens = ThemeName | ThemeTokens; -export type ThemeName = 'GristLight' | 'GristDark'; +export const themeNames = ['GristLight', 'GristDark'] as const; +export type ThemeName = typeof themeNames[number]; export interface Theme { appearance: ThemeAppearance; - colors: ThemeColors; + colors: ThemeTokens; } -export interface ThemeColors { - /* Text */ - 'text': string; - 'text-light': string; - 'text-medium': string; - 'text-dark': string; - 'text-error': string; - 'text-error-hover': string; - 'text-danger': string; - 'text-disabled': string; - - /* Page */ - 'page-bg': string; - 'page-backdrop': string; - - /* Page Panels */ - 'page-panels-main-panel-bg': string; - 'page-panels-left-panel-bg': string; - 'page-panels-right-panel-bg': string; - 'page-panels-top-header-bg': string; - 'page-panels-bottom-footer-bg': string; - 'page-panels-border': string; - 'page-panels-border-resizing': string; - 'page-panels-side-panel-opener-fg': string; - 'page-panels-side-panel-opener-active-fg': string; - 'page-panels-side-panel-opener-active-bg': string; - - /* Add New */ - 'add-new-circle-fg': string; - 'add-new-circle-bg': string; - 'add-new-circle-hover-bg': string; - 'add-new-circle-small-fg': string; - 'add-new-circle-small-bg': string; - 'add-new-circle-small-hover-bg': string; - - /* Top Bar */ - 'top-bar-button-primary-fg': string; - 'top-bar-button-secondary-fg': string; - 'top-bar-button-disabled-fg': string; - 'top-bar-button-error-fg': string; - - /* Notifications */ - 'notifications-panel-header-bg': string; - 'notifications-panel-body-bg': string; - 'notifications-panel-border': string; - - /* Toasts */ - 'toast-text': string; - 'toast-text-light': string; - 'toast-bg': string; - 'toast-memo-text': string; - 'toast-memo-bg': string; - 'toast-error-icon': string; - 'toast-error-bg': string; - 'toast-success-icon': string; - 'toast-success-bg': string; - 'toast-warning-icon': string; - 'toast-warning-bg': string; - 'toast-info-icon': string; - 'toast-info-bg': string; - 'toast-control-fg': string; - 'toast-control-info-fg': string; - - /* Tooltips */ - 'tooltip-fg': string; - 'tooltip-bg': string; - 'tooltip-icon': string; - 'tooltip-close-button-fg': string; - 'tooltip-close-button-hover-fg': string; - 'tooltip-close-button-hover-bg': string; - - /* Modals */ - 'modal-bg': string; - 'modal-backdrop': string; - 'modal-border': string; - 'modal-border-dark': string; - 'modal-border-hover': string; - 'modal-shadow-inner': string; - 'modal-shadow-outer': string; - 'modal-close-button-fg': string; - 'modal-backdrop-close-button-fg': string; - 'modal-backdrop-close-button-hover-fg': string; - - /* Popups */ - 'popup-bg': string; - 'popup-secondary-bg': string; - 'popup-shadow-inner': string; - 'popup-shadow-outer': string; - 'popup-close-button-fg': string; - - /* Prompts */ - 'prompt-fg': string; - - /* Progress Bars */ - 'progress-bar-fg': string; - 'progress-bar-error-fg': string; - 'progress-bar-bg': string; - - /* Links */ - 'link': string; - 'link-hover': string; - - /* Hover */ - 'hover': string; - 'hover-light': string; - - /* Cell Editor */ - 'cell-editor-fg': string; - 'cell-editor-placeholder-fg': string; - 'cell-editor-bg': string; - - /* Cursor */ - 'cursor': string; - 'cursor-inactive': string; - 'cursor-readonly': string; - - /* Tables */ - 'table-header-fg': string; - 'table-header-selected-fg': string; - 'table-header-bg': string; - 'table-header-selected-bg': string; - 'table-header-border': string; - 'table-body-bg': string; - 'table-body-border': string; - 'table-add-new-bg': string; - 'table-scroll-shadow': string; - 'table-frozen-columns-border': string; - 'table-drag-drop-indicator': string; - 'table-drag-drop-shadow': string; - 'table-cell-summary-bg': string; - - /* Cards */ - 'card-compact-widget-bg': string; - 'card-compact-record-bg': string; - 'card-blocks-bg': string; - 'card-form-label': string; - 'card-compact-label': string; - 'card-blocks-label': string; - 'card-form-border': string; - 'card-compact-border': string; - 'card-editing-layout-bg': string; - 'card-editing-layout-border': string; - - /* Card Lists */ - 'card-list-form-border': string; - 'card-list-blocks-border': string; - - /* Selection */ - 'selection': string; - 'selection-darker': string; - 'selection-darkest': string; - 'selection-opaque-fg': string; - 'selection-opaque-bg': string; - 'selection-opaque-dark-bg': string; - 'selection-header': string; - - /* Widgets */ - 'widget-bg': string; - 'widget-border': string; - 'widget-active-border': string; - 'widget-inactive-stripes-light': string; - 'widget-inactive-stripes-dark': string; - - /* Pinned Docs */ - 'pinned-doc-footer-bg': string; - 'pinned-doc-border': string; - 'pinned-doc-border-hover': string; - 'pinned-doc-editor-bg': string; - - /* Raw Data */ - 'raw-data-table-border': string; - 'raw-data-table-border-hover': string; - - /* Controls */ - 'control-fg': string; - 'control-primary-fg': string; - 'control-primary-bg': string; - 'control-secondary-fg': string; - 'control-secondary-disabled-fg': string; - 'control-hover-fg': string; - 'control-primary-hover-bg': string; - 'control-secondary-hover-fg': string; - 'control-secondary-hover-bg': string; - 'control-disabled-fg': string; - 'control-disabled-bg': string; - 'control-border': string; - - /* Checkboxes */ - 'checkbox-bg': string; - 'checkbox-disabled-bg': string; - 'checkbox-border': string; - 'checkbox-border-hover': string; - - /* Move Docs */ - 'move-docs-selected-fg': string; - 'move-docs-selected-bg': string; - 'move-docs-disabled-bg': string; - - /* Filter Bar */ - 'filter-bar-button-saved-fg': string; - 'filter-bar-button-saved-bg': string; - 'filter-bar-button-saved-hover-bg': string; - - /* Icons */ - 'icon-disabled': string; - 'icon-error': string; - - /* Icon Buttons */ - 'icon-button-fg': string; - 'icon-button-primary-bg': string; - 'icon-button-primary-hover-bg': string; - 'icon-button-secondary-bg': string; - 'icon-button-secondary-hover-bg': string; - - /* Left Panel */ - 'left-panel-page-hover-bg': string; - 'left-panel-active-page-fg': string; - 'left-panel-active-page-bg': string; - 'left-panel-disabled-page-fg': string; - 'left-panel-page-options-fg': string; - 'left-panel-page-options-hover-fg': string; - 'left-panel-page-options-hover-bg': string; - 'left-panel-page-options-selected-hover-bg': string; - 'left-panel-page-initials-fg': string; - 'left-panel-page-initials-bg': string; - 'left-panel-page-emoji-fg': string; - 'left-panel-page-emoji-outline': string; - - /* Right Panel */ - 'right-panel-tab-fg': string; - 'right-panel-tab-bg': string; - 'right-panel-tab-icon': string; - 'right-panel-tab-icon-hover': string; - 'right-panel-tab-border': string; - 'right-panel-tab-hover-bg': string; - 'right-panel-tab-hover-fg': string; - 'right-panel-tab-selected-fg': string; - 'right-panel-tab-selected-bg': string; - 'right-panel-tab-selected-icon': string; - 'right-panel-tab-button-hover-bg': string; - 'right-panel-subtab-fg': string; - 'right-panel-subtab-selected-fg': string; - 'right-panel-subtab-selected-underline': string; - 'right-panel-subtab-hover-fg': string; - 'right-panel-subtab-hover-underline': string; - 'right-panel-disabled-overlay': string; - 'right-panel-toggle-button-enabled-fg': string; - 'right-panel-toggle-button-enabled-bg': string; - 'right-panel-toggle-button-disabled-fg': string; - 'right-panel-toggle-button-disabled-bg': string; - 'right-panel-field-settings-bg': string; - 'right-panel-field-settings-button-bg': string; - 'right-panel-custom-widget-button-fg': string; - 'right-panel-custom-widget-button-bg': string; - - /* Document History */ - 'document-history-snapshot-fg': string; - 'document-history-snapshot-selected-fg': string; - 'document-history-snapshot-bg': string; - 'document-history-snapshot-selected-bg': string; - 'document-history-snapshot-border': string; - 'document-history-activity-text': string; - 'document-history-activity-text-light': string; - 'document-history-table-header-fg': string; - 'document-history-table-border': string; - 'document-history-table-border-light': string; - - /* Accents */ - 'accent-icon': string; - 'accent-border': string; - 'accent-text': string; - - /* Inputs */ - 'input-fg': string; - 'input-bg': string; - 'input-disabled-fg': string; - 'input-disabled-bg': string; - 'input-placeholder-fg': string; - 'input-border': string; - 'input-valid': string; - 'input-invalid': string; - 'input-focus': string; - 'input-readonly-bg': string; - 'input-readonly-border': string; - - /* Choice Tokens */ - 'choice-token-fg': string; - 'choice-token-blank-fg': string; - 'choice-token-bg': string; - 'choice-token-selected-bg': string; - 'choice-token-selected-border': string; - 'choice-token-invalid-fg': string; - 'choice-token-invalid-bg': string; - 'choice-token-invalid-border': string; - - /* Choice Entry */ - 'choice-entry-bg': string; - 'choice-entry-border': string; - 'choice-entry-border-hover': string; - - /* Select Buttons */ - 'select-button-fg': string; - 'select-button-placeholder-fg': string; - 'select-button-bg': string; - 'select-button-border': string; - 'select-button-border-invalid': string; - - /* Menus */ - 'menu-text': string; - 'menu-light-text': string; - 'menu-bg': string; - 'menu-subheader-fg': string; - 'menu-border': string; - 'menu-shadow': string; - - /* Menu Items */ - 'menu-item-fg': string; - 'menu-item-selected-fg': string; - 'menu-item-selected-bg': string; - 'menu-item-disabled-fg': string; - 'menu-item-icon-fg': string; - 'menu-item-icon-selected-fg': string; - - /* Autocomplete */ - 'autocomplete-match-text': string; - 'autocomplete-selected-match-text': string; - 'autocomplete-item-selected-bg': string; - 'autocomplete-add-new-circle-fg': string; - 'autocomplete-add-new-circle-bg': string; - 'autocomplete-add-new-circle-selected-bg': string; - - /* Search */ - 'search-border': string; - 'search-prev-next-button-fg': string; - 'search-prev-next-button-bg': string; - - /* Loaders */ - 'loader-fg': string; - 'loader-bg': string; - - /* Site Switcher */ - 'site-switcher-active-fg': string; - 'site-switcher-active-bg': string; - - /* Doc Menu */ - 'doc-menu-doc-options-fg': string; - 'doc-menu-doc-options-hover-fg': string; - 'doc-menu-doc-options-hover-bg': string; - - /* Shortcut Keys */ - 'shortcut-key-fg': string; - 'shortcut-key-primary-fg': string; - 'shortcut-key-secondary-fg': string; - 'shortcut-key-bg': string; - 'shortcut-key-border': string; - - /* Breadcrumbs */ - 'breadcrumbs-tag-fg': string; - 'breadcrumbs-tag-bg': string; - 'breadcrumbs-tag-alert-bg': string; - - /* Page Widget Picker */ - 'widget-picker-primary-bg': string; - 'widget-picker-secondary-bg': string; - 'widget-picker-item-fg': string; - 'widget-picker-item-selected-bg': string; - 'widget-picker-item-disabled-bg': string; - 'widget-picker-icon': string; - 'widget-picker-primary-icon': string; - 'widget-picker-summary-icon': string; - 'widget-picker-border': string; - 'widget-picker-shadow': string; - - /* Code View */ - 'code-view-text': string; - 'code-view-keyword': string; - 'code-view-comment': string; - 'code-view-meta': string; - 'code-view-title': string; - 'code-view-params': string; - 'code-view-string': string; - 'code-view-number': string; - 'code-view-builtin': string; - 'code-view-literal': string; - - /* Importer */ - 'importer-table-info-border': string; - 'importer-preview-border': string; - 'importer-skipped-table-overlay': string; - 'importer-match-icon': string; - 'importer-outside-bg': string; - 'importer-main-content-bg': string; - 'importer-active-file-bg': string; - 'importer-active-file-fg': string; - 'importer-inactive-file-bg': string; - 'importer-inactive-file-fg': string; - - /* Menu Toggles */ - 'menu-toggle-fg': string; - 'menu-toggle-hover-fg': string; - 'menu-toggle-active-fg': string; - 'menu-toggle-bg': string; - 'menu-toggle-border': string; - - /* Info Button */ - 'info-button-fg': string; - 'info-button-hover-fg': string; - 'info-button-active-fg': string; - - /* Button Groups */ - 'button-group-fg': string; - 'button-group-light-fg': string; - 'button-group-bg': string; - 'button-group-bg-hover': string; - 'button-group-icon': string; - 'button-group-border': string; - 'button-group-border-hover': string; - 'button-group-selected-fg': string; - 'button-group-light-selected-fg': string; - 'button-group-selected-bg': string; - 'button-group-selected-border': string; - - /* Access Rules */ - 'access-rules-table-header-fg': string; - 'access-rules-table-header-bg': string; - 'access-rules-table-body-fg': string; - 'access-rules-table-body-light-fg': string; - 'access-rules-table-border': string; - 'access-rules-column-list-border': string; - 'access-rules-column-item-fg': string; - 'access-rules-column-item-bg': string; - 'access-rules-column-item-icon-fg': string; - 'access-rules-column-item-icon-hover-fg': string; - 'access-rules-column-item-icon-hover-bg': string; - 'access-rules-formula-editor-bg': string; - 'access-rules-formula-editor-border-hover': string; - 'access-rules-formula-editor-bg-disabled': string; - 'access-rules-formula-editor-focus': string; - - /* Cells */ - 'cell-fg': string; - 'cell-bg': string; - 'cell-zebra-bg': string; - - /* Charts */ - 'chart-fg': string; - 'chart-bg': string; - 'chart-legend-bg': string; - 'chart-x-axis': string; - 'chart-y-axis': string; - - /* Comments */ - 'comments-popup-header-bg': string; - 'comments-popup-body-bg': string; - 'comments-popup-border': string; - 'comments-user-name-fg': string; - 'comments-panel-topic-bg': string; - 'comments-panel-topic-border': string; - 'comments-panel-resolved-topic-bg': string; - - /* Date Picker */ - 'date-picker-selected-fg': string; - 'date-picker-selected-bg': string; - 'date-picker-selected-bg-hover': string; - 'date-picker-today-fg': string; - 'date-picker-today-bg': string; - 'date-picker-today-bg-hover': string; - 'date-picker-range-start-end-bg': string; - 'date-picker-range-start-end-bg-hover': string; - 'date-picker-range-bg': string; - 'date-picker-range-bg-hover': string; - - /* Tutorials */ - 'tutorials-popup-border': string; - 'tutorials-popup-header-fg': string; - 'tutorials-popup-box-bg': string; - 'tutorials-popup-code-fg': string; - 'tutorials-popup-code-bg': string; - 'tutorials-popup-code-border': string; - - /* Ace */ - 'ace-editor-bg': string; - 'ace-autocomplete-primary-fg': string; - 'ace-autocomplete-secondary-fg': string; - 'ace-autocomplete-highlighted-fg': string; - 'ace-autocomplete-bg': string; - 'ace-autocomplete-border': string; - 'ace-autocomplete-link': string; - 'ace-autocomplete-link-highlighted': string; - 'ace-autocomplete-active-line-bg': string; - 'ace-autocomplete-line-border-hover': string; - 'ace-autocomplete-line-bg-hover': string; - - /* Color Select */ - 'color-select-fg': string; - 'color-select-bg': string; - 'color-select-shadow': string; - 'color-select-font-options-border': string; - 'color-select-font-option-fg': string; - 'color-select-font-option-bg-hover': string; - 'color-select-font-option-fg-selected': string; - 'color-select-font-option-bg-selected': string; - 'color-select-color-square-border': string; - 'color-select-color-square-border-empty': string; - 'color-select-input-fg': string; - 'color-select-input-bg': string; - 'color-select-input-border': string; - - /* Highlighted Code */ - 'highlighted-code-block-bg': string; - 'highlighted-code-block-bg-disabled': string; - 'highlighted-code-fg': string; - 'highlighted-code-border': string; - 'highlighted-code-bg-disabled': string; - - /* Login Page */ - 'login-page-bg': string; - 'login-page-backdrop': string; - 'login-page-line': string; - 'login-page-google-button-fg': string; - 'login-page-google-button-bg': string; - 'login-page-google-button-bg-hover': string; - 'login-page-google-button-border': string; - - /* Formula Assistant */ - 'formula-assistant-header-bg': string; - 'formula-assistant-border': string; - 'formula-assistant-preformatted-text-bg': string; - - /* Attachments */ - 'attachments-editor-button-fg': string; - 'attachments-editor-button-hover-fg': string; - 'attachments-editor-button-bg': string; - 'attachments-editor-button-hover-bg': string; - 'attachments-editor-button-border': string; - 'attachments-editor-button-icon': string; - 'attachments-editor-border': string; - 'attachments-cell-icon-fg': string; - 'attachments-cell-icon-bg': string; - 'attachments-cell-icon-hover-bg': string; - - /* Switches */ - 'switch-slider-fg': string; - 'switch-circle-fg': string; - - /* Announcement Popups */ - 'announcement-popup-fg': string; - 'announcement-popup-bg': string; - - /* Scroll Shadow */ - 'scroll-shadow': string; - - /* Toggle Checkboxes */ - 'toggle-checkbox-fg': string; - - /* Numeric Spinners */ - 'numeric-spinner-fg': string; - - /* Custom Widget Gallery */ - 'widget-gallery-border': string; - 'widget-gallery-border-selected': string; - 'widget-gallery-shadow': string; - 'widget-gallery-bg-hover': string; - 'widget-gallery-secondary-header-fg': string; - 'widget-gallery-secondary-header-bg': string; - 'widget-gallery-secondary-header-bg-hover': string; - - /* Markdown Cell */ - 'markdown-cell-light-bg': string; - 'markdown-cell-light-border': string; - 'markdown-cell-medium-border': string; - - /* App Header */ - 'app-header-bg': string; - 'app-header-border': string; - 'app-header-border-hover': string; - - /* Card Button */ - 'card-button-border': string; - 'card-button-border-selected': string; - 'card-button-shadow': string; +type Token = string | CssCustomProp; + +/* + * List of all possible theme tokens (except legacy ones, which are more component specific, see below) + * + * This is used to generate the `tokens` object, that initializes CSS variables for every token. + * Actual values are defined in a theme. + */ +const tokensCssMapping = { + primaryLighter: 'color-primary-lighter', + primaryLight: 'color-primary-light', + primaryDark: 'color-primary-dark', + primaryDarker: 'color-primary-darker', + + secondaryLighter: 'color-secondary-lighter', + secondaryLight: 'color-secondary-light', + + cursor: 'color-cursor', + inactiveCursor: 'color-inactive-cursor', + selection: 'color-selection', + selectionOpaque: 'color-selection-opaque', + selectionDarkerOpaque: 'color-selection-darker-opaque', + + white: 'color-white', + light: 'color-white', + lightGrey: 'color-light-grey', + mediumGreyOpaque: 'color-medium-grey-opaque', + mediumGrey: 'color-medium-grey', + darkGrey: 'color-dark-grey', + slate: 'color-slate', + darkText: 'color-dark-text', + dark: 'color-dark', + black: 'color-black', + hover: 'color-hover', + backdrop: 'color-backdrop', + error: 'color-error', + warningLight: 'color-warning-light', + warningDark: 'color-warning-dark', + + fontFamily: 'font-family', + fontFamilyData: 'font-family-data', + xxsmallFontSize: 'xx-small-font-size', + xsmallFontSize: 'x-small-font-size', + smallFontSize: 'small-font-size', + mediumFontSize: 'medium-font-size', + introFontSize: 'intro-font-size', + largeFontSize: 'large-font-size', + xlargeFontSize: 'x-large-font-size', + xxlargeFontSize: 'xx-large-font-size', + xxxlargeFontSize: 'xxx-large-font-size', + + controlFontSize: 'control-font-size', + smallControlFontSize: 'small-control-font-size', + bigControlFontSize: 'big-control-font-size', + headerControlFontSize: 'header-control-font-size', + bigControlTextWeight: 'big-control-text-weight', + headerControlTextWeight: 'header-control-text-weight', + labelTextSize: 'label-text-size', + labelTextBg: 'label-text-bg', + labelActiveBg: 'label-active-bg', + + controlMargin: 'control-margin', + controlPadding: 'control-padding', + tightPadding: 'tight-padding', + loosePadding: 'loose-padding', + + primaryBg: 'primary-bg', + primaryBgHover: 'primary-bg-hover', + primaryFg: 'primary-fg', + + warningBg: 'warning-bg', + + controlBg: 'control-bg', + controlFg: 'control-fg', + controlFgHover: 'control-fg-hover', + controlBorderColor: 'control-border-color', + controlBorder: 'control-border', + controlBorderRadius: 'control-border-radius', + + logoBg: 'logo-bg', + logoSize: 'logo-size', + toastBg: 'toast-bg', + + text: 'color-text', + textLight: 'color-text-light', + textVeryLight: 'color-text-very-light', + textDark: 'color-text-dark', + + mainBg: 'main-bg', + panelBg: 'panel-bg', + activeBg: 'active-bg', + transparentBg: 'transparent-bg', + + borderLight: 'border-light', + borderLighter: 'border-lighter', + borderLighterTransparent: 'border-lighter-transparent', + + primaryLightBg: 'primary-light-bg', + primaryLightFg: 'primary-light-fg', +}; + +/* + * List of all legacy theme tokens + * + * This is used to generate the `legacyThemeTokens` object, that initializes CSS variables for every token. + * Actual values are defined in a theme. + */ +export const legacyVariablesCssMapping = { + text: 'theme-text', + lightText: 'theme-text-light', + mediumText: 'theme-text-medium', + darkText: 'theme-text-dark', + errorText: 'theme-text-error', + errorTextHover: 'theme-text-error-hover', + dangerText: 'theme-text-danger', + disabledText: 'theme-text-disabled', + pageBg: 'theme-page-bg', + pageBackdrop: 'theme-page-backdrop', + mainPanelBg: 'theme-page-panels-main-panel-bg', + leftPanelBg: 'theme-page-panels-left-panel-bg', + rightPanelBg: 'theme-page-panels-right-panel-bg', + topHeaderBg: 'theme-page-panels-top-header-bg', + bottomFooterBg: 'theme-page-panels-bottom-footer-bg', + pagePanelsBorder: 'theme-page-panels-border', + pagePanelsBorderResizing: 'theme-page-panels-border-resizing', + sidePanelOpenerFg: 'theme-page-panels-side-panel-opener-fg', + sidePanelOpenerActiveFg: 'theme-page-panels-side-panel-opener-active-fg', + sidePanelOpenerActiveBg: 'theme-page-panels-side-panel-opener-active-bg', + addNewCircleFg: 'theme-add-new-circle-fg', + addNewCircleBg: 'theme-add-new-circle-bg', + addNewCircleHoverBg: 'theme-add-new-circle-hover-bg', + addNewCircleSmallFg: 'theme-add-new-circle-small-fg', + addNewCircleSmallBg: 'theme-add-new-circle-small-bg', + addNewCircleSmallHoverBg: 'theme-add-new-circle-small-hover-bg', + topBarButtonPrimaryFg: 'theme-top-bar-button-primary-fg', + topBarButtonSecondaryFg: 'theme-top-bar-button-secondary-fg', + topBarButtonDisabledFg: 'theme-top-bar-button-disabled-fg', + topBarButtonErrorFg: 'theme-top-bar-button-error-fg', + notificationsPanelHeaderBg: 'theme-notifications-panel-header-bg', + notificationsPanelBodyBg: 'theme-notifications-panel-body-bg', + notificationsPanelBorder: 'theme-notifications-panel-border', + toastText: 'theme-toast-text', + toastLightText: 'theme-toast-text-light', + toastBg: 'theme-toast-bg', + toastMemoText: 'theme-toast-memo-text', + toastMemoBg: 'theme-toast-memo-bg', + toastErrorIcon: 'theme-toast-error-icon', + toastErrorBg: 'theme-toast-error-bg', + toastSuccessIcon: 'theme-toast-success-icon', + toastSuccessBg: 'theme-toast-success-bg', + toastWarningIcon: 'theme-toast-warning-icon', + toastWarningBg: 'theme-toast-warning-bg', + toastInfoIcon: 'theme-toast-info-icon', + toastInfoBg: 'theme-toast-info-bg', + toastControlFg: 'theme-toast-control-fg', + toastInfoControlFg: 'theme-toast-control-info-fg', + tooltipFg: 'theme-tooltip-fg', + tooltipBg: 'theme-tooltip-bg', + tooltipIcon: 'theme-tooltip-icon', + tooltipCloseButtonFg: 'theme-tooltip-close-button-fg', + tooltipCloseButtonHoverFg: 'theme-tooltip-close-button-hover-fg', + tooltipCloseButtonHoverBg: 'theme-tooltip-close-button-hover-bg', + modalBg: 'theme-modal-bg', + modalBackdrop: 'theme-modal-backdrop', + modalBorder: 'theme-modal-border', + modalBorderDark: 'theme-modal-border-dark', + modalBorderHover: 'theme-modal-border-hover', + modalInnerShadow: 'theme-modal-shadow-inner', + modalOuterShadow: 'theme-modal-shadow-outer', + modalCloseButtonFg: 'theme-modal-close-button-fg', + modalBackdropCloseButtonFg: 'theme-modal-backdrop-close-button-fg', + modalBackdropCloseButtonHoverFg: 'theme-modal-backdrop-close-button-hover-fg', + popupBg: 'theme-popup-bg', + popupSecondaryBg: 'theme-popup-secondary-bg', + popupInnerShadow: 'theme-popup-shadow-inner', + popupOuterShadow: 'theme-popup-shadow-outer', + popupCloseButtonFg: 'theme-popup-close-button-fg', + promptFg: 'theme-prompt-fg', + progressBarFg: 'theme-progress-bar-fg', + progressBarErrorFg: 'theme-progress-bar-error-fg', + progressBarBg: 'theme-progress-bar-bg', + link: 'theme-link', + linkHover: 'theme-link-hover', + hover: 'theme-hover', + lightHover: 'theme-hover-light', + cellEditorFg: 'theme-cell-editor-fg', + cellEditorPlaceholderFg: 'theme-cell-editor-placeholder-fg', + cellEditorBg: 'theme-cell-editor-bg', + cursor: 'theme-cursor', + cursorInactive: 'theme-cursor-inactive', + cursorReadonly: 'theme-cursor-readonly', + tableHeaderFg: 'theme-table-header-fg', + tableHeaderSelectedFg: 'theme-table-header-selected-fg', + tableHeaderBg: 'theme-table-header-bg', + tableHeaderSelectedBg: 'theme-table-header-selected-bg', + tableHeaderBorder: 'theme-table-header-border', + tableBodyBg: 'theme-table-body-bg', + tableBodyBorder: 'theme-table-body-border', + tableAddNewBg: 'theme-table-add-new-bg', + tableScrollShadow: 'theme-table-scroll-shadow', + tableFrozenColumnsBorder: 'theme-table-frozen-columns-border', + tableDragDropIndicator: 'theme-table-drag-drop-indicator', + tableDragDropShadow: 'theme-table-drag-drop-shadow', + tableCellSummaryBg: 'theme-table-cell-summary-bg', + cardCompactWidgetBg: 'theme-card-compact-widget-bg', + cardCompactRecordBg: 'theme-card-compact-record-bg', + cardBlocksBg: 'theme-card-blocks-bg', + cardFormLabel: 'theme-card-form-label', + cardCompactLabel: 'theme-card-compact-label', + cardBlocksLabel: 'theme-card-blocks-label', + cardFormBorder: 'theme-card-form-border', + cardCompactBorder: 'theme-card-compact-border', + cardEditingLayoutBg: 'theme-card-editing-layout-bg', + cardEditingLayoutBorder: 'theme-card-editing-layout-border', + cardListFormBorder: 'theme-card-list-form-border', + cardListBlocksBorder: 'theme-card-list-blocks-border', + selection: 'theme-selection', + selectionDarker: 'theme-selection-darker', + selectionDarkest: 'theme-selection-darkest', + selectionOpaqueFg: 'theme-selection-opaque-fg', + selectionOpaqueBg: 'theme-selection-opaque-bg', + selectionOpaqueDarkBg: 'theme-selection-opaque-dark-bg', + selectionHeader: 'theme-selection-header', + widgetBg: 'theme-widget-bg', + widgetBorder: 'theme-widget-border', + widgetActiveBorder: 'theme-widget-active-border', + widgetInactiveStripesLight: 'theme-widget-inactive-stripes-light', + widgetInactiveStripesDark: 'theme-widget-inactive-stripes-dark', + pinnedDocFooterBg: 'theme-pinned-doc-footer-bg', + pinnedDocBorder: 'theme-pinned-doc-border', + pinnedDocBorderHover: 'theme-pinned-doc-border-hover', + pinnedDocEditorBg: 'theme-pinned-doc-editor-bg', + rawDataTableBorder: 'theme-raw-data-table-border', + rawDataTableBorderHover: 'theme-raw-data-table-border-hover', + controlFg: 'theme-control-fg', + controlPrimaryFg: 'theme-control-primary-fg', + controlPrimaryBg: 'theme-control-primary-bg', + controlSecondaryFg: 'theme-control-secondary-fg', + controlSecondaryDisabledFg: 'theme-control-secondary-disabled-fg', + controlHoverFg: 'theme-control-hover-fg', + controlPrimaryHoverBg: 'theme-control-primary-hover-bg', + controlSecondaryHoverFg: 'theme-control-secondary-hover-fg', + controlSecondaryHoverBg: 'theme-control-secondary-hover-bg', + controlDisabledFg: 'theme-control-disabled-fg', + controlDisabledBg: 'theme-control-disabled-bg', + controlBorder: 'theme-control-border', + checkboxBg: 'theme-checkbox-bg', + checkboxSelectedFg: 'theme-checkbox-selected-bg', + checkboxDisabledBg: 'theme-checkbox-disabled-bg', + checkboxBorder: 'theme-checkbox-border', + checkboxBorderHover: 'theme-checkbox-border-hover', + moveDocsSelectedFg: 'theme-move-docs-selected-fg', + moveDocsSelectedBg: 'theme-move-docs-selected-bg', + moveDocsDisabledFg: 'theme-move-docs-disabled-bg', + filterBarButtonSavedFg: 'theme-filter-bar-button-saved-fg', + filterBarButtonSavedBg: 'theme-filter-bar-button-saved-bg', + filterBarButtonSavedHoverBg: 'theme-filter-bar-button-saved-hover-bg', + iconDisabled: 'theme-icon-disabled', + iconError: 'theme-icon-error', + iconButtonFg: 'theme-icon-button-fg', + iconButtonPrimaryBg: 'theme-icon-button-primary-bg', + iconButtonPrimaryHoverBg: 'theme-icon-button-primary-hover-bg', + iconButtonSecondaryBg: 'theme-icon-button-secondary-bg', + iconButtonSecondaryHoverBg: 'theme-icon-button-secondary-hover-bg', + pageHoverBg: 'theme-left-panel-page-hover-bg', + activePageFg: 'theme-left-panel-active-page-fg', + activePageBg: 'theme-left-panel-active-page-bg', + disabledPageFg: 'theme-left-panel-disabled-page-fg', + pageOptionsFg: 'theme-left-panel-page-options-bg', + pageOptionsHoverFg: 'theme-left-panel-page-options-hover-fg', + pageOptionsHoverBg: 'theme-left-panel-page-options-hover-bg', + pageOptionsSelectedHoverBg: 'theme-left-panel-page-options-selected-hover-bg', + pageInitialsFg: 'theme-left-panel-page-initials-fg', + pageInitialsBg: 'theme-left-panel-page-initials-bg', + pageInitialsEmojiBg: 'theme-left-panel-page-emoji-fg', + pageInitialsEmojiOutline: 'theme-left-panel-page-emoji-outline', + rightPanelTabFg: 'theme-right-panel-tab-fg', + rightPanelTabBg: 'theme-right-panel-tab-bg', + rightPanelTabIcon: 'theme-right-panel-tab-icon', + rightPanelTabIconHover: 'theme-right-panel-tab-icon-hover', + rightPanelTabBorder: 'theme-right-panel-tab-border', + rightPanelTabHoverBg: 'theme-right-panel-tab-hover-bg', + rightPanelTabHoverFg: 'theme-right-panel-tab-hover-fg', + rightPanelTabSelectedFg: 'theme-right-panel-tab-selected-fg', + rightPanelTabSelectedBg: 'theme-right-panel-tab-selected-bg', + rightPanelTabSelectedIcon: 'theme-right-panel-tab-selected-icon', + rightPanelTabButtonHoverBg: 'theme-right-panel-tab-button-hover-bg', + rightPanelSubtabFg: 'theme-right-panel-subtab-fg', + rightPanelSubtabSelectedFg: 'theme-right-panel-subtab-selected-fg', + rightPanelSubtabSelectedUnderline: 'theme-right-panel-subtab-selected-underline', + rightPanelSubtabHoverFg: 'theme-right-panel-subtab-hover-fg', + rightPanelSubtabHoverUnderline: 'theme-right-panel-subtab-hover-underline', + rightPanelDisabledOverlay: 'theme-right-panel-disabled-overlay', + rightPanelToggleButtonEnabledFg: 'theme-right-panel-toggle-button-enabled-fg', + rightPanelToggleButtonEnabledBg: 'theme-right-panel-toggle-button-enabled-bg', + rightPanelToggleButtonDisabledFg: 'theme-right-panel-toggle-button-disabled-fg', + rightPanelToggleButtonDisabledBg: 'theme-right-panel-toggle-button-disabled-bg', + rightPanelFieldSettingsBg: 'theme-right-panel-field-settings-bg', + rightPanelFieldSettingsButtonBg: 'theme-right-panel-field-settings-button-bg', + rightPanelCustomWidgetButtonFg: 'theme-right-panel-custom-widget-button-fg', + rightPanelCustomWidgetButtonBg: 'theme-right-panel-custom-widget-button-bg', + documentHistorySnapshotFg: 'theme-document-history-snapshot-fg', + documentHistorySnapshotSelectedFg: 'theme-document-history-snapshot-selected-fg', + documentHistorySnapshotBg: 'theme-document-history-snapshot-bg', + documentHistorySnapshotSelectedBg: 'theme-document-history-snapshot-selected-bg', + documentHistorySnapshotBorder: 'theme-document-history-snapshot-border', + documentHistoryActivityText: 'theme-document-history-activity-text', + documentHistoryActivityLightText: 'theme-document-history-activity-text-light', + documentHistoryTableHeaderFg: 'theme-document-history-table-header-fg', + documentHistoryTableBorder: 'theme-document-history-table-border', + documentHistoryTableBorderLight: 'theme-document-history-table-border-light', + accentIcon: 'theme-accent-icon', + accentBorder: 'theme-accent-border', + accentText: 'theme-accent-text', + inputFg: 'theme-input-fg', + inputBg: 'theme-input-bg', + inputDisabledFg: 'theme-input-disabled-fg', + inputDisabledBg: 'theme-input-disabled-bg', + inputPlaceholderFg: 'theme-input-placeholder-fg', + inputBorder: 'theme-input-border', + inputValid: 'theme-input-valid', + inputInvalid: 'theme-input-invalid', + inputFocus: 'theme-input-focus', + inputReadonlyBg: 'theme-input-readonly-bg', + inputReadonlyBorder: 'theme-input-readonly-border', + choiceTokenFg: 'theme-choice-token-fg', + choiceTokenBlankFg: 'theme-choice-token-blank-fg', + choiceTokenBg: 'theme-choice-token-bg', + choiceTokenSelectedBg: 'theme-choice-token-selected-bg', + choiceTokenSelectedBorder: 'theme-choice-token-selected-border', + choiceTokenInvalidFg: 'theme-choice-token-invalid-fg', + choiceTokenInvalidBg: 'theme-choice-token-invalid-bg', + choiceTokenInvalidBorder: 'theme-choice-token-invalid-border', + choiceEntryBg: 'theme-choice-entry-bg', + choiceEntryBorder: 'theme-choice-entry-border', + choiceEntryBorderHover: 'theme-choice-entry-border-hover', + selectButtonFg: 'theme-select-button-fg', + selectButtonPlaceholderFg: 'theme-select-button-placeholder-fg', + selectButtonBg: 'theme-select-button-bg', + selectButtonBorder: 'theme-select-button-border', + selectButtonBorderInvalid: 'theme-select-button-border-invalid', + menuText: 'theme-menu-text', + menuLightText: 'theme-menu-light-text', + menuBg: 'theme-menu-bg', + menuSubheaderFg: 'theme-menu-subheader-fg', + menuBorder: 'theme-menu-border', + menuShadow: 'theme-menu-shadow', + menuItemFg: 'theme-menu-item-fg', + menuItemSelectedFg: 'theme-menu-item-selected-fg', + menuItemSelectedBg: 'theme-menu-item-selected-bg', + menuItemDisabledFg: 'theme-menu-item-disabled-fg', + menuItemIconFg: 'theme-menu-item-icon-fg', + menuItemIconSelectedFg: 'theme-menu-item-icon-selected-fg', + autocompleteMatchText: 'theme-autocomplete-match-text', + autocompleteSelectedMatchText: 'theme-autocomplete-selected-match-text', + autocompleteItemSelectedBg: 'theme-autocomplete-item-selected-bg', + autocompleteAddNewCircleFg: 'theme-autocomplete-add-new-circle-fg', + autocompleteAddNewCircleBg: 'theme-autocomplete-add-new-circle-bg', + autocompleteAddNewCircleSelectedBg: 'theme-autocomplete-add-new-circle-selected-bg', + searchBorder: 'theme-search-border', + searchPrevNextButtonFg: 'theme-search-prev-next-button-fg', + searchPrevNextButtonBg: 'theme-search-prev-next-button-bg', + loaderFg: 'theme-loader-fg', + loaderBg: 'theme-loader-bg', + siteSwitcherActiveFg: 'theme-site-switcher-active-fg', + siteSwitcherActiveBg: 'theme-site-switcher-active-bg', + docMenuDocOptionsFg: 'theme-doc-menu-doc-options-fg', + docMenuDocOptionsHoverFg: 'theme-doc-menu-doc-options-hover-fg', + docMenuDocOptionsHoverBg: 'theme-doc-menu-doc-options-hover-bg', + shortcutKeyFg: 'theme-shortcut-key-fg', + shortcutKeyPrimaryFg: 'theme-shortcut-key-primary-fg', + shortcutKeySecondaryFg: 'theme-shortcut-key-secondary-fg', + shortcutKeyBg: 'theme-shortcut-key-bg', + shortcutKeyBorder: 'theme-shortcut-key-border', + breadcrumbsTagFg: 'theme-breadcrumbs-tag-fg', + breadcrumbsTagBg: 'theme-breadcrumbs-tag-bg', + breadcrumbsTagAlertBg: 'theme-breadcrumbs-tag-alert-fg', + widgetPickerPrimaryBg: 'theme-widget-picker-primary-bg', + widgetPickerSecondaryBg: 'theme-widget-picker-secondary-bg', + widgetPickerItemFg: 'theme-widget-picker-item-fg', + widgetPickerItemSelectedBg: 'theme-widget-picker-item-selected-bg', + widgetPickerItemDisabledBg: 'theme-widget-picker-item-disabled-bg', + widgetPickerIcon: 'theme-widget-picker-icon', + widgetPickerPrimaryIcon: 'theme-widget-picker-primary-icon', + widgetPickerSummaryIcon: 'theme-widget-picker-summary-icon', + widgetPickerBorder: 'theme-widget-picker-border', + widgetPickerShadow: 'theme-widget-picker-shadow', + codeViewText: 'theme-code-view-text', + codeViewKeyword: 'theme-code-view-keyword', + codeViewComment: 'theme-code-view-comment', + codeViewMeta: 'theme-code-view-meta', + codeViewTitle: 'theme-code-view-title', + codeViewParams: 'theme-code-view-params', + codeViewString: 'theme-code-view-string', + codeViewNumber: 'theme-code-view-number', + codeViewBuiltin: 'theme-code-view-builtin', + codeViewLiteral: 'theme-code-view-literal', + importerTableInfoBorder: 'theme-importer-table-info-border', + importerPreviewBorder: 'theme-importer-preview-border', + importerSkippedTableOverlay: 'theme-importer-skipped-table-overlay', + importerMatchIcon: 'theme-importer-match-icon', + importerOutsideBg: 'theme-importer-outside-bg', + importerMainContentBg: 'theme-importer-main-content-bg', + importerActiveFileBg: 'theme-importer-active-file-bg', + importerActiveFileFg: 'theme-importer-active-file-fg', + importerInactiveFileBg: 'theme-importer-inactive-file-bg', + importerInactiveFileFg: 'theme-importer-inactive-file-fg', + menuToggleFg: 'theme-menu-toggle-fg', + menuToggleHoverFg: 'theme-menu-toggle-hover-fg', + menuToggleActiveFg: 'theme-menu-toggle-active-fg', + menuToggleBg: 'theme-menu-toggle-bg', + menuToggleBorder: 'theme-menu-toggle-border', + infoButtonFg: 'theme-info-button-fg', + infoButtonHoverFg: 'theme-info-button-hover-fg', + infoButtonActiveFg: 'theme-info-button-active-fg', + buttonGroupFg: 'theme-button-group-fg', + buttonGroupLightFg: 'theme-button-group-light-fg', + buttonGroupBg: 'theme-button-group-bg', + buttonGroupBgHover: 'theme-button-group-bg-hover', + buttonGroupIcon: 'theme-button-group-icon', + buttonGroupBorder: 'theme-button-group-border', + buttonGroupBorderHover: 'theme-button-group-border-hover', + buttonGroupSelectedFg: 'theme-button-group-selected-fg', + buttonGroupLightSelectedFg: 'theme-button-group-light-selected-fg', + buttonGroupSelectedBg: 'theme-button-group-selected-bg', + buttonGroupSelectedBorder: 'theme-button-group-selected-border', + accessRulesTableHeaderFg: 'theme-access-rules-table-header-fg', + accessRulesTableHeaderBg: 'theme-access-rules-table-header-bg', + accessRulesTableBodyFg: 'theme-access-rules-table-body-fg', + accessRulesTableBodyLightFg: 'theme-access-rules-table-body-light-fg', + accessRulesTableBorder: 'theme-access-rules-table-border', + accessRulesColumnListBorder: 'theme-access-rules-column-list-border', + accessRulesColumnItemFg: 'theme-access-rules-column-item-fg', + accessRulesColumnItemBg: 'theme-access-rules-column-item-bg', + accessRulesColumnItemIconFg: 'theme-access-rules-column-item-icon-fg', + accessRulesColumnItemIconHoverFg: 'theme-access-rules-column-item-icon-hover-fg', + accessRulesColumnItemIconHoverBg: 'theme-access-rules-column-item-icon-hover-bg', + accessRulesFormulaEditorBg: 'theme-access-rules-formula-editor-bg', + accessRulesFormulaEditorBorderHover: 'theme-access-rules-formula-editor-border-hover', + accessRulesFormulaEditorBgDisabled: 'theme-access-rules-formula-editor-bg-disabled', + accessRulesFormulaEditorFocus: 'theme-access-rules-formula-editor-focus', + cellFg: 'theme-cell-fg', + cellBg: 'theme-cell-bg', + cellZebraBg: 'theme-cell-zebra-bg', + chartFg: 'theme-chart-fg', + chartBg: 'theme-chart-bg', + chartLegendBg: 'theme-chart-legend-bg', + chartXAxis: 'theme-chart-x-axis', + chartYAxis: 'theme-chart-y-axis', + commentsPopupHeaderBg: 'theme-comments-popup-header-bg', + commentsPopupBodyBg: 'theme-comments-popup-body-bg', + commentsPopupBorder: 'theme-comments-popup-border', + commentsUserNameFg: 'theme-comments-user-name-fg', + commentsPanelTopicBg: 'theme-comments-panel-topic-bg', + commentsPanelTopicBorder: 'theme-comments-panel-topic-border', + commentsPanelResolvedTopicBg: 'theme-comments-panel-resolved-topic-bg', + datePickerSelectedFg: 'theme-date-picker-selected-fg', + datePickerSelectedBg: 'theme-date-picker-selected-bg', + datePickerSelectedBgHover: 'theme-date-picker-selected-bg-hover', + datePickerTodayFg: 'theme-date-picker-today-fg', + datePickerTodayBg: 'theme-date-picker-today-bg', + datePickerTodayBgHover: 'theme-date-picker-today-bg-hover', + datePickerRangeStartEndBg: 'theme-date-picker-range-start-end-bg', + datePickerRangeStartEndBgHover: 'theme-date-picker-range-start-end-bg-hover', + datePickerRangeBg: 'theme-date-picker-range-bg', + datePickerRangeBgHover: 'theme-date-picker-range-bg-hover', + tutorialsPopupBorder: 'theme-tutorials-popup-border', + tutorialsPopupHeaderFg: 'theme-tutorials-popup-header-fg', + tutorialsPopupBoxBg: 'theme-tutorials-popup-box-bg', + tutorialsPopupCodeFg: 'theme-tutorials-popup-code-fg', + tutorialsPopupCodeBg: 'theme-tutorials-popup-code-bg', + tutorialsPopupCodeBorder: 'theme-tutorials-popup-code-border', + aceEditorBg: 'theme-ace-editor-bg', + aceAutocompletePrimaryFg: 'theme-ace-autocomplete-primary-fg', + aceAutocompleteSecondaryFg: 'theme-ace-autocomplete-secondary-fg', + aceAutocompleteHighlightedFg: 'theme-ace-autocomplete-highlighted-fg', + aceAutocompleteBg: 'theme-ace-autocomplete-bg', + aceAutocompleteBorder: 'theme-ace-autocomplete-border', + aceAutocompleteLink: 'theme-ace-autocomplete-link', + aceAutocompleteLinkHighlighted: 'theme-ace-autocomplete-link-highlighted', + aceAutocompleteActiveLineBg: 'theme-ace-autocomplete-active-line-bg', + aceAutocompleteLineBorderHover: 'theme-ace-autocomplete-line-border-hover', + aceAutocompleteLineBgHover: 'theme-ace-autocomplete-line-bg-hover', + colorSelectFg: 'theme-color-select-fg', + colorSelectBg: 'theme-color-select-bg', + colorSelectShadow: 'theme-color-select-shadow', + colorSelectFontOptionsBorder: 'theme-color-select-font-options-border', + colorSelectFontOptionFg: 'theme-color-select-font-option-fg', + colorSelectFontOptionBgHover: 'theme-color-select-font-option-bg-hover', + colorSelectFontOptionFgSelected: 'theme-color-select-font-option-fg-selected', + colorSelectFontOptionBgSelected: 'theme-color-select-font-option-bg-selected', + colorSelectColorSquareBorder: 'theme-color-select-color-square-border', + colorSelectColorSquareBorderEmpty: 'theme-color-select-color-square-border-empty', + colorSelectInputFg: 'theme-color-select-input-fg', + colorSelectInputBg: 'theme-color-select-input-bg', + colorSelectInputBorder: 'theme-color-select-input-border', + highlightedCodeBlockBg: 'theme-highlighted-code-block-bg', + highlightedCodeBlockBgDisabled: 'theme-highlighted-code-block-bg-disabled', + highlightedCodeFg: 'theme-highlighted-code-fg', + highlightedCodeBorder: 'theme-highlighted-code-border', + highlightedCodeBgDisabled: 'theme-highlighted-code-bg-disabled', + loginPageBg: 'theme-login-page-bg', + loginPageBackdrop: 'theme-login-page-backdrop', + loginPageLine: 'theme-login-page-line', + loginPageGoogleButtonFg: 'theme-login-page-google-button-fg', + loginPageGoogleButtonBg: 'theme-login-page-google-button-bg', + loginPageGoogleButtonBgHover: 'theme-login-page-google-button-bg-hover', + loginPageGoogleButtonBorder: 'theme-login-page-google-button-border', + formulaAssistantHeaderBg: 'theme-formula-assistant-header-bg', + formulaAssistantBorder: 'theme-formula-assistant-border', + formulaAssistantPreformattedTextBg: 'theme-formula-assistant-preformatted-text-bg', + attachmentsEditorButtonFg: 'theme-attachments-editor-button-fg', + attachmentsEditorButtonHoverFg: 'theme-attachments-editor-button-hover-fg', + attachmentsEditorButtonBg: 'theme-attachments-editor-button-bg', + attachmentsEditorButtonHoverBg: 'theme-attachments-editor-button-hover-bg', + attachmentsEditorButtonBorder: 'theme-attachments-editor-button-border', + attachmentsEditorButtonIcon: 'theme-attachments-editor-button-icon', + attachmentsEditorBorder: 'theme-attachments-editor-border', + attachmentsCellIconFg: 'theme-attachments-cell-icon-fg', + attachmentsCellIconBg: 'theme-attachments-cell-icon-bg', + attachmentsCellIconHoverBg: 'theme-attachments-cell-icon-hover-bg', + announcementPopupFg: 'theme-announcement-popup-fg', + announcementPopupBg: 'theme-announcement-popup-bg', + switchSliderFg: 'theme-switch-slider-fg', + switchCircleFg: 'theme-switch-circle-fg', + scrollShadow: 'theme-scroll-shadow', + toggleCheckboxFg: 'theme-toggle-checkbox-fg', + numericSpinnerFg: 'theme-numeric-spinner-fg', + widgetGalleryBorder: 'theme-widget-gallery-border', + widgetGalleryBorderSelected: 'theme-widget-gallery-border-selected', + widgetGalleryShadow: 'theme-widget-gallery-shadow', + widgetGalleryBgHover: 'theme-widget-gallery-bg-hover', + widgetGallerySecondaryHeaderFg: 'theme-widget-gallery-secondary-header-fg', + widgetGallerySecondaryHeaderBg: 'theme-widget-gallery-secondary-header-bg', + widgetGallerySecondaryHeaderBgHover: 'theme-widget-gallery-secondary-header-bg-hover', + markdownCellLightBg: 'theme-markdown-cell-light-bg', + markdownCellLightBorder: 'theme-markdown-cell-light-border', + markdownCellMediumBorder: 'theme-markdown-cell-medium-border', + appHeaderBg: 'theme-app-header-bg', + appHeaderBorder: 'theme-app-header-border', + appHeaderBorderHover: 'theme-app-header-border-hover', + cardButtonBorder: 'theme-card-button-border', + cardButtonBorderSelected: 'theme-card-button-border-selected', + cardButtonShadow: 'theme-card-button-shadow', +} as const; + +export const tokens = Object.fromEntries( + Object.entries(tokensCssMapping).map(([name, value]) => [name, new CssCustomProp(value)]) +) as Record; + +export const legacyVariables = Object.fromEntries( + Object.entries(legacyVariablesCssMapping).map(([name, value]) => [name, new CssCustomProp(value)]) +) as Record; + +/** + * tokens that a given theme must always define + */ +export interface SpecificThemeTokens { + primaryLighter: Token; + primaryLight: Token; + primaryDark: Token; + primaryDarker: Token; + + secondaryLighter: Token; + secondaryLight: Token; + + warningBg: Token; + + cursor: Token; + inactiveCursor: Token; + selection: Token; + selectionOpaque: Token; + selectionDarkerOpaque: Token; + + text: Token; + textLight: Token; + textVeryLight: Token; + textDark: Token; + + mainBg: Token; + panelBg: Token; + activeBg: Token; + transparentBg: Token; + + borderLight: Token; + borderLighter: Token; + borderLighterTransparent: Token; + + legacyVariables: { + mediumText: Token; + errorText: Token; + errorTextHover: Token; + dangerText: Token; + pageBackdrop: Token; + addNewCircleBg: Token; + addNewCircleHoverBg: Token; + addNewCircleSmallHoverBg: Token; + topBarButtonErrorFg: Token; + toastLightText: Token; + toastBg: Token; + toastMemoBg: Token; + toastErrorIcon: Token; + toastErrorBg: Token; + toastSuccessIcon: Token; + toastSuccessBg: Token; + toastWarningIcon: Token; + toastWarningBg: Token; + toastInfoIcon: Token; + toastInfoBg: Token; + toastControlFg: Token; + toastInfoControlFg: Token; + tooltipBg: Token; + tooltipCloseButtonHoverFg: Token; + modalBackdrop: Token; + modalBorder: Token; + modalInnerShadow: Token; + modalOuterShadow: Token; + modalBackdropCloseButtonHoverFg: Token; + popupInnerShadow: Token; + popupOuterShadow: Token; + promptFg: Token; + progressBarErrorFg: Token; + hover: Token; + lightHover: Token; + cellEditorFg: Token; + cursor: Token; + cursorInactive: Token; + tableHeaderFg: Token; + tableHeaderSelectedFg: Token; + tableHeaderSelectedBg: Token; + tableHeaderBorder: Token; + tableAddNewBg: Token; + tableScrollShadow: Token; + tableFrozenColumnsBorder: Token; + tableDragDropIndicator: Token; + tableDragDropShadow: Token; + tableCellSummaryBg: Token; + cardCompactWidgetBg: Token; + cardBlocksBg: Token; + cardFormBorder: Token; + cardEditingLayoutBg: Token; + selection: Token; + selectionDarker: Token; + selectionDarkest: Token; + selectionOpaqueBg: Token; + selectionOpaqueDarkBg: Token; + selectionHeader: Token; + widgetInactiveStripesDark: Token; + controlHoverFg: Token; + controlPrimaryHoverBg: Token; + controlDisabledFg: Token; + controlDisabledBg: Token; + controlBorder: Token; + checkboxSelectedFg: Token; + checkboxBorderHover: Token; + filterBarButtonSavedBg: Token; + iconError: Token; + iconButtonPrimaryHoverBg: Token; + pageHoverBg: Token; + disabledPageFg: Token; + pageOptionsFg: Token; + pageInitialsBg: Token; + pageInitialsEmojiBg: Token; + pageInitialsEmojiOutline: Token; + rightPanelTabSelectedIcon: Token; + rightPanelTabButtonHoverBg: Token; + rightPanelSubtabSelectedUnderline: Token; + rightPanelSubtabHoverFg: Token; + rightPanelSubtabHoverUnderline: Token; + rightPanelToggleButtonDisabledFg: Token; + rightPanelToggleButtonDisabledBg: Token; + rightPanelFieldSettingsBg: Token; + rightPanelFieldSettingsButtonBg: Token; + documentHistorySnapshotBorder: Token; + documentHistoryTableHeaderFg: Token; + documentHistoryTableBorder: Token; + inputFg: Token; + inputInvalid: Token; + inputFocus: Token; + inputReadonlyBorder: Token; + choiceTokenBg: Token; + choiceTokenSelectedBg: Token; + choiceTokenInvalidBg: Token; + choiceTokenInvalidBorder: Token; + choiceEntryBorderHover: Token; + selectButtonBorderInvalid: Token; + menuBorder: Token; + menuShadow: Token; + autocompleteSelectedMatchText: Token; + autocompleteItemSelectedBg: Token; + autocompleteAddNewCircleSelectedBg: Token; + searchBorder: Token; + searchPrevNextButtonBg: Token; + siteSwitcherActiveBg: Token; + shortcutKeyPrimaryFg: Token; + breadcrumbsTagBg: Token; + breadcrumbsTagAlertBg: Token; + widgetPickerItemFg: Token; + widgetPickerItemSelectedBg: Token; + widgetPickerItemDisabledBg: Token; + widgetPickerSummaryIcon: Token; + widgetPickerBorder: Token; + widgetPickerShadow: Token; + codeViewText: Token; + codeViewKeyword: Token; + codeViewComment: Token; + codeViewMeta: Token; + codeViewTitle: Token; + codeViewParams: Token; + codeViewString: Token; + codeViewNumber: Token; + codeViewBuiltin: Token; + codeViewLiteral: Token; + importerSkippedTableOverlay: Token; + importerOutsideBg: Token; + importerMainContentBg: Token; + importerActiveFileBg: Token; + importerInactiveFileBg: Token; + menuToggleHoverFg: Token; + menuToggleActiveFg: Token; + infoButtonFg: Token; + infoButtonHoverFg: Token; + infoButtonActiveFg: Token; + buttonGroupBg: Token; + buttonGroupBgHover: Token; + buttonGroupBorderHover: Token; + accessRulesColumnItemBg: Token; + accessRulesFormulaEditorBgDisabled: Token; + cellZebraBg: Token; + chartFg: Token; + chartLegendBg: Token; + chartXAxis: Token; + chartYAxis: Token; + commentsUserNameFg: Token; + commentsPanelTopicBorder: Token; + commentsPanelResolvedTopicBg: Token; + datePickerSelectedFg: Token; + datePickerSelectedBg: Token; + datePickerSelectedBgHover: Token; + datePickerTodayBgHover: Token; + datePickerRangeStartEndBg: Token; + datePickerRangeStartEndBgHover: Token; + datePickerRangeBg: Token; + datePickerRangeBgHover: Token; + tutorialsPopupBoxBg: Token; + tutorialsPopupCodeFg: Token; + tutorialsPopupCodeBg: Token; + tutorialsPopupCodeBorder: Token; + aceAutocompletePrimaryFg: Token; + aceAutocompleteSecondaryFg: Token; + aceAutocompleteBg: Token; + aceAutocompleteBorder: Token; + aceAutocompleteLink: Token; + aceAutocompleteLinkHighlighted: Token; + aceAutocompleteActiveLineBg: Token; + aceAutocompleteLineBorderHover: Token; + aceAutocompleteLineBgHover: Token; + colorSelectFg: Token; + colorSelectShadow: Token; + colorSelectFontOptionsBorder: Token; + colorSelectFontOptionBgHover: Token; + colorSelectColorSquareBorder: Token; + highlightedCodeBlockBg: Token; + highlightedCodeBlockBgDisabled: Token; + highlightedCodeBgDisabled: Token; + loginPageBackdrop: Token; + loginPageLine: Token; + loginPageGoogleButtonFg: Token; + loginPageGoogleButtonBg: Token; + loginPageGoogleButtonBgHover: Token; + attachmentsEditorButtonFg: Token; + attachmentsEditorButtonHoverFg: Token; + attachmentsEditorButtonBg: Token; + attachmentsEditorButtonHoverBg: Token; + attachmentsEditorBorder: Token; + attachmentsCellIconFg: Token; + attachmentsCellIconBg: Token; + attachmentsCellIconHoverBg: Token; + announcementPopupBg: Token; + switchSliderFg: Token; + scrollShadow: Token; + toggleCheckboxFg: Token; + numericSpinnerFg: Token; + widgetGalleryBorder: Token; + widgetGalleryShadow: Token; + widgetGallerySecondaryHeaderBg: Token; + widgetGallerySecondaryHeaderBgHover: Token; + markdownCellLightBg: Token; + markdownCellLightBorder: Token; + markdownCellMediumBorder: Token; + appHeaderBg: Token; + appHeaderBorder: Token; + appHeaderBorderHover: Token; + cardButtonBorder: Token; + cardButtonShadow: Token; + }; +} + +export interface BaseThemeTokens { + white: Token; + lightGrey: Token; + mediumGreyOpaque: Token; + mediumGrey: Token; + darkGrey: Token; + slate: Token; + darkText: Token; + dark: Token; + black: Token; + hover: Token; + backdrop: Token; + error: Token; + warningLight: Token; + warningDark: Token; + + fontFamily: Token; + fontFamilyData: Token; + xxsmallFontSize: Token; + xsmallFontSize: Token; + smallFontSize: Token; + mediumFontSize: Token; + introFontSize: Token; + largeFontSize: Token; + xlargeFontSize: Token; + xxlargeFontSize: Token; + xxxlargeFontSize: Token; + + controlFontSize: Token; + smallControlFontSize: Token; + bigControlFontSize: Token; + headerControlFontSize: Token; + bigControlTextWeight: Token; + headerControlTextWeight: Token; + labelTextSize: Token; + labelTextBg: Token; + labelActiveBg: Token; + + controlMargin: Token; + controlPadding: Token; + tightPadding: Token; + loosePadding: Token; + + primaryBg: Token; + primaryBgHover: Token; + primaryFg: Token; + + controlBg: Token; + controlFg: Token; + controlFgHover: Token; + controlBorderColor: Token; + controlBorder: Token; + controlBorderRadius: Token; + + logoBg: Token; + logoSize: Token; + toastBg: Token; + + primaryLightBg: Token; + primaryLightFg: Token; + + legacyVariables: { + text: Token; + lightText: Token; + darkText: Token; + disabledText: Token; + pageBg: Token; + mainPanelBg: Token; + leftPanelBg: Token; + rightPanelBg: Token; + topHeaderBg: Token; + bottomFooterBg: Token; + pagePanelsBorder: Token; + pagePanelsBorderResizing: Token; + sidePanelOpenerFg: Token; + sidePanelOpenerActiveFg: Token; + sidePanelOpenerActiveBg: Token; + addNewCircleFg: Token; + addNewCircleSmallFg: Token; + addNewCircleSmallBg: Token; + topBarButtonPrimaryFg: Token; + topBarButtonSecondaryFg: Token; + topBarButtonDisabledFg: Token; + notificationsPanelHeaderBg: Token; + notificationsPanelBodyBg: Token; + notificationsPanelBorder: Token; + toastText: Token; + toastMemoText: Token; + tooltipFg: Token; + tooltipIcon: Token; + tooltipCloseButtonFg: Token; + tooltipCloseButtonHoverBg: Token; + modalBg: Token; + modalBorderDark: Token; + modalBorderHover: Token; + modalCloseButtonFg: Token; + modalBackdropCloseButtonFg: Token; + popupBg: Token; + popupSecondaryBg: Token; + popupCloseButtonFg: Token; + progressBarFg: Token; + progressBarBg: Token; + link: Token; + linkHover: Token; + cellEditorPlaceholderFg: Token; + cellEditorBg: Token; + cursorReadonly: Token; + tableHeaderBg: Token; + tableBodyBg: Token; + tableBodyBorder: Token; + cardCompactRecordBg: Token; + cardFormLabel: Token; + cardCompactLabel: Token; + cardBlocksLabel: Token; + cardCompactBorder: Token; + cardEditingLayoutBorder: Token; + cardListFormBorder: Token; + cardListBlocksBorder: Token; + selectionOpaqueFg: Token; + widgetBg: Token; + widgetBorder: Token; + widgetActiveBorder: Token; + widgetInactiveStripesLight: Token; + pinnedDocFooterBg: Token; + pinnedDocBorder: Token; + pinnedDocBorderHover: Token; + pinnedDocEditorBg: Token; + rawDataTableBorder: Token; + rawDataTableBorderHover: Token; + controlFg: Token; + controlPrimaryFg: Token; + controlPrimaryBg: Token; + controlSecondaryFg: Token; + controlSecondaryDisabledFg: Token; + controlSecondaryHoverFg: Token; + controlSecondaryHoverBg: Token; + checkboxBg: Token; + checkboxSelectedFg: Token; + checkboxDisabledBg: Token; + checkboxBorder: Token; + moveDocsSelectedFg: Token; + moveDocsSelectedBg: Token; + moveDocsDisabledFg: Token; + filterBarButtonSavedFg: Token; + filterBarButtonSavedHoverBg: Token; + iconDisabled: Token; + iconButtonFg: Token; + iconButtonPrimaryBg: Token; + iconButtonSecondaryBg: Token; + iconButtonSecondaryHoverBg: Token; + activePageFg: Token; + activePageBg: Token; + pageOptionsFg: Token; + pageOptionsHoverFg: Token; + pageOptionsHoverBg: Token; + pageOptionsSelectedHoverBg: Token; + pageInitialsFg: Token; + rightPanelTabFg: Token; + rightPanelTabBg: Token; + rightPanelTabIcon: Token; + rightPanelTabIconHover: Token; + rightPanelTabBorder: Token; + rightPanelTabHoverBg: Token; + rightPanelTabHoverFg: Token; + rightPanelTabSelectedFg: Token; + rightPanelTabSelectedBg: Token; + rightPanelSubtabFg: Token; + rightPanelSubtabSelectedFg: Token; + rightPanelDisabledOverlay: Token; + rightPanelToggleButtonEnabledFg: Token; + rightPanelToggleButtonEnabledBg: Token; + rightPanelCustomWidgetButtonFg: Token; + rightPanelCustomWidgetButtonBg: Token; + documentHistorySnapshotFg: Token; + documentHistorySnapshotSelectedFg: Token; + documentHistorySnapshotBg: Token; + documentHistorySnapshotSelectedBg: Token; + documentHistoryActivityText: Token; + documentHistoryActivityLightText: Token; + documentHistoryTableBorderLight: Token; + accentIcon: Token; + accentBorder: Token; + accentText: Token; + inputBg: Token; + inputDisabledFg: Token; + inputDisabledBg: Token; + inputPlaceholderFg: Token; + inputBorder: Token; + inputValid: Token; + inputReadonlyBg: Token; + choiceTokenFg: Token; + choiceTokenBlankFg: Token; + choiceTokenSelectedBorder: Token; + choiceTokenInvalidFg: Token; + choiceEntryBg: Token; + choiceEntryBorder: Token; + selectButtonFg: Token; + selectButtonPlaceholderFg: Token; + selectButtonBg: Token; + selectButtonBorder: Token; + menuText: Token; + menuLightText: Token; + menuBg: Token; + menuSubheaderFg: Token; + menuItemFg: Token; + menuItemSelectedFg: Token; + menuItemSelectedBg: Token; + menuItemDisabledFg: Token; + menuItemIconFg: Token; + menuItemIconSelectedFg: Token; + autocompleteMatchText: Token; + autocompleteAddNewCircleFg: Token; + autocompleteAddNewCircleBg: Token; + searchPrevNextButtonFg: Token; + loaderFg: Token; + loaderBg: Token; + siteSwitcherActiveFg: Token; + docMenuDocOptionsFg: Token; + docMenuDocOptionsHoverFg: Token; + docMenuDocOptionsHoverBg: Token; + shortcutKeyFg: Token; + shortcutKeySecondaryFg: Token; + shortcutKeyBg: Token; + shortcutKeyBorder: Token; + breadcrumbsTagFg: Token; + breadcrumbsTagAlertBg: Token; + widgetPickerPrimaryBg: Token; + widgetPickerSecondaryBg: Token; + widgetPickerIcon: Token; + widgetPickerPrimaryIcon: Token; + importerTableInfoBorder: Token; + importerPreviewBorder: Token; + importerMatchIcon: Token; + importerActiveFileFg: Token; + importerInactiveFileFg: Token; + menuToggleFg: Token; + menuToggleBg: Token; + menuToggleBorder: Token; + buttonGroupFg: Token; + buttonGroupLightFg: Token; + buttonGroupIcon: Token; + buttonGroupBorder: Token; + buttonGroupSelectedFg: Token; + buttonGroupLightSelectedFg: Token; + buttonGroupSelectedBg: Token; + buttonGroupSelectedBorder: Token; + accessRulesTableHeaderFg: Token; + accessRulesTableHeaderBg: Token; + accessRulesTableBodyFg: Token; + accessRulesTableBodyLightFg: Token; + accessRulesTableBorder: Token; + accessRulesColumnListBorder: Token; + accessRulesColumnItemFg: Token; + accessRulesColumnItemIconFg: Token; + accessRulesColumnItemIconHoverFg: Token; + accessRulesColumnItemIconHoverBg: Token; + accessRulesFormulaEditorBg: Token; + accessRulesFormulaEditorBorderHover: Token; + accessRulesFormulaEditorFocus: Token; + cellFg: Token; + cellBg: Token; + chartBg: Token; + commentsPopupHeaderBg: Token; + commentsPopupBodyBg: Token; + commentsPopupBorder: Token; + commentsPanelTopicBg: Token; + datePickerTodayFg: Token; + datePickerTodayBg: Token; + tutorialsPopupBorder: Token; + tutorialsPopupHeaderFg: Token; + aceEditorBg: Token; + aceAutocompleteHighlightedFg: Token; + colorSelectBg: Token; + colorSelectFontOptionFg: Token; + colorSelectFontOptionFgSelected: Token; + colorSelectFontOptionBgSelected: Token; + colorSelectColorSquareBorderEmpty: Token; + colorSelectInputFg: Token; + colorSelectInputBg: Token; + colorSelectInputBorder: Token; + highlightedCodeFg: Token; + highlightedCodeBorder: Token; + loginPageBg: Token; + loginPageGoogleButtonBorder: Token; + formulaAssistantHeaderBg: Token; + formulaAssistantBorder: Token; + formulaAssistantPreformattedTextBg: Token; + attachmentsEditorButtonBorder: Token; + attachmentsEditorButtonIcon: Token; + announcementPopupFg: Token; + switchCircleFg: Token; + widgetGalleryBorderSelected: Token; + widgetGalleryBgHover: Token; + widgetGallerySecondaryHeaderFg: Token; + cardButtonBorderSelected: Token; + }; +} + +export interface ThemeTokens extends + Omit, + Omit { + legacyVariables: BaseThemeTokens['legacyVariables'] & SpecificThemeTokens['legacyVariables']; } -export const ThemePrefsChecker = createCheckers(ThemePrefsTI).ThemePrefs as CheckerT; -export const ThemeAppearanceChecker = createCheckers(ThemePrefsTI).ThemeAppearance as CheckerT; -export const ThemeNameChecker = createCheckers(ThemePrefsTI).ThemeName as CheckerT; export function getDefaultThemePrefs(): ThemePrefs { return { diff --git a/app/common/Themes.ts b/app/common/Themes.ts index 1c566607b0..f54d48265a 100644 --- a/app/common/Themes.ts +++ b/app/common/Themes.ts @@ -1,13 +1,13 @@ -import {ThemeColors, ThemeName} from 'app/common/ThemePrefs'; +import {ThemeName, ThemeTokens} from 'app/common/ThemePrefs'; import {GristDark} from 'app/common/themes/GristDark'; import {GristLight} from 'app/common/themes/GristLight'; -const THEMES: Readonly> = { +const THEMES: Readonly> = { GristLight, GristDark, }; -export function getThemeColors(themeName: ThemeName): ThemeColors { +export function getThemeTokens(themeName: ThemeName): ThemeTokens { return THEMES[themeName]; } diff --git a/app/common/gristUrls.ts b/app/common/gristUrls.ts index 0baa41d76e..12fd74d3e4 100644 --- a/app/common/gristUrls.ts +++ b/app/common/gristUrls.ts @@ -5,7 +5,7 @@ import {encodeQueryParams, isAffirmative, removePrefix} from 'app/common/gutil'; import {LocalPlugin} from 'app/common/plugin'; import {StringUnion} from 'app/common/StringUnion'; import {TelemetryLevel} from 'app/common/Telemetry'; -import {ThemeAppearance, ThemeAppearanceChecker, ThemeName, ThemeNameChecker} from 'app/common/ThemePrefs'; +import {ThemeAppearance, themeAppearances, ThemeName, themeNames} from 'app/common/ThemePrefs'; import {getGristConfig} from 'app/common/urlUtils'; import {Document} from 'app/common/UserAPI'; import {IAttachedCustomWidget} from "app/common/widgetTypes"; @@ -536,15 +536,15 @@ export function decodeUrl(gristConfig: Partial, location: Locat if (sp.has('themeAppearance')) { const appearance = sp.get('themeAppearance'); - if (ThemeAppearanceChecker.strictTest(appearance)) { - state.params!.themeAppearance = appearance; + if (appearance && themeAppearances.includes(appearance as ThemeAppearance)) { + state.params!.themeAppearance = appearance as ThemeAppearance; } } if (sp.has('themeName')) { const themeName = sp.get('themeName'); - if (ThemeNameChecker.strictTest(themeName)) { - state.params!.themeName = themeName; + if (themeName && themeNames.includes(themeName as ThemeName)) { + state.params!.themeName = themeName as ThemeName; } } diff --git a/app/common/themes/Base.ts b/app/common/themes/Base.ts new file mode 100644 index 0000000000..95ee23a1dd --- /dev/null +++ b/app/common/themes/Base.ts @@ -0,0 +1,451 @@ +import { BaseThemeTokens, tokens } from "app/common/ThemePrefs"; + +/** + * Base theme tokens that can be used as a starting point for any theme. + */ +export const Base: BaseThemeTokens = { + white: '#FFFFFF', + lightGrey: '#F7F7F7', + mediumGreyOpaque: '#E8E8E8', + mediumGrey: 'rgba(217,217,217,0.6)', + darkGrey: '#D9D9D9', + slate: '#929299', + darkText: '#494949', + dark: '#262633', + black: '#000000', + + hover: '#bfbfbf', + backdrop: 'rgba(38,38,51,0.9)', + + error: '#D0021B', + warningLight: '#F9AE41', + warningDark: '#dd962c', + + /** + * The fonts used attempt to default to system fonts as described here: + * https://css-tricks.com/snippets/css/system-font-stack/ + */ + fontFamily: `-apple-system,BlinkMacSystemFont,Segoe UI,Liberation Sans, + Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`, + /** + * This is more monospace and looks better for data that should often align (e.g. to have 00000 + * take similar space to 11111). This is the main font for user data. + */ + fontFamilyData: + `Liberation Sans,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol`, + xxsmallFontSize: '8px', + xsmallFontSize: '10px', + smallFontSize: '11px', + mediumFontSize: '13px', + introFontSize: '14px', + largeFontSize: '16px', + xlargeFontSize: '18px', + xxlargeFontSize: '20px', + xxxlargeFontSize: '22px', + controlFontSize: '12px', + smallControlFontSize: '10px', + bigControlFontSize: '13px', + headerControlFontSize: '22px', + bigControlTextWeight: '500', + headerControlTextWeight: '600', + labelTextSize: 'medium', + labelTextBg: tokens.white, + labelActiveBg: tokens.lightGrey, + controlMargin: '2px', + controlPadding: '3px 5px', + tightPadding: '1px 2px', + loosePadding: '5px 15px', + + /* Control colors and borders */ + primaryBg: tokens.primaryLight, + primaryBgHover: tokens.primaryDark, + primaryFg: tokens.white, + + controlBg: tokens.white, + controlFg: tokens.primaryLight, + controlFgHover: tokens.primaryDark, + controlBorderColor: tokens.primaryLight, + controlBorder: `1px solid ${tokens.primaryLight}`, + controlBorderRadius: '4px', + + logoBg: '#040404', + logoSize: '22px 22px', + toastBg: '#040404', + + primaryLightBg: tokens.primaryLight, + primaryLightFg: tokens.primaryLight, + + /** + * legacy variables are meant to target theme-agnostic tokens, + * so that we don't have to override them all in each theme. + * + * the tokens here all target theme-agnostic tokens to show the idea, + * lots of others must be implemented in each theme still. + */ + legacyVariables: { + /* Text */ + text: tokens.text, + lightText: tokens.textLight, + darkText: tokens.textDark, + disabledText: tokens.textLight, + + /* Page */ + pageBg: tokens.panelBg, + + /* Page Panels */ + mainPanelBg: tokens.mainBg, + leftPanelBg: tokens.panelBg, + rightPanelBg: tokens.panelBg, + topHeaderBg: tokens.mainBg, + bottomFooterBg: tokens.mainBg, + pagePanelsBorder: tokens.borderLighterTransparent, + pagePanelsBorderResizing: tokens.primaryLightFg, + sidePanelOpenerFg: tokens.textLight, + sidePanelOpenerActiveFg: tokens.white, + sidePanelOpenerActiveBg: tokens.primaryLightFg, + + /* Add New */ + addNewCircleFg: tokens.white, + addNewCircleSmallFg: tokens.white, + addNewCircleSmallBg: tokens.primaryLightBg, + + /* Top Bar */ + topBarButtonPrimaryFg: tokens.primaryLightFg, + topBarButtonSecondaryFg: tokens.textLight, + topBarButtonDisabledFg: tokens.borderLighter, + + /* Notifications */ + notificationsPanelHeaderBg: tokens.panelBg, + notificationsPanelBodyBg: tokens.mainBg, + notificationsPanelBorder: tokens.borderLighter, + + /* Toasts */ + toastText: tokens.white, + toastMemoText: tokens.textVeryLight, + + /* Tooltips */ + tooltipFg: tokens.white, + tooltipIcon: tokens.textLight, + tooltipCloseButtonFg: tokens.white, + tooltipCloseButtonHoverBg: tokens.white, + + /* Modals */ + modalBg: tokens.mainBg, + modalBorderDark: tokens.borderLighter, + modalBorderHover: tokens.textLight, + modalCloseButtonFg: tokens.textLight, + modalBackdropCloseButtonFg: tokens.primaryLightFg, + + /* Popups */ + popupBg: tokens.mainBg, + popupSecondaryBg: tokens.panelBg, + popupCloseButtonFg: tokens.textLight, + + /* Progress Bars */ + progressBarFg: tokens.primaryLightFg, + progressBarBg: tokens.borderLighter, + + /* Links */ + link: tokens.primaryLightFg, + linkHover: tokens.primaryLightFg, + + /* Cell Editor */ + cellEditorPlaceholderFg: tokens.textLight, + cellEditorBg: tokens.mainBg, + + /* Cursor */ + cursorReadonly: tokens.textLight, + + /* Tables */ + tableHeaderBg: tokens.panelBg, + tableBodyBg: tokens.mainBg, + tableBodyBorder: tokens.borderLight, + + /* Cards */ + cardCompactRecordBg: tokens.mainBg, + cardFormLabel: tokens.textLight, + cardCompactLabel: tokens.textLight, + cardBlocksLabel: tokens.textLight, + cardCompactBorder: tokens.borderLighter, + cardEditingLayoutBorder: tokens.borderLighter, + + /* Card Lists */ + cardListFormBorder: tokens.borderLight, + cardListBlocksBorder: tokens.borderLight, + + /* Selection */ + selectionOpaqueFg: tokens.textDark, + + /* Widgets */ + widgetBg: tokens.mainBg, + widgetBorder: tokens.borderLighter, + widgetActiveBorder: tokens.primaryLightBg, + widgetInactiveStripesLight: tokens.panelBg, + + /* Pinned Docs */ + pinnedDocFooterBg: tokens.mainBg, + pinnedDocBorder: tokens.borderLighterTransparent, + pinnedDocBorderHover: tokens.textLight, + pinnedDocEditorBg: tokens.borderLighterTransparent, + + /* Raw Data */ + rawDataTableBorder: tokens.borderLighterTransparent, + rawDataTableBorderHover: tokens.textLight, + + /* Controls */ + controlFg: tokens.primaryLightFg, + controlPrimaryFg: tokens.white, + controlPrimaryBg: tokens.primaryLightBg, + controlSecondaryFg: tokens.textLight, + controlSecondaryDisabledFg: tokens.borderLight, + controlSecondaryHoverFg: tokens.text, + controlSecondaryHoverBg: tokens.borderLight, + + /* Checkboxes */ + checkboxBg: tokens.mainBg, + checkboxSelectedFg: tokens.primaryLight, + checkboxDisabledBg: tokens.borderLighter, + checkboxBorder: tokens.borderLighter, + + /* Move Docs */ + moveDocsSelectedFg: tokens.white, + moveDocsSelectedBg: tokens.primaryLightBg, + moveDocsDisabledFg: tokens.borderLighter, + + /* Filter Bar */ + filterBarButtonSavedFg: tokens.white, + filterBarButtonSavedHoverBg: tokens.borderLighter, + + /* Icons */ + iconDisabled: tokens.textLight, + + /* Icon Buttons */ + iconButtonFg: tokens.white, + iconButtonPrimaryBg: tokens.primaryLightFg, + iconButtonSecondaryBg: tokens.borderLighter, + iconButtonSecondaryHoverBg: tokens.textLight, + + /* Left Panel */ + activePageFg: tokens.textVeryLight, + activePageBg: tokens.activeBg, + pageOptionsFg: tokens.slate, + pageOptionsHoverFg: tokens.white, + pageOptionsHoverBg: tokens.borderLighter, + pageOptionsSelectedHoverBg: tokens.textLight, + pageInitialsFg: tokens.white, + + /* Right Panel */ + rightPanelTabFg: tokens.textLight, + rightPanelTabBg: tokens.mainBg, + rightPanelTabIcon: tokens.textLight, + rightPanelTabIconHover: tokens.text, + rightPanelTabBorder: tokens.borderLighterTransparent, + rightPanelTabHoverBg: tokens.mainBg, + rightPanelTabHoverFg: tokens.text, + rightPanelTabSelectedFg: tokens.text, + rightPanelTabSelectedBg: tokens.panelBg, + rightPanelSubtabFg: tokens.primaryLightFg, + rightPanelSubtabSelectedFg: tokens.text, + rightPanelDisabledOverlay: tokens.panelBg, + rightPanelToggleButtonEnabledFg: tokens.white, + rightPanelToggleButtonEnabledBg: tokens.activeBg, + rightPanelCustomWidgetButtonFg: tokens.text, + rightPanelCustomWidgetButtonBg: tokens.borderLight, + + /* Document History */ + documentHistorySnapshotFg: tokens.text, + documentHistorySnapshotSelectedFg: tokens.textVeryLight, + documentHistorySnapshotBg: tokens.mainBg, + documentHistorySnapshotSelectedBg: tokens.activeBg, + documentHistoryActivityText: tokens.text, + documentHistoryActivityLightText: tokens.textLight, + documentHistoryTableBorderLight: tokens.borderLight, + + /* Accents */ + accentIcon: tokens.primaryLightFg, + accentBorder: tokens.primaryLightBg, + accentText: tokens.primaryLightFg, + + /* Inputs */ + inputBg: tokens.mainBg, + inputDisabledFg: tokens.textLight, + inputDisabledBg: tokens.panelBg, + inputPlaceholderFg: tokens.textLight, + inputBorder: tokens.borderLighter, + inputValid: tokens.primaryLightFg, + inputReadonlyBg: tokens.panelBg, + + /* Choice Tokens */ + choiceTokenFg: tokens.textDark, + choiceTokenBlankFg: tokens.textLight, + choiceTokenSelectedBorder: tokens.primaryLightFg, + choiceTokenInvalidFg: tokens.textDark, + + /* Choice Entry */ + choiceEntryBg: tokens.mainBg, + choiceEntryBorder: tokens.borderLighter, + + /* Select Buttons */ + selectButtonFg: tokens.text, + selectButtonPlaceholderFg: tokens.textLight, + selectButtonBg: tokens.mainBg, + selectButtonBorder: tokens.borderLighter, + + /* Menus */ + menuText: tokens.textLight, + menuLightText: tokens.textLight, + menuBg: tokens.mainBg, + menuSubheaderFg: tokens.text, + + /* Menu Items */ + menuItemFg: tokens.textDark, + menuItemSelectedFg: tokens.white, + menuItemSelectedBg: tokens.primaryLightBg, + menuItemDisabledFg: tokens.borderLighter, + menuItemIconFg: tokens.textLight, + menuItemIconSelectedFg: tokens.white, + + /* Autocomplete */ + autocompleteMatchText: tokens.primaryLightFg, + autocompleteAddNewCircleFg: tokens.white, + autocompleteAddNewCircleBg: tokens.primaryLightBg, + + /* Search */ + searchPrevNextButtonFg: tokens.textLight, + + /* Loaders */ + loaderFg: tokens.primaryLightFg, + loaderBg: tokens.borderLighter, + + /* Site Switcher */ + siteSwitcherActiveFg: tokens.white, + + /* Doc Menu */ + docMenuDocOptionsFg: tokens.borderLighter, + docMenuDocOptionsHoverFg: tokens.textLight, + docMenuDocOptionsHoverBg: tokens.borderLighter, + + /* Shortcut Keys */ + shortcutKeyFg: tokens.textDark, + shortcutKeySecondaryFg: tokens.textLight, + shortcutKeyBg: tokens.mainBg, + shortcutKeyBorder: tokens.textLight, + + /* Breadcrumbs */ + breadcrumbsTagFg: tokens.white, + breadcrumbsTagAlertBg: tokens.error, + + /* Page Widget Picker */ + widgetPickerPrimaryBg: tokens.mainBg, + widgetPickerSecondaryBg: tokens.panelBg, + widgetPickerIcon: tokens.textLight, + widgetPickerPrimaryIcon: tokens.primaryLightFg, + + /* Importer */ + importerTableInfoBorder: tokens.borderLighter, + importerPreviewBorder: tokens.borderLighter, + importerMatchIcon: tokens.borderLighter, + + // tabs + importerActiveFileFg: tokens.white, + importerInactiveFileFg: tokens.white, + + /* Menu Toggles */ + menuToggleFg: tokens.textLight, + menuToggleBg: tokens.mainBg, + menuToggleBorder: tokens.textLight, + + /* Button Groups */ + buttonGroupFg: tokens.text, + buttonGroupLightFg: tokens.textLight, + buttonGroupIcon: tokens.textLight, + buttonGroupBorder: tokens.borderLighter, + buttonGroupSelectedFg: tokens.textVeryLight, + buttonGroupLightSelectedFg: tokens.primaryLightFg, + buttonGroupSelectedBg: tokens.activeBg, + buttonGroupSelectedBorder: tokens.activeBg, + + /* Access Rules */ + accessRulesTableHeaderFg: tokens.text, + accessRulesTableHeaderBg: tokens.borderLighterTransparent, + accessRulesTableBodyFg: tokens.textLight, + accessRulesTableBodyLightFg: tokens.borderLighter, + accessRulesTableBorder: tokens.textLight, + accessRulesColumnListBorder: tokens.borderLighter, + accessRulesColumnItemFg: tokens.text, + accessRulesColumnItemIconFg: tokens.textLight, + accessRulesColumnItemIconHoverFg: tokens.textVeryLight, + accessRulesColumnItemIconHoverBg: tokens.textLight, + accessRulesFormulaEditorBg: tokens.mainBg, + accessRulesFormulaEditorBorderHover: tokens.borderLighter, + accessRulesFormulaEditorFocus: tokens.primaryLightFg, + + /* Cells */ + cellFg: tokens.textDark, + cellBg: tokens.mainBg, + + /* Charts */ + chartBg: tokens.mainBg, + + /* Comments */ + commentsPopupHeaderBg: tokens.panelBg, + commentsPopupBodyBg: tokens.mainBg, + commentsPopupBorder: tokens.borderLighter, + commentsPanelTopicBg: tokens.mainBg, + + /* Date Picker */ + datePickerTodayFg: tokens.white, + datePickerTodayBg: tokens.primaryLightBg, + + /* Tutorials */ + tutorialsPopupBorder: tokens.borderLighter, + tutorialsPopupHeaderFg: tokens.white, + + /* Ace */ + aceEditorBg: tokens.mainBg, + aceAutocompleteHighlightedFg: tokens.textDark, + + /* Color Select */ + colorSelectBg: tokens.mainBg, + colorSelectFontOptionFg: tokens.text, + colorSelectFontOptionFgSelected: tokens.textVeryLight, + colorSelectFontOptionBgSelected: tokens.activeBg, + colorSelectColorSquareBorderEmpty: tokens.text, + colorSelectInputFg: tokens.textLight, + colorSelectInputBg: tokens.mainBg, + colorSelectInputBorder: tokens.borderLighter, + + /* Highlighted Code */ + highlightedCodeFg: tokens.textLight, + highlightedCodeBorder: tokens.borderLighter, + + /* Login Page */ + loginPageBg: tokens.mainBg, + loginPageGoogleButtonBorder: tokens.borderLighter, + + /* Formula Assistant */ + formulaAssistantHeaderBg: tokens.panelBg, + formulaAssistantBorder: tokens.borderLighter, + formulaAssistantPreformattedTextBg: tokens.panelBg, + + /* Attachments */ + attachmentsEditorButtonBorder: tokens.borderLighter, + attachmentsEditorButtonIcon: tokens.textLight, + + /* Announcement Popups */ + announcementPopupFg: tokens.textDark, + + /* Switches */ + switchCircleFg: tokens.textVeryLight, + + /* Custom Widget Gallery */ + widgetGalleryBorderSelected: tokens.primaryLightFg, + widgetGalleryBgHover: tokens.panelBg, + widgetGallerySecondaryHeaderFg: tokens.white, + + /* Card Button */ + cardButtonBorderSelected: tokens.primaryLightFg, + } +}; + + diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts index 92d14e9577..cf4d5d4a82 100644 --- a/app/common/themes/GristDark.ts +++ b/app/common/themes/GristDark.ts @@ -1,584 +1,370 @@ -import {ThemeColors} from 'app/common/ThemePrefs'; - -export const GristDark: ThemeColors = { - /* 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-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', +import {ThemeTokens, tokens} from 'app/common/ThemePrefs'; +import {Base} from 'app/common/themes/Base'; + +/** + * Dark Grist theme. Uses the BaseTheme and describes the dark-theme colors. + */ +export const GristDark: ThemeTokens = { + ...Base, + primaryLighter: '#b1ffe2', + primaryLight: '#17b378', + primaryDark: '#009058', + primaryDarker: '#007548', + secondaryLighter: '#87b2f9', + secondaryLight: '#3B82F6', + inactiveCursor: '#A2E1C9', + cursor: tokens.primaryLight, + selection: 'rgba(22,179,120,0.15)', + selectionOpaque: '#DCF4EB', + selectionDarkerOpaque: '#d6eee5', + + warningBg: tokens.warningDark, + + text: "#efefef", + textLight: "#a4a4b1", + textVeryLight: "#efefef", + textDark: tokens.white, + + mainBg: "#32323f", + panelBg: tokens.dark, + activeBg: "#646473", + transparentBg: "rgba(111,111,125,0.6)", + + borderLight: "#60606d", + borderLighter: "#70707d", + borderLighterTransparent: "#60606d", + + primaryLightBg: '#157a54', + + legacyVariables: { + ...Base.legacyVariables, + + /* Text */ + mediumText: '#d5d5d5', + errorText: '#e63946', + errorTextHover: '#ff5c5c', + dangerText: '#ffa500', + + /* Page */ + pageBackdrop: '#000000', + + /* Add New */ + addNewCircleBg: '#0a5438', + addNewCircleHoverBg: '#157a54', + addNewCircleSmallHoverBg: '#1da270', + + /* Top Bar */ + topBarButtonErrorFg: 'ff6666', + + /* Toasts */ + toastLightText: '#929299', + toastBg: '#040404', + toastMemoBg: '#555563', + toastErrorIcon: '#d0021b', + toastErrorBg: '#d0021b', + toastSuccessIcon: '#009058', + toastSuccessBg: '#009058', + toastWarningIcon: '#f9ae41', + toastWarningBg: '#dd962c', + toastInfoIcon: '#3b82f6', + toastInfoBg: '#3b82f6', + toastControlFg: '#16b378', + toastInfoControlFg: '#87b2f9', + + /* Tooltips */ + tooltipBg: 'rgba(0,0,0,0.75)', + tooltipCloseButtonHoverFg: '#000000', + + /* Modals */ + modalBackdrop: 'rgba(0,0,0,0.6)', + modalBorder: '#60606d', + modalInnerShadow: '#000000', + modalOuterShadow: '#000000', + modalBackdropCloseButtonHoverFg: '#13d78d', + + /* Popups */ + popupInnerShadow: '#000000', + popupOuterShadow: '#000000', + + /* Prompts */ + promptFg: '#a4a4b1', + + /* Progress Bars */ + progressBarErrorFg: '#ff6666', + + /* Hover */ + hover: 'rgba(111,111,125,0.6)', + lightHover: 'rgba(111,111,125,0.4)', + + /* Cell Editor */ + cellEditorFg: '#ffffff', + + /* Cursor */ + cursor: '#1da270', + cursorInactive: 'rgba(29,162,112,0.5)', + + /* Tables */ + tableHeaderFg: '#efefef', + tableHeaderSelectedFg: '#efefef', + tableHeaderSelectedBg: '#414358', + tableHeaderBorder: '#70707d', + tableAddNewBg: '#4a4a5d', + tableScrollShadow: '#000000', + tableFrozenColumnsBorder: '#a4a4b1', + tableDragDropIndicator: '#a4a4b1', + tableDragDropShadow: 'rgba(111,111,125,0.6)', + tableCellSummaryBg: 'rgba(111,111,125,0.6)', + + /* Cards */ + cardCompactWidgetBg: '#262633', + cardBlocksBg: '#404150', + cardFormBorder: '#70707d', + cardEditingLayoutBg: 'rgba(85,85,99,0.2)', + + /* Selection */ + selection: 'rgba(22,179,120,0.15)', + selectionDarker: 'rgba(22,179,120,0.25)', + selectionDarkest: 'rgba(22,179,120,0.35)', + selectionOpaqueBg: '#2f4748', + selectionOpaqueDarkBg: '#253e3e', + selectionHeader: 'rgba(107,107,144,0.4)', + + /* Widgets */ + widgetInactiveStripesDark: '#32323f', + + /* Controls */ + controlHoverFg: '#13d78d', + controlPrimaryHoverBg: '#1da270', + controlDisabledFg: '#a4a4b1', + controlDisabledBg: '#70707d', + controlBorder: '1px solid #17b378', + + /* Checkboxes */ + /* MISSING */ checkboxSelectedFg: tokens.primaryLight, + checkboxBorderHover: '#a4a4b1', + + /* Filter Bar */ + filterBarButtonSavedBg: '#555563', + + /* Icons */ + iconError: '#ffa500', + + /* Icon Buttons */ + iconButtonPrimaryHoverBg: '#13d78d', + + /* Left Panel */ + pageHoverBg: 'rgba(111,111,117,0.25)', + disabledPageFg: '#70707d', + pageOptionsFg: '#a4a4b1', + pageInitialsBg: '#8e8ea0', + pageInitialsEmojiBg: '#000000', + pageInitialsEmojiOutline: '#70707d', + + /* Right Panel */ + rightPanelTabSelectedIcon: '#16b378', + rightPanelTabButtonHoverBg: '#0a5438', + rightPanelSubtabSelectedUnderline: '#1da270', + rightPanelSubtabHoverFg: '#13d78d', + rightPanelSubtabHoverUnderline: '#13d78d', + rightPanelToggleButtonDisabledFg: '#646473', + rightPanelToggleButtonDisabledBg: '#32323f', + rightPanelFieldSettingsBg: '#404150', + rightPanelFieldSettingsButtonBg: '#646473', + + /* Document History */ + documentHistorySnapshotBorder: '#70707d', + documentHistoryTableHeaderFg: '#efefef', + documentHistoryTableBorder: '#70707d', + + /* Inputs */ + inputFg: '#efefef', + inputInvalid: '#ff6666', + inputFocus: '#5e9ed6', + inputReadonlyBorder: '#70707d', + + /* Choice Tokens */ + choiceTokenBg: '#70707d', + choiceTokenSelectedBg: '#555563', + choiceTokenInvalidBg: '#323240', + choiceTokenInvalidBorder: '#d0021b', + + /* Choice Entry */ + choiceEntryBorderHover: '#a4a4b1', + + /* Select Buttons */ + selectButtonBorderInvalid: '#ff6666', + + /* Menus */ + menuBorder: '#70707d', + menuShadow: '#000000', + + /* Autocomplete */ + autocompleteSelectedMatchText: '#13d78d', + autocompleteItemSelectedBg: '#70707d', + autocompleteAddNewCircleSelectedBg: '#1da270', + + /* Search */ + searchBorder: '#70707d', + searchPrevNextButtonBg: '#24242f', + + /* Site Switcher */ + siteSwitcherActiveBg: '#000000', + + /* Shortcut Keys */ + shortcutKeyPrimaryFg: '#17b378', + + /* Breadcrumbs */ + breadcrumbsTagBg: '#70707d', + breadcrumbsTagAlertBg: '#d0021b', + + /* Page Widget Picker */ + widgetPickerItemFg: '#ffffff', + widgetPickerItemSelectedBg: 'rgba(111,111,125,0.6)', + widgetPickerItemDisabledBg: 'rgba(111,111,125,0.6)', + widgetPickerSummaryIcon: '#17b378', + widgetPickerBorder: 'rgba(111,111,125,0.6)', + widgetPickerShadow: '#000000', + + /* Code View */ + codeViewText: '#d2d2d2', + codeViewKeyword: '#d2d2d2', + codeViewComment: '#888888', + codeViewMeta: '#7cd4ff', + codeViewTitle: '#ed7373', + codeViewParams: '#d2d2d2', + codeViewString: '#ed7373', + codeViewNumber: '#ed7373', + codeViewBuiltin: '#bfe6d8', + codeViewLiteral: '#9ed682', + + /* Importer */ + importerSkippedTableOverlay: 'rgba(111,111,125,0.6)', + importerOutsideBg: '#32323f', + importerMainContentBg: '#262633', + importerActiveFileBg: '#16b378', + importerInactiveFileBg: '#808080', + + /* Menu Toggles */ + menuToggleHoverFg: '#17b378', + menuToggleActiveFg: '#13d78d', + + /* Info Button */ + infoButtonFg: '#8f8f8f', + infoButtonHoverFg: '#707070', + infoButtonActiveFg: '#5c5c5c', + + /* Button Groups */ + buttonGroupBg: 'transparent', + buttonGroupBgHover: 'rgba(111,111,125,0.25)', + buttonGroupBorderHover: '#646473', + + /* Access Rules */ + accessRulesColumnItemBg: '#60606d', + accessRulesFormulaEditorBgDisabled: '#60606d', + + /* Cells */ + cellZebraBg: '#262633', + + /* Charts */ + chartFg: '#a4a4b1', + chartLegendBg: 'rgba(50,50,63,0.5)', + chartXAxis: '#a4a4b1', + chartYAxis: '#a4a4b1', + + /* Comments */ + commentsUserNameFg: '#efefef', + commentsPanelTopicBorder: '#555563', + commentsPanelResolvedTopicBg: '#262633', + + /* Date Picker */ + datePickerSelectedFg: '#ffffff', + datePickerSelectedBg: '#7a7a8d', + datePickerSelectedBgHover: '#8d8d9c', + datePickerTodayBgHover: '#1da270', + datePickerRangeStartEndBg: '#7a7a8d', + datePickerRangeStartEndBgHover: '#8d8d9c', + datePickerRangeBg: '#60606d', + datePickerRangeBgHover: '#7a7a8d', + + /* Tutorials */ + tutorialsPopupBoxBg: '#60606d', + tutorialsPopupCodeFg: '#ffffff', + tutorialsPopupCodeBg: '#262633', + tutorialsPopupCodeBorder: '#929299', + + /* Ace */ + aceAutocompletePrimaryFg: '#efefef', + aceAutocompleteSecondaryFg: '#a4a4b1', + aceAutocompleteBg: '#32323f', + aceAutocompleteBorder: '#70707d', + aceAutocompleteLink: '#28be86', + aceAutocompleteLinkHighlighted: '#45d48b', + aceAutocompleteActiveLineBg: '#555563', + aceAutocompleteLineBorderHover: 'rgba(111,111,125,0.3)', + aceAutocompleteLineBgHover: 'rgba(111,111,125,0.3)', + + /* Color Select */ + colorSelectFg: '#a4a4b1', + colorSelectShadow: '#000000', + colorSelectFontOptionsBorder: '#555563', + colorSelectFontOptionBgHover: 'rgba(111,111,125,0.25)', + colorSelectColorSquareBorder: '#a4a4b1', + + /* Highlighted Code */ + highlightedCodeBlockBg: '#262633', + highlightedCodeBlockBgDisabled: '#555563', + highlightedCodeBgDisabled: '#32323f', + + /* Login Page */ + loginPageBackdrop: '#404150', + loginPageLine: '#60606d', + loginPageGoogleButtonFg: '#ffffff', + loginPageGoogleButtonBg: '#404150', + loginPageGoogleButtonBgHover: '#555563', + + /* Attachments */ + attachmentsEditorButtonFg: '#17b378', + attachmentsEditorButtonHoverFg: '#13d78d', + attachmentsEditorButtonBg: '#404150', + attachmentsEditorButtonHoverBg: '#555563', + attachmentsEditorBorder: '#a4a4b1', + attachmentsCellIconFg: '#a4a4b1', + attachmentsCellIconBg: '#555563', + attachmentsCellIconHoverBg: '#70707d', + + /* Announcement Popups */ + announcementPopupBg: '#404150', + + /* Switches */ + switchSliderFg: '#70707d', + + /* Scroll Shadow */ + scrollShadow: 'rgba(0,0,0,0.25)', + + /* Toggle Checkboxes */ + toggleCheckboxFg: '#a4a4b1', + + /* Numeric Spinners */ + numericSpinnerFg: '#a4a4b1', + + /* Custom Widget Gallery */ + widgetGalleryBorder: '#555563', + widgetGalleryShadow: '#00000080', + widgetGallerySecondaryHeaderBg: '#70707d', + widgetGallerySecondaryHeaderBgHover: '#60606d', + + /* Markdown Cell */ + markdownCellLightBg: '#494958', + markdownCellLightBorder: '#32323f', + markdownCellMediumBorder: '#555563', + + /* App Header */ + appHeaderBg: '#32323f', + appHeaderBorder: '#32323f', + appHeaderBorderHover: '#78788c', + + /* Card Button */ + cardButtonBorder: '#555563', + cardButtonShadow: '#0000001a', + } }; diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts index e03f295c52..1d25c4bafa 100644 --- a/app/common/themes/GristLight.ts +++ b/app/common/themes/GristLight.ts @@ -1,584 +1,368 @@ -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', +import {ThemeTokens, tokens} from 'app/common/ThemePrefs'; +import {Base} from 'app/common/themes/Base'; + +/** + * Default Grist theme. Uses the BaseTheme and describes the light-theme colors. + */ +export const GristLight: ThemeTokens = { + ...Base, + primaryLighter: '#b1ffe2', + primaryLight: '#16B378', + primaryDark: '#009058', + primaryDarker: '#007548', + secondaryLighter: '#87b2f9', + secondaryLight: '#3B82F6', + inactiveCursor: '#A2E1C9', + cursor: tokens.primaryLight, + selection: 'rgba(22,179,120,0.15)', + selectionOpaque: '#DCF4EB', + selectionDarkerOpaque: '#d6eee5', + + warningBg: tokens.warningDark, + + text: tokens.dark, + textLight: tokens.slate, + textVeryLight: tokens.white, + textDark: tokens.black, + + mainBg: tokens.white, + panelBg: tokens.lightGrey, + activeBg: tokens.dark, + transparentBg: tokens.mediumGrey, + + borderLight: tokens.slate, + borderLighter: tokens.darkGrey, + borderLighterTransparent: tokens.mediumGrey, + + legacyVariables: { + ...Base.legacyVariables, + + /* Text */ + mediumText: tokens.darkText, + errorText: tokens.error, + errorTextHover: '#BF0A31', + dangerText: '#FFA500', + + /* Page */ + pageBackdrop: 'grey', + + /* Add New */ + addNewCircleBg: tokens.primaryDark, + addNewCircleHoverBg: tokens.primaryDarker, + addNewCircleSmallHoverBg: tokens.primaryDark, + + /* Top Bar */ + topBarButtonErrorFg: tokens.error, + + /* Toasts */ + toastLightText: tokens.slate, + toastBg: tokens.toastBg, + toastMemoBg: tokens.dark, + toastErrorIcon: tokens.error, + toastErrorBg: tokens.error, + toastSuccessIcon: tokens.primaryDark, + toastSuccessBg: tokens.primaryDark, + toastWarningIcon: tokens.warningLight, + toastWarningBg: tokens.warningBg, + toastInfoIcon: tokens.secondaryLight, + toastInfoBg: tokens.secondaryLight, + toastControlFg: tokens.primaryLight, + toastInfoControlFg: tokens.secondaryLighter, + + /* Tooltips */ + tooltipBg: 'rgba(0, 0, 0, 0.75)', + tooltipCloseButtonHoverFg: 'black', + + /* Modals */ + modalBackdrop: tokens.backdrop, + modalBorder: tokens.mediumGreyOpaque, + modalInnerShadow: 'rgba(31, 37, 50, 0.31)', + modalOuterShadow: 'rgba(76, 86, 103, 0.24)', + modalBackdropCloseButtonHoverFg: tokens.primaryLighter, + + /* Popups */ + popupInnerShadow: 'rgba(31, 37, 50, 0.31)', + popupOuterShadow: 'rgba(76, 86, 103, 0.24)', + + /* Prompts */ + promptFg: '#606060', + + /* Progress Bars */ + progressBarErrorFg: tokens.error, + + /* Hover */ + hover: tokens.mediumGrey, + lightHover: tokens.lightGrey, + + /* Cell Editor */ + cellEditorFg: tokens.dark, + + /* Cursor */ + cursor: tokens.cursor, + cursorInactive: tokens.inactiveCursor, + + /* Tables */ + tableHeaderFg: '#000', + tableHeaderSelectedFg: '#000', + tableHeaderSelectedBg: tokens.mediumGreyOpaque, + tableHeaderBorder: 'lightgray', + tableAddNewBg: 'inherit', + tableScrollShadow: '#444444', + tableFrozenColumnsBorder: '#999999', + tableDragDropIndicator: 'gray', + tableDragDropShadow: '#F0F0F0', + tableCellSummaryBg: tokens.mediumGrey, + + /* Cards */ + cardCompactWidgetBg: tokens.mediumGrey, + cardBlocksBg: tokens.mediumGrey, + cardFormBorder: 'lightgrey', + cardEditingLayoutBg: 'rgba(192, 192, 192, 0.2)', + + /* Selection */ + selection: tokens.selection, + selectionDarker: 'rgba(22,179,120,0.25)', + selectionDarkest: 'rgba(22,179,120,0.35)', + selectionOpaqueBg: tokens.selectionOpaque, + selectionOpaqueDarkBg: tokens.selectionDarkerOpaque, + selectionHeader: tokens.mediumGrey, + + /* Widgets */ + widgetInactiveStripesDark: tokens.mediumGreyOpaque, + + /* Controls */ + controlHoverFg: tokens.controlFgHover, + controlPrimaryHoverBg: tokens.primaryBgHover, + controlDisabledFg: tokens.light, + controlDisabledBg: tokens.slate, + controlBorder: tokens.controlBorder, + + /* Checkboxes */ + checkboxSelectedFg: tokens.primaryLight, + checkboxBorderHover: tokens.hover, + + /* Filter Bar */ + filterBarButtonSavedBg: tokens.slate, + + /* Icons */ + iconError: tokens.error, + + /* Icon Buttons */ + iconButtonPrimaryHoverBg: tokens.primaryDark, + + /* Left Panel */ + pageHoverBg: tokens.mediumGrey, + disabledPageFg: tokens.darkGrey, + pageOptionsFg: tokens.slate, + pageInitialsBg: tokens.slate, + pageInitialsEmojiBg: 'white', + pageInitialsEmojiOutline: tokens.darkGrey, + + /* Right Panel */ + rightPanelTabSelectedIcon: tokens.primaryLight, + rightPanelTabButtonHoverBg: tokens.primaryDark, + rightPanelSubtabSelectedUnderline: tokens.primaryLight, + rightPanelSubtabHoverFg: tokens.primaryDark, + rightPanelSubtabHoverUnderline: tokens.primaryLight, + rightPanelToggleButtonDisabledFg: tokens.light, + rightPanelToggleButtonDisabledBg: tokens.mediumGreyOpaque, + rightPanelFieldSettingsBg: tokens.mediumGreyOpaque, + rightPanelFieldSettingsButtonBg: 'lightgrey', + + /* Document History */ + documentHistorySnapshotBorder: tokens.mediumGrey, + documentHistoryTableHeaderFg: '#000', + documentHistoryTableBorder: 'lightgray', + + /* Inputs */ + inputFg: 'black', + inputInvalid: tokens.error, + inputFocus: '#5E9ED6', + inputReadonlyBorder: tokens.mediumGreyOpaque, + + /* Choice Tokens */ + choiceTokenBg: tokens.mediumGreyOpaque, + choiceTokenSelectedBg: tokens.darkGrey, + choiceTokenInvalidBg: 'white', + choiceTokenInvalidBorder: tokens.error, + + /* Choice Entry */ + choiceEntryBorderHover: tokens.hover, + + /* Select Buttons */ + selectButtonBorderInvalid: tokens.error, + + /* Menus */ + menuBorder: tokens.mediumGreyOpaque, + menuShadow: 'rgba(38, 38, 51, 0.6)', + + /* Autocomplete */ + autocompleteSelectedMatchText: tokens.primaryLighter, + autocompleteItemSelectedBg: tokens.mediumGreyOpaque, + autocompleteAddNewCircleSelectedBg: tokens.primaryDark, + + /* Search */ + searchBorder: 'grey', + searchPrevNextButtonBg: tokens.mediumGrey, + + /* Site Switcher */ + siteSwitcherActiveBg: tokens.dark, + + /* Shortcut Keys */ + shortcutKeyPrimaryFg: tokens.primaryDark, + + /* Breadcrumbs */ + breadcrumbsTagBg: tokens.slate, + breadcrumbsTagAlertBg: tokens.error, + + /* Page Widget Picker */ + widgetPickerItemFg: tokens.dark, + widgetPickerItemSelectedBg: tokens.mediumGrey, + widgetPickerItemDisabledBg: tokens.mediumGrey, + widgetPickerSummaryIcon: tokens.primaryDark, + widgetPickerBorder: tokens.mediumGrey, + widgetPickerShadow: 'rgba(38,38,51,0.20)', + + /* Code View */ + codeViewText: '#444', + codeViewKeyword: '#444', + codeViewComment: '#888888', + codeViewMeta: '#1F7199', + codeViewTitle: '#880000', + codeViewParams: '#444', + codeViewString: '#880000', + codeViewNumber: '#880000', + codeViewBuiltin: '#397300', + codeViewLiteral: '#78A960', + + /* Importer */ + importerSkippedTableOverlay: tokens.mediumGrey, + importerOutsideBg: tokens.lightGrey, + importerMainContentBg: '#FFFFFF', + importerActiveFileBg: tokens.primaryLight, + importerInactiveFileBg: tokens.mediumGrey, + + /* Menu Toggles */ + menuToggleHoverFg: tokens.primaryDark, + menuToggleActiveFg: tokens.primaryDarker, + + /* Info Button */ + infoButtonFg: "#8F8F8F", + infoButtonHoverFg: "#707070", + infoButtonActiveFg: "#5C5C5C", + + /* Button Groups */ + buttonGroupBg: 'transparent', + buttonGroupBgHover: tokens.hover, + buttonGroupBorderHover: tokens.hover, + + /* Access Rules */ + accessRulesColumnItemBg: tokens.mediumGreyOpaque, + accessRulesFormulaEditorBgDisabled: tokens.mediumGreyOpaque, + + /* Cells */ + cellZebraBg: '#F8F8F8', + + /* Charts */ + chartFg: '#444', + chartLegendBg: '#FFFFFF80', + chartXAxis: '#444', + chartYAxis: '#444', + + /* Comments */ + commentsUserNameFg: tokens.darkText, + commentsPanelTopicBorder: '#ccc', + commentsPanelResolvedTopicBg: tokens.labelActiveBg, + + /* Date Picker */ + datePickerSelectedFg: tokens.light, + datePickerSelectedBg: '#286090', + datePickerSelectedBgHover: '#204d74', + datePickerTodayBgHover: tokens.primaryDark, + datePickerRangeStartEndBg: '#777', + datePickerRangeStartEndBgHover: '#5E5E5E', + datePickerRangeBg: tokens.mediumGreyOpaque, + datePickerRangeBgHover: tokens.darkGrey, + + /* Tutorials */ + tutorialsPopupBoxBg: '#F5F5F5', + tutorialsPopupCodeFg: '#333333', + tutorialsPopupCodeBg: '#FFFFFF', + tutorialsPopupCodeBorder: '#E1E4E5', + + /* Ace */ + aceAutocompletePrimaryFg: '#444', + aceAutocompleteSecondaryFg: '#8f8f8f', + aceAutocompleteBg: '#FBFBFB', + aceAutocompleteBorder: 'lightgray', + aceAutocompleteLink: tokens.primaryLight, + aceAutocompleteLinkHighlighted: tokens.primaryDark, + aceAutocompleteActiveLineBg: '#CAD6FA', + aceAutocompleteLineBorderHover: '#abbffe', + aceAutocompleteLineBgHover: 'rgba(233,233,253,0.4)', + + /* Color Select */ + colorSelectFg: tokens.dark, + colorSelectShadow: 'rgba(38,38,51,0.6)', + colorSelectFontOptionsBorder: tokens.darkGrey, + colorSelectFontOptionBgHover: tokens.lightGrey, + colorSelectColorSquareBorder: tokens.darkGrey, + + /* Highlighted Code */ + highlightedCodeBlockBg: tokens.light, + highlightedCodeBlockBgDisabled: tokens.mediumGreyOpaque, + highlightedCodeBgDisabled: tokens.mediumGreyOpaque, + + /* Login Page */ + loginPageBackdrop: '#F5F8FA', + loginPageLine: tokens.lightGrey, + loginPageGoogleButtonFg: tokens.dark, + loginPageGoogleButtonBg: tokens.lightGrey, + loginPageGoogleButtonBgHover: tokens.mediumGrey, + + /* Attachments */ + attachmentsEditorButtonFg: tokens.primaryDark, + attachmentsEditorButtonHoverFg: tokens.primaryLight, + attachmentsEditorButtonBg: tokens.light, + attachmentsEditorButtonHoverBg: tokens.mediumGreyOpaque, + attachmentsEditorBorder: tokens.mediumGreyOpaque, + attachmentsCellIconFg: 'white', + attachmentsCellIconBg: tokens.darkGrey, + attachmentsCellIconHoverBg: '#929299', + + /* Announcement Popups */ + announcementPopupBg: tokens.selectionOpaque, + + /* Switches */ + switchSliderFg: '#ccc', + + /* Scroll Shadow */ + scrollShadow: 'rgba(217,217,217,0.6)', + + /* Toggle Checkboxes */ + toggleCheckboxFg: '#606060', + + /* Numeric Spinners */ + numericSpinnerFg: '#606060', + + /* Custom Widget Gallery */ + widgetGalleryBorder: tokens.darkGrey, + widgetGalleryShadow: '#0000001A', + widgetGallerySecondaryHeaderBg: tokens.slate, + widgetGallerySecondaryHeaderBgHover: '#7E7E85', + + /* Markdown Cell */ + markdownCellLightBg: tokens.lightGrey, + markdownCellLightBorder: tokens.mediumGreyOpaque, + markdownCellMediumBorder: tokens.darkGrey, + + /* App Header */ + appHeaderBg: tokens.light, + appHeaderBorder: tokens.mediumGreyOpaque, + appHeaderBorderHover: tokens.slate, + + /* Card Button */ + cardButtonBorder: tokens.darkGrey, + cardButtonShadow: "#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; + } }