DEV: Use CSS custom properties for colors in SCSS

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

assets/stylesheets/explorer.scss

@@ -35,7 +35,7 @@ table.group-reports {
 }
 
 .https-warning {
-  color: $danger;
+  color: var(--danger, $danger);
 }
 
 .query-editor {
@@ -44,7 +44,7 @@ table.group-reports {
   .panels-flex {
     display: flex;
     height: 400px;
-    border: 1px solid $primary-very-low;
+    border: 1px solid var(--primary-very-low, $primary-very-low);
   }
   &.no-schema {
     .editor-panel {
@@ -83,11 +83,11 @@ table.group-reports {
     flex-grow: 0;
     width: 345px;
     .schema {
-      border-left: 1px solid $primary-low;
+      border-left: 1px solid var(--primary-low, $primary-low);
       height: 100%;
       overflow-y: scroll;
       overflow-x: hidden;
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
       font-size: $font-down-2;
 
       input {
@@ -98,7 +98,7 @@ table.group-reports {
       }
       .schema-table-name {
         font-weight: bold;
-        border-bottom: 1px solid $primary-low;
+        border-bottom: 1px solid var(--primary-low, $primary-low);
         padding-left: 5px;
         .fa {
           width: 6px;
@@ -125,24 +125,24 @@ table.group-reports {
         width: 110px;
         margin-left: 5px;
         &.sensitive {
-          color: $danger;
+          color: var(--danger, $danger);
         }
       }
       dd {
         display: inline-block;
         vertical-align: text-top;
         width: 110px;
-        color: $tertiary;
+        color: var(--tertiary, $tertiary);
         margin: 0;
         padding-left: 7px;
-        border-left: 1px dotted $primary-low-mid;
+        border-left: 1px dotted var(--primary-low-mid, $primary-low-mid);
 
         .schema-typenotes {
-          color: $primary-medium;
+          color: var(--primary-medium, $primary-medium);
           font-style: italic;
         }
         .popup-info {
-          color: $primary-medium;
+          color: var(--primary-medium, $primary-medium);
 
           .popup {
             display: none;
@@ -159,7 +159,7 @@ table.group-reports {
             padding: 4px;
             position: relative;
             border: 1px solid;
-            background: $secondary;
+            background: var(--secondary, $secondary);
             padding-right: calc(5px + 0.5em);
           }
 
@@ -180,10 +180,10 @@ table.group-reports {
     clear: both;
     font-size: $font-down-2;
     -webkit-user-select: none;
-    color: $primary;
+    color: var(--primary, $primary);
     text-align: right;
-    background: $primary-very-low;
-    border: 1px solid $primary-very-low;
+    background: var(--primary-very-low, $primary-very-low);
+    border: 1px solid var(--primary-very-low, $primary-very-low);
     .d-icon {
       transform: rotate(90deg);
     }
@@ -198,7 +198,7 @@ table.group-reports {
     h1 {
       display: inline-block;
       margin: 0 0.5em 0 0;
-      color: $primary;
+      color: var(--primary, $primary);
       a {
         color: currentColor;
       }
@@ -226,7 +226,7 @@ table.group-reports {
     margin-bottom: 10px;
     .label {
       margin-right: 10px;
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
     .name {
       display: inline;
@@ -252,15 +252,15 @@ table.group-reports {
 }
 
 .query-params {
-  border: 1px solid $header_primary-medium;
+  border: 1px solid var(--header_primary-medium, $header_primary-medium);
   .param > input {
     margin: 9px;
   }
   .invalid > input {
-    background-color: $danger-low;
+    background-color: var(--danger-low, $danger-low);
   }
   .invalid .ac-wrap {
-    background-color: $danger-low;
+    background-color: var(--danger-low, $danger-low);
   }
   .param {
     width: 300px;
@@ -334,7 +334,7 @@ table.group-reports {
     }
     .heading {
       position: relative;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       padding: 50px 0px 0px 0px;
       th.sortable {
         font-weight: normal;
@@ -351,23 +351,23 @@ table.group-reports {
       width: 100%;
     }
     .query-name {
-      color: $primary;
+      color: var(--primary, $primary);
     }
     .query-desc {
       display: block;
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
     .query-created-by {
-      color: $primary-high;
+      color: var(--primary-high, $primary-high);
     }
     .query-group-names {
-      color: $tertiary;
+      color: var(--tertiary, $tertiary);
       a {
         display: inline;
       }
     }
     .query-created-at {
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
     }
   }
   .query-row:hover {
@@ -379,7 +379,7 @@ table.group-reports {
     display: inline-block;
   }
   .no-search-results {
-    color: $primary-medium;
+    color: var(--primary-medium, $primary-medium);
   }
 }
 
@@ -387,7 +387,7 @@ table.group-reports {
   float: left;
 }
 .result-about {
-  color: $primary-high;
+  color: var(--primary-high, $primary-high);
   float: right;
 }
 .result-explain {
@@ -407,13 +407,13 @@ table.group-reports {
   cursor: pointer;
 
   label {
-    color: $primary-high;
+    color: var(--primary-high, $primary-high);
   }
   input {
     margin-right: 4px;
   }
   .popup {
-    background-color: $secondary;
+    background-color: var(--secondary, $secondary);
     position: absolute;
     box-shadow: shadow("card");
     padding: 12px;