diff --git a/plugins/discourse-details/assets/stylesheets/details.scss b/plugins/discourse-details/assets/stylesheets/details.scss
index 847577af45a..769be8dea81 100644
--- a/plugins/discourse-details/assets/stylesheets/details.scss
+++ b/plugins/discourse-details/assets/stylesheets/details.scss
@@ -57,16 +57,16 @@ summary::-webkit-details-marker {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
-    color: $primary-medium;
-    background: $primary-low;
-    border: 1px solid $primary-low-mid;
+    color: var(--primary-medium);
+    background: var(--primary-low);
+    border: 1px solid var(--primary-low-mid);
     width: 1.5em;
     line-height: 1;
   }
 
   summary:hover {
-    color: $primary;
-    background: $primary-low-mid;
+    color: var(--primary);
+    background: var(--primary-low-mid);
     border-color: currentColor;
   }
 }
diff --git a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
index 0c123261482..937b8c8b7cf 100644
--- a/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
+++ b/plugins/discourse-local-dates/assets/stylesheets/common/discourse-local-dates.scss
@@ -1,20 +1,20 @@
 .discourse-local-date {
   &.cooked-date {
-    color: $primary;
+    color: var(--primary);
     cursor: pointer;
-    border-bottom: 1px dashed $primary-medium;
+    border-bottom: 1px dashed var(--primary-medium);
     white-space: nowrap;
 
     .d-icon {
-      color: $primary;
+      color: var(--primary);
     }
 
     &.past {
-      border-bottom-color: $primary-low-mid;
+      border-bottom-color: var(--primary-low-mid);
     }
 
     &.past[data-countdown] {
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
   }
 }
@@ -32,7 +32,7 @@
       }
 
       &.current {
-        background: $tertiary-low;
+        background: var(--tertiary-low);
       }
     }
   }
