From 4c05d618bd001b8221d43bc248aaca980b5d2caa Mon Sep 17 00:00:00 2001
From: Zimo <peter.zimon@gmail.com>
Date: Tue, 1 May 2018 14:47:13 +0200
Subject: [PATCH] Koenig - Replace custom CSS classes with Spirit

no issue
- Koenig container styles for Spirit
- Applying Spirit styles to card menu
- Applying Spirit styles to generic cards
- Replacing icon styles with Spirit
- Fix slash menu selected state
- Cleanup of unused files + fix empty HTML
---
 .../admin/app/components/gh-koenig-editor.js  |   2 +-
 ghost/admin/app/styles/app-dark.css           |   2 -
 ghost/admin/app/styles/app.css                |   2 -
 .../app/styles/components/koenig-content.css  | 525 ------------------
 ghost/admin/app/styles/components/koenig.css  | 467 ----------------
 ghost/admin/app/styles/patterns/_shame.css    |  53 --
 .../templates/components/gh-koenig-editor.hbs |   2 +-
 .../addon/components/koenig-editor.js         |   2 +-
 .../addon/components/koenig-plus-menu.js      |   2 +-
 .../addon/components/koenig-slash-menu.js     |   2 +-
 .../templates/components/koenig-card-html.hbs |   4 +-
 .../templates/components/koenig-plus-menu.hbs |  28 +-
 .../components/koenig-slash-menu.hbs          |   8 +-
 13 files changed, 25 insertions(+), 1074 deletions(-)
 delete mode 100644 ghost/admin/app/styles/components/koenig-content.css
 delete mode 100644 ghost/admin/app/styles/components/koenig.css
 delete mode 100644 ghost/admin/app/styles/patterns/_shame.css

