DEV: Use CSS custom properties for colors in SCSS

DEV: Use CSS custom properties for colors in SCSS

Prepares the plugin for an upcoming change in core while maintaining backwards compatiblity.

This doesn’t cover all cases, I am working on a fix for the few complex variables used in discourse-calendar.scss.

diff --git a/assets/stylesheets/common/discourse-calendar.scss b/assets/stylesheets/common/discourse-calendar.scss
index b543f15..1d6c727 100644
--- a/assets/stylesheets/common/discourse-calendar.scss
+++ b/assets/stylesheets/common/discourse-calendar.scss
@@ -1,6 +1,6 @@
 .discourse-calendar-wrap {
   margin: 0.5em 0;
-  border: 5px solid $primary-low;
+  border: 5px solid var(--primary-low, $primary-low);
 }
 
 .category-calendar .calendar {
@@ -44,7 +44,7 @@
     }
 
     .fc-bg td.fc-today {
-      background-color: $highlight-medium;
+      background-color: var(--highlight-medium, $highlight-medium);
       border-style: solid;
     }
 
@@ -82,21 +82,21 @@
     .fc-button {
       border-radius: 0;
       box-shadow: none;
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
       text-transform: capitalize;
-      color: $primary;
+      color: var(--primary, $primary);
       text-shadow: none;
       border: none;
       padding: 6px 12px;
 
       &:hover {
-        background: $primary-medium;
-        color: $secondary;
+        background: var(--primary-medium, $primary-medium);
+        color: var(--secondary, $secondary);
       }
 
       &.fc-state-active {
-        background: $tertiary;
-        color: $secondary;
+        background: var(--tertiary, $tertiary);
+        color: var(--secondary, $secondary);
       }
     }
 
@@ -111,7 +111,7 @@
     .fc-list-empty,
     .fc-list-heading td,
     .fc-popover .fc-header {
-      background: $primary-low;
+      background: var(--primary-low, $primary-low);
     }
 
     .fc-content,
@@ -124,13 +124,13 @@
     td,
     th,
     thead {
-      border-color: $primary-low;
+      border-color: var(--primary-low, $primary-low);
     }
   }
 
   .fc-event,
   .fc-event-dot {
-    background-color: $tertiary;
+    background-color: var(--tertiary, $tertiary);
     border: 1px solid transparent;
 
     .fc-time {
@@ -138,9 +138,9 @@
     }
 
     &.grouped-event {
-      background-color: $primary-low;
-      border: 1px solid $primary-low-mid;
-      color: $primary;
+      background-color: var(--primary-low, $primary-low);
+      border: 1px solid var(--primary-low-mid, $primary-low-mid);
+      color: var(--primary, $primary);
 
       .emoji {
         margin-right: 0.25em;
@@ -154,7 +154,7 @@
     }
   }
   .fc-list-item-add-to-calendar {
-    color: $tertiary;
+    color: var(--tertiary, $tertiary);
     font-size: $font-down-1;
   }
 }
@@ -179,7 +179,7 @@ a.holiday {
   justify-content: space-between;
   box-sizing: border-box;
   padding: 0.5em;
-  border-bottom: 1px solid $primary-low;
+  border-bottom: 1px solid var(--primary-low, $primary-low);
   background: $primary-very-low;
   min-height: 60px;
 
@@ -327,7 +327,7 @@ $bg-in-working-hours: dark-light-choose(
   }
 
   .group-timezone {
-    color: $primary;
+    color: var(--primary, $primary);
     background-color: $bg-normal;
     transition: opacity 0.4s;
     opacity: 0.5;
diff --git a/assets/stylesheets/common/discourse-post-event-builder.scss b/assets/stylesheets/common/discourse-post-event-builder.scss
index 2781a1c..05e0f9e 100644
--- a/assets/stylesheets/common/discourse-post-event-builder.scss
+++ b/assets/stylesheets/common/discourse-post-event-builder.scss
@@ -109,7 +109,7 @@
           flex-direction: column;
 
           .description {
-            color: $primary-medium;
+            color: var(--primary-medium, $primary-medium);
           }
         }
       }