@@ -70,7 +70,7 @@
 
   .picker-panel {
     padding: 5px;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
   }
 
   .date-picker {
@@ -106,13 +106,13 @@
 
         &.is-expanded {
           .select-kit-header {
-            border: 1px solid $primary-medium;
+            border: 1px solid var(--primary-medium);
           }
         }
 
         .select-kit-header {
           padding: 0.5em 0.5em;
-          border: 1px solid $primary-low;
+          border: 1px solid var(--primary-low);
 
           .d-icon {
             margin-right: 1em;
@@ -127,17 +127,17 @@
       .date-time-control {
         position: relative;
         display: flex;
-        border: 1px solid $primary-low;
+        border: 1px solid var(--primary-low);
 
         &.is-filled,
         &.is-selected {
           .date-time {
-            color: $primary;
-            background: $secondary;
+            color: var(--primary);
+            background: var(--secondary);
           }
 
           .d-icon {
-            color: $primary-high;
+            color: var(--primary-high);
           }
         }
 
@@ -149,7 +149,7 @@
           }
 
           &.is-selected {
-            border-color: $tertiary;
+            border-color: var(--tertiary);
           }
         }
 
@@ -163,13 +163,13 @@
           }
 
           &.is-selected {
-            border-color: $tertiary;
+            border-color: var(--tertiary);
           }
         }
 
         .date-time {
-          color: $primary-medium;
-          background: $primary-very-low;
+          color: var(--primary-medium);
+          background: var(--primary-very-low);
         }
 
         .d-icon {
@@ -179,7 +179,7 @@
           left: 0.5em;
           top: 0;
           bottom: 0;
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         .delete-to-date {
@@ -190,7 +190,7 @@
           width: 30px;
           top: 0;
           bottom: 0;
-          color: $primary-high;
+          color: var(--primary-high);
           border-radius: 0 0 5px 0;
         }
 
@@ -211,7 +211,7 @@
 
       .picker-panel {
         z-index: 1;
-        background: $secondary;
+        background: var(--secondary);
         width: 200px;
         box-sizing: border-box;
         margin-left: 1em;
@@ -224,11 +224,11 @@
         margin-top: 1em;
         align-items: center;
         padding: 0.25em;
-        border-top: 1px solid $primary-low-mid;
+        border-top: 1px solid var(--primary-low-mid);
         box-sizing: border-box;
 
         .d-icon {
-          color: $primary-medium;
+          color: var(--primary-medium);
         }
 
         .time-picker {
@@ -284,7 +284,7 @@
     margin: 0;
     .format {
       .previewed-format {
-        color: $primary-medium;
+        color: var(--primary-medium);
       }
     }
   }
diff --git a/plugins/poll/assets/stylesheets/common/poll.scss b/plugins/poll/assets/stylesheets/common/poll.scss
index c683684c9e6..e99f0c4e2f8 100644
--- a/plugins/poll/assets/stylesheets/common/poll.scss
+++ b/plugins/poll/assets/stylesheets/common/poll.scss
@@ -1,6 +1,6 @@
 div.poll {
   margin: 1em 0;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 
   @include unselectable;
 
@@ -19,7 +19,7 @@ div.poll {
   }
 
   li[data-poll-option-id] {
-    color: $primary;
+    color: var(--primary);
     padding: 0.5em 0;
     word-break: break-word;
   }
@@ -31,7 +31,7 @@ div.poll {
   }
 
   .poll-info {
-    color: $primary-medium;
+    color: var(--primary-medium);
     vertical-align: middle;
     padding: 1em 0;
 
@@ -58,7 +58,7 @@ div.poll {
   .poll-buttons {
     .info-text {
       margin: 0.25em 0;
-      color: $primary-medium;
+      color: var(--primary-medium);
     }
     .info-text + .info-text,
     button + .info-text {
@@ -100,21 +100,21 @@ div.poll {
 
     .percentage {
       float: right;
-      color: $primary-medium;
+      color: var(--primary-medium);
       margin-left: 0.25em;
     }
 
     .bar-back {
-      background: $primary-low;
+      background: var(--primary-low);
     }
 
     .bar {
       height: 0.75em;
-      background: $primary-medium;
+      background: var(--primary-medium);
     }
 
     .chosen .bar {
-      background: $tertiary;
+      background: var(--tertiary);
     }
   }
 
diff --git a/plugins/poll/assets/stylesheets/desktop/poll.scss b/plugins/poll/assets/stylesheets/desktop/poll.scss
index 3dd37b8f515..436dc952bf4 100644
--- a/plugins/poll/assets/stylesheets/desktop/poll.scss
+++ b/plugins/poll/assets/stylesheets/desktop/poll.scss
@@ -25,11 +25,11 @@ div.poll {
   .poll-container {
     display: table-cell;
     width: 100%;
-    border-right: 1px solid $primary-low;
+    border-right: 1px solid var(--primary-low);
   }
 
   .poll-buttons {
-    border-top: 1px solid $primary-low;
+    border-top: 1px solid var(--primary-low);
     padding: 1em;
 
     .info-text {
@@ -71,7 +71,7 @@ div.poll.pie {
     li[data-poll-option-id]:before {
       position: relative;
       vertical-align: baseline;
-      border: 2px solid $primary;
+      border: 2px solid var(--primary);
       border-radius: 50%;
       display: inline-block;
       margin-right: 0.5em;
diff --git a/plugins/poll/assets/stylesheets/mobile/poll.scss b/plugins/poll/assets/stylesheets/mobile/poll.scss
index 34f8c7dc19e..596c036d8ed 100644
--- a/plugins/poll/assets/stylesheets/mobile/poll.scss
+++ b/plugins/poll/assets/stylesheets/mobile/poll.scss
@@ -33,7 +33,7 @@ div.poll {
 div.poll.pie {
   .poll-container {
     width: calc(100% - 30px);
-    border-bottom: 1px solid $primary-low;
+    border-bottom: 1px solid var(--primary-low);
 
     .poll-grouped-pie-container {
       width: 100%;