From 17e5f6d76b6bbfe41e0b82c5928beb062eb4a9f1 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 9 Mar 2022 11:13:58 -0800
Subject: [PATCH] refactor variable names

---
 src-ui/src/theme.scss      | 20 ++++++++++----------
 src-ui/src/theme_dark.scss |  8 ++++----
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 72040808e..274f0460e 100644
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -1,16 +1,16 @@
 :root {
   // base color e.g. #17541f = hsl(128, 57%, 21%)
-  --ngx-green: 128, 57%;
-  --l: 21%;
+  --pngx-primary: 128, 57%;
+  --pngx-primary-lightness: 21%;
 
-  --bs-primary: hsl(var(--ngx-green), var(--l));
+  --bs-primary: hsl(var(--pngx-primary), var(--pngx-primary-lightness));
   --bs-border-color: var(--bs-gray-400);
-  --ngx-primary-faded: hsl(var(--ngx-green), calc(var(--l) + 72%));
-  --ngx-primary-lighten-10: hsl(var(--ngx-green), calc(var(--l) + 10%));
-  --ngx-primary-lighten-30: hsl(var(--ngx-green), calc(var(--l) + 30%));
-  --ngx-primary-darken-10: hsl(var(--ngx-green), calc(var(--l) - 10%));
-  --ngx-primary-darken-15: hsl(var(--ngx-green), calc(var(--l) - 15%));
-  --ngx-primary-darken-18: hsl(var(--ngx-green), calc(var(--l) - 18%));
+  --ngx-primary-faded: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 72%));
+  --ngx-primary-lighten-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
+  --ngx-primary-lighten-30: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 30%));
+  --ngx-primary-darken-10: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%));
+  --ngx-primary-darken-15: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 15%));
+  --ngx-primary-darken-18: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%));
   --ngx-bg-darker: var(--bs-gray-100);
   --ngx-focus-alpha: 0.3;
 }
@@ -81,7 +81,7 @@ svg.logo {
 .form-check-input:focus,
 .form-check-radio:focus,
 .form-select:focus {
-  box-shadow: 0 0 0 0.25rem hsla(var(--ngx-green), var(--l), var(--ngx-focus-alpha));
+  box-shadow: 0 0 0 0.25rem hsla(var(--pngx-primary), var(--pngx-primary-lightness), var(--ngx-focus-alpha));
 }
 
 .form-switch .form-check-input:focus {
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
index f55a61956..39cb65e45 100644
--- a/src-ui/src/theme_dark.scss
+++ b/src-ui/src/theme_dark.scss
@@ -18,7 +18,7 @@ $border-color-dark-mode: #47494f;
 }
 
 @mixin dark-mode {
-  --bs-primary: hsl(var(--ngx-green), calc(var(--l) + 10%));
+  --bs-primary: hsl(var(--pngx-primary), calc(var(--pngx-primary-lightness) + 10%));
   --bs-danger: #{$danger-dark-mode};
   --bs-danger-rgb: #{$danger-dark-mode-rgb};
   --bs-body-bg: #{$bg-dark-mode};
@@ -33,7 +33,7 @@ $border-color-dark-mode: #47494f;
   --ngx-focus-alpha: 0.7;
 
   .navbar.bg-primary{
-    --bs-primary: hsl(var(--ngx-green),var(--l));
+    --bs-primary: hsl(var(--pngx-primary),var(--pngx-primary-lightness));
     --bs-primary-rgb: var(--bs-primary);
   }
   
@@ -154,11 +154,11 @@ $border-color-dark-mode: #47494f;
   }
 
   .toast {
-    background-color: hsla(var(--ngx-green), calc(var(--l) - 18%), 0.9);
+    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 18%), 0.9);
   }
   
   .toast-header {
-    background-color: hsla(var(--ngx-green), calc(var(--l) - 10%), 0.9);
+    background-color: hsla(var(--pngx-primary), calc(var(--pngx-primary-lightness) - 10%), 0.9);
   }
 }