Switch colors to CSS properties

assets/stylesheets/colors.scss

@@ -0,0 +1,4 @@
+:root {
+    --quick-msg-primary-low: #{dark-light-diff($primary, $secondary, 88%, -55%)};
+    --quick-msg-icon: #{dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%))};
+}

assets/stylesheets/common/quick_composer.scss

@@ -7,9 +7,9 @@
   position: fixed;
   bottom: 0;
   width: 300px;
-  background-color: $secondary;
+  background-color: var(--secondary, $secondary);
   box-shadow: shadow("menu-panel");
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low, $primary-low);
   height: 400px;
   display: flex;
   flex-direction: column;
@@ -31,14 +31,6 @@
       cursor: pointer;
       box-shadow: 0 -2px 4px -1px rgba(0,0,0,0.25);
     }
-
-    .docked-draft-wrapper {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      cursor: pointer;
-      background-color: dark-light-diff($primary, $secondary, 88%, -55%);
-    }
   }
 
   &.closed {
@@ -50,10 +42,10 @@
   }
 
   .grippie {
-    background-color: $primary-low;
+    background-color: var(--primary-low, $primary-low);
 
     &:before {
-      border-top: 3px double $primary;
+      border-top: 3px double var(--primary, $primary);
     }
   }
 
@@ -111,7 +103,7 @@
   line-height: 25px;
   margin-bottom: 2px;
   box-sizing: border-box;
-  background-color: $primary-low;
+  background-color: var(--primary-low, $primary-low);
   box-shadow: shadow("header");
   z-index: 100;
 }
@@ -163,26 +155,26 @@
     .toggler {
       padding: 0;
       font-size: 19px;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       font-weight: 900;
     }
 
     .cancel {
       font-size: 15px;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       z-index: 20;
     }
 
     .topic-link {
       padding: 0;
-      color: $primary-medium;
+      color: var(--primary-medium, $primary-medium);
       font-weight: 900;
     }
   }
 
   .ac-wrap {
     width: initial !important;
-    background-color: $primary-very-low;
+    background-color: var(--primary-very-low, $primary-very-low);
   }
 
   .docked-usernames-wrapper {
@@ -195,7 +187,7 @@
     .docked-usernames {
       white-space: nowrap;
       display: inline-block;
-      color: $primary;
+      color: var(--primary, $primary);
     }
   }
 
@@ -209,7 +201,7 @@
     z-index: 100;
     padding: 10px;
     box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.25);
-    background-color: dark-light-diff($primary, $secondary, 88%, -55%);
+    background-color: var(--quick-msg-primary-low, dark-light-diff($primary, $secondary, 88%, -55%));
 
     .cancel {
       float: right;
@@ -240,19 +232,19 @@
 
       &.yours {
         float: right;
-        background-color: $tertiary-low;
+        background-color: var(--tertiary-low, $tertiary-low);
         padding: 3px 6px;
         border-radius: 6px;
         display: block;
       }
 
       .cooked {
-        color: $primary-medium;
+        color: var(--primary-medium, $primary-medium);
       }
 
       p {
         margin: 0;
-        color: $primary;
+        color: var(--primary, $primary);
       }
 
       img {
@@ -274,7 +266,7 @@
     left: 0;
     right: 0;
     padding: 0;
-    background-color: $secondary;
+    background-color: var(--secondary, $secondary);
     position: relative;
   }
 
@@ -309,7 +301,7 @@
 
     .btn {
       padding: 3px 6px;
-      background-color: $secondary;
+      background-color: var(--secondary, $secondary);
 
       .fa {
         line-height: 18px;
@@ -320,7 +312,7 @@
         background-color: transparent;
 
         .fa {
-          color: $primary;
+          color: var(--primary, $primary);
         }
       }
     }
@@ -358,8 +350,8 @@
 }
 
 .docked-small-action {
-  border-top: 1px solid $primary-low;
-  border-bottom: 1px solid $primary-low;
+  border-top: 1px solid var(--primary-low, $primary-low);
+  border-bottom: 1px solid var(--primary-low, $primary-low);
   padding: 10px 0;
   display: flex;
   flex-wrap: wrap;

assets/stylesheets/common/quick_menu.scss

@@ -5,7 +5,7 @@
     top: -2px;
     right: -2px;
     left: initial;
-    background-color: $tertiary;
+    background-color: var(--tertiary, $tertiary);
   }
 }
 
@@ -48,15 +48,15 @@
   width: 97%;
 
   .item-contents {
-    color: $primary;
+    color: var(--primary, $primary);
     cursor: pointer;
     display: flex;
 
     div.badge-notification {
       position: relative;
       top: 4px;
       display: initial;
-      background-color: $success;
+      background-color: var(--success, $success);
       height: 12px;
       width: 8px;
     }
@@ -90,7 +90,7 @@
   }
 
   &:hover {
-    background-color: dark-light-diff($highlight, $secondary, 50%, -55%);
+    background-color: var(--highlight-medium, $highlight-medium);
   }
 
   span {
@@ -103,11 +103,11 @@
   }
 
   .icon {
-    color: dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%));
+    color: var(--quick-msg-icon, dark-light-choose(scale-color($primary, $lightness: 30%), scale-color($secondary, $lightness: 70%)));
   }
 
   .read {
-    background-color: $secondary;
+    background-color: var(--secondary, $secondary);
   }
 
   .none {

plugin.rb

@@ -7,6 +7,7 @@
 register_asset 'stylesheets/common/quick_menu.scss'
 register_asset 'stylesheets/common/quick_composer.scss'
 register_asset 'stylesheets/mobile/quick_mobile.scss', :mobile
+register_asset "stylesheets/colors.scss", :color_definitions
 require_relative 'lib/setting_quick_messages_badge'
 
 if respond_to?(:register_svg_icon)