Changed variables to use var()

Changed variables to use var()

diff --git a/common/common.scss b/common/common.scss
index 7dee8d2..d316938 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,700");
-@import "common/foundation/variables"; // Pulls in Discourse SASS variables
 
 // Global styles
 
@@ -23,7 +22,7 @@ input[type="url"],
 input[type="search"],
 input[type="tel"],
 input[type="color"] {
-  border-color: $primary-low-mid;
+  border-color: var(--primary-low-mid,$primary-low-mid);
 }
 
 tbody {
@@ -72,7 +71,7 @@ tbody {
 
 .d-header {
   box-shadow: none;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low, $primary-low);
 }
 
 // Navs
@@ -95,8 +94,8 @@ tbody {
   height: auto;
   line-height: 1.2;
   padding: 0.25em 0.25em 0.19em 0.5em;
-  border-color: $primary-low;
-  color: $primary-high;
+  border-color: var(--primary-low, $primary-low);
+  color: var(--primary-high, $primary-high);
   .badge-wrapper {
     display: inline-flex;
   }
@@ -142,7 +141,7 @@ tbody {
     font-size: 0.875em;
     margin-bottom: 5px;
     a {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
     img {
       margin-right: 0.25em;
@@ -207,7 +206,7 @@ span.latest-poster a {
     font-size: $font-down-1;
   }
   .d-icon-bookmark {
-    color: $tertiary;
+    color: var(--tertiary, $tertiary);
   }
 }
 
@@ -272,11 +271,11 @@ span.latest-poster a {
 
 #topic-entrance button.full {
   background: transparent;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   .discourse-no-touch & {
     &:hover {
       color: currentColor;
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
       .d-icon {
         color: currentColor;
       }
@@ -319,7 +318,7 @@ span.latest-poster a {
     a {
       margin-bottom: 0.1em;
       .d-icon {
-        color: $primary;
+        color: var(--primary, $primary);
       }
     }
   }
@@ -364,7 +363,7 @@ span.latest-poster a {
     border: none;
   }
   .information.private-message-map {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low, $primary-low);
   }
 }
 
@@ -377,13 +376,13 @@ span.latest-poster a {
 .small-action .small-action-desc {
   text-transform: unset;
   font-weight: normal;
-  color: $primary;
+  color: var(--primary, $primary);
 }
 
 .gap {
   text-transform: unset;
   font-weight: normal;
-  color: $tertiary;
+  color: var(--primary, $tertiary);
 }
 
 .small-action-desc.timegap:after {
@@ -402,7 +401,7 @@ span.latest-poster a {
 
 #topic-footer-buttons .pinned-button .reason,
 #topic-footer-buttons .topic-notifications-button .reason {
-  color: $primary-high;
+  color: var(--primary-high, $primary-high);
 }
 
 #topic-footer-buttons {
@@ -426,11 +425,11 @@ span.latest-poster a {
 .widget-button.btn.popup-menu-button.toggle-admin-menu.no-text.btn-icon,
 .widget-button.btn.popup-menu-button.toggle-admin-menu.keyboard-target-admin-menu.no-text.btn-icon {
   background: transparent;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   &:hover {
-    background: $primary-low;
+    background: var(--primary-low, $primary-low);
     .d-icon {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
   }
 }
@@ -446,7 +445,7 @@ span.latest-poster a {
 
 #topic-title a.edit-topic .d-icon {
   font-size: 0.6em;
-  color: $primary-high;
+  color: var(--primary-high, $primary-high);
 }
 
 #topic-title h1 {
@@ -515,7 +514,7 @@ nav.post-controls .actions .create .d-icon {
 
 .latest-topic-list,
 .top-topic-list {
-  border-top: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low, $primary-low);
   .topic-post-badges {
     display: none;
   }
@@ -535,13 +534,13 @@ nav.post-controls .actions .create .d-icon {
 .btn-default,
 .select-kit.dropdown-select-box .dropdown-select-box-header {
   background: transparent;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   .discourse-no-touch & {
     &:hover {
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
       color: currentColor;
       .d-icon {
-        color: $primary-high;
+        color: var(--primary-high, $primary-high);
       }
     }
   }
@@ -555,9 +554,9 @@ nav.post-controls .actions .create .d-icon {
 .popup-menu {
   .btn-danger {
     background: none;
-    color: $danger;
+    color: var(--danger, $danger);
     .d-icon {
-      color: $danger;
+      color: var(--danger, $danger);
     }
   }
 }
@@ -611,7 +610,7 @@ span.date-section {
 }
 
 .btn-primary {
-  border: 1px solid $tertiary;
+  border: 1px solid var(--tertiary, $tertiary);
 }
 
 // Composer
@@ -619,14 +618,14 @@ span.date-section {
 .open .grippie {
   background: none;
   &:before {
-    border-color: $primary-low-mid;
+    border-color: var(--primary-low-mid, $primary-low-mid);
   }
 }
 
 .combo-box.category-chooser {
   font-size: $font-0;
   .badge-wrapper span.badge-category {
-    color: $primary;
+    color: var(--primary, $primary);
     font-size: $font-up-1;
   }
   .category-desc {
@@ -635,7 +634,7 @@ span.date-section {
 }
 
 .d-editor-textarea-wrapper {
-  border-color: $primary-low-mid;
+  border-color: var(--primary-low-mid, $primary-low-mid);
 }
 
 .d-editor-button-bar {
@@ -644,9 +643,9 @@ span.date-section {
   }
   .btn:hover,
   .btn.btn-hover {
-    background: $primary-medium !important;
+    background: var(--primary-medium, $primary-medium) !important;
     .d-icon {
-      color: $primary-low !important;
+      color: var(--primary-low, $primary-low) !important;
     }
   }
 }
@@ -678,7 +677,7 @@ ul.category-links {
 
 a.mention,
 a.mention-group {
-  background: $primary-very-low;
+  background: var(--primary-very-low, $primary-very-low);
   padding: 2px 6px;
 }
 
@@ -691,7 +690,7 @@ a.mention-group {
   font-size: 1.1em;
 
   a {
-    color: $primary;
+    color: var(--primary, $primary);
   }
 }
 
@@ -702,7 +701,7 @@ a.mention-group {
     .search-advanced-title,
     .search-advanced-filters {
       background: transparent;
-      border: 1px solid $primary-low;
+      border: 1px solid var(--primary-low, $primary-low);
       padding: 0.75em;
     }
     .search-advanced-title {
@@ -735,15 +734,15 @@ a.mention-group {
 }
 
 .badge-card .badge-contents .badge-info {
-  color: $primary-medium;
+  color: var(--primary-medium, $primary-medium);
   h3 {
-    color: $primary;
+    color: var(--primary, $primary);
     font-weight: normal;
   }
 }
 
 .user-badges .btn {
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   background: none;
 }
 
@@ -773,7 +772,7 @@ div.bio {
 
 .group-details-container {
   background: transparent;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
 }
 
 .group-nav {
@@ -790,7 +789,7 @@ div.bio {
 
 #banner {
   background: transparent;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   margin-bottom: 1em;
 }
 
@@ -812,12 +811,12 @@ div.bio {
 // Misc
 
 #topic-progress-wrapper .topic-admin-menu-button-container .toggle-admin-menu {
-  background: $secondary;
+  background: var(--secondary, $secondary);
 }
 
 .show-notes-on-profile {
   .btn {
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low, $primary-low);
     background: transparent;
   }
 }
diff --git a/mobile/mobile.scss b/mobile/mobile.scss
index 6828b45..5ee8f89 100644
--- a/mobile/mobile.scss
+++ b/mobile/mobile.scss
@@ -1,7 +1,5 @@
-@import "common/foundation/variables"; // Pulls in Discourse SASS variables
-
 .list-controls .nav-pills>li {
-  border-color: $primary-low;
+  border-color: var(--primary-low, $primary-low);
   line-height: 1.2;
 }
 
@@ -22,7 +20,7 @@
 
 .mobile-view .mobile-nav {
   background: transparent;
-  border: 1px solid $primary-low;

[... diff too long, it was truncated ...]

GitHub sha: 312bc155b09c61c1cdad70996b1cc6a38998437a