From ebd2034eb8cf2a7e90b6e1b43101d95dd80636fb Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 20 Aug 2020 19:19:08 -0400
Subject: [PATCH] Add custom color definitions

---
 common/color_definitions.scss |  3 +++
 desktop/desktop.scss          | 33 +++++----------------------------
 2 files changed, 8 insertions(+), 28 deletions(-)
 create mode 100644 common/color_definitions.scss

diff --git a/common/color_definitions.scss b/common/color_definitions.scss
new file mode 100644
index 0000000..aee4064
--- /dev/null
+++ b/common/color_definitions.scss
@@ -0,0 +1,3 @@
+:root {
+  --material-lighter-secondary: lighten($secondary, 10%);
+}
diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index c338ef4..79f32a2 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -17,10 +17,7 @@
 // make header icons semi-translucent
 .d-header-icons {
   .d-icon {
-    color: rgba(
-      var(--header_primary-rgb),
-      0.7
-    );
+    color: rgba(var(--header_primary-rgb), 0.7);
   }
 }
 
@@ -31,12 +28,7 @@
 .topic-list,
 .latest-topic-list {
   @include boxShadow;
-  @media (prefers-color-scheme: dark) {
-    background-color: #3b3b3b;
-  }
-  @media (prefers-color-scheme: light) {
-    background-color: #fff;
-  }
+  background-color: var(--material-lighter-secondary);
 }
 
 //underline navigation links
@@ -66,12 +58,7 @@
 //create conversation cards
 .topic-body {
   @include boxShadow;
-  @media (prefers-color-scheme: dark) {
-    background-color: #3b3b3b;
-  }
-  @media (prefers-color-scheme: light) {
-    background-color: #fff;
-  }
+  background-color: var(--material-lighter-secondary);
   margin-top: 10px;
   border-radius: 4px;
   padding: 15px 20px 0 20px;
@@ -220,12 +207,7 @@
 //cards for search results
 .fps-result {
   @include boxShadow;
-  @media (prefers-color-scheme: dark) {
-    background-color: #3b3b3b;
-  }
-  @media (prefers-color-scheme: light) {
-    background-color: #fff;
-  }
+  background-color: var(--material-lighter-secondary);
   margin-top: 10px;
   padding: 20px;
   border-radius: 4px;
@@ -236,12 +218,7 @@
     background-color: var(--tertiary-low, $tertiary-low);
   }
   100% {
-    @media (prefers-color-scheme: dark) {
-      background-color: #3b3b3b;
-    }
-    @media (prefers-color-scheme: light) {
-      background-color: #fff;
-    }
+    background-color: var(--material-lighter-secondary);
   }
 }