(themes) Example usage of new design tokens

Use new design tokens on right panel header tabs and
panel/header/main/footer backgrounds as an example of usage.

app/client/components/DetailView.css

@@ -9,7 +9,7 @@
   left: 0;
   width: 100%;
 
-  background: var(--grist-theme-page-panels-main-panel-bg, white);
+  background: var(--grist-main-panel-bg, white);
   z-index: 1;
   margin-top: -6px;
 }

app/client/components/Forms/Paragraph.ts

@@ -3,7 +3,7 @@ import {buildEditor} from 'app/client/components/Forms/Editor';
 import {BoxModel} from 'app/client/components/Forms/Model';
 import * as css from 'app/client/components/Forms/styles';
 import {textarea} from 'app/client/ui/inputs';
-import {theme} from 'app/client/ui2018/cssVars';
+import {designTokens, theme} from 'app/client/ui2018/cssVars';
 import {not} from 'app/common/gutil';
 import {Computed, dom, Observable, styled} from 'grainjs';
 import {v4 as uuidv4} from 'uuid';
@@ -70,7 +70,7 @@ export function Paragraph(text: string, alignment?: 'left'|'right'|'center'): Fo
 
 const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 0px;
   width: 100%;
   padding: 3px 6px;

app/client/components/Forms/styles.ts

@@ -3,7 +3,7 @@ import {textarea} from 'app/client/ui/inputs';
 import {sanitizeHTML} from 'app/client/ui/sanitizeHTML';
 import {basicButton, basicButtonLink, primaryButtonLink, textButton} from 'app/client/ui2018/buttons';
 import {cssLabel} from 'app/client/ui2018/checkbox';
-import {colors, theme} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {numericSpinner} from 'app/client/widgets/NumericSpinner';
 import {BindableValue, dom, DomElementArg, IDomArgs, Observable, styled, subscribeBindable} from 'grainjs';