diff --git a/ghost/admin/app/components/gh-koenig-editor.js b/ghost/admin/app/components/gh-koenig-editor.js
index 8cab1c0788..83019de333 100644
--- a/ghost/admin/app/components/gh-koenig-editor.js
+++ b/ghost/admin/app/components/gh-koenig-editor.js
@@ -3,7 +3,7 @@ import Component from '@ember/component';
 export default Component.extend({
 
     // public attrs
-    classNames: ['gh-koenig-editor'],
+    classNames: ['gh-koenig-editor', 'relative', 'w-100', 'vh-100', 'overflow-x-hidden', 'overflow-y-auto', 'z-0'],
     title: '',
     titlePlaceholder: '',
     body: null,
diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index bf3044b4a0..3a92140813 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -9,7 +9,6 @@
 /* Patterns: Groups of Styles
 /* ---------------------------------------------------------- */
 @import "patterns/global.css";
-@import "patterns/_shame.css";
 @import "patterns/icons.css";
 @import "patterns/forms.css";
 @import "patterns/buttons.css";
@@ -37,7 +36,6 @@
 @import "components/popovers.css";
 @import "components/tour.css";
 @import "components/unsplash.css";
-@import "components/koenig";
 
 
 /* Layouts: Groups of Components
diff --git a/ghost/admin/app/styles/app.css b/ghost/admin/app/styles/app.css
index 040c362002..ef25a3b9f8 100644
--- a/ghost/admin/app/styles/app.css
+++ b/ghost/admin/app/styles/app.css
@@ -9,7 +9,6 @@
 /* Patterns: Groups of Styles
 /* ---------------------------------------------------------- */
 @import "patterns/global.css";
-@import "patterns/_shame.css";
 @import "patterns/icons.css";
 @import "patterns/forms.css";
 @import "patterns/buttons.css";
@@ -37,7 +36,6 @@
 @import "components/popovers.css";
 @import "components/tour.css";
 @import "components/unsplash.css";
-@import "components/koenig";
 
 
 /* Layouts: Groups of Components
diff --git a/ghost/admin/app/styles/components/koenig-content.css b/ghost/admin/app/styles/components/koenig-content.css
deleted file mode 100644
index 91621ce31d..0000000000
--- a/ghost/admin/app/styles/components/koenig-content.css
+++ /dev/null
@@ -1,525 +0,0 @@
-/* Vertical riddim
-/*
-/* We use only margin-top to set the vertical spacings. The styles below
-/* set up the margin for content pairs (e.g. paragraph preceded by a heading).
-
-
-/* Global Koenig content styles
-/* -------------------------------------------------------------------- */
-.koenig-editor__editor {
-    color: var(--darkgrey);
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -moz-font-feature-settings: "liga" on;
-}
-
-
-/* Reset margins */
-
-.koenig-editor__editor p,
-.koenig-editor__editor h1,
-.koenig-editor__editor h2,
-.koenig-editor__editor h3,
-.koenig-editor__editor h4,
-.koenig-editor__editor h5,
-.koenig-editor__editor h6,
-.koenig-editor__editor blockquote {
-    margin: 1.6rem 0 0;
-    min-width: 100%;
-}
-
-
-/* Heading
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor h1,
-.koenig-editor__editor h2,
-.koenig-editor__editor h3,
-.koenig-editor__editor h4,
-.koenig-editor__editor h5,
-.koenig-editor__editor h6 {
-    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
-    font-weight: 700;
-}
-
-.koenig-editor__editor h1 {
-    font-size: 2.8rem;
-    line-height: 1.4em;
-    letter-spacing: .04rem;
-}
-
-.koenig-editor__editor h2 {
-    font-size: 2.3rem;
-    line-height: 1.6em;
-    letter-spacing: .04rem;
-}
-
-.koenig-editor__editor h3 {
-    font-size: 2.0rem;
-    line-height: 1.4em;
-    letter-spacing: .04rem;
-}
-
-.koenig-editor__editor h4 {
-    font-size: 1.9rem;
-    line-height: 1.4em;
-    letter-spacing: .06rem;
-}
-
-.koenig-editor__editor h5 {
-    font-size: 1.75rem;
-    line-height: 1.6em;
-    letter-spacing: .04rem;
-}
-
-.koenig-editor__editor h6 {
-    font-size: 1.6rem;
-    line-height: 1.6em;
-    letter-spacing: .06rem;
-}
-
-
-.koenig-editor__editor p + h1,
-.koenig-editor__editor p + h2,
-.koenig-editor__editor p + h3,
-.koenig-editor__editor p + h4,
-.koenig-editor__editor p + h5,
-.koenig-editor__editor p + h6,
-
-.koenig-editor__editor blockquote + h1,
-.koenig-editor__editor blockquote + h2,
-.koenig-editor__editor blockquote + h3,
-.koenig-editor__editor blockquote + h4,
-.koenig-editor__editor blockquote + h5,
-.koenig-editor__editor blockquote + h6,
-
-.koenig-editor__editor ul + h1,
-.koenig-editor__editor ul + h2,
-.koenig-editor__editor ul + h3,
-.koenig-editor__editor ul + h4,
-.koenig-editor__editor ul + h5,
-.koenig-editor__editor ul + h6,
-
-.koenig-editor__editor ol + h1,
-.koenig-editor__editor ol + h2,
-.koenig-editor__editor ol + h3,
-.koenig-editor__editor ol + h4,
-.koenig-editor__editor ol + h5,
-.koenig-editor__editor ol + h6 {
-    margin: 4.8rem 0 0;
-}
-
-/* Heading 1 vertical rhythm */
-
-.koenig-editor__editor h1 + h1 {
-    margin: 1.4rem 0 0;
-}
-
-.koenig-editor__editor h2 + h1,
-.koenig-editor__editor h3 + h1 {
-    margin: 1.0rem 0 0;
-}
-
-.koenig-editor__editor h4 + h1,
-.koenig-editor__editor h5 + h1 {
-    margin: 0.8rem 0 0;
-}
-
-.koenig-editor__editor h6 + h1 {
-    margin: 0.6rem 0 0;
-}
-
-.koenig-editor__editor div + h1 {
-    margin: 4.8rem 0 0;
-}
-
-
-/* Heading 2 */
-
-.koenig-editor__editor h1 + h2 {
-    margin: 1.6rem 0 0;
-}
-
-.koenig-editor__editor h2 + h2,
-.koenig-editor__editor h3 + h2,
-.koenig-editor__editor h4 + h2,
-.koenig-editor__editor h5 + h2 {
-    margin: 0.8rem 0 0;
-}
-
-.koenig-editor__editor h6 + h2 {
-    margin: 0.4rem 0 0;
-}
-
-.koenig-editor__editor div + h2 {
-    margin: 3.2rem 0 0;
-}
-
-
-/* Heading 3 - 6 (share common styles) */
-
-.koenig-editor__editor h1 + h3,
-.koenig-editor__editor h2 + h3,
-
-.koenig-editor__editor h1 + h4,
-.koenig-editor__editor h2 + h4,
-
-.koenig-editor__editor h1 + h5,
-.koenig-editor__editor h2 + h5,
-
-.koenig-editor__editor h1 + h6,
-.koenig-editor__editor h2 + h6 {
-    margin: 1.2rem 0 0;
-}
-
-.koenig-editor__editor h3 + h4 {
-    margin: 0.8rem 0 0;
-}
-
-.koenig-editor__editor h3 + h3,
-.koenig-editor__editor h4 + h3,
-.koenig-editor__editor h5 + h3,
-
-.koenig-editor__editor h4 + h4,
-.koenig-editor__editor h5 + h4,
-
-.koenig-editor__editor h3 + h5,
-.koenig-editor__editor h4 + h5,
-.koenig-editor__editor h5 + h5,
-
-.koenig-editor__editor h3 + h6,
-.koenig-editor__editor h4 + h6 {
-    margin: 0.8rem 0 0;
-}
-
-.koenig-editor__editor h5 + h6 {
-    margin: 0.4rem 0 0;
-}
-
-.koenig-editor__editor h6 + h3,
-.koenig-editor__editor h6 + h4,
-.koenig-editor__editor h6 + h5,
-.koenig-editor__editor h6 + h6 {
-    margin: 0.4rem 0 0;
-}
-
-.koenig-editor__editor div + h3,
-.koenig-editor__editor div + h4,
-.koenig-editor__editor div + h5,
-.koenig-editor__editor div + h6 {
-    margin: 2.4rem 0 0;
-}
-
-
-/* Paragraph
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor p,
-.koenig-editor__editor blockquote,
-.koenig-editor__editor ul:not(.kg-action-bar),
-.koenig-editor__editor ol
- {
-    font-family: georgia,serif;
-    font-weight: 300;
-    letter-spacing: .02rem;
-    line-height: 1.6em;
-    font-size: 2rem;
-}
-
-.koenig-editor__editor h1 + p {
-    margin: 1.2rem 0 0;
-}
-
-.koenig-editor__editor h2 + p {
-    margin: 0.8rem 0 0;
-}
-
-.koenig-editor__editor h3 + p,
-.koenig-editor__editor h4 + p,
-.koenig-editor__editor h5 + p,
-.koenig-editor__editor h6 + p {
-    margin: .8rem 0 0;
-}
-
-.koenig-editor__editor p + p,
-.koenig-editor__editor blockquote + p,
-.koenig-editor__editor ul + p,
-.koenig-editor__editor ol + p
- {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-editor__editor div + p { /* Mobiledoc cards can be addressed by their wrapper div element */
-    margin: 2.8rem 0 0;
-}
-
-
-/* Lists
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor ul:not(.kg-action-bar),
-.koenig-editor__editor ol {
-    padding: 0;
-    min-width: 100%;
-}
-
-.koenig-editor__editor ul:not(.kg-action-bar) li {
-    margin: 1.6rem 0 0 2.4rem;
-    padding: 0 0 0 0.6rem;
-    line-height: 3.2rem;
-}
-
-.koenig-editor__editor ul:not(.kg-action-bar) li:first-child {
-    margin: 0 0 0 2.4rem;
-}
-
-.koenig-editor__editor ol li {
-    margin: 1.6rem 0 0 2.2rem;
-    padding: 0 0 0 0.8rem;
-    line-height: 3.2rem;
-}
-
-.koenig-editor__editor ol li:first-child {
-    margin: 0 0 0 2.2rem;
-}
-
-.koenig-editor__editor p + ul:not(.kg-action-bar),
-.koenig-editor__editor p + ol,
-.koenig-editor__editor ul:not(.kg-action-bar) + ul:not(.kg-action-bar),
-.koenig-editor__editor ul:not(.kg-action-bar) + ol,
-.koenig-editor__editor ol + ul:not(.kg-action-bar),
-.koenig-editor__editor ol + ol,
-.koenig-editor__editor blockquote + ul:not(.kg-action-bar),
-.koenig-editor__editor blockquote + ol {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-editor__editor h1 + ul:not(.kg-action-bar),
-.koenig-editor__editor h1 + ol,
-.koenig-editor__editor h2 + ul:not(.kg-action-bar),
-.koenig-editor__editor h2 + ol {
-    margin: .8rem 0 0;
-}
-
-.koenig-editor__editor h3 + ul:not(.kg-action-bar),
-.koenig-editor__editor h3 + ol,
-.koenig-editor__editor h4 + ul:not(.kg-action-bar),
-.koenig-editor__editor h4 + ol,
-.koenig-editor__editor h5 + ul:not(.kg-action-bar),
-.koenig-editor__editor h5 + ol,
-.koenig-editor__editor h6 + ul:not(.kg-action-bar),
-.koenig-editor__editor h6 + ol {
-    margin: .4rem 0 0;
-}
-
-.koenig-editor__editor div + ul:not(.kg-action-bar),
-.koenig-editor__editor div + ol {
-    margin: 2.8rem 0 0;
-}
-
-
-/* Cards in general
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor > div {
-    line-height: 0;
-    min-width: 100%;
-}
-
-.koenig-editor__editor > div + div {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-editor__editor > p + div,
-.koenig-editor__editor > blockquote + div,
-.koenig-editor__editor > ul + div,
-.koenig-editor__editor > ol + div {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-editor__editor > h1 + div {
-    margin: 2.8rem 0 0;
-}
-
-.koenig-editor__editor > h2 + div,
-.koenig-editor__editor > h3 + div,
-.koenig-editor__editor > h4 + div,
-.koenig-editor__editor > h5 + div,
-.koenig-editor__editor > h6 + div {
-    margin: 1.6rem 0 0;
-}
-
-.koenig-editor__editor hr {
-    margin: 0;
-}
-
-
-/* Links
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor a {
-    color: var(--darkgrey);
-    text-decoration: none;
-    white-space: nowrap;
-    box-shadow: inset 0 -1px 0 var(--blue);
-}
-
-
-/* Blockquote
-/* -------------------------------------------------------------------- */
-
-.koenig-editor__editor blockquote p {
-    margin: 0;
-}
-
-.koenig-editor__editor blockquote {
-    border-left: 0.25rem solid var(--blue);
-    padding-left: 2.0rem;
-    font-style: italic;
-}
-
-.koenig-editor__editor h1 + blockquote,
-.koenig-editor__editor h2 + blockquote {
-    margin: .8rem 0 0;
-}
-
-.koenig-editor__editor h3 + blockquote,
-.koenig-editor__editor h4 + blockquote,
-.koenig-editor__editor h5 + blockquote,
-.koenig-editor__editor h6 + blockquote {
-    margin: .4rem 0 0;
-}
-
-.koenig-editor__editor p + blockquote,
-.koenig-editor__editor blockquote + blockquote {
-    margin: 3.2rem 0 0;
-}
-
-
-/* Mobiledoc cards can be selected by their wrapper div element */
-.koenig-editor__editor div + blockquote {
-    margin: 2.8rem 0 0;
-}
-
-
-/* Code
-/* ------------------------------------------------------------------ */
-.koenig-card-html--editor .CodeMirror,
-.koenig-editor__editor code,
-.koenig-editor__editor pre {
-    font-family: Consolas,Liberation Mono,Menlo,Courier,monospace;
-    background: color-mod(var(--lightgrey) lightness(+4%));
-    border: 1px solid var(--lightgrey);
-}
-
-.koenig-editor__editor code {
-    border-radius: 2px;
-    color: var(--pink);
-    font-size: 1.65rem;
-    line-height: 1em;
-    padding: .4rem .4rem .2rem;
-    vertical-align: middle;
-    white-space: pre-wrap;
-}
-
-.koenig-editor__editor pre code {
-    border: none;
-    font-size: 1.6rem;
-    color: var(--pink);
-    padding: 0;
-}
-
-.koenig-editor__editor pre {
-    margin: 0;
-    line-height: 1.4em;
-    padding: .8rem .8rem .4rem;
-    border-radius: .4rem;
-    font-size: 1.6rem;
-    overflow: auto;
-    white-space: pre;
-    width: 100%;
-    color: var(--darkgrey);
-}
-
-
-/* Markdown
-/* --------------------------------------------------------------- */
-
-/*
-  Resetting the default top margin of the redered markdown content. This is
-  needed because the top margin is applied to the card itself. It's the 2nd
-  child because there's an SVG at the first place.
-  NOTE: this is not too elegant.
-*/
-
-.koenig-card-markdown-rendered > :nth-child(2) {
-    margin: 0;
-}
-
-.koenig-card-markdown-rendered hr {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-card-markdown-rendered hr + p {
-    margin: 3.2rem 0 0;
-}
-
-.koenig-editor .gh-markdown-editor pre {
-    border: none;
-    background: none;
-    white-space: normal;
-}
-
-.koenig-editor .gh-markdown-editor a {
-    box-shadow: none;
-}
-
-
-/* HTML editor
-/* --------------------------------------------------------------- */
-
-.koenig-card-html-rendered > :nth-child(2) {
-    margin: 0;
-}
-
-.koenig-card-html--editor pre {
-    border: none;
-    background: none;
-    white-space: pre-line;
-    padding: 0 .8rem;
-    line-height: 1.4em;
-}
-
-.koenig-card-html--editor .CodeMirror {
-    border: none;
-    margin: 0 -8px;
-}
-
-.koenig-card-html--editor .CodeMirror-linenumber {
-    padding: 12px 3px 0 5px;
-    color: var(--midlightgrey-l2);
-}
-
-.koenig-card-html--editor .CodeMirror-gutters {
-    border: none;
-    background: none;
-}
-
-
-/* Table
-/* --------------------------------------------------------------- */
-
-.koenig-editor__editor table {
-    font-size: 1.75rem;
-    margin: 0;
-    font-family: georgia,serif;
-    letter-spacing: .02rem;
-    line-height: 1.6em;
-}
-
-.koenig-editor__editor table tr td,
-.koenig-editor__editor table tr th {
-    vertical-align: top;
-    border-bottom: 1px solid var(--lightgrey);
-}
diff --git a/ghost/admin/app/styles/components/koenig.css b/ghost/admin/app/styles/components/koenig.css
deleted file mode 100644
index 273f97b572..0000000000
--- a/ghost/admin/app/styles/components/koenig.css
+++ /dev/null
@@ -1,467 +0,0 @@
-
-/* Import basic typography styles for Koenig */
-@import "./koenig-content.css";
-
-/* TODO: move these back into the editor.css layout? */
-
-/* scrollable container */
-.gh-koenig-editor {
-    position: relative;
-    z-index: 0;
-    width: 100%;
-    height: 100vh;
-    overflow-x: hidden;
-    overflow-y: auto;
-}
-
-/* padded container housing title + editor canvas, scrollable content */
-.gh-koenig-editor-pane {
-    display: flex;
-    flex-direction: column;
-    min-height: 100%;
-    padding: 10vw 4vw;
-}
-
-@media (max-width: 500px) {
-    .gh-koenig-editor-pane {
-        padding: 15vw 4vw;
-    }
-}
-
-/* use flex-grow to fill the available vertical space so clicks outside the
-   editor content can trigger focus */
-.gh-koenig-editor-pane .koenig-editor {
-    width: 100%;
-    flex-grow: 1;
-    cursor: text;
-}
-
-/* NOTE: everything from this point should be Koenig addon specific */
-
-/* Editor canvas layout ----------------------------------------------------- */
-
-.koenig-editor {
-    position: relative; /* necessary to position toolbar etc */
-    max-width: 760px;
-    margin: 0 auto;
-}
-
-
-/* ⨁ menu ------------------------------------------------------------------ */
-
-.koenig-plus-menu {
-    position: absolute;
-}
-
-.koenig-plus-menu-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: relative;
-    width: 36px;
-    height: 36px;
-    border: var(--midgrey) 1px solid;
-    background: #fff;
-    border-radius: 100%;
-    margin-left: -66px;
-    margin-top: -2px;
-}
-
-.koenig-plus-menu-button:hover {
-    border: var(--blue) 1px solid;
-    background: rgba(62, 176, 239, .05);
-}
-
-.koenig-plus-menu-button svg {
-    height: 16px;
-    width: 16px;
-}
-
-.koenig-plus-menu-button svg path {
-    stroke: var(--midgrey);
-    stroke-width: 2px;
-}
-
-.koenig-plus-menu-button:hover svg path {
-    stroke: var(--middarkgrey);
-}
-
-@media (max-width: 1024px) {
-  .koenig-plus-menu-button {
-        right:10px;
-  }
-}
-
-/* Slash shortcut menu ------------------------------------------------------ */
-
-.koenig-slash-menu {
-    position: absolute;
-}
-
-/* Menu items --------------------------------------------------------------- */
-
-/* Chrome has a bug with its scrollbars on this element which has been reported here: https://bugs.chromium.org/p/chromium/issues/detail?id=697381 */
-.koenig-cardmenu {
-    position: absolute;
-    top: 0;
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 0 20px 0;
-    padding: 20px;
-    width: 360px;
-    max-height: 460px;
-    overflow-y: auto;
-    background-color: #fff;
-    background-clip: padding-box;
-    border-radius: 4px;
-    box-shadow: 0 0 0 1px rgba(0,0,0,0.03), 0 10px 34px rgba(0,0,0,0.12);
-    text-transform: none;
-    font-size: 1.4rem;
-    font-weight: normal;
-    position: absolute;
-    z-index: 9999999; /* have to compete with codemirror */
-}
-
-.koenig-cardmenu-button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    border: var(--midgrey) 1px solid;
-    background: #fff;
-    border-radius: 100%;
-    margin-left: -40px;
-}
-
-.koenig-cardmenu-button svg {
-    height: 15px;
-    width: 15px;
-}
-
-.koenig-cardmenu-button svg path {
-    stroke: var(--midgrey);
-    stroke-width: 2px;
-}
-
-@media (max-width: 1024px) {
-  .koenig-cardmenu-button {
-        right:10px;
-  }
-}
-
-.koenig-cardmenu-search {
-    position: relative;
-    width: 350px;
-    height: 40px;
-    margin: -12px -15px;
-}
-
-.koenig-cardmenu-search svg {
-    position: absolute;
-    top: 11px;
-    left: 10px;
-    z-index: 100;
-    width: 20px;
-    height: 19px;
-}
-
-.koenig-cardmenu-search-input {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    height: 40px;
-    font-size: 1.4rem;
-    line-height: 40px;
-    padding: 10px 0 10px 40px;
-    border: none;
-    border-radius: 4px 4px 0 0;
-}
-
-.koenig-cardmenu-card {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 80px;
-    height: 80px;
-    border-radius: 4px;
-}
-
-.koenig-cardmenu-icon {
-    display: flex;
-    align-items: center;
-}
-
-.koenig-cardmenu-icon svg {
-    width: 32px;
-    height: 32px;
-}
-
-.koenig-cardmenu-icon svg path,
-.koenig-cardmenu-icon svg g {
-    stroke: var(--midgrey);
-}
-
-.koenig-cardmenu-label {
-    margin: 7px 0 0 0;
-    font-size: 1.1rem;
-    color: var(--midgrey);
-    letter-spacing: 0.2px;
-    font-weight: 200;
-}
-
-.koenig-cardmenu-card:hover, .koenig-cardmenu-card.selected {
-    cursor: pointer;
-    background: rgba(62, 176, 239, .05);
-    border: 1px solid var(--blue);
-}
-
-.koenig-cardmenu-card:hover .koenig-cardmenu-label, .koenig-cardmenu-card.selected .koenig-cardmenu-label {
-    color: var(--darkgrey);
-    font-weight: 300;
-}
-
-.koenig-cardmenu-card:hover svg path,
-.koenig-cardmenu-card:hover svg g {
-    stroke: var(--darkgrey);
-}
-
-.koenig-cardmenu-divider {
-    top: -12px;
-    width: 350px;
-    padding: 5px 0;
-    margin: 12px -15px;
-    font-size: 1.2rem;
-    text-align: center;
-    background: color-mod(var(--lightgrey) l(+3%) s(-10%));
-}
-
-
-/* Cards -------------------------------------------------------------------- */
-
-/* generic containers... */
-
-.koenig-card {
-    position: relative;
-    display: flex;
-    width: calc(100% + 60px);
-    border: 2px solid  color-mod(var(--blue) alpha(-85%));
-    flex-direction: row;
-    border-radius: 4px;
-    padding: 10px;
-    margin-left: -50px;
-    max-width: none;
-    cursor: default;
-    caret-color: auto; /* override hidden cursors around cards */
-}
-
-.koenig-card:hover {
-    border-color: color-mod(var(--blue) alpha(-25%));
-}
-
-.koenig-card--selected {
-    border-color: var(--blue);
-}
-
-.koenig-card-icon {
-    width: 30px;
-    margin-right: 10px;
-}
-
-.koenig-card-content {
-    flex-grow: 1;
-    max-width: calc(100% - 40px);
-}
-
-.koenig-card-click-overlay {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    z-index: 400;
-}
-
-/* embedded CodeMirror overrides */
-
-.koenig-editor .CodeMirror pre {
-    white-space: pre;
-}
-
-.koenig-editor .CodeMirror-wrap pre {
-    white-space: pre-wrap;
-}
-
-/* specific cards... */
-
-/* HTML */
-
-.koenig-card-html--editor .CodeMirror {
-    min-height: 170px;
-    padding: 0;
-    overflow: auto;
-    background-color: #ffffff;
-}
-
-.koenig-card-html--editor .CodeMirror:hover {
-    cursor: text;
-}
-
-.koenig-card-html--editor .CodeMirror-scroll {
-    min-height: 170px;
-    overflow: hidden !important;
-    margin-right: 0;
-}
-
-/* Markdown */
-
-.koenig-editor .gh-markdown-editor {
-    position: static;
-    overflow: visible;
-    padding-top: 2px;
-}
-
-.koenig-editor .gh-markdown-editor .editor-toolbar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-left: none;
-    border-right: none;
-    border-radius: 0 0 .4rem .4rem;
-    z-index: 9999;
-    background-color: #fff;
-    opacity: 1;
-    text-align: center;
-}
-
-.koenig-editor .gh-markdown-editor .CodeMirror {
-    min-height: 130px;
-    /* margin to account for absolutely positioned toolbar */
-    margin-bottom: 49px;
-}
-
-.koenig-editor .gh-markdown-editor .CodeMirror-scroll {
-    min-height: 130px;
-}
-
-/* mobiledoc-kit base styles ------------------------------------------------
- * NOTE: adapted from https://github.com/bustle/mobiledoc-kit/blob/master/src/css/mobiledoc-kit.css
- */
-
-/**
- * Editor
- */
-
-/* TODO: update to match Ghost styles */
-.__mobiledoc-editor {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    font-family: var(--font-family);
-    font-size: 1.7rem;
-    resize: none;
-    font-weight: 200;
-    letter-spacing: 0.1px;
-    min-height: 1em;
-}
-
-.__mobiledoc-editor:focus {
-    outline: none;
-}
-
-.__mobiledoc-editor > * {
-    position: relative;
-}
-
-.__mobiledoc-editor.__has-no-content:after {
-    font-family: georgia,serif;
-    font-weight: 300;
-    letter-spacing: .02rem;
-    line-height: 1.6em;
-    font-size: 2rem;
-    min-width: 100%;
-    content: attr(data-placeholder);
-    color: var(--midgrey-l2);
-    cursor: text;
-    position: absolute;
-    top: 16px;
-}
-
-/* override of global.css block display */
-.__mobiledoc-editor i {
-    display: inline;
-}
-
-/**
- * Cards
- */
-
-.__mobiledoc-card {
-    display: inline-block;
-    width: 100%;
-}
-
-/**
- * Tooltips
- */
-
-@-webkit-keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-@keyframes fade-in {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
-}
-
-.__mobiledoc-tooltip {
-    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-    font-size: 0.7em;
-    white-space: nowrap;
-    position: absolute;
-    background-color: rgba(43,43,43,0.9);
-    border-radius: 3px;
-    line-height: 1em;
-    padding: 0.7em 0.9em;
-    color: #FFF;
-    -webkit-animation: fade-in 0.2s;
-            animation: fade-in 0.2s;
-}
-
-.__mobiledoc-tooltip:before {
-    content: '';
-    position: absolute;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-left: 0.4em solid transparent;
-    border-right: 0.4em solid transparent;
-    border-bottom: 0.4em solid rgba(43,43,43,0.9);
-    top: -0.4em;
-    margin-left: -0.4em;
-}
-
-/* help keeps mouseover state when moving from link to tooltip */
-.__mobiledoc-tooltip:after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: -0.4em;
-    height: 0.4em;
-}
-
-.__mobiledoc-tooltip a {
-    color: #FFF;
-    text-decoration: none;
-}
-
-.__mobiledoc-tooltip a:hover {
-    text-decoration: underline;
-}
diff --git a/ghost/admin/app/styles/patterns/_shame.css b/ghost/admin/app/styles/patterns/_shame.css
deleted file mode 100644
index 2c76f40054..0000000000
--- a/ghost/admin/app/styles/patterns/_shame.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Shame
-/* ---------------------------------------------------------- */
-/* TODO: Kill with fire 🔥 */
-
-.kg-card-selected {
-    border: 1px solid var(--blue);
-    box-shadow: 0 0 0 1px #3eb0ef;
-}
-
-/* force a 16:10 aspect ratio */
-.kg-media-placeholder:before {
-    content: "";
-    float: left;
-    padding-bottom: 62.5%;
-}
-.kg-media-placeholder:after {
-    clear: left;
-    content: " ";
-    display: table;
-}
-
-/* similar to .kg-action-bar to add a positionable triangle to a popup */
-/* .kg-input-bar:after,
-.kg-input-bar:before {
-    position: absolute;
-    top: 34px;
-    left: calc(50% - 8px);
-    width: 0;
-    content: "";
-    font-size: 0;
-    line-height: 0;
-}
-.kg-input-bar:after {
-    margin-left: 1px;
-    border-top: 7px solid #fff;
-    border-right: 7px solid transparent;
-    border-left: 7px solid transparent;
-}
-.kg-input-bar:before {
-    border-top: 8px solid var(--blue);
-    border-right: 8px solid transparent;
-    border-left: 8px solid transparent;
-} */
-
-.kg-input-bar-close {
-    position: absolute;
-    top: 11px;
-    right: 9px;
-    left: auto;
-    line-height: 1.2rem;
-    z-index: 100;
-    cursor: pointer;
-}
diff --git a/ghost/admin/app/templates/components/gh-koenig-editor.hbs b/ghost/admin/app/templates/components/gh-koenig-editor.hbs
index 557860b6cb..e7629ff940 100644
--- a/ghost/admin/app/templates/components/gh-koenig-editor.hbs
+++ b/ghost/admin/app/templates/components/gh-koenig-editor.hbs
@@ -1,5 +1,5 @@
 {{!-- full height content pane --}}
