From 0bd4dbd08be2cc5d67833e90389958dcb2dbe23c Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 29 Jun 2021 03:49:28 -0400
Subject: [PATCH] DEV: Switch to CSS custom properties for colors (#127)

---
 assets/stylesheets/common/wizard-admin.scss   | 28 +++++++++----------
 assets/stylesheets/common/wizard-api.scss     |  6 ++--
 assets/stylesheets/common/wizard-manager.scss | 12 ++++----
 assets/stylesheets/common/wizard-mapper.scss  | 24 ++++++++--------
 assets/stylesheets/wizard/custom/badges.scss  |  4 +--
 .../stylesheets/wizard/custom/composer.scss   |  6 ++--
 6 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/assets/stylesheets/common/wizard-admin.scss b/assets/stylesheets/common/wizard-admin.scss
index 9c2838eb..2d6c9a6a 100644
--- a/assets/stylesheets/common/wizard-admin.scss
+++ b/assets/stylesheets/common/wizard-admin.scss
@@ -15,7 +15,7 @@
 }
 
 .wizard-message {
-  background-color: $primary-low;
+  background-color: var(--primary-low);
   width: 100%;
   padding: 10px;
   box-sizing: border-box;
@@ -37,7 +37,7 @@
     }
 
     a + a {
-      border-left: 1px solid $primary-medium;
+      border-left: 1px solid var(--primary-medium);
       padding-left: 5px;
       margin-left: 5px;
     }
@@ -89,7 +89,7 @@
 
 .wizard-settings-parent {
   padding: 20px;
-  border: 1px solid $primary-low;
+  border: 1px solid var(--primary-low);
 }
 
 .wizard-settings-group {
@@ -115,7 +115,7 @@
 
 .wizard-custom-field {
   background: transparent;
-  background-color: dark-light-diff($primary, $secondary, 96%, -65%);
+  background-color: var(--primary-very-low);
   padding: 20px;
 }
 
@@ -182,7 +182,7 @@
       a {
         padding: 6px 12px;
         font-size: 1rem;
-        background-color: $primary-low;
+        background-color: var(--primary-low);
       }
 
       button {
@@ -263,7 +263,7 @@
       }
 
       input[disabled] {
-        background-color: $primary-low;
+        background-color: var(--primary-low);
         cursor: not-allowed;
       }
 
@@ -434,8 +434,8 @@
       display: none;
       margin: 0 0 10px 0;
       padding: 10px;
-      background-color: $secondary;
-      border: 1px solid $primary-medium;
+      background-color: var(--secondary);
+      border: 1px solid var(--primary-medium);
       max-width: 100%;
 
       &.force-preview {
@@ -454,17 +454,17 @@
 
     .btn {
       margin-right: 10px;
-      color: $primary;
+      color: var(--primary);
 
       &:hover {
-        color: $secondary;
+        color: var(--secondary);
       }
     }
 
     .wizard-editor-gutter-popover {
       position: absolute;
       padding: 10px;
-      background-color: $secondary;
+      background-color: var(--secondary);
       box-shadow: shadow("card");
       z-index: 200;
       top: 40px;
@@ -502,7 +502,7 @@
     width: 100px;
     display: inline-block;
     vertical-align: top;
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     margin-right: 10px;
     margin-left: 3px;
   }
@@ -587,8 +587,8 @@
 .add-mapper-input .btn,
 .btn-after-time,
 .wizard-editor-gutter .btn {
-  background-color: $secondary;
-  border: 1px solid $primary-medium;
+  background-color: var(--secondary);
+  border: 1px solid var(--primary-medium);
 }
 
 .admin-wizards-custom-fields {
diff --git a/assets/stylesheets/common/wizard-api.scss b/assets/stylesheets/common/wizard-api.scss
index 4fdd0fc2..9d0ad261 100644
--- a/assets/stylesheets/common/wizard-api.scss
+++ b/assets/stylesheets/common/wizard-api.scss
@@ -48,7 +48,7 @@
 
 .wizard-api-authentication {
   display: flex;
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
   padding: 20px;
   margin-bottom: 20px;
 
@@ -68,7 +68,7 @@
   }
 
   .status {
-    border-left: 1px solid $primary;
+    border-left: 1px solid var(--primary);
     margin-left: 20px;
     padding-left: 20px;
     width: 50%;
@@ -89,7 +89,7 @@
 }
 
 .wizard-api-endpoints {
-  background-color: $primary-very-low;
+  background-color: var(--primary-very-low);
   padding: 20px;
   margin-bottom: 20px;
 
diff --git a/assets/stylesheets/common/wizard-manager.scss b/assets/stylesheets/common/wizard-manager.scss
index 135ddb8c..a3b30c98 100644
--- a/assets/stylesheets/common/wizard-manager.scss
+++ b/assets/stylesheets/common/wizard-manager.scss
@@ -16,13 +16,13 @@
 
     #import-button:enabled,
     #export-button:enabled {
-      background-color: $tertiary;
-      color: $secondary;
+      background-color: var(--tertiary);
+      color: var(--secondary);
     }
 
     #destroy-button:enabled {
-      background-color: $danger;
-      color: $secondary;
+      background-color: var(--danger);
+      color: var(--secondary);
     }
   }
 
@@ -32,13 +32,13 @@
 
   .filename {
     padding: 0 10px;
-    border: 1px solid $primary;
+    border: 1px solid var(--primary);
     display: inline-flex;
     height: 28px;
     line-height: 28px;
 
     a {
-      color: $primary;
+      color: var(--primary);
       margin-right: 5px;
       display: inline-flex;
       align-items: center;
diff --git a/assets/stylesheets/common/wizard-mapper.scss b/assets/stylesheets/common/wizard-mapper.scss
index 69e9c88e..f56a2cab 100644
--- a/assets/stylesheets/common/wizard-mapper.scss
+++ b/assets/stylesheets/common/wizard-mapper.scss
@@ -22,7 +22,7 @@
     width: min-content;
     margin-bottom: 10px;
     height: 20px;
-    border: 2px solid $primary-low;
+    border: 2px solid var(--primary-low);
   }
 }
 
@@ -33,8 +33,8 @@
   position: relative;
   padding: 25px 7px 7px 7px;
   margin-bottom: 10px;
-  background: rgba($secondary, 0.5);
-  border: 2px solid $primary-low;
+  background: rgba(var(--secondary-rgb), 0.5);
+  border: 2px solid var(--primary-low);
 
   .d-icon {
     text-align: center;
@@ -45,7 +45,7 @@
   }
 
   input[disabled] {
-    background-color: $primary-low;
+    background-color: var(--primary-low);
     border-color: #ddd;
   }
 
@@ -62,10 +62,10 @@
     align-items: center;
     justify-content: center;
     transform: translateY(-50%);
-    background: $secondary;
+    background: var(--secondary);
     border-radius: 50%;
     font-size: 0.8em;
-    border: 2px solid $primary-low;
+    border: 2px solid var(--primary-low);
   }
 
   &.association,
