Desktop: Better handling of bold text to simplify customisation (#5732)

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

packages/app-desktop/plugins/GotoAnything.tsx

@@ -496,10 +496,10 @@ class Dialog extends React.PureComponent<Props, State> {
 		const isSelected = item.id === this.state.selectedItemId;
 		const rowStyle = isSelected ? style.rowSelected : style.row;
 		const titleHtml = item.fragments
-			? `<span style="font-weight: bold; color: ${theme.colorBright};">${item.title}</span>`
+			? `<span style="font-weight: bold; color: ${theme.color};">${item.title}</span>`
-			: surroundKeywords(this.state.keywords, item.title, `<span style="font-weight: bold; color: ${theme.colorBright};">`, '</span>', { escapeHtml: true });
+			: surroundKeywords(this.state.keywords, item.title, `<span style="font-weight: bold; color: ${theme.searchMarkerColor}; background-color: ${theme.searchMarkerBackgroundColor}">`, '</span>', { escapeHtml: true });
 
-		const fragmentsHtml = !item.fragments ? null : surroundKeywords(this.state.keywords, item.fragments, `<span style="font-weight: bold; color: ${theme.colorBright};">`, '</span>', { escapeHtml: true });
+		const fragmentsHtml = !item.fragments ? null : surroundKeywords(this.state.keywords, item.fragments, `<span style="color: ${theme.searchMarkerColor}; background-color: ${theme.searchMarkerBackgroundColor}">`, '</span>', { escapeHtml: true });
 
 		const folderIcon = <i style={{ fontSize: theme.fontSize, marginRight: 2 }} className="fa fa-book" />;
 		const pathComp = !item.path ? null : <div style={style.rowPath}>{folderIcon} {item.path}</div>;

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;

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)

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

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

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

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

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;

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

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

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;

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

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