-<div class="gh-koenig-editor-pane" onclick={{action "focusEditor"}}>
+<div class="gh-koenig-editor-pane flex flex-column mih-100" onclick={{action "focusEditor"}}>
     {{gh-textarea
         class="gh-editor-title"
         placeholder=titlePlaceholder
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
index 6c1fb6e5aa..63713c191a 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-editor.js
@@ -80,7 +80,7 @@ export default Component.extend({
     layout,
 
     tagName: 'article',
-    classNames: ['koenig-editor'],
+    classNames: ['koenig-editor', 'w-100', 'flex-grow', 'relative', 'center', 'mb0', 'mt0'],
 
     // public attrs
     mobiledoc: null,
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js
index 98bd4edb3d..90b4377650 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-plus-menu.js
@@ -8,7 +8,7 @@ export default Component.extend({
     layout,
 
     // public attrs
-    classNames: 'koenig-plus-menu',
+    classNames: ['koenig-plus-menu', 'absolute'],
     attributeBindings: ['style'],
     editor: null,
     editorRange: null,
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
index d14da5ec9c..b90710ff7e 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-slash-menu.js
@@ -43,7 +43,7 @@ export default Component.extend({
     layout,
 
     // public attrs
-    classNames: 'koenig-slash-menu',
+    classNames: 'absolute',
     attributeBindings: ['style'],
     editor: null,
     editorRange: null,
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
index c8fcd26422..2d147a2a6d 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-card-html.hbs
@@ -1,6 +1,6 @@
 {{#koenig-card
     icon="koenig/card-indicator-html"
-    class=(concat (kg-style "container-card") " mih10 miw-100 relative koenig-card-html-rendered")
+    class=(concat (kg-style "container-card") " mih10 miw-100 relative")
     headerOffset=headerOffset
     toolbar=toolbar
     isSelected=isSelected
@@ -17,7 +17,7 @@
             update=(action "updateHtml")
         }}
     {{else}}
-        {{{payload.html}}}
+        <div class="koenig-card-html-rendered">{{{payload.html}}}</div>
         <div class="koenig-card-click-overlay"></div>
     {{/if}}
 {{/koenig-card}}
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
index 376f5c8d26..23dd41bff7 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs
@@ -1,9 +1,9 @@
 {{#if showButton}}
-    <button class="koenig-plus-menu-button" {{action "openMenu"}}>{{svg-jar "plus"}}</button>
+    <button class="koenig-plus-menu-button flex justify-center items-center relative w9 h9 ba b--midgrey bg-white br-100 kg-blue-hover" {{action "openMenu"}}>{{svg-jar "plus" class="w4 h4 stroke-midgrey i-strokew--2"}}</button>
 {{/if}}
 
 {{#if showMenu}}
-    <div class="koenig-cardmenu">
+    <div class="koenig-cardmenu {{kg-style "cardmenu"}}">
         {{!-- <div class="koenig-cardmenu-search">
             {{svg-jar "koenig/search"}}
             <input type="text" placeholder="Search for a card..." class="gh-input koenig-cardmenu-search-input">
@@ -11,21 +11,21 @@
         <div class="koenig-cardmenu-divider">
             Primary
         </div> --}}
-        <div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "markdown" on="click"}}>
-            <div class="koenig-cardmenu-icon">{{svg-jar "koenig/markdown"}}</div>
-            <div class="koenig-cardmenu-label">Markdown</div>
+        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "markdown" on="click"}}>
+            <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/markdown" class="w8 h8 stroke-midgrey"}}</div>
+            <div class="{{kg-style "cardmenu-label"}}">Markdown</div>
         </div>
-        <div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "image" on="click"}}>
-            <div class="koenig-cardmenu-icon">{{svg-jar "koenig/image"}}</div>
-            <div class="koenig-cardmenu-label">Image</div>
+        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "image" on="click"}}>
+            <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/image" class="w8 h8 stroke-midgrey"}}</div>
+            <div class="{{kg-style "cardmenu-label"}}">Image</div>
         </div>
-        <div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "html" on="click"}}>
-            <div class="koenig-cardmenu-icon">{{svg-jar "koenig/html"}}</div>
-            <div class="koenig-cardmenu-label">HTML</div>
+        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "html" on="click"}}>
+            <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/html" class="w8 h8 stroke-midgrey"}}</div>
+            <div class="{{kg-style "cardmenu-label"}}">HTML</div>
         </div>
