Koenig - Style refinements for card menu, toolbar, and link input

refs TryGhost/Ghost#9505
- Card menu style refinements
- Toolbar style refinements
- Unifying toolbar, link tooltip and link toolbar size and position
- Making link input the same size as text toolbar
- Fix single element position in toolbar
- Making toolbars darker

lib/koenig-editor/addon/templates/components/koenig-card.hbs

@@ -7,7 +7,7 @@
 {{yield}}
 
 {{#if toolbar}}
-    <ul data-toolbar="true" class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
+    <ul data-toolbar="true" class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center absolute white sans-serif f8 fw6 tracked-2 anim-fast-bezier z-999 {{if showToolbar "" "o-0 drop-down"}}" style={{toolbarStyle}}>
         {{#each toolbar.items as |item|}}
             {{#if item.divider}}
                 <li class="ma0 kg-action-bar-divider bg-darkgrey-d2 h5"></li>
@@ -16,7 +16,7 @@
                     <button
                         type="button"
                         title={{item.title}}
-                        class="dib dim-lite pa2 link h8 {{item.buttonClass}}"
+                        class="dib dim-lite link h10 w9 nudge-top--1 justify-center {{item.buttonClass}}"
                         onmousedown={{action item.action}}
                     >
                         {{#if item.icon}}{{svg-jar item.icon class=(concat item.iconClass (if item.text " mr2") " w4 h4")}} {{/if}}{{item.text}}

lib/koenig-editor/addon/templates/components/koenig-link-input.hbs

@@ -1,7 +1,7 @@
 <input
     placeholder="Enter url"
     value={{href}}
-    class="miw-100 pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue"
+    class="kg-link-input pa2 pr6 mih-100 ba br3 shadow-2 f8 lh-heading tracked-2 outline-0 b--blue h10 nudge-top--8"
     autofocus="true"
     oninput={{action (mut href) value="target.value"}}
     onkeydown={{action "inputKeydown"}}

lib/koenig-editor/addon/templates/components/koenig-link-toolbar.hbs

@@ -1,13 +1,13 @@
 {{#if showToolbar}}
-    <ul class="bg-darkgrey inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f-small fw3 tracked-2">
+    <ul class="bg-darkgrey-d1 inline-flex pa0 ma0 list br3 shadow-2 items-center relative white f-small fw3 tracked-2 nudge-top--1">
         <li class="mw70 ma0 truncate">
-            <a href="{{url}}" class="dib dim-lite pa2 pr1 link white" target="_blank" rel="noopener noreferrer">{{url}}</a>
+            <a href="{{url}}" class="dib dim-lite pa3 pr1 link white" target="_blank" rel="noopener noreferrer">{{url}}</a>
         </li>
         <li class="ma0">
             <button
                 type="button"
                 title="Edit"
-                class="dib dim-lite pa1 link"
+                class="dib dim-lite pa2 pl1 pr1 link"
                 {{action "edit"}}
             >
                 {{!-- TODO: get correct icon --}}
@@ -18,7 +18,7 @@
             <button
                 type="button"
                 title="Remove"
-                class="dib dim-lite pa1 pr2 link"
+                class="dib dim-lite pa2 pl1 pr1 link mr2"
                 {{action "remove"}}
             >
                 {{!-- TODO: get correct icon --}}

lib/koenig-editor/addon/templates/components/koenig-plus-menu.hbs

@@ -3,7 +3,7 @@
 {{/if}}
 
 {{#if showMenu}}
-    <div class="koenig-cardmenu {{kg-style "cardmenu"}}">
+    <div class="{{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">

lib/koenig-editor/addon/templates/components/koenig-toolbar.hbs

@@ -1,9 +1,9 @@
-<ul class="kg-action-bar bg-lgr-darkgrey inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
+<ul class="kg-action-bar bg-darkgrey-d1 inline-flex pa0 ma0 pl1 pr1 nl1 list br3 shadow-2 items-center relative white f8 fw6 tracked-2 {{if showToolbar "anim-fast-bezier" "o-0 pop-down"}}">
     <li class="ma0 lh-solid">
         <button
             type="button"
             title="Bold"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "toggleMarkup" "strong"}}
         >
             {{svg-jar "koenig/kg-bold" class=(concat (if activeMarkupTagNames.isStrong "stroke-blue-l2" "stroke-white") " w4 h4")}}
@@ -13,7 +13,7 @@
         <button
             type="button"
             title="Italic"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "toggleMarkup" "em"}}
         >
             {{svg-jar "koenig/kg-italic" class=(concat (if (or activeMarkupTagNames.isEm activeMarkupTagNames.isI) "stroke-blue-l2" "stroke-white") " w4 h4")}}
@@ -23,7 +23,7 @@
         <button
             type="button"
             title="Heading One"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "toggleSection" "h1"}}
         >
             {{svg-jar "koenig/kg-heading-1" class=(concat (if activeSectionTagNames.isH1 "stroke-blue-l2" "stroke-white") " w4 h4")}}
@@ -33,53 +33,30 @@
         <button
             type="button"
             title="Heading Two"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "toggleSection" "h2"}}
         >
             {{svg-jar "koenig/kg-heading-2" class=(concat (if activeSectionTagNames.isH2 "stroke-blue-l2" "stroke-white") " w4 h4")}}
         </button>
     </li>
 
-    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
+    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-l2 h5"></li>
 
     <li class="ma0 lh-solid">
         <button
             type="button"
             title="Quote"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "toggleSection" "blockquote"}}
         >
             {{svg-jar "koenig/kg-quote" class=(concat (if activeSectionTagNames.isBlockquote "stroke-blue-l2" "stroke-white") " w4 h4")}}
         </button>
     </li>
-    <li class="ma0 lh-solid">
-        <button
-            type="button"
-            title="Unordered List"
-            class="dib dim-lite pa2 link h8"
-            {{action "toggleSection" "ul"}}
-        >
-            {{svg-jar "koenig/kg-bullet-list" class=(concat (if activeSectionTagNames.isUl "stroke-blue-l2" "stroke-white") " w4 h4")}}
-        </button>
-    </li>
-    <li class="ma0 lh-solid">
-        <button
-            type="button"
-            title="Ordered List"
-            class="dib dim-lite pa2 link h8"
-            {{action "toggleSection" "ol"}}
-        >
-            {{svg-jar "koenig/kg-numbered-list" class=(concat (if activeSectionTagNames.isOl "stroke-blue-l2" "stroke-white") " w4 h4")}}
-        </button>
-    </li>
-
-    <li class="ma0 lh-solid kg-action-bar-divider bg-darkgrey-d2 h5"></li>
-
     <li class="ma0 lh-solid">
         <button
             type="button"
             title="Link"
-            class="dib dim-lite pa2 link h8"
+            class="dib dim-lite link h10 w9 nudge-top--1"
             {{action "editLink"}}
         >
             {{svg-jar "koenig/kg-link" class=(concat (if activeMarkupTagNames.isA "stroke-blue-l2" "stroke-white") " w4 h4")}}