From 81750cd6bd08b94537a0b383a6a8f8df33071738 Mon Sep 17 00:00:00 2001
From: Stuart Hanberg <shanberg@users.noreply.github.com>
Date: Mon, 18 Apr 2022 13:00:13 -0400
Subject: [PATCH] fix: mark/highlight colors are global

---
 src/js/components/Block/Content.tsx | 5 -----
 src/js/theme/theme.js               | 6 ++++++
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/js/components/Block/Content.tsx b/src/js/components/Block/Content.tsx
index f36fb97aaf..801297e5d7 100644
--- a/src/js/components/Block/Content.tsx
+++ b/src/js/components/Block/Content.tsx
@@ -127,11 +127,6 @@ const _Content = ({ children, fontSize, ...props }) => {
         paddingBottom: "1em",
         "&last:-child": { paddingBottom: 0 },
       },
-      "mark.contents.highlight": {
-        padding: "0 0.2em",
-        borderRadius: "0.125rem",
-        background: "highlight",
-      }
     }}
     {...props}
   > {children}</Box>
diff --git a/src/js/theme/theme.js b/src/js/theme/theme.js
index 76b47bab2a..c2d023122f 100644
--- a/src/js/theme/theme.js
+++ b/src/js/theme/theme.js
@@ -606,6 +606,12 @@ const styles = {
     },
     "#chakra-toast-manager-top-right, #chakra-toast-manager-top, #chakra-toast-manager-top-left": {
       margin: "3rem 1rem"
+    },
+    mark: {
+      background: "highlight",
+      color: "highlightContrast",
+      padding: '0 0.2em',
+      borderRadius: "sm",
     }
   }
 }