-        <div class="koenig-cardmenu-card" {{action "replaceWithCardSection" "hr" on="click"}}>
-            <div class="koenig-cardmenu-icon">{{svg-jar "koenig/divider"}}</div>
-            <div class="koenig-cardmenu-label">Divider</div>
+        <div class="koenig-cardmenu-card {{kg-style "cardmenu-card"}}" {{action "replaceWithCardSection" "hr" on="click"}}>
+            <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar "koenig/divider" class="w8 h8 stroke-midgrey"}}</div>
+            <div class="{{kg-style "cardmenu-label"}}">Divider</div>
         </div>
     </div>
 {{/if}}
diff --git a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
index a5c926cea8..658b318126 100644
--- a/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
+++ b/ghost/admin/lib/koenig-editor/addon/templates/components/koenig-slash-menu.hbs
@@ -1,9 +1,9 @@
 {{#if showMenu}}
-    <div class="koenig-cardmenu">
+    <div class="koenig-cardmenu {{kg-style "cardmenu"}}">
         {{#each items as |item|}}
-            <div class="koenig-cardmenu-card {{if item.selected "selected"}}" {{action "itemClicked" item on="click"}}>
-                <div class="koenig-cardmenu-icon">{{svg-jar item.icon}}</div>
-                <div class="koenig-cardmenu-label">{{item.label}}</div>
+            <div class="koenig-cardmenu-card {{if item.selected "kg-blue-selected"}} {{kg-style "cardmenu-card"}}" {{action "itemClicked" item on="click"}}>
+                <div class="{{kg-style "cardmenu-icon"}}">{{svg-jar item.icon class="w8 h8 stroke-midgrey"}}</div>
+                <div class="{{kg-style "cardmenu-label"}}">{{item.label}}</div>
             </div>
         {{/each}}
     </div>