From 7947c0a702bee2df957b0b8baab3b98eb5d91bda Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 15 Mar 2021 10:19:02 -0400
Subject: [PATCH] Use CSS custom properties for colors

---
 desktop/desktop.scss | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/desktop/desktop.scss b/desktop/desktop.scss
index 50ddaef..a708f63 100644
--- a/desktop/desktop.scss
+++ b/desktop/desktop.scss
@@ -34,24 +34,24 @@
 //underline navigation links
 .nav-pills > li.active > a,
 .nav-pills > li > a.active {
-  color: $primary;
+  color: var(--primary);
   font-weight: 500;
-  background-color: $secondary;
-  border-bottom: 3px solid $tertiary;
+  background-color: var(--secondary);
+  border-bottom: 3px solid var(--tertiary);
 }
 
 //remove highlighting navigation background on hover
 .nav-pills > li > a:hover {
-  background-color: $secondary;
+  background-color: var(--secondary);
 }
 
 //fix color of user profile navigation icons
 .user-main .nav-pills {
   a.active i {
-    color: $primary;
+    color: var(--primary);
   }
   a:hover:not(.active) i {
-    color: $quaternary;
+    color: var(--quaternary);
   }
 }
 
@@ -99,7 +99,7 @@
 
 .embedded-posts.top.topic-body {
   box-shadow: none;
-  background-color: $secondary;
+  background-color: var(--secondary);
 }
 
 //darken color, remove shadow and border when pressed
@@ -124,13 +124,13 @@
   bottom: 30px;
   right: 50px;
   z-index: z("composer", "content") - 1;
-  background-color: $tertiary;
-  color: $secondary;
+  background-color: var(--tertiary);
+  color: var(--secondary);
   white-space: nowrap;
   overflow: hidden;
   .d-icon {
     margin: 0;
-    color: $secondary;
+    color: var(--secondary);
   }
   .d-button-label {
     display: inline-block;
@@ -151,7 +151,7 @@
 }
 
 #create-topic.btn-default .fa-plus {
-  color: $secondary;
+  color: var(--secondary);
 }
 
 #create-topic.btn-default:hover {
@@ -168,20 +168,20 @@
   position: absolute;
   top: 55px;
   left: -10px;
-  background-color: $tertiary;
+  background-color: var(--tertiary);
   @include buttonShadow;
   overflow: hidden;
   width: 60px;
   height: 60px;
   @include buttonTransition;
   .d-icon {
-    color: $secondary;
+    color: var(--secondary);
   }
 }
 
 //Increase size of reply icon
 .widget-button.btn.create .fa-reply {
-  color: $secondary;
+  color: var(--secondary);
   font-size: 20px;
 }