From 64e1f74033b0241275d80a844856948ebe7dd62d Mon Sep 17 00:00:00 2001
From: Sanne de Vries <sannedv@protonmail.com>
Date: Wed, 28 Oct 2020 14:55:34 +0100
Subject: [PATCH] Adjusted cardmenu styling for dark mode

No issue

- Changed snippet icon fill
- Changed section border color
- Deleted white corners on bookmark icon
---
 .../admin/app/styles/spirit/_koenig-dark.css  | 16 ++++++++++++
 .../addon/components/koenig-menu-content.hbs  |  2 +-
 .../icons/koenig/kg-card-type-bookmark.svg    | 26 ++++++++++++++++++-
 .../koenig/kg-card-type-snippet-block.svg     |  6 ++---
 .../kg-card-type-snippet-combination.svg      |  6 ++---
 .../koenig/kg-card-type-snippet-text.svg      |  8 +++---
 6 files changed, 52 insertions(+), 12 deletions(-)

diff --git a/ghost/admin/app/styles/spirit/_koenig-dark.css b/ghost/admin/app/styles/spirit/_koenig-dark.css
index cc3f9e97dd..0ced077b41 100644
--- a/ghost/admin/app/styles/spirit/_koenig-dark.css
+++ b/ghost/admin/app/styles/spirit/_koenig-dark.css
@@ -62,6 +62,22 @@
     fill: var(--darkgrey);
 }
 
+.kg-cardmenu-card-hover svg [data-selector="bg"] {
+    fill: var(--lightgrey-d2);
+}
+
+.kg-cardmenu-card-hover svg [data-selector="fold"] {
+    fill: var(--midlightgrey-l2);
+}
+
+.kg-cardmenu-card-hover svg [data-selector="line"] {
+    fill: var(--darkgrey);
+}
+
+.kg-cardmenu-card-hover:hover svg [data-selector="bg"] {
+    fill: var(--lightgrey-d2);
+}
+
 
 /* Card styles */
 
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
index f0b490ed01..78b7fc0e56 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-menu-content.hbs
@@ -1,7 +1,7 @@
 {{#each @itemSections as |section sectionIndex|}}
     {{#if section.items}}
         {{#if (or (not section.developerExperiment) (enable-developer-experiments))}}
-            <div class="flex flex-column justify-center flex-shrink-0 {{unless (eq sectionIndex 0) "mt3"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem); {{unless (eq sectionIndex 0) "border-top: 1px solid #e5eff5;"}}">
+            <div class="flex flex-column justify-center flex-shrink-0 {{unless (eq sectionIndex 0) "mt3 bt b--lightgrey"}} mb2 pl4 pr4 pt3 midlightgrey ttu f-supersmall fw5 tracked-3" style="min-width: calc(100% - 3.2rem);">
                 {{section.title}}
             </div>
             {{#each section.items as |item|}}
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-bookmark.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-bookmark.svg
index 0c3ec0bb83..da7fab3320 100644
--- a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-bookmark.svg
+++ b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-bookmark.svg
@@ -1 +1,25 @@
-<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>kg-card-type-bookmark</title><defs><rect id="b" width="272" height="499" rx="4"/><filter x="-10.3%" y="-4.6%" width="120.6%" height="111.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" in="shadowBlurOuter1"/></filter><path id="c" d="M.99 0H19v24H.99z"/></defs><g fill="none" fill-rule="evenodd"><g transform="translate(-200 -135)"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill="#FFF" xlink:href="#b"/></g><path d="M32 2.667C32 .889 31.111 0 29.333 0H2.667C1.93 0 1.302.26.78.781.261 1.301 0 1.931 0 2.667v26.666C0 31.111.889 32 2.667 32h26.666C31.111 32 32 31.111 32 29.333V2.667z" fill="#3EB0EF"/><path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M11 0h24v24H11z"/><g transform="translate(13)"><mask id="d" fill="#fff"><use xlink:href="#c"/></mask><path d="M2.998-.01v18.674c-.054.558.175.951.687 1.18.525.2.965.084 1.322-.35l2.689-2.683c.081-.081.18-.122.294-.122.116 0 .214.041.295.122l2.69 2.684c.245.274.552.417.92.428.139 0 .273-.026.401-.078.512-.23.741-.623.687-1.18V-.062l-9.985.05z" fill="#FFF" mask="url(#d)"/></g></g></svg>
\ No newline at end of file
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>kg-card-type-bookmark</title>
+    <defs>
+        <rect id="b" width="272" height="499" rx="4"/>
+        <filter x="-10.3%" y="-4.6%" width="120.6%" height="111.2%" filterUnits="objectBoundingBox" id="a">
+            <feOffset dy="5" in="SourceAlpha" result="shadowOffsetOuter1"/>
+            <feGaussianBlur stdDeviation="8.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+            <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0" in="shadowBlurOuter1"/>
+        </filter>
+        <path id="c" d="M.99 0H19v24H.99z"/>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(-200 -135)">
+            <use fill="#000" filter="url(#a)" xlink:href="#b"/>
+        </g>
+        <path d="M32 2.667C32 .889 31.111 0 29.333 0H2.667C1.93 0 1.302.26.78.781.261 1.301 0 1.931 0 2.667v26.666C0 31.111.889 32 2.667 32h26.666C31.111 32 32 31.111 32 29.333V2.667z" fill="#3EB0EF"/>
+        <path stroke-opacity=".012" stroke="#000" stroke-width="0" d="M11 0h24v24H11z"/>
+        <g transform="translate(13)">
+            <mask id="d" fill="#fff">
+                <use xlink:href="#c"/>
+            </mask>
+            <path d="M2.998-.01v18.674c-.054.558.175.951.687 1.18.525.2.965.084 1.322-.35l2.689-2.683c.081-.081.18-.122.294-.122.116 0 .214.041.295.122l2.69 2.684c.245.274.552.417.92.428.139 0 .273-.026.401-.078.512-.23.741-.623.687-1.18V-.062l-9.985.05z" fill="#FFF" mask="url(#d)"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg
index 3f01c8d6d7..c11fb97a82 100644
--- a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg
+++ b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-block.svg
@@ -1,5 +1,5 @@
 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path  data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
-    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
-    <rect x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
+    <path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
+    <path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect data-selector="block" x="5.25" y="4.5" width="13.5" height="7.5" rx="1" fill="#3EB0EF"/>
 </svg>
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg
index c5bda4f67f..a6cdef9d96 100644
--- a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg
+++ b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-combination.svg
@@ -1,6 +1,6 @@
 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
-    <rect x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
-    <path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
-    <rect x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
+    <rect data-selector="block" x="5.25" y="4.5" width="13.5" height="4.5" rx="1" fill="#3EB0EF"/>
+    <path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+    <rect data-selector="line" x="5.25" y="11.25" width="8.25" height="1.5" rx=".75" fill="#738A94"/>
 </svg>
\ No newline at end of file
diff --git a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg
index d310d6c726..e24de768d9 100644
--- a/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg
+++ b/ghost/admin/lib/koenig-editor/public/icons/koenig/kg-card-type-snippet-text.svg
@@ -1,7 +1,7 @@
 <svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path data-selector="bg" d="M2 24h13l9-9V2a2 2 0 00-2-2H2a2 2 0 00-2 2v20a2 2 0 002 2z" fill="#F0F6F9"/>
-<path d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
-<rect x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
-<rect x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
-<rect x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
+<path data-selector="fold" d="M15 16v8l9-9h-8a1 1 0 00-1 1z" fill="#DAE8F1"/>
+<rect data-selector="line" x="5.25" y="4.5" width="10.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect data-selector="line" x="5.25" y="8.25" width="13.5" height="1.5" rx=".75" fill="#738A94"/>
+<rect data-selector="line" x="5.25" y="12" width="7.5" height="1.5" rx=".75" fill="#738A94"/>
 </svg>
\ No newline at end of file