From 60568547e3c09e1fc9ca1940ff027d64d3a38e59 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 17 May 2022 11:38:34 +0200
Subject: [PATCH] Updated dark mode colors

---
 ghost/admin/app/styles/app-dark.css | 80 +++++++++++++++++------------
 1 file changed, 48 insertions(+), 32 deletions(-)

diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index fb60b51573..8ffcca1333 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -76,21 +76,21 @@
 :root {
     /* Primary colours */
     --black: #fafafb;
-    --white: #111213;
+    --white: #151719;
     --lime: #B5FF18;
 
-    --darkgrey: #e8ebed;
-    --middarkgrey: #aeb5bc;
-    --midgrey: #80868e;
-    --midlightgrey:#60666c;
-    --lightgrey: #2b2d31;
-    --whitegrey: #1c1e21;
+    --darkgrey: #E3E6E8;
+    --middarkgrey: #A9B0B7;
+    --midgrey: #7B8189;
+    --midlightgrey:#5B6167;
+    --lightgrey: #26282B;
+    --whitegrey: #17191C;
     --blue: color-mod(#3eb0ef l(+5%) s(+5%));
 
-    --main-bg-color: #151719;
-    --dark-main-bg-color: #151719;
-    --hairline-color-1: #272a30;
-    --hairline-color-2: #626D79;
+    --main-bg-color: #101114;
+    --dark-main-bg-color: #101114;
+    --hairline-color-1: #22252A;
+    --hairline-color-2: #5E6874;
 
     --main-color-content-greybg: var(--whitegrey);
     --list-color-divider: var(--whitegrey-l1);
@@ -166,6 +166,10 @@ input:focus,
     background: var(--dark-main-bg-color);
 }
 
+.settings-menu-container {
+    border-color: var(--hairline-color-1);
+}
+
 .settings-menu-container .settings-menu-pane {
     background: var(--dark-main-bg-color);
 }
@@ -484,13 +488,13 @@ input:focus,
     color: var(--black);
 }
 
-.fullscreen-modal-background {
+.fullscreen-modal-background, .epm-backdrop {
     background: #000;
 }
 
 .epm-modal .modal-content,
 .modal-content {
-    background: var(--whitegrey);
+    background: color-mod(var(--white) l(-1%));
 }
 
 .seo-preview-title {
@@ -662,7 +666,7 @@ input:focus,
 }
 
 .gh-nav-list a {
-    color: color-mod(var(--midgrey));
+    color: color-mod(var(--middarkgrey-d1));
 }
 
 .gh-nav-list a:not(.active):not(.gh-secondary-action):hover,
@@ -743,6 +747,10 @@ input:focus,
     background-color: transparent;
 }
 
+.gh-setting-header {
+    border-color: var(--hairline-color-1);
+}
+
 .gh-settings-main-grid .gh-setting-group span {
     background: color-mod(var(--dark-main-bg-color) l(+2%));
 }
@@ -780,13 +788,13 @@ input:focus,
 .kg-settings-panel {
     background-color: var(--lightgrey-d1);
     box-shadow:
-        0px -1px 10px rgba(0, 0, 0, 0.2),
-        0px 2.8px 2.2px rgba(0, 0, 0, 0.1),
-        0px 6.7px 5.3px rgba(0, 0, 0, 0.1),
-        0px 12.5px 10px rgba(0, 0, 0, 0.12),
-        0px 22.3px 17.9px rgba(0, 0, 0, 0.12),
-        0px 41.8px 33.4px rgba(0, 0, 0, 0.16),
-        0px 100px 80px rgba(0, 0, 0, 0.2)
+        0px -1px 10px rgba(0, 0, 0, 0.1),
+        0px 2.8px 2.2px rgba(0, 0, 0, 0.05),
+        0px 6.7px 5.3px rgba(0, 0, 0, 0.05),
+        0px 12.5px 10px rgba(0, 0, 0, 0.08),
+        0px 22.3px 17.9px rgba(0, 0, 0, 0.08),
+        0px 41.8px 33.4px rgba(0, 0, 0, 0.08),
+        0px 100px 80px rgba(0, 0, 0, 0.1)
     ;
 }
 
@@ -912,6 +920,11 @@ input:focus,
 }
 
 /* Members */
+.gh-members-help-card,
+.gh-offers-help-card {
+    background: var(--dark-main-bg-color);
+}
+
 .gh-members-chart-header {
     background: var(--white);
 }
@@ -987,10 +1000,18 @@ input:focus,
 }
 
 /* Offers */
+.gh-btn-green svg {
+    fill: #fff !important;
+}
+
 .gh-offers-list-cta .discount-bubble {
     color: var(--midgrey-d2);
 }
 
+.gh-offers-help-card .gh-btn {
+    background: var(--whitegrey) !important;
+}
+
 /* Portal */
 .gh-portal-settings-maintabs {
     border: 1px solid color-mod(var(--darkgrey) l(-27%) blackness(+15%));
@@ -1070,11 +1091,11 @@ input:focus,
 }
 
 .gh-list-scrolling thead th:first-child {
-    background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
+    background: linear-gradient(90deg, rgba(16,17,20,1) 90%, rgba(16,17,20,0) 100%);
 }
 
 .gh-list-scrolling tbody .gh-list-data:first-child {
-    background: linear-gradient(90deg, rgba(21,23,25,1) 90%, rgba(21,23,25,0) 100%);
+    background: linear-gradient(90deg, rgba(16,17,20,1) 90%, rgba(16,17,20,0) 100%);
 }
 
 .gh-filter-builder .gh-filters {
@@ -1122,13 +1143,8 @@ kbd {
     border-color: #394047;
 }
 
-.gh-dashboard .gh-dashboard-box.is-secondary {
-    border: 1px solid #2b2d31;
-}
-
-.gh-dashboard .gh-dashboard-box.is-secondary,
-.gh-dashboard .gh-dashboard-box.is-faded {
-    background: transparent;
+.gh-dashboard .gh-dashboard-box.is-secondary .gh-dashboard-resource-box {
+    background: var(--main-bg-color);
 }
 
 .gh-dashboard .gh-dashboard-column {
@@ -1159,11 +1175,11 @@ kbd {
 }
 
 .gh-dashboard-recents .gh-dashboard-list-item:hover {
-    background: rgba(28, 30, 33, 0.7);
+    background: linear-gradient(90deg, rgba(21,23,25,0) 0%, rgba(21,23,25,1) 100%);
 }
 
 .gh-dashboard-resource .gh-dashboard-list-item:hover {
-    background: rgba(28, 30, 33, 0.3);
+    background: transparent;
 }
 
 .gh-dashboard-community .gh-dashboard-resource-footer {