From 1c104da9474b10ba014fbb3003021648ffca95c1 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 24 Jun 2021 09:19:56 -0400
Subject: [PATCH] DEV: Use CSS custom properties for colors (#82)

---
 assets/stylesheets/common/layout.scss    | 4 ++--
 assets/stylesheets/common/main.scss      | 4 ++--
 assets/stylesheets/common/subscribe.scss | 8 ++++----
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/assets/stylesheets/common/layout.scss b/assets/stylesheets/common/layout.scss
index 4b33c84..ec800fd 100644
--- a/assets/stylesheets/common/layout.scss
+++ b/assets/stylesheets/common/layout.scss
@@ -47,7 +47,7 @@
   .product {
     display: flex;
     flex-flow: column nowrap;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
     padding: 1.5rem;
     margin: 1rem;
     width: calc(50% - 240px);
@@ -60,7 +60,7 @@
       flex-flow: row wrap;
       justify-content: space-between;
       .purchased {
-        color: $success;
+        color: var(--success);
       }
       .billing-link {
         align-self: flex-end;
diff --git a/assets/stylesheets/common/main.scss b/assets/stylesheets/common/main.scss
index 9d983bd..3be6365 100644
--- a/assets/stylesheets/common/main.scss
+++ b/assets/stylesheets/common/main.scss
@@ -63,9 +63,9 @@ table.discourse-subscriptions-user-table {
 }
 
 #stripe-elements {
-  border: 1px $primary-low-mid solid;
+  border: 1px solid var(--primary-low-mid);
   padding: 10px;
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
 }
 
 #card-action {
diff --git a/assets/stylesheets/common/subscribe.scss b/assets/stylesheets/common/subscribe.scss
index 55b04f9..6025f85 100644
--- a/assets/stylesheets/common/subscribe.scss
+++ b/assets/stylesheets/common/subscribe.scss
@@ -26,8 +26,8 @@
   height: 40px;
   margin-bottom: 20px;
 
-  border: 1px $primary solid;
-  background-color: $secondary;
+  border: 1px solid var(--primary);
+  background-color: var(--secondary);
 
   font-size: $base-font-size;
   font-family: $base-font-family;
@@ -38,9 +38,9 @@
 }
 
 .StripeElement--invalid {
-  border-color: $danger;
+  border-color: var(--danger);
 }
 
 .StripeElement--webkit-autofill {
-  color: $quaternary;
+  color: var(--quaternary);
 }