@@ -89,8 +89,8 @@
 
   &.single {
     height: 28px;
-    background: $secondary;
-    border: 1px solid $primary-medium;
+    background: var(--secondary);
+    border: 1px solid var(--primary-medium);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -126,7 +126,7 @@
   }
 
   .type-selector a {
-    color: $primary;
+    color: var(--primary);
     margin-right: 4px;
     display: flex;
     align-items: center;
@@ -150,11 +150,11 @@
     box-shadow: shadow("dropdown");
     position: absolute;
     display: flex;
-    background: $secondary;
+    background: var(--secondary);
     z-index: 200;
     padding: 5px 7px;
     flex-direction: column;
-    border: 1px solid $primary-low;
+    border: 1px solid var(--primary-low);
   }
 
   .value-list .remove-value-btn {
@@ -162,7 +162,7 @@
     border: none;
 
     .d-icon {
-      color: $primary;
+      color: var(--primary);
     }
   }
 
diff --git a/assets/stylesheets/wizard/custom/badges.scss b/assets/stylesheets/wizard/custom/badges.scss
index ca9c0450..53a869c0 100644
--- a/assets/stylesheets/wizard/custom/badges.scss
+++ b/assets/stylesheets/wizard/custom/badges.scss
@@ -31,7 +31,7 @@
       overflow: hidden;
       text-overflow: ellipsis;
       .extra-info-wrapper & {
-        color: $header-primary;
+        color: var(--header_primary);
       }
     }
 
@@ -108,7 +108,7 @@
       text-overflow: ellipsis;
 
       .extra-info-wrapper & {
-        color: $header-primary;
+        color: var(--header_primary);
       }
     }
 
diff --git a/assets/stylesheets/wizard/custom/composer.scss b/assets/stylesheets/wizard/custom/composer.scss
index 4f5ff442..4e561c61 100644
--- a/assets/stylesheets/wizard/custom/composer.scss
+++ b/assets/stylesheets/wizard/custom/composer.scss
@@ -199,11 +199,11 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba($primary, 0.8);
+  background-color: rgba(var(--primary-rgb), 0.8);
 }
 
 .wizard-composer-hyperlink-contents {
-  background-color: $secondary;
+  background-color: var(--secondary);
   padding: 20px;
 
   h3 {
@@ -227,7 +227,7 @@
   bottom: 1px;
   right: 1px;
   padding: 10px;
-  background-color: $secondary;
+  background-color: var(--secondary);
 }
 
 .bottom-bar {