@@ -23,7 +23,7 @@ export const cssFormView = styled('div.flexauto.flexvbox', `
 `);
 
 export const cssFormContainer = styled('div', `
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   color: ${theme.text};
   width: 600px;
   align-self: center;

app/client/components/RawDataPage.ts

@@ -5,7 +5,7 @@ import {GristDoc} from 'app/client/components/GristDoc';
 import {printViewSection} from 'app/client/components/Printing';
 import {ViewSectionHelper} from 'app/client/components/ViewLayout';
 import {logTelemetryEvent} from 'app/client/lib/telemetry';
-import {mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {Computed, Disposable, dom, fromKo, makeTestId, Observable, styled} from 'grainjs';
 import {reportError} from 'app/client/models/errors';
@@ -151,7 +151,7 @@ export const cssOverlay = styled('div', `
 `);
 
 const cssSectionWrapper = styled('div', `
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   height: 100%;
   display: flex;
   flex-direction: column;

app/client/components/RecordCardPopup.ts

@@ -5,7 +5,7 @@ import {cssCloseButton, cssOverlay} from 'app/client/components/RawDataPage';
 import {ViewSectionHelper} from 'app/client/components/ViewLayout';
 import {ViewSectionRec} from 'app/client/models/DocModel';
 import {ChangeType, RowList} from 'app/client/models/rowset';
-import {theme} from 'app/client/ui2018/cssVars';
+import {designTokens, theme} from 'app/client/ui2018/cssVars';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
 import {dom, makeTestId, styled} from 'grainjs';
 
@@ -68,7 +68,7 @@ export class RecordCardPopup extends DisposableWithEvents {
 }
 
 const cssSectionWrapper = styled('div', `
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   height: 100%;
   display: flex;
   flex-direction: column;

app/client/components/SelectionSummary.ts

@@ -6,7 +6,7 @@ import {ViewFieldRec} from 'app/client/models/entities/ViewFieldRec';
 import {UserError} from 'app/client/models/errors';
 import {ALL, RowsChanged, SortedRowSet} from "app/client/models/rowset";
 import {showTransientTooltip} from 'app/client/ui/tooltips';
-import {isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, isNarrowScreen, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {CellValue} from 'app/common/DocActions';
 import {isEmptyList, isListType, isRefListType} from "app/common/gristTypes";
@@ -302,7 +302,7 @@ const cssSummaryPart = styled('div', `
   text-overflow: ellipsis;
   white-space: nowrap;
   /* Set explicit backdrop to improve visibility in raw data views. */
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
 
   &-copyable:hover {
     cursor: pointer;

app/client/components/ViewLayout.ts

@@ -19,7 +19,7 @@ import {logTelemetryEvent} from 'app/client/lib/telemetry';
 import {ViewRec, ViewSectionRec} from 'app/client/models/DocModel';
 import {reportError} from 'app/client/models/errors';
 import {getTelemetryWidgetTypeFromVS} from 'app/client/ui/widgetTypesMap';
-import {isNarrowScreen, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, isNarrowScreen, mediaSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {ISaveModalOptions, saveModal} from 'app/client/ui2018/modals';
 import {DisposableWithEvents} from 'app/common/DisposableWithEvents';
@@ -509,7 +509,7 @@ const cssLayoutWrapper = styled('div', `
   flex-grow: 1;
   @media not print {
     &-active {
-      background: ${theme.mainPanelBg};
+      background: ${designTokens.mainBg};
       height: 100%;
       width: 100%;
       border-radius: 5px;

app/client/ui/AppHeader.ts

@@ -1,7 +1,7 @@
 import {getWelcomeHomeUrl, urlState} from 'app/client/models/gristUrlState';
 import {getTheme} from 'app/client/ui/CustomThemes';
 import {cssLeftPane} from 'app/client/ui/PagePanels';
-import {colors, theme, vars} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme, vars} from 'app/client/ui2018/cssVars';
 import * as version from 'app/common/version';
 import {menu, menuItem, menuItemLink, menuSubHeader} from 'app/client/ui2018/menus';
 import {commonUrls} from 'app/common/gristUrls';
@@ -280,7 +280,7 @@ export function productPill(org: Organization|null, options: {large?: boolean} =
 const cssAppHeader = styled('div._cssAppHeader', `
   width: 100%;
   height: 100%;
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
   padding: 0px;
   padding: 8px;
 

app/client/ui/DescriptionConfig.ts

@@ -3,7 +3,7 @@ import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {autoGrow} from 'app/client/ui/forms';
 import {textarea, textInput} from 'app/client/ui/inputs';
 import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
-import {testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme} from 'app/client/ui2018/cssVars';
 import {CursorPos} from 'app/plugin/GristAPI';
 import {dom, DomArg, fromKo, MultiHolder, styled} from 'grainjs';
 
@@ -82,7 +82,7 @@ export function buildTextInput(
 
 const cssTextInput = styled(textInput, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   outline: none;
@@ -101,7 +101,7 @@ const cssTextInput = styled(textInput, `
 
 const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   outline: none;

app/client/ui/FieldConfig.ts

@@ -6,7 +6,7 @@ import {cssBlockedCursor, cssFieldFormula, cssLabel, cssRow} from 'app/client/ui
 import {withInfoTooltip} from 'app/client/ui/tooltips';
 import {buildFormulaTriggers} from 'app/client/ui/TriggerFormulas';
 import {textButton} from 'app/client/ui2018/buttons';
-import {testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {cssIconButton, icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
@@ -509,7 +509,7 @@ const cssEmptySeparator = styled('div', `
 
 const cssInput = styled(textInput, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
 
   &::placeholder {

app/client/ui/HomeIntroCards.ts

@@ -4,7 +4,7 @@ import {HomeModel} from 'app/client/models/HomeModel';
 import {newDocMethods} from 'app/client/ui/NewDocMethods';
 import {openVideoTour} from 'app/client/ui/OpenVideoTour';
 import {basicButtonLink, bigPrimaryButton, primaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, theme, vars} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
 import {getGristConfig} from 'app/common/urlUtils';
@@ -263,7 +263,7 @@ const cssTutorialProgressBar = styled('div', `
   margin-top: 4px;
   height: 10px;
   border-radius: 8px;
-  background: ${theme.mainPanelBg};
+  background: ${designTokens.mainBg};
   --percent-complete: 0;
 
   &::after {

app/client/ui/OnboardingPage.ts

@@ -7,7 +7,7 @@ import {getUserPrefObs} from 'app/client/models/UserPrefs';
 import {textInput} from 'app/client/ui/inputs';
 import {PlayerState, YouTubePlayer} from 'app/client/ui/YouTubePlayer';
 import {bigBasicButton, bigPrimaryButton, bigPrimaryButtonLink} from 'app/client/ui2018/buttons';
-import {colors, mediaMedium, mediaXSmall, theme} from 'app/client/ui2018/cssVars';
+import {colors, designTokens, mediaMedium, mediaXSmall, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {IconName} from 'app/client/ui2018/IconList';
 import {modal} from 'app/client/ui2018/modals';
@@ -377,7 +377,7 @@ function buildTutorial(_owner: IDisposableOwner, incrementStep: IncrementStep) {
 const cssPageContainer = styled('div', `
   overflow: auto;
   height: 100%;
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
 `);
 
 const cssOnboardingPage = styled('div', `

app/client/ui/PagePanels.ts

@@ -5,7 +5,7 @@ import {urlState} from "app/client/models/gristUrlState";
 import {resizeFlexVHandle} from 'app/client/ui/resizeHandle';
 import {hoverTooltip} from 'app/client/ui/tooltips';
 import {transition, TransitionWatcher} from 'app/client/ui/transitions';
-import {cssHideForNarrowScreen, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
+import {cssHideForNarrowScreen, designTokens, isScreenResizing, mediaNotSmall, mediaSmall, theme} from 'app/client/ui2018/cssVars';
 import {isNarrowScreenObs} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {
@@ -401,7 +401,7 @@ const cssContentMain = styled(cssHBox, `
 `);
 export const cssLeftPane = styled(cssVBox, `
   position: relative;
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
   width: 48px;
   margin-right: 0px;
   transition: width 0.4s;
@@ -457,15 +457,15 @@ const cssMainPane = styled(cssVBox, `
   position: relative;
   flex: 1 1 0px;
   min-width: 0px;
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   z-index: 1;
   &-left-overlap {
     margin-left: 48px;
   }
 `);
 const cssRightPane = styled(cssVBox, `
   position: relative;
-  background-color: ${theme.rightPanelBg};
+  background-color: ${designTokens.panelBg};
   width: 0px;
   margin-left: 0px;
   overflow: hidden;
@@ -522,18 +522,18 @@ const cssHeader = styled('div', `
   }
 `);
 const cssTopHeader = styled(cssHeader, `
-  background-color: ${theme.topHeaderBg};
+  background-color: ${designTokens.mainBg};
 `);
 const cssLeftPaneHeader = styled(cssHeader, `
-  background-color: ${theme.leftPanelBg};
+  background-color: ${designTokens.panelBg};
 `);
 const cssRightPaneHeader = styled(cssHeader, `
-  background-color: ${theme.rightPanelBg};
+  background-color: ${designTokens.panelBg};
   border-bottom: 0;
 `);
 const cssBottomFooter = styled ('div', `
   height: ${bottomFooterHeightPx}px;
-  background-color: ${theme.bottomFooterBg};
+  background-color: ${designTokens.mainBg};
   z-index: 20;
   display: flex;
   flex-direction: row;

app/client/ui/RenamePopupStyles.ts

@@ -1,4 +1,4 @@
-import { theme, vars } from 'app/client/ui2018/cssVars';
+import { designTokens, theme, vars } from 'app/client/ui2018/cssVars';
 import {textarea} from 'app/client/ui/inputs';
 import {cssTextInput} from 'app/client/ui2018/editableLabel';
 import {IInputOptions, input, Observable, styled} from 'grainjs';
@@ -53,7 +53,7 @@ export const cssInput = styled((
 
 export const cssTextArea = styled(textarea, `
   color: ${theme.inputFg};
-  background-color: ${theme.mainPanelBg};
+  background-color: ${designTokens.mainBg};
   border: 1px solid ${theme.inputBorder};
   width: 100%;
   padding: 3px 6px;

app/client/ui/RightPanel.ts

@@ -43,7 +43,7 @@ import {getTelemetryWidgetTypeFromVS, getWidgetTypes} from "app/client/ui/widget
 import {basicButton, primaryButton} from 'app/client/ui2018/buttons';
 import {buttonSelect} from 'app/client/ui2018/buttonSelect';
 import {labeledSquareCheckbox} from 'app/client/ui2018/checkbox';
-import {testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {designTokens, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {textInput} from 'app/client/ui2018/editableLabel';
 import {IconName} from 'app/client/ui2018/IconList';
 import {icon} from 'app/client/ui2018/icons';
@@ -1181,13 +1181,13 @@ const cssIcon = styled(icon, `
 const cssTopBarItem = styled('div', `
   flex: 1 1 0px;
   height: 100%;
-  background-color: ${theme.rightPanelTabBg};
-  border-right: 1px solid ${theme.rightPanelTabBg};
-  border-left: 1px solid ${theme.rightPanelTabBg};
-  border-bottom: 1px solid ${theme.rightPanelTabBorder};
+  background-color: ${designTokens.mainBg};
+  border-right: 1px solid ${designTokens.panelBg};
+  border-left: 1px solid ${designTokens.panelBg};
+  border-bottom: 1px solid ${designTokens.panelBorder};
   font-weight: initial;
-  color: ${theme.rightPanelTabFg};
-  --icon-color: ${theme.rightPanelTabIcon};
+  color: ${designTokens.textLight};
+  --icon-color: ${designTokens.textLight};
   display: flex;
   align-items: center;
   cursor: default;
@@ -1198,20 +1198,20 @@ const cssTopBarItem = styled('div', `
     border-right: 0;
   }
   &-selected {
-    background-color: ${theme.rightPanelTabSelectedBg};
+    background-color: ${designTokens.panelBg};
     font-weight: ${vars.headerControlTextWeight};
-    color: ${theme.rightPanelTabSelectedFg};
-    --icon-color: ${theme.rightPanelTabSelectedIcon};
-    border-bottom-color: ${theme.rightPanelTabSelectedBg};
-    border-left-color: ${theme.rightPanelTabBorder};
-    border-right-color: ${theme.rightPanelTabBorder};
+    color: ${designTokens.panelFg};
+    --icon-color: ${designTokens.primaryBg};
+    border-bottom-color: ${designTokens.panelBg};
+    border-left-color: ${designTokens.panelBorder};
+    border-right-color: ${designTokens.panelBorder};
   }
   &:not(&-selected):hover {
-    background-color: ${theme.rightPanelTabHoverBg};
-    border-left-color: ${theme.rightPanelTabHoverBg};
-    border-right-color: ${theme.rightPanelTabHoverBg};
-    color: ${theme.rightPanelTabHoverFg};
-    --icon-color: ${theme.rightPanelTabIconHover};
+    background-color: ${designTokens.mainBg};
+    border-left-color: ${designTokens.panelBg};
+    border-right-color: ${designTokens.panelBg};
+    color: ${designTokens.panelFg};
+    --icon-color: ${designTokens.panelFg};
   }
 `);
 

app/client/ui/ShareMenu.ts

@@ -8,7 +8,7 @@ import {sendToDrive} from 'app/client/ui/sendToDrive';
 import {hoverTooltip, withInfoTooltip} from 'app/client/ui/tooltips';
 import {cssHoverCircle, cssTopBarBtn} from 'app/client/ui/TopBarCss';
 import {primaryButton} from 'app/client/ui2018/buttons';
-import {mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
+import {designTokens, mediaXSmall, testId, theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {menu, menuAnnotate, menuDivider, menuIcon, menuItem, menuItemLink, menuItemSubmenu,
         menuText} from 'app/client/ui2018/menus';
@@ -364,7 +364,7 @@ const cssShareAction = styled(primaryButton, `
 const cssShareCircle = styled(cssHoverCircle, `
   z-index: 1;
   background-color: var(--share-btn-bg);
-  border: 1px solid ${theme.topHeaderBg};
+  border: 1px solid ${designTokens.mainBg};
   &:hover, &.weasel-popup-open {
     background-color: ${theme.controlPrimaryHoverBg};
   }