From 2364ebd97491802d743568216f0080b2a216e097 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 8 Oct 2020 14:59:24 +0200
Subject: [PATCH] add beautiful colors (wip, breaking tests)

---
 docs/src/demos/Extensions/Highlight/index.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/src/demos/Extensions/Highlight/index.vue b/docs/src/demos/Extensions/Highlight/index.vue
index 81947723a..d52c6790d 100644
--- a/docs/src/demos/Extensions/Highlight/index.vue
+++ b/docs/src/demos/Extensions/Highlight/index.vue
@@ -10,19 +10,19 @@
     >
       highlight (default)
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'red' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'red' }) }">
+    <button @click="editor.chain().focus().highlight({ color: '#ffa8a8' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffa8a8' }) }">
       red
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'orange' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'orange' }) }">
+    <button @click="editor.chain().focus().highlight({ color: '#ffc078' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#ffc078' }) }">
       orange
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'green' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'green' }) }">
+    <button @click="editor.chain().focus().highlight({ color: '#8ce99a' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#8ce99a' }) }">
       green
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'blue' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'blue' }) }">
+    <button @click="editor.chain().focus().highlight({ color: '#74c0fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#74c0fc' }) }">
       blue
     </button>
-    <button @click="editor.chain().focus().highlight({ color: 'purple' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: 'purple' }) }">
+    <button @click="editor.chain().focus().highlight({ color: '#b197fc' }).run()" :class="{ 'is-active': editor.isActive('highlight', { color: '#b197fc' }) }">
       purple
     </button>
 
@@ -60,7 +60,7 @@ export default {
       content: `
           <p>This isn’t highlighted.</s></p>
           <p><mark>But that one is.</mark></p>
-          <p><mark style="background-color: red;">And this is highlighted too, but in a different color.</mark></p>
+          <p><mark style="background-color: #ffa8a8;">And this is highlighted too, but in a different color.</mark></p>
         `,
     })
   },
@@ -70,3 +70,9 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+mark {
+  background-color: #ffe066;
+}
+</style>