diff --git a/assets/stylesheets/common/discourse-post-event-core-ext.scss b/assets/stylesheets/common/discourse-post-event-core-ext.scss
index 6345ab6..ff156ca 100644
--- a/assets/stylesheets/common/discourse-post-event-core-ext.scss
+++ b/assets/stylesheets/common/discourse-post-event-core-ext.scss
@@ -1,7 +1,7 @@
 .raw-topic-link {
   .event-date {
     font-size: $font-down-2;
-    background: $primary-low;
+    background: var(--primary-low, $primary-low);
     padding: 0.25em;
     border-radius: 3px;
     vertical-align: middle;
@@ -12,8 +12,8 @@
 .header-title {
   .event-date {
     font-size: $font-down-3;
-    background: $primary-low;
-    color: $primary-high;
+    background: var(--primary-low, $primary-low);
+    color: var(--primary-high, $primary-high);
     padding: 0.25em;
     border-radius: 3px;
     vertical-align: middle;
diff --git a/assets/stylesheets/common/discourse-post-event-invitees.scss b/assets/stylesheets/common/discourse-post-event-invitees.scss
index 8d2432b..40d3b3d 100644
--- a/assets/stylesheets/common/discourse-post-event-invitees.scss
+++ b/assets/stylesheets/common/discourse-post-event-invitees.scss
@@ -15,7 +15,7 @@
       padding: 0.5em;
       justify-content: space-between;
       align-items: center;
-      border-bottom: 1px solid $primary-low;
+      border-bottom: 1px solid var(--primary-low, $primary-low);
 
       &:last-child {
         border: none;
@@ -31,11 +31,11 @@
         margin-left: 1em;
 
         &.going {
-          color: $success;
+          color: var(--success, $success);
         }
 
         &.not_going {
-          color: $danger;
+          color: var(--danger, $danger);
         }
       }
     }
diff --git a/assets/stylesheets/common/discourse-post-event-preview.scss b/assets/stylesheets/common/discourse-post-event-preview.scss
index 2df21b7..6a5e3c9 100644
--- a/assets/stylesheets/common/discourse-post-event-preview.scss
+++ b/assets/stylesheets/common/discourse-post-event-preview.scss
@@ -1,9 +1,9 @@
 .discourse-post-event-preview {
-  background: $secondary;
+  background: var(--secondary, $secondary);
   align-items: center;
   flex-direction: column;
   padding: 0.5em;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   display: flex;
   flex: 1 0 auto;
 
diff --git a/assets/stylesheets/common/discourse-post-event.scss b/assets/stylesheets/common/discourse-post-event.scss
index f0361af..b780e0c 100644
--- a/assets/stylesheets/common/discourse-post-event.scss
+++ b/assets/stylesheets/common/discourse-post-event.scss
@@ -2,9 +2,9 @@
   display: flex;
 
   .discourse-post-event-widget {
-    border: 5px solid $primary-low;
+    border: 5px solid var(--primary-low, $primary-low);
     display: flex;
-    background: $secondary;
+    background: var(--secondary, $secondary);
     margin: 5px 0;
     flex-direction: column;
     flex: 1 0 auto;
@@ -98,7 +98,7 @@
     .status-and-creators {
       display: flex;
       align-items: center;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       font-size: $font-down-1;
       margin: 0.25em 0;
 
@@ -122,7 +122,7 @@
 
       .status {
         &.expired {
-          color: $danger-medium;
+          color: var(--danger-medium, $danger-medium);
         }
 
         .d-icon {
@@ -145,7 +145,7 @@
       &.status-going {
         .widget-dropdown-header {
           .d-icon-check {
-            color: $success;
+            color: var(--success, $success);
           }
         }
 
@@ -161,7 +161,7 @@
 
         .widget-dropdown-header {
           .d-icon-star {
-            color: $tertiary;
+            color: var(--tertiary, $tertiary);
           }
         }
       }
@@ -205,7 +205,7 @@
 
         .invited {
           font-weight: 500;
-          color: $primary-medium;
+          color: var(--primary-medium, $primary-medium);
         }
       }
     }
@@ -230,15 +230,15 @@
         }
 
         &.status-going .avatar-flair {
-          color: $success;
+          color: var(--success, $success);
         }
 
         &.status-not_going .avatar-flair {
-          color: $danger;
+          color: var(--danger, $danger);
         }
 
         &.status-interested .avatar-flair {
-          color: $tertiary;
+          color: var(--tertiary, $tertiary);
         }
       }
 
@@ -250,15 +250,15 @@
           position: absolute;
           right: 0;
           bottom: 0;
-          background: $secondary;

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

GitHub sha: 5c8b100c