From f9027ce032d468812bdd05251c2a650f78fc2494 Mon Sep 17 00:00:00 2001 From: Emmanuel Pelletier Date: Thu, 12 Dec 2024 12:18:42 +0100 Subject: [PATCH] (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. --- app/client/ui2018/cssVars.ts | 30 +++++++++++++++--------------- app/common/themes/GristDark.ts | 16 ++++++---------- app/common/themes/GristLight.ts | 10 ---------- 3 files changed, 21 insertions(+), 35 deletions(-) diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index ed3a2da4d5..1472c77796 100644 --- 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 index 0e3ebf7638..c5633207ad 100644 --- 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 index 0f7ff45807..51b6effb4f 100644 --- 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',