From 46438a588881f4cbedb1aea53b90089097869fc5 Mon Sep 17 00:00:00 2001 From: Hieu-Thi Luong Date: Tue, 28 Dec 2021 18:57:34 +0900 Subject: [PATCH] Desktop: Better handling of bold text to simplify customisation (#5732) --- .../gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx | 4 ---- packages/app-desktop/plugins/GotoAnything.tsx | 6 +++--- packages/lib/services/style/themeToCss.test.ts | 2 -- packages/lib/themes/aritimDark.ts | 1 - packages/lib/themes/dark.ts | 1 - packages/lib/themes/dracula.ts | 1 - packages/lib/themes/light.ts | 1 - packages/lib/themes/nord.ts | 1 - packages/lib/themes/oledDark.ts | 1 - packages/lib/themes/solarizedDark.ts | 1 - packages/lib/themes/solarizedLight.ts | 1 - packages/lib/themes/type.ts | 1 - packages/renderer/defaultNoteStyle.js | 1 - packages/renderer/noteStyle.ts | 3 --- 14 files changed, 3 insertions(+), 22 deletions(-) diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx index 1a4cb7128e..b7a5b8bd41 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/CodeMirror/CodeMirror.tsx @@ -502,10 +502,6 @@ function CodeMirror(props: NoteBodyEditorProps, ref: any) { padding-left: .2em; } - div.CodeMirror span.cm-strong { - color: ${theme.colorBright}; - } - div.CodeMirror span.cm-hr { color: ${theme.dividerColor}; } diff --git a/packages/app-desktop/plugins/GotoAnything.tsx b/packages/app-desktop/plugins/GotoAnything.tsx index 9b9a794c70..54908bd87f 100644 --- a/packages/app-desktop/plugins/GotoAnything.tsx +++ b/packages/app-desktop/plugins/GotoAnything.tsx @@ -496,10 +496,10 @@ class Dialog extends React.PureComponent { const isSelected = item.id === this.state.selectedItemId; const rowStyle = isSelected ? style.rowSelected : style.row; const titleHtml = item.fragments - ? `${item.title}` - : surroundKeywords(this.state.keywords, item.title, ``, '', { escapeHtml: true }); + ? `${item.title}` + : surroundKeywords(this.state.keywords, item.title, ``, '', { escapeHtml: true }); - const fragmentsHtml = !item.fragments ? null : surroundKeywords(this.state.keywords, item.fragments, ``, '', { escapeHtml: true }); + const fragmentsHtml = !item.fragments ? null : surroundKeywords(this.state.keywords, item.fragments, ``, '', { escapeHtml: true }); const folderIcon = ; const pathComp = !item.path ? null :
{folderIcon} {item.path}
; diff --git a/packages/lib/services/style/themeToCss.test.ts b/packages/lib/services/style/themeToCss.test.ts index 18e2a4a0a9..fa050e5f45 100644 --- a/packages/lib/services/style/themeToCss.test.ts +++ b/packages/lib/services/style/themeToCss.test.ts @@ -15,7 +15,6 @@ const input: Theme = { colorWarn: 'rgb(228,86,0)', colorWarnUrl: '#155BDA', colorFaded: '#7C8B9E', // For less important text - colorBright: '#000000', // For important text dividerColor: '#dddddd', selectedColor: '#e5e5e5', urlColor: '#155BDA', @@ -69,7 +68,6 @@ const expected = ` --joplin-color-warn: rgb(228,86,0); --joplin-color-warn-url: #155BDA; --joplin-color-faded: #7C8B9E; - --joplin-color-bright: #000000; --joplin-divider-color: #dddddd; --joplin-selected-color: #e5e5e5; --joplin-url-color: #155BDA; diff --git a/packages/lib/themes/aritimDark.ts b/packages/lib/themes/aritimDark.ts index 19c1e69e61..20297a719b 100644 --- a/packages/lib/themes/aritimDark.ts +++ b/packages/lib/themes/aritimDark.ts @@ -11,7 +11,6 @@ const theme: Theme = { colorError: '#9a2f2f', colorWarn: '#d66500', colorFaded: '#666a73', // For less important text (e.g. not selected menu in settings) - colorBright: '#d3dae3', // For important text; (e.g. bold) dividerColor: '#141a21', // Borders, I wish I could remove them selectedColor: '#2b5278', // Selected note urlColor: '#356693', // Links to external sites (e.g. in settings) diff --git a/packages/lib/themes/dark.ts b/packages/lib/themes/dark.ts index dae10336a2..b2f5ca3f8b 100644 --- a/packages/lib/themes/dark.ts +++ b/packages/lib/themes/dark.ts @@ -18,7 +18,6 @@ const theme: Theme = { colorWarn: '#9A5B00', colorWarnUrl: '#ffff82', colorFaded: '#999999', // For less important text - colorBright: '#ffffff', // For important text dividerColor: '#555555', selectedColor: '#616161', urlColor: 'rgb(166,166,255)', diff --git a/packages/lib/themes/dracula.ts b/packages/lib/themes/dracula.ts index 0cf4b98ab2..e9c972637d 100644 --- a/packages/lib/themes/dracula.ts +++ b/packages/lib/themes/dracula.ts @@ -11,7 +11,6 @@ const theme: Theme = { colorError: '#ff5555', colorWarn: '#ffb86c', colorFaded: '#6272a4', // For less important text; - colorBright: '#50fa7b', // For important text; dividerColor: '#bd93f9', selectedColor: '#44475a', urlColor: '#8be9fd', diff --git a/packages/lib/themes/light.ts b/packages/lib/themes/light.ts index 990385308d..73607ce060 100644 --- a/packages/lib/themes/light.ts +++ b/packages/lib/themes/light.ts @@ -15,7 +15,6 @@ const theme: Theme = { colorWarn: 'rgb(228,86,0)', colorWarnUrl: '#155BDA', colorFaded: '#7C8B9E', // For less important text - colorBright: '#000000', // For important text dividerColor: '#dddddd', selectedColor: '#e5e5e5', urlColor: '#155BDA', diff --git a/packages/lib/themes/nord.ts b/packages/lib/themes/nord.ts index dd6e071e4b..d03be919a7 100644 --- a/packages/lib/themes/nord.ts +++ b/packages/lib/themes/nord.ts @@ -57,7 +57,6 @@ const theme: Theme = { colorError: nord[11], colorWarn: nord[12], colorFaded: nord[4], // For less important text; - colorBright: nord[6], // For important text; dividerColor: nord[10], selectedColor: nord[9], urlColor: nord[8], diff --git a/packages/lib/themes/oledDark.ts b/packages/lib/themes/oledDark.ts index e7fa575043..cc2800fd0c 100644 --- a/packages/lib/themes/oledDark.ts +++ b/packages/lib/themes/oledDark.ts @@ -16,7 +16,6 @@ const theme: Theme = { codeBackgroundColor: 'rgb(47, 48, 49)', codeBorderColor: 'rgb(70, 70, 70)', codeThemeCss: 'atom-one-dark-reasonable.css', - colorBright: 'rgb(220,220,220)', }; export default theme; diff --git a/packages/lib/themes/solarizedDark.ts b/packages/lib/themes/solarizedDark.ts index 907ecfa08a..25d51febdd 100644 --- a/packages/lib/themes/solarizedDark.ts +++ b/packages/lib/themes/solarizedDark.ts @@ -11,7 +11,6 @@ const theme: Theme = { colorError: '#dc322f', colorWarn: '#cb4b16', colorFaded: '#657b83', // For less important text; - colorBright: '#eee8d5', // For important text; dividerColor: '#586e75', selectedColor: '#073642', urlColor: '#268bd2', diff --git a/packages/lib/themes/solarizedLight.ts b/packages/lib/themes/solarizedLight.ts index 7059507f04..468509796a 100644 --- a/packages/lib/themes/solarizedLight.ts +++ b/packages/lib/themes/solarizedLight.ts @@ -11,7 +11,6 @@ const theme: Theme = { colorError: '#dc322f', colorWarn: '#cb4b16', colorFaded: '#839496', // For less important text; - colorBright: '#073642', // For important text; dividerColor: '#eee8d5', selectedColor: '#eee8d5', urlColor: '#268bd2', diff --git a/packages/lib/themes/type.ts b/packages/lib/themes/type.ts index 92732dc8b5..1926bc5a11 100644 --- a/packages/lib/themes/type.ts +++ b/packages/lib/themes/type.ts @@ -17,7 +17,6 @@ export interface Theme { colorWarn: string; colorWarnUrl: string; // For URL displayed over a warningBackgroundColor colorFaded: string; // For less important text - colorBright: string; // For important text dividerColor: string; selectedColor: string; urlColor: string; diff --git a/packages/renderer/defaultNoteStyle.js b/packages/renderer/defaultNoteStyle.js index c8f0cf7817..9c1edb226b 100644 --- a/packages/renderer/defaultNoteStyle.js +++ b/packages/renderer/defaultNoteStyle.js @@ -4,7 +4,6 @@ module.exports = { lineHeight: '1.6em', backgroundColor: 'white', paddingBottom: 3, - colorBright: '#000000', // For important text codeBorderColor: 'rgb(220, 220, 220)', codeBackgroundColor: 'rgb(243, 243, 243)', dividerColor: 'rgb(230,230,230)', diff --git a/packages/renderer/noteStyle.ts b/packages/renderer/noteStyle.ts index b31bb6897b..d50b4187f2 100644 --- a/packages/renderer/noteStyle.ts +++ b/packages/renderer/noteStyle.ts @@ -49,9 +49,6 @@ export default function(theme: any, options: Options = null) { padding-bottom: ${formatCssSize(theme.bodyPaddingBottom)}; padding-top: ${formatCssSize(theme.bodyPaddingTop)}; } - strong { - color: ${theme.colorBright}; - } kbd { border: 1px solid ${theme.codeBorderColor}; box-shadow: inset 0 -1px 0 ${theme.codeBorderColor};