Updated PSM styles

ghost/admin/app/styles/components/power-select.css

@@ -195,7 +195,7 @@
 .ember-power-select-multiple-option {
     margin: 2px;
     padding: 2px 6px;
-    border: 1px solid var(--black);
+    border: 1px solid var(--black-20);
     border-radius: 3px;
     font-size: 0.93em;
     font-weight: 500;
@@ -247,13 +247,13 @@
 /* Tag input */
 
 .tag-token--internal {
-    background: color-mod(var(--green) alpha(0.1));
-    color: var(--green);
+    background: color-mod(var(--black) alpha(0.1));
+    color: var(--black);
 }
 
 .tag-token--internal svg path {
-    stroke: var(--green);
-    fill: var(--green);
+    stroke: var(--black);
+    fill: var(--black);
 }
 
 /* Inside settings / Mailgun region */

ghost/admin/app/styles/components/settings-menu.css

@@ -14,15 +14,20 @@
     width: 350px;
     max-width: 100%;
     overflow: hidden;
-    background: var(--whitegrey-l2);
-    border-left: 1px solid var(--whitegrey);
-    transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
+    background: var(--white);
+    transition: all 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
     transform: translate3d(360px, 0px, 0px);
-    /* box-shadow: 0 0 1px rgba(99, 114, 130, 0.1), 1px 0 16px rgba(27, 39, 51, 0.08); */
+    box-shadow: none;
 }
 
 .settings-menu-expanded .settings-menu-container {
     transform: translate3d(0, 0px, 0px);
+    box-shadow:
+        -4.5px 0 3.6px rgba(0, 0, 0, 0.007),
+        -12.5px 0 10px rgba(0, 0, 0, 0.008),
+        -30.1px 0 24.1px rgba(0, 0, 0, 0.01),
+        -100px 0 80px rgba(0, 0, 0, 0.02)
+    ;
 }
 
 .settings-menu-container .settings-menu-pane {
@@ -114,7 +119,7 @@
 .settings-menu-pane .gh-date-time-picker-date,
 .settings-menu-pane .gh-date-time-picker-time {
     background: var(--white);
-    border: 1px solid color-mod(var(--lightgrey) l(-5%) s(-10%));
+    border: var(--input-border);
 }
 
 .settings-menu-container .ember-power-select-multiple-trigger input,
@@ -189,6 +194,7 @@
 
 .settings-menu-delete-button:hover {
     box-shadow: none;
+    background: none;
 }
 
 .settings-menu-delete-button span {
@@ -303,7 +309,7 @@
     z-index: 900;
     opacity: 0;
     transition: transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
-    background: transparent;
+    background: rgba(0,0,0,0.02);
     /* Not off the screen, to give a parallax effect */
     animation: coverFadeIn 0.3s ease 0.1s 1 forwards;
 }

ghost/admin/app/styles/layouts/editor.css

@@ -99,13 +99,14 @@
     top: 1px;
     right: 0;
     font-size: 1.3rem;
+    color: var(--green);
 }
 
 .post-view-link svg {
     display: inline;
     width: 10px;
     height: 10px;
-    fill: var(--blue);
+    fill: var(--green);
 }
 
 

ghost/admin/app/styles/layouts/main.css

@@ -1031,7 +1031,7 @@
 .gh-main-section-block.p0 { padding: 0; }
 
 .gh-main-section-modifier.grey .gh-main-section {
-    background: color-mod(var(--whitegrey-l1) l(+1%));
+    background: var(--main-color-content-greybg);
     border-radius: 3px;
     grid-column-gap: 0px;
 }
@@ -1055,7 +1055,7 @@
 
 /* Expandables */
 .gh-expandable {
-    background: color-mod(var(--whitegrey-l1) l(+1%));
+    background: var(--main-color-content-greybg);
     border-radius: 3px;
 }
 
@@ -1095,7 +1095,7 @@
 }
 
 .gh-expandable-content {
-    background: linear-gradient(color-mod(var(--whitegrey-l1) l(+1%)), color-mod(var(--whitegrey-l1) l(+0%)));
+    background: linear-gradient(var(--main-color-content-greybg), color-mod(var(--main-color-content-greybg) l(-2%)));
     margin: 18px -24px -18px;
     padding: 0 24px;
 }

ghost/admin/app/styles/patterns/boxes.css

@@ -5,7 +5,7 @@
     position: relative;
     padding: 12px 10px 14px 40px;
     border: 1px solid transparent;
-    color: var(--black);
+    color: var(--darkgrey);
     line-height: 1.55em;
     letter-spacing: 0.2px;
     background: color-mod(var(--blue) a(5%));
@@ -15,7 +15,7 @@
 
 .gh-box a {
     color: var(--black);
-    text-decoration: underline;
+    font-weight: 600;
 }
 
 .gh-box svg:first-of-type {
@@ -31,7 +31,8 @@
 }
 
 .gh-box-alert {
-    border-left-color: color-mod(var(--yellow) l(-8%) s(+10%));
+    border-color: var(--yellow);
+    background: color-mod(var(--yellow) a(5%));
 }
 
 .gh-box-alert svg:first-of-type {

ghost/admin/app/styles/patterns/forms.css

@@ -3,7 +3,7 @@
 
 form label {
     display: block;
-    color: var(--darkgrey);
+    color: var(--black);
     font-size: 1.3rem;
     font-weight: 500;
     user-select: text;
@@ -180,7 +180,7 @@ select.error {
 .gh-input:focus,
 .gh-input.focus {
     outline: 0;
-    border-color: color-mod(var(--green));
+    border-color: color-mod(var(--green)) !important;
     box-shadow: inset 0 0 0 1px var(--green);
     background: var(--white);
 }

ghost/admin/app/styles/patterns/global.css

@@ -130,7 +130,7 @@
     /* Global, high-level UI colors */
     --main-bg-color: rgb(255, 255, 255);
     --main-color-area-divider: var(--whitegrey-d1);
-    --main-color-content-greybg: color-mod(var(--whitegrey-l2) l(-1%));
+    --main-color-content-greybg: color-mod(var(--whitegrey-l1) l(+0%));
 
     --list-color-divider: var(--whitegrey-d1);
     
@@ -157,7 +157,7 @@
 
     /* Inputs */
     --input-bg-color: var(--white);
-    --input-border-color: color-mod(var(--lightgrey) l(-5%) s(-10%));
+    --input-border-color: var(--whitegrey-d2);
     --input-border: var(--input-border-color) 1px solid;
 }
 

ghost/admin/app/styles/patterns/navlist.css

@@ -4,8 +4,7 @@
 .nav-list {
     padding: 0;
     max-width: 500px;
-    border: 1px solid color-mod(var(--lightgrey) l(-5%) s(-10%));
-    background: #fff;
+    background: var(--main-color-content-greybg);
     border-radius: var(--border-radius);
 }
 
@@ -22,7 +21,7 @@
 }
 
 .nav-list-item:hover {
-    background: color-mod(var(--lightgrey) l(+6%));
+    background: var(--whitegrey);
     cursor: pointer;
 }
 
@@ -37,7 +36,7 @@
 }
 
 .nav-list-item:not(:last-of-type) {
-    border-bottom: 1px solid color-mod(var(--lightgrey) l(-5%) s(-10%));
+    border-bottom: 1px solid var(--white);
 }
 
 .nav-list-item button {