From 5d827ad1a99740a57c69873fcdcdb1e915e33dda Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Fri, 15 Jul 2022 11:19:31 +0200
Subject: [PATCH] Made it easier to tell internal and public tags apart in post
 settings

---
 ghost/admin/app/styles/app-dark.css           | 17 ++++++++++
 .../app/styles/components/power-select.css    | 33 +++++++++++++++++--
 2 files changed, 47 insertions(+), 3 deletions(-)

diff --git a/ghost/admin/app/styles/app-dark.css b/ghost/admin/app/styles/app-dark.css
index a046b9a880..296ab0fbc8 100644
--- a/ghost/admin/app/styles/app-dark.css
+++ b/ghost/admin/app/styles/app-dark.css
@@ -496,6 +496,23 @@ input:focus,
     color: var(--black);
 }
 
+.tag-token:not(.tag-token--internal) {
+    color: var(--black);
+}
+
+.tag-token:not(.tag-token--internal)::before {
+    opacity: 0.3;
+}
+
+.tag-token svg path {
+    stroke: var(--black);
+    fill: var(--black);
+}
+
+.tag-token--internal {
+    background: var(--white);
+}
+
 .fullscreen-modal-background, .epm-backdrop {
     background: #000;
 }
diff --git a/ghost/admin/app/styles/components/power-select.css b/ghost/admin/app/styles/components/power-select.css
index b261aba16c..db1ed03549 100644
--- a/ghost/admin/app/styles/components/power-select.css
+++ b/ghost/admin/app/styles/components/power-select.css
@@ -280,10 +280,37 @@
 
 /* Tag input */
 
+.tag-token:not(.tag-token--internal) {
+    position: relative;
+    color: var(--accent-color);
+    background: none;
+}
+  
+.tag-token:not(.tag-token--internal)::after {
+    position: absolute;
+    top: -1px;
+    right: -1px;
+    bottom: -1px;
+    left: -1px;
+    content: "";
+    border-radius: 3px;
+    background: var(--accent-color);
+    opacity: 0.15;
+}
+
 .tag-token--internal {
-    background: var(--lightgrey-l1);
-    border: 1px solid var(--lightgrey-l1);
-    color: var(--black);
+    background: var(--whitegrey-l1);
+}
+
+.tag-token span {
+    position: relative;
+    z-index: 2;
+    opacity: 0.8;
+}
+
+.tag-token svg path {
+    stroke: var(--accent-color);
+    fill: var(--accent-color);
 }
 
 .tag-token--internal svg path {