(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

@@ -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;
 }

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'),

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",

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;

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',

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',