Archives/gristlabs_grist-core
1
0
Fork 0
mirror of https://github.com/gristlabs/grist-core.git synced 2024-10-27 20:44:07 +00:00
Code Issues Projects Releases Wiki Activity

(core) Improve dark mode in tutorials

Browse Source 
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
This commit is contained in:
George Gevoian 2023-11-06 10:55:54 -05:00
parent 8053c81d02
commit 95cbbb8910
6 changed files with 59 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
app/client/ui/DocTutorial.css
View File

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

3
app/client/ui2018/cssVars.ts
View File

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

3
app/common/ThemePrefs-ti.ts
View File

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

3
app/common/ThemePrefs.ts
View File

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

3
app/common/themes/GristDark.ts
View File

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

3
app/common/themes/GristLight.ts
View File

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