From 95cbbb8910c621a9d9a77e67bc4632ee44e4dd18 Mon Sep 17 00:00:00 2001 From: George Gevoian Date: Mon, 6 Nov 2023 10:55:54 -0500 Subject: [PATCH] (core) Improve dark mode in tutorials Summary: Headings 4, 5, and 6 are now properly visible in dark mode. Additionally, pre-formatted text and code blocks have improved styling in dark mode. Test Plan: Manual. Reviewers: jarek Reviewed By: jarek Differential Revision: https://phab.getgrist.com/D4108 --- app/client/ui/DocTutorial.css | 55 ++++++++++++++++++++++++++------- app/client/ui2018/cssVars.ts | 3 ++ app/common/ThemePrefs-ti.ts | 3 ++ app/common/ThemePrefs.ts | 3 ++ app/common/themes/GristDark.ts | 3 ++ app/common/themes/GristLight.ts | 3 ++ 6 files changed, 59 insertions(+), 11 deletions(-) diff --git a/app/client/ui/DocTutorial.css b/app/client/ui/DocTutorial.css index 9c7fcf27..64b9993a 100644 --- a/app/client/ui/DocTutorial.css +++ b/app/client/ui/DocTutorial.css @@ -1,29 +1,52 @@ .doc-tutorial-popup h1, .doc-tutorial-popup h2, .doc-tutorial-popup h3, +.doc-tutorial-popup h4, +.doc-tutorial-popup h5, +.doc-tutorial-popup h6, .doc-tutorial-popup p, .doc-tutorial-popup li { color: var(--grist-theme-text, #262633); } +.doc-tutorial-popup h2, +.doc-tutorial-popup h3, +.doc-tutorial-popup h4, +.doc-tutorial-popup h5, +.doc-tutorial-popup h6 { + margin: 20px 0px 10px 0px; + font-weight: 400; +} + .doc-tutorial-popup h1 { margin: 0px 0px 24px 0px; font-weight: 500; font-size: 28px; - line-height: 40px; + line-height: 42px; } .doc-tutorial-popup h2 { - margin: 20px 0px 10px 0px; - font-weight: 400; font-size: 24px; - line-height: 32px; + line-height: 36px; } .doc-tutorial-popup h3 { - margin: 20px 0px 10px 0px; - font-weight: 400; + font-size: 22px; + line-height: 33px; +} + +.doc-tutorial-popup h4 { font-size: 20px; + line-height: 30px; +} + +.doc-tutorial-popup h5 { + font-size: 18px; + line-height: 27px; +} + +.doc-tutorial-popup h6 { + font-size: 16px; line-height: 24px; } @@ -31,7 +54,7 @@ margin: 0px 0px 16px 0px; font-weight: 400; font-size: 14px; - line-height: 22px; + line-height: 21px; } .doc-tutorial-popup a, @@ -42,7 +65,7 @@ .doc-tutorial-popup li { font-weight: 400; font-size: 14px; - line-height: 22px; + line-height: 21px; } .doc-tutorial-popup ol, @@ -52,13 +75,23 @@ .doc-tutorial-popup code { padding: 2px 5px; - background: #FFFFFF; - border: 1px solid #E1E4E5; - color: #333333; + color: var(--grist-theme-tutorials-popup-code-fg, #333333); + background: var(--grist-theme-tutorials-popup-code-bg, #FFFFFF); + border: 1px solid var(--grist-theme-tutorials-popup-code-border, #E1E4E5); white-space: pre-wrap; word-wrap: break-word; } +.doc-tutorial-popup pre { + background: var(--grist-theme-tutorials-popup-code-bg, #FFFFFF); + border: 1px solid var(--grist-theme-tutorials-popup-code-border, #E1E4E5); +} + +.doc-tutorial-popup pre > code { + background: none; + border: none; +} + .doc-tutorial-popup iframe { border: none; } diff --git a/app/client/ui2018/cssVars.ts b/app/client/ui2018/cssVars.ts index 605e3fda..f7c8329f 100644 --- a/app/client/ui2018/cssVars.ts +++ b/app/client/ui2018/cssVars.ts @@ -762,6 +762,9 @@ export const theme = { 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'), diff --git a/app/common/ThemePrefs-ti.ts b/app/common/ThemePrefs-ti.ts index 6dfab272..730b6dee 100644 --- a/app/common/ThemePrefs-ti.ts +++ b/app/common/ThemePrefs-ti.ts @@ -378,6 +378,9 @@ export const ThemeColors = t.iface([], { "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", diff --git a/app/common/ThemePrefs.ts b/app/common/ThemePrefs.ts index 463c81cd..6d7fe9c7 100644 --- a/app/common/ThemePrefs.ts +++ b/app/common/ThemePrefs.ts @@ -490,6 +490,9 @@ export interface ThemeColors { '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; diff --git a/app/common/themes/GristDark.ts b/app/common/themes/GristDark.ts index a428a469..0e7c19a9 100644 --- a/app/common/themes/GristDark.ts +++ b/app/common/themes/GristDark.ts @@ -469,6 +469,9 @@ export const GristDark: ThemeColors = { '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', diff --git a/app/common/themes/GristLight.ts b/app/common/themes/GristLight.ts index b891be0c..00de9ccc 100644 --- a/app/common/themes/GristLight.ts +++ b/app/common/themes/GristLight.ts @@ -469,6 +469,9 @@ export const GristLight: ThemeColors = { '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',