From 0a98895733ead26e87e8f6c36820c93776a510a8 Mon Sep 17 00:00:00 2001
From: Fernando Espinosa <fer@ferdev.com>
Date: Fri, 22 Jun 2018 11:38:54 +0200
Subject: [PATCH] Markdown block live preview: improved contrast

Now Markdown markers in each token are dimmed to increase contrast
between the marker and the token's content.
---
 .../markdown/assets/css/jetpack-markdown-block.css    |  5 +++++
 .../assets/js/components/markdown-live-preview.jsx    | 11 ++++++-----
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/modules/markdown/assets/css/jetpack-markdown-block.css b/modules/markdown/assets/css/jetpack-markdown-block.css
index 4064d5921caf0..4b2704854b621 100644
--- a/modules/markdown/assets/css/jetpack-markdown-block.css
+++ b/modules/markdown/assets/css/jetpack-markdown-block.css
@@ -1,3 +1,4 @@
+
 .wp-block-jetpack-markdown-block-placeholder {
 	opacity: 0.5;
 	pointer-events: none;
@@ -5,3 +6,7 @@
 .wp-block-jetpack-markdown-block-live-preview p {
 	min-height: 1.8em;
 }
+.wp-block-jetpack-markdown-block__live-preview__token {
+	/* $dark-gray-300 from Gutenberg _colors.scss */
+	color: #6c7781;
+}
diff --git a/modules/markdown/assets/js/components/markdown-live-preview.jsx b/modules/markdown/assets/js/components/markdown-live-preview.jsx
index e8d19f40c9391..072dfd9d0154f 100644
--- a/modules/markdown/assets/js/components/markdown-live-preview.jsx
+++ b/modules/markdown/assets/js/components/markdown-live-preview.jsx
@@ -27,26 +27,27 @@ const markdownIt = new MarkdownIt( 'zero' ).enable( [
  * to each token's content, the delimiter the user used (which the parser
  * obviously removes in the resulting HTML)
  */
+const LIVE_PREVIEW_TOKEN_CSS_CLASS = 'wp-block-jetpack-markdown-block__live-preview__token';
 
 // Adds `_` or `*` to the beginning of the em tag
 markdownIt.renderer.rules.em_open = function( tokens, idx ) {
 	const token = tokens[ idx ];
-	return `<em>${ token.markup }`;
+	return `<em><span class="${ LIVE_PREVIEW_TOKEN_CSS_CLASS }">${ token.markup }</span>`;
 };
 // Adds `_` or `*` to the end of the em tag
 markdownIt.renderer.rules.em_close = function( tokens, idx ) {
 	const token = tokens[ idx ];
-	return `${ token.markup }</em>`;
+	return `<span class="${ LIVE_PREVIEW_TOKEN_CSS_CLASS }">${ token.markup }</span></em>`;
 };
 // Adds `__` or `**` to the beginning of the strong tag
 markdownIt.renderer.rules.strong_open = function( tokens, idx ) {
 	const token = tokens[ idx ];
-	return `<strong>${ token.markup }`;
+	return `<strong><span class="${ LIVE_PREVIEW_TOKEN_CSS_CLASS }">${ token.markup }</span>`;
 };
 // Adds `__` or `**` to the end of the strong tag
 markdownIt.renderer.rules.strong_close = function( tokens, idx ) {
 	const token = tokens[ idx ];
-	return `${ token.markup }</strong>`;
+	return `<span class="${ LIVE_PREVIEW_TOKEN_CSS_CLASS }">${ token.markup }</span></strong>`;
 };
 // Wraps inline code tokens with ```
 markdownIt.renderer.rules.code_inline = function( tokens, idx ) {
@@ -61,7 +62,7 @@ markdownIt.renderer.rules.heading_open = function( tokens, idx ) {
 	if ( text_token ) {
 		text_token.content = ` ${ text_token.content }`;
 	}
-	return `<${ token.tag }>${ token.markup }`;
+	return `<${ token.tag }><span class="${ LIVE_PREVIEW_TOKEN_CSS_CLASS }">${ token.markup }</span>`;
 };
 
 const renderHTML = function( source ) {