From 735f6eb66fda3dea491f0de59eca587d4f8c9ab0 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Mon, 16 Dec 2019 15:04:32 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20darkmode=20color=20regre?=
 =?UTF-8?q?ssions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs. https://github.com/TryGhost/Ghost/issues/11445

- fixed input field background colors in Post Settings menu in darkmode
- applied color variables to day picker calendar component
- fixed colors of day picker calendar in darkmode
---
 ghost/admin/app/styles/app-dark.css           | 18 +++++++++++--
 .../app/styles/components/power-calendar.css  | 26 +++++++++----------
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index 7dec7b9238..19704ebe29 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -88,8 +88,8 @@ input,
 .gh-select,
 .for-switch .input-toggle-component,
 .gh-select select,
-.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input,
-.settings-menu-container:not(.tag-settings) .gh-input,
+.settings-menu-container:not(.ember-power-select-multiple-trigger):not(.tag-settings) input:not([disabled]),
+.settings-menu-container:not(.tag-settings) .gh-input:not([disabled]),
 .settings-menu-pane .gh-date-time-picker-date,
 .settings-menu-pane .gh-date-time-picker-time {
     color: var(--darkgrey);
@@ -167,6 +167,20 @@ input:focus,
     color: var(--darkgrey);
 }
 
+.ember-power-calendar-day--today,
+.ember-power-calendar-day:not([disabled]):hover {
+    background-color: color-mod(var(--lightgrey) l(-5%));
+}
+
+.ember-power-calendar-day--selected,
+.ember-power-calendar-day--selected:not([disabled]):hover {
+    background: color-mod(var(--blue) l(-10%));
+}
+
+.ember-power-calendar-day--interactive[disabled] {
+    opacity: 0.2;
+}
+
 .gh-main,
 .gh-nav,
 .gh-unsplash-window {
diff --git a/ghost/admin/app/styles/components/power-calendar.css b/ghost/admin/app/styles/components/power-calendar.css
index 147e7430ad..4cc19f9c0c 100644
--- a/ghost/admin/app/styles/components/power-calendar.css
+++ b/ghost/admin/app/styles/components/power-calendar.css
@@ -76,11 +76,11 @@
 }
 
 .ember-power-calendar-weekdays {
-  color: #333333;
+  color: var(--darkgrey);
 }
 
 .ember-power-calendar-day {
-  color: #bbb;
+  color: var(--midgrey);
 }
 
 .ember-power-calendar-nav {
@@ -90,47 +90,47 @@
 .ember-power-calendar-nav-control {
   line-height: 1;
   font-size: 150%;
-  color: #0078c9;
+  color: var(--blue);
 }
 
 .ember-power-calendar-nav-control:focus {
   transform: scale(1.2);
-  color: color-mod(#0078c9 l(+10%));
+  color: color-mod(var(--blue) l(+10%));
 }
 
 .ember-power-calendar-day--current-month {
-  color: #656d78;
-  background-color: #f5f7fa;
+  color: var(--middarkgrey);
+  background-color: color-mod(var(--lightgrey) l(+4%));
 }
 
 .ember-power-calendar-day--today,
 .ember-power-calendar-day:not([disabled]):hover {
-  background-color: #eee;
+  background-color: var(--lightgrey);
 }
 
 .ember-power-calendar-day--other-month:not([disabled]):hover {
-  color: #aaa;
+  color: var(--midgrey);
 }
 
 .ember-power-calendar-day--selected,
 .ember-power-calendar-day--selected:not([disabled]):hover {
   font-weight: bold;
-  background-color: color-mod(#0078c9 l(+50%));
-  color: #656D78;
+  background-color: color-mod(var(--blue) l(+30%));
+  color: var(--middarkgrey);
 }
 
 .ember-power-calendar-day--selected.ember-power-calendar-day--range-start,
 .ember-power-calendar-day--selected.ember-power-calendar-day--range-end {
-  background-color: color-mod(#0078c9 l(+40%));
+  background-color: color-mod(var(--blue) l(+40%));
 }
 
 .ember-power-calendar-day--selected.ember-power-calendar-day--range-start:hover,
 .ember-power-calendar-day--selected.ember-power-calendar-day--range-end:hover {
-    background-color: color-mod(#0078c9 l(+40%));
+    background-color: color-mod(var(--blue) l(+40%));
 }
 
 .ember-power-calendar-day--focused {
-  box-shadow: inset 0px -2px 0px 0px #0078c9;
+  box-shadow: inset 0px -2px 0px 0px var(--blue);
 }
 
 .ember-power-calendar-day--interactive[disabled] {