(themes) Example usage of new design tokens

Use new design tokens on right panel header tabs, without removing component-specific variables. Component-specific variables now target designTokens, that are themselves overridable by a theme, allowing to prevent repeating lots of definitions in the theme file.
gristlabs · Dec 12, 2024 · f9027ce · f9027ce
1 parent 2243fc8
commit f9027ce
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 35 deletions.
diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts
@@ -261,11 +261,11 @@ export const theme = {
   pageBackdrop: new CustomProp('theme-page-backdrop', undefined, 'grey'),
 
   /* Page Panels */
-  mainPanelBg: new CustomProp('theme-page-panels-main-panel-bg', undefined, 'white'),
-  leftPanelBg: new CustomProp('theme-page-panels-left-panel-bg', undefined, colors.lightGrey),
-  rightPanelBg: new CustomProp('theme-page-panels-right-panel-bg', undefined, colors.lightGrey),
-  topHeaderBg: new CustomProp('theme-page-panels-top-header-bg', undefined, 'white'),
-  bottomFooterBg: new CustomProp('theme-page-panels-bottom-footer-bg', undefined, 'white'),
+  mainPanelBg: new CustomProp('theme-page-panels-main-panel-bg', undefined, designTokens.mainBg),
+  leftPanelBg: new CustomProp('theme-page-panels-left-panel-bg', undefined, designTokens.panelBg),
+  rightPanelBg: new CustomProp('theme-page-panels-right-panel-bg', undefined, designTokens.panelBg),
+  topHeaderBg: new CustomProp('theme-page-panels-top-header-bg', undefined, designTokens.mainBg),
+  bottomFooterBg: new CustomProp('theme-page-panels-bottom-footer-bg', undefined, designTokens.mainBg),
   pagePanelsBorder: new CustomProp('theme-page-panels-border', undefined, colors.mediumGrey),
   pagePanelsBorderResizing: new CustomProp('theme-page-panels-border-resizing', undefined,
     colors.lightGreen),
@@ -521,20 +521,20 @@ export const theme = {
     colors.darkGrey),
 
   /* Right Panel */
-  rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, colors.slate),
-  rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, colors.light),
-  rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, colors.slate),
+  rightPanelTabFg: new CustomProp('theme-right-panel-tab-fg', undefined, designTokens.textLight),
+  rightPanelTabBg: new CustomProp('theme-right-panel-tab-bg', undefined, designTokens.mainBg),
+  rightPanelTabIcon: new CustomProp('theme-right-panel-tab-icon', undefined, designTokens.textLight),
   rightPanelTabIconHover: new CustomProp('theme-right-panel-tab-icon-hover', undefined,
-    colors.dark),
-  rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, colors.mediumGrey),
-  rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, colors.light),
-  rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, colors.dark),
+    designTokens.panelFg),
+  rightPanelTabBorder: new CustomProp('theme-right-panel-tab-border', undefined, designTokens.panelBorder),
+  rightPanelTabHoverBg: new CustomProp('theme-right-panel-tab-hover-bg', undefined, designTokens.mainBg),
+  rightPanelTabHoverFg: new CustomProp('theme-right-panel-tab-hover-fg', undefined, designTokens.panelFg),
   rightPanelTabSelectedFg: new CustomProp('theme-right-panel-tab-selected-fg', undefined,
-    colors.dark),
+    designTokens.panelFg),
   rightPanelTabSelectedBg: new CustomProp('theme-right-panel-tab-selected-bg', undefined,
-    colors.lightGrey),
+    designTokens.panelBg),
   rightPanelTabSelectedIcon: new CustomProp('theme-right-panel-tab-selected-icon', undefined,
-    colors.lightGreen),
+    designTokens.primaryBg),
   rightPanelTabButtonHoverBg: new CustomProp('theme-right-panel-tab-button-hover-bg',
     undefined, colors.darkGreen),
   rightPanelSubtabFg: new CustomProp('theme-right-panel-subtab-fg', undefined, colors.lightGreen),

diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts
@@ -1,6 +1,12 @@
 import {ThemeColors} from 'app/common/ThemePrefs';
 
 export const GristDark: ThemeColors = {
+  // example of overriding default designTokens instead of specific component ones (used on right panel header tabs)
+  'main-bg': '#32323f',
+  'panel-bg': '#262633',
+  'panel-fg': '#EFEFEF',
+  'panel-border': '#60606D',
+  'text-light': '#A4A4B1',
   legacyVariables: {
     /* Text */
     'text': '#EFEFEF',
@@ -230,16 +236,6 @@ export const GristDark: ThemeColors = {
     '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',

diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts
@@ -230,16 +230,6 @@ export const GristLight: ThemeColors = {
     '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',