fix(colors): Contrast for project/tag selection

Closes #1813
toggl · Sep 8, 2020 · 83d750e · 83d750e
1 parent e7d19f7
commit 83d750e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 11 deletions.
diff --git a/src/styles/autocomplete.css b/src/styles/autocomplete.css
@@ -29,15 +29,11 @@
 }
 
 #project-autocomplete li:not(.ws-row):not(.client-row):hover {
-  background-color: var(--main-bg-color);
+  color: var(--active-font-color);
+  background-color: var(--hover-selection);
   border-radius:0px;
 }
 
-#project-autocomplete li.selected-project {
-  background-color: rgba(74,199,0,.12);
-  color: #4bc800!important;
-}
-
 #project-autocomplete ul {
   list-style: none;
   padding: 0;
@@ -129,6 +125,12 @@
   text-overflow: ellipsis;
   color: var(--font-color);
 }
+li:hover span.item-name,
+li:hover span.task-count,
+li.selected-project span.item-name,
+li.selected-project span.task-count {
+  color: var(--active-font-color) !important;
+}
 
 /* PROJECT BULLETS */
 
@@ -186,13 +188,15 @@
 }
 
 #tag-autocomplete .tag-list li:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  color: var(--active-font-color);
+  background-color: var(--hover-selection);
   cursor: pointer;
 }
 
+#project-autocomplete li.selected-project,
 #tag-autocomplete .tag-list li.selected-tag {
-  background-color: rgba(75, 200, 0, 0.12);
-  color: #4bc800;
+  background-color: var(--active-selection);
+  color: var(--active-font-color) !important;
 }
 
 .tag-clear {
@@ -283,8 +287,8 @@
 }
 
 .selected-task {
-  background-color: rgba(75, 200, 0, 0.12);
-  color: #4bc800;
+  background-color: var(--active-selection);
+  color: var(--active-font-color);
 }
 
 .filtered .tasklist-opened.filter li.task-item {

diff --git a/src/styles/colours.css b/src/styles/colours.css
@@ -15,6 +15,16 @@
   --pink: #DD6FD1;
   --light-pink: #E57CD8;
 
+  --pink-20: #FAE5F7;
+  --pink-30: #F7D8F3;
+
   --dark-purple: #412a4c;
   --darker-purple: #0a040c;
+  --dark-purple-10: #EAE7EB;
+  --dark-purple-20: #D5D0D7;
+  --dark-purple-60: #817187;
+  --dark-purple-70: #6b5a74;
+  --dark-purple-80: #564260;
+
+  --peach: #fefbfa;
 }
diff --git a/src/styles/popup.css b/src/styles/popup.css
@@ -12,6 +12,10 @@ body {
   --border-color: var(--extra-light-grey);
   --font-color: var(--another-black);
   --danger-color: var(--red);
+
+  --active-font-color: var(--dark-purple);
+  --hover-selection: var(--dark-purple-10);
+  --active-selection: var(--pink-30);
 }
 
 body.dark {
@@ -21,6 +25,10 @@ body.dark {
   --border-color: var(--dark-grey);
   --font-color: var(--lighter-grey);
   --danger-color: var(--red-on-dark);
+
+  --active-font-color: var(--peach);
+  --hover-selection: var(--dark-purple-60);
+  --active-selection: var(--dark-purple-80);
 }
 
 html, body {