From c6fff710ae28a123490d15910e76fe53c1e38248 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 21:15:16 +0000
Subject: [PATCH 01/37] WIP:  use variables, it's 2024

---
 src/App.css                                | 31 +++++++++++++++++-----
 src/components/cost-items-cell/index.css   |  2 +-
 src/components/data-table/index.css        |  4 +--
 src/components/filter/index.css            |  6 ++---
 src/components/item-cost/index.css         |  2 +-
 src/components/item-grid/index.css         |  4 +--
 src/components/items-for-hideout/index.css |  2 +-
 src/components/menu/index.css              |  6 ++---
 src/components/property-list/index.css     |  2 +-
 src/components/remote-control-id/index.css |  2 +-
 src/components/reward-cell/index.css       |  2 +-
 src/components/reward-image/index.css      |  2 +-
 src/components/server-status/index.css     |  2 +-
 src/components/trader-image/index.css      |  2 +-
 src/pages/api-users/index.css              |  2 +-
 src/pages/boss/index.css                   |  4 +--
 src/pages/item/index.css                   |  4 +--
 src/pages/maps/index.css                   |  2 +-
 src/pages/start/index.css                  |  2 +-
 src/pages/wipe-length/index.css            |  2 +-
 20 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/src/App.css b/src/App.css
index 613409024..9e6e780ae 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,4 +1,21 @@
+/* Variables start */
 :root {
+  --text-color-white: #fff;
+
+  --highlight-gold-one: #c7c5b3;
+
+  --background-primary: #2d2d2f;
+
+
+
+
+
+
+
+
+
+
+  /* This is to ensure maps do not clip. Please do not remove */
     --display-height: auto;
 }
 
@@ -9,9 +26,9 @@
 }
 
 body {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     background-image: url('images/background-1.png');
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     margin: 0;
     padding: 0;
     height: 100%;
@@ -62,14 +79,14 @@ input[type='number'] {
     max-height: 40px;
 
     border: 2px solid #9a8866;
-    background-color: #2d2d2f;
-    color: #c7c5b3;
+    background-color: var(--background-primary);
+    color: var(--highlight-gold-one);
 }
 
 input[type='text']:focus,
 input[type='number']:focus {
     outline: none;
-    border: 2px solid #c7c5b3;
+    border: 2px solid var(--highlight-gold-one);
 }
 
 input[type='text'].number {
@@ -211,7 +228,7 @@ cite {
 
 div.tippy-box {
     background-color: #2d2c2e;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     border-color: #4f4f4f;
     border-radius: 4px;
     border-style: solid;
@@ -258,7 +275,7 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 }
 
 .rc-slider-mark-text-active {
-    color: #c7c5b3 !important;
+    color: var(--highlight-gold-one) !important;
 }
 
 @media screen and (min-width: 800px) {
diff --git a/src/components/cost-items-cell/index.css b/src/components/cost-items-cell/index.css
index ea52e7b29..6640a8bdd 100644
--- a/src/components/cost-items-cell/index.css
+++ b/src/components/cost-items-cell/index.css
@@ -20,7 +20,7 @@
 }
 
 .cost-item-count-wrapper {
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
 }
 
 .cost-image-wrapper {
diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index a30a4a7f3..e64b9dce7 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -70,7 +70,7 @@ td.data-cell:last-child {
 }
 
 .data-table tr td {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
 }
 
 .data-table tbody tr.expanded td {
@@ -79,7 +79,7 @@ td.data-cell:last-child {
 
 .arrow-icon,
 .arrow-placeholder {
-    fill: #c7c5b3;
+    fill: var(--highlight-gold-one);
     height: 10px;
     width: 10px;
 }
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index 2ce6e2271..fea3679bb 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -100,7 +100,7 @@
 
 .basic-multi-select {
     min-width: 110px;
-    color: #2d2d2f;
+    color: var(--background-primary);
 }
 
 .rc-slider {
@@ -117,8 +117,8 @@
 
 .button-group-button {
     border-radius: 0;
-    background-color: #2d2d2f;
-    color: #c7c5b3;
+    background-color: var(--background-primary);
+    color: var(--highlight-gold-one);
     height: 40px;
     width: 40px;
     outline: none;
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 3b8d94490..90924a7cb 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -9,7 +9,7 @@
 .item-cost-custom-price {
     background-color: #292727;
     border: #9a8866 2px solid;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     padding: 4px;
     width: 5em;
 }
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index e0a256aab..4ae335a76 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -1,6 +1,6 @@
 .item-group-wrapper {
     border: 1px solid #1b1919;
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 10px;
@@ -75,7 +75,7 @@
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
     bottom: 1px;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     font-size: 14px;
     height: 24px;
     line-height: 24px;
diff --git a/src/components/items-for-hideout/index.css b/src/components/items-for-hideout/index.css
index 2db6d86a4..2b21ea915 100644
--- a/src/components/items-for-hideout/index.css
+++ b/src/components/items-for-hideout/index.css
@@ -19,7 +19,7 @@
 }
 
 .hideout-item-list-column {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     border-top: 4px solid #1b1919;
     border-bottom: 4px solid #1b1919;
     padding: 5px 15px;
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 31a52156d..38317bcf4 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -1,7 +1,7 @@
 .menu,
 .navigation,
 .overflow-menu .MuiPaper-root ul {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
 }
 
 .navigation {
@@ -103,7 +103,7 @@
 }
 
 .menu .submenu-wrapper ul {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     display: none;
@@ -245,7 +245,7 @@ li.mobile-only-link {
 }
 
 .overflow-menu .MuiPaper-root {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
 }
 
 .overflow-menu ul.MuiList-root {
diff --git a/src/components/property-list/index.css b/src/components/property-list/index.css
index 0708609ef..68bcc7305 100644
--- a/src/components/property-list/index.css
+++ b/src/components/property-list/index.css
@@ -11,7 +11,7 @@
     align-items: center;
     align-items: flex-start;
     flex-direction: column;
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     border: 1px solid #1b1919;
     flex-basis: calc(50% - 2.5px);
     padding: 10px 20px;
diff --git a/src/components/remote-control-id/index.css b/src/components/remote-control-id/index.css
index cf958017e..4e472b0c9 100644
--- a/src/components/remote-control-id/index.css
+++ b/src/components/remote-control-id/index.css
@@ -78,7 +78,7 @@
 }
 
 .id-wrapper svg {
-    fill: #c7c5b3;
+    fill: var(--highlight-gold-one);
     height: 35px;
     margin-right: 1vh;
     width: 35px;
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index f9f4e63cd..cb63cbf70 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -28,7 +28,7 @@
 .reward-custom-price {
     background-color: #292727;
     border: #9a8866 2px solid;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     padding: 4px;
     width: 5em;
 }
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 07d673018..629b7869c 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -21,7 +21,7 @@
 .reward-image-count {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/components/server-status/index.css b/src/components/server-status/index.css
index c9a0eaaaf..fa512e45c 100644
--- a/src/components/server-status/index.css
+++ b/src/components/server-status/index.css
@@ -3,7 +3,7 @@
 }
 
 .server-status-wrapper a {
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
 }
 
 .status-indicator {
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index 3bc26437a..6c8fb12aa 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -1,7 +1,7 @@
 .trader-image-reputation {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/pages/api-users/index.css b/src/pages/api-users/index.css
index d52cf75f7..ec798903e 100644
--- a/src/pages/api-users/index.css
+++ b/src/pages/api-users/index.css
@@ -9,7 +9,7 @@
 
 .api-user-wrapper {
     align-items: center;
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     border: 1px solid #1b1919;
     display: flex;
     flex-wrap: wrap;
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index ca7c24c9f..b77920ee4 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -25,7 +25,7 @@
     margin: 0;
     padding: 15px 20px;
     background: #0000004d;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
 }
 .information-section h2 svg {
     width: 1.6rem !important;
@@ -96,7 +96,7 @@
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     align-items: center;
     justify-content: space-between;
     cursor: default;
diff --git a/src/pages/item/index.css b/src/pages/item/index.css
index 05e5d3d8b..81ada01f1 100644
--- a/src/pages/item/index.css
+++ b/src/pages/item/index.css
@@ -117,7 +117,7 @@
 
 .text-and-image-information-wrapper.best-profit .price-wrapper,
 .best-profit {
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
 }
 
 .best-profit img {
@@ -126,7 +126,7 @@
 }
 
 .price-wrapper-bright {
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
 }
 
 .price-wrapper.locked,
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 3b674e41a..499788d01 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -53,7 +53,7 @@
 .map-block h2 {
     margin: 0;
     padding: 10px 20px;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     background: rgba(0,0,0,0.3);
     border-bottom: 1px solid rgba(255,255,255,0.1);
     margin-bottom: 10px;
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index 5192b5ce4..27543df77 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -45,7 +45,7 @@
 }
 
 .start-section-wrapper {
-    background-color: #2d2d2f;
+    background-color: var(--background-primary);
     border: 4px solid #1b1919;
     padding: 10px;
     margin-top: 10px;
diff --git a/src/pages/wipe-length/index.css b/src/pages/wipe-length/index.css
index bd2009d5a..57bf13bdd 100644
--- a/src/pages/wipe-length/index.css
+++ b/src/pages/wipe-length/index.css
@@ -8,7 +8,7 @@
     /* display: inline-block; */
     height: 10px;
     width: 200px;
-    background-color: #c7c5b3;
+    background-color: var(--highlight-gold-one);
     border-radius: 10px;
     overflow: hidden;
     margin-right: 10px;

From 5a9b7a51cb65e99553e198015724c1988d2b1bfe Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 21:16:35 +0000
Subject: [PATCH 02/37] WIP: variables, cont

---
 src/components/item-image/index.css    | 4 ++--
 src/components/loading-small/index.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/item-image/index.css b/src/components/item-image/index.css
index e93ab909b..c6243c191 100644
--- a/src/components/item-image/index.css
+++ b/src/components/item-image/index.css
@@ -1,5 +1,5 @@
 .item-image-mask {
-    background: linear-gradient(to left, #9a8866 20%, #c7c5b3 40%, #c7c5b3 60%, #9a8866 80%);
+    background: linear-gradient(to left, #9a8866 20%, var(--highlight-gold-one) 40%, var(--highlight-gold-one) 60%, #9a8866 80%);
     background-size: 200% auto;
     width: 200px;
     height: 200px;
@@ -32,7 +32,7 @@
 .item-image-count {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: #c7c5b3;
+    color: var(--highlight-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/components/loading-small/index.css b/src/components/loading-small/index.css
index 83cdc5bf5..47062a6c6 100644
--- a/src/components/loading-small/index.css
+++ b/src/components/loading-small/index.css
@@ -1,5 +1,5 @@
 .loading-wipe {
-    background: linear-gradient(to left, #c7c5b3 20%, #9a8866 40%, #9a8866 60%, #c7c5b3 80%);
+    background: linear-gradient(to left, var(--highlight-gold-one) 20%, #9a8866 40%, #9a8866 60%, var(--highlight-gold-one) 80%);
     background-size: 200% auto;
 
     color: #000;

From 9d34d40b356363eb7a5cb042c20c60b5c769862d Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 21:20:47 +0000
Subject: [PATCH 03/37] WIP: vars cont

---
 src/App.css                                          | 12 +++++++-----
 src/components/item-cost/index.css                   |  2 +-
 src/components/item-image/index.css                  |  2 +-
 src/components/item-search/index.css                 |  2 +-
 src/components/loading-small/index.css               |  2 +-
 src/components/menu/index.css                        | 10 +++++-----
 src/components/reward-cell/index.css                 |  2 +-
 .../station-skill-trader-setting/index.css           |  2 +-
 src/pages/boss/index.css                             |  2 +-
 src/pages/item/index.css                             |  2 +-
 src/pages/items/index.css                            |  2 +-
 src/pages/map/index.css                              |  2 +-
 src/pages/maps/index.css                             |  4 ++--
 src/pages/players/index.css                          |  4 ++--
 src/pages/quest/index.css                            |  2 +-
 src/pages/settings/index.css                         |  2 +-
 src/pages/wipe-length/index.css                      |  2 +-
 17 files changed, 29 insertions(+), 27 deletions(-)

diff --git a/src/App.css b/src/App.css
index 9e6e780ae..a960335d9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,6 +3,7 @@
   --text-color-white: #fff;
 
   --highlight-gold-one: #c7c5b3;
+  --highlight-gold-two: #9a8866;
 
   --background-primary: #2d2d2f;
 
@@ -15,6 +16,7 @@
 
 
 
+
   /* This is to ensure maps do not clip. Please do not remove */
     --display-height: auto;
 }
@@ -66,7 +68,7 @@ button {
 
 button,
 input[type='submit'] {
-    background-color: #9a8866;
+    background-color: var(--highlight-gold-two);
     border: 0;
     color: #000;
     height: 40px;
@@ -78,7 +80,7 @@ input[type='number'] {
     padding: 12px;
     max-height: 40px;
 
-    border: 2px solid #9a8866;
+    border: 2px solid var(--highlight-gold-two);
     background-color: var(--background-primary);
     color: var(--highlight-gold-one);
 }
@@ -103,7 +105,7 @@ select {
 }
 
 a {
-    color: #9a8866;
+    color: var(--highlight-gold-two);
     text-decoration: none;
 }
 
@@ -258,14 +260,14 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 
 .hr-muted {
     margin-top: 2rem;
-    border-bottom: 1px solid #9a8866;
+    border-bottom: 1px solid var(--highlight-gold-two);
     width: 80%;
     opacity: 0.4;
 }
 
 .hr-muted-full {
     margin-top: 2rem;
-    border-bottom: 1px solid #9a8866;
+    border-bottom: 1px solid var(--highlight-gold-two);
     width: 100%;
     opacity: 0.4;
 }
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 90924a7cb..4dc620cec 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -8,7 +8,7 @@
 
 .item-cost-custom-price {
     background-color: #292727;
-    border: #9a8866 2px solid;
+    border: var(--highlight-gold-two) 2px solid;
     color: var(--highlight-gold-one);
     padding: 4px;
     width: 5em;
diff --git a/src/components/item-image/index.css b/src/components/item-image/index.css
index c6243c191..4b7ef76c7 100644
--- a/src/components/item-image/index.css
+++ b/src/components/item-image/index.css
@@ -1,5 +1,5 @@
 .item-image-mask {
-    background: linear-gradient(to left, #9a8866 20%, var(--highlight-gold-one) 40%, var(--highlight-gold-one) 60%, #9a8866 80%);
+    background: linear-gradient(to left, var(--highlight-gold-two) 20%, var(--highlight-gold-one) 40%, var(--highlight-gold-one) 60%, var(--highlight-gold-two) 80%);
     background-size: 200% auto;
     width: 200px;
     height: 200px;
diff --git a/src/components/item-search/index.css b/src/components/item-search/index.css
index 65c2fb26b..c3e84ff01 100644
--- a/src/components/item-search/index.css
+++ b/src/components/item-search/index.css
@@ -42,7 +42,7 @@
 
 @media screen and (min-width: 800px) {
     .search-tip-wrapper {
-        border: 2px solid #9a8866;
+        border: 2px solid var(--highlight-gold-two);
         display: inline-flex;
     }
 }
diff --git a/src/components/loading-small/index.css b/src/components/loading-small/index.css
index 47062a6c6..f6c5204c3 100644
--- a/src/components/loading-small/index.css
+++ b/src/components/loading-small/index.css
@@ -1,5 +1,5 @@
 .loading-wipe {
-    background: linear-gradient(to left, var(--highlight-gold-one) 20%, #9a8866 40%, #9a8866 60%, var(--highlight-gold-one) 80%);
+    background: linear-gradient(to left, var(--highlight-gold-one) 20%, var(--highlight-gold-two) 40%, var(--highlight-gold-two) 60%, var(--highlight-gold-one) 80%);
     background-size: 200% auto;
 
     color: #000;
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 38317bcf4..097b1c2c1 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -7,7 +7,7 @@
 .navigation {
     align-items: center;
     box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
-    color: #9a8866;
+    color: var(--highlight-gold-two);
     display: flex;
     font-size: 40px;
     gap: 10px;
@@ -18,7 +18,7 @@
 .overflow-menu a {
     border-radius: 0;
     border: 0;
-    color: #9a8866;
+    color: var(--highlight-gold-two);
     text-align: left;
     /* text-decoration: none; */
     white-space: nowrap;
@@ -72,7 +72,7 @@
 }
 
 .mobile-icon svg {
-    fill: #9a8866;
+    fill: var(--highlight-gold-two);
     height: 54px;
 }
 
@@ -240,7 +240,7 @@ li.mobile-only-link {
 }
 
 .submenu-items {
-    border-left: 1px solid #9a8866;
+    border-left: 1px solid var(--highlight-gold-two);
     border-right: 1px solid rgba(0, 0, 0, 0);
 }
 
@@ -313,7 +313,7 @@ nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-las
 }
 
 .MuiPopover-root svg.icon-with-text {
-    color: #9a8866;
+    color: var(--highlight-gold-two);
 }
 
 .MuiPopover-root .overflow-hidden {
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index cb63cbf70..1f5639dfa 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -27,7 +27,7 @@
 
 .reward-custom-price {
     background-color: #292727;
-    border: #9a8866 2px solid;
+    border: var(--highlight-gold-two) 2px solid;
     color: var(--highlight-gold-one);
     padding: 4px;
     width: 5em;
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 84ea8ab6d..54836c583 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -15,7 +15,7 @@
 .station-skill-trader-setting-wrapper .select__control {
     color: #1b1919;
     background-color: #2d2c2e;
-    border-color: #9a8866;
+    border-color: var(--highlight-gold-two);
 }
 
 .station-skill-trader-setting-wrapper .select__single-value {
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index b77920ee4..4a893eda5 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -53,7 +53,7 @@
 }
 
 .boss-icon-cont {
-    border-left: 1px solid #9a8866ad;
+    border-left: 1px solid var(--highlight-gold-two)ad;
     background: #3b31203d;
     display: flex;
     min-width: 350px;
diff --git a/src/pages/item/index.css b/src/pages/item/index.css
index 81ada01f1..121325cc2 100644
--- a/src/pages/item/index.css
+++ b/src/pages/item/index.css
@@ -121,7 +121,7 @@
 }
 
 .best-profit img {
-    outline: #9a8866 solid 1px;
+    outline: var(--highlight-gold-two) solid 1px;
     outline-offset: -1px;
 }
 
diff --git a/src/pages/items/index.css b/src/pages/items/index.css
index a1328c050..1c732c837 100644
--- a/src/pages/items/index.css
+++ b/src/pages/items/index.css
@@ -18,5 +18,5 @@
 }
 
 .items-list-wrapper img:hover {
-    outline: 2px solid #9a8866;
+    outline: 2px solid var(--highlight-gold-two);
 }
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 3321fc962..cc7ed906a 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -19,7 +19,7 @@
 }
 
 .leaflet-popup-content-wrapper a {
-    color: #9a8866;
+    color: var(--highlight-gold-two);
 }
 
 /* leaflet-control-coordinates */
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 499788d01..80d4944b0 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -5,7 +5,7 @@
     margin-bottom: 50px;
 }
 .nav-maps .item {
-    border: 1px solid #9a8866;
+    border: 1px solid var(--highlight-gold-two);
     display: flex;
     flex-basis: max-content;
     min-width: 200px;
@@ -110,7 +110,7 @@
     transition: all .2s;
 }
 .map-block .map-wrapper:hover h3 {
-    color: #9a8866;
+    color: var(--highlight-gold-two);
 }
 
 .map-block .map-wrapper a {
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index 7a2df2d9f..2b1dfb26d 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -4,7 +4,7 @@
 }
 
 .search-button:disabled {
-    background-color: #9a886655;
+    background-color: var(--highlight-gold-two)55;
     color: #333;
 }
 
@@ -34,7 +34,7 @@
 .game-mode .select__control {
     color: #1b1919;
     background-color: #2d2c2e;
-    border-color: #9a8866;
+    border-color: var(--highlight-gold-two);
 }
 
 .game-mode .select__single-value {
diff --git a/src/pages/quest/index.css b/src/pages/quest/index.css
index d5f70ddd9..c89c480b0 100644
--- a/src/pages/quest/index.css
+++ b/src/pages/quest/index.css
@@ -17,7 +17,7 @@ ul.quest-item-list li {
 }
 
 .hover-item-name {
-    color: #9a8866
+    color: var(--highlight-gold-two)
 }
 
 
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index 452115fd7..4a57f515f 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -28,7 +28,7 @@
 .language-toggle-wrapper .select__control, .game-mode .select__control {
     color: #1b1919;
     background-color: #2d2c2e;
-    border-color: #9a8866;
+    border-color: var(--highlight-gold-two);
 }
 
 .language-toggle-wrapper .select__single-value, .game-mode .select__single-value {
diff --git a/src/pages/wipe-length/index.css b/src/pages/wipe-length/index.css
index 57bf13bdd..1270bba47 100644
--- a/src/pages/wipe-length/index.css
+++ b/src/pages/wipe-length/index.css
@@ -17,5 +17,5 @@
 .wipe-length-bar {
     height: 10px;
     border-radius: 10px;
-    background-color: #9a8866;
+    background-color: var(--highlight-gold-two);
 }

From a8f2aa6cfbf6d218750a17278f02915a5c11d3e0 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 21:58:56 +0000
Subject: [PATCH 04/37] WIP: Correctly implement variables into boss page

---
 src/App.css              | 12 +++++++++++-
 src/pages/boss/index.css | 24 +++++++++++-------------
 src/pages/map/index.css  |  2 +-
 3 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index a960335d9..274e2932e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,11 +1,20 @@
 /* Variables start */
 :root {
-  --text-color-white: #fff;
+  --color-primary-black: #000;
+    --color-primary-black-rgb: 0,0,0;
+  --color-primary-white: #fff;
+    --color-primary-white-rgb: 255,255,255;
+
 
   --highlight-gold-one: #c7c5b3;
+    --highlight-gold-one-rgba: 199,197,179;
+
+
   --highlight-gold-two: #9a8866;
+    --highlight-gold-two-rgb: 154,136,102;
 
   --background-primary: #2d2d2f;
+    --background-primary-rgb: 45,45,47;
 
 
 
@@ -21,6 +30,7 @@
     --display-height: auto;
 }
 
+
 .desc-line-break {
     margin-top: 2rem;
     margin-bottom: 2rem;
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 4a893eda5..634889783 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -8,8 +8,8 @@
 
 
 .information-section {
-    background: #0000001a;
-    border: 1px solid #ffffff1a;
+    background: rgba(var(--color-primary-black-rgb), 0.1);
+    border: 1px solid rgba(var(--color-primary-white-rgb), 0.1);
     border-radius: 0 20px 0 20px;
     margin-bottom: 50px;
     overflow: hidden;
@@ -24,7 +24,7 @@
     font-size: 24px;
     margin: 0;
     padding: 15px 20px;
-    background: #0000004d;
+    background: rgba(var(--primary-color-black-rgb), 0.4);
     color: var(--highlight-gold-one);
 }
 .information-section h2 svg {
@@ -40,20 +40,19 @@
 }
 
 
-
 /* Top Section */
 .boss-information-wrapper {
     display: flex;
-    background: #0000001a;
-    border: 1px solid #7a6f5494;
+    background-color: rgba(var(--color-primary-black-rgb), 0.1);
+    border: 1px solid rgba(var(--highlight-gold-two-rgb), 0.7);
     margin-bottom: 50px;
-    box-shadow: 0 0 5px 3px rgba(255, 255, 255, 0.034);
+    box-shadow: 0 0 5px 3px rgba(var(--primary-color-white-rgb), 0.034);
     overflow: hidden;
     min-height: 425px;
 }
 
 .boss-icon-cont {
-    border-left: 1px solid var(--highlight-gold-two)ad;
+    border-left: 1px solid var(--highlight-gold-two);
     background: #3b31203d;
     display: flex;
     min-width: 350px;
@@ -73,7 +72,6 @@
     background-size: cover;
     background-position: center center;
 }
-
 .boss-top-content {
     display: flex;
     flex-direction: column;
@@ -83,16 +81,16 @@
 .boss-top-content .title-bar {
     display: flex;
     align-items: center;
-    background: #0000004d;
+    background: rgba(var(--primary-color-black-rgb), 0.4);
     padding: 10px 20px;
-    border-bottom: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(var(--color-primary-white-rgb), 0.2);
 }
 .boss-top-content .boss-information-icon {
   display: none;
   width: 124px;
   margin: 20px auto;
   height: 124px;
-  border: 1px solid rgba(255,255,255,.5);
+  border: 1px solid rgba(var(--color-primary-white-rgb), 0.5);
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
@@ -140,4 +138,4 @@
   .boss-top-content .boss-information-icon {
     display: inline-block;
   }
-}
\ No newline at end of file
+}
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index cc7ed906a..685a0a8bc 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -24,7 +24,7 @@
 
 /* leaflet-control-coordinates */
 .leaflet-control-coordinates {
-    color: #000000;
+    color: var(--color-primary-black);
     font-weight: bold;
 }
 

From 646bbd899e83fd98f16fbd7343635c4fa9f3b0b8 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 22:05:09 +0000
Subject: [PATCH 05/37] - cont

---
 src/App.css              | 52 ++++++++++++++++++++++++++++++++++++++--
 src/pages/boss/index.css | 47 ++++++------------------------------
 2 files changed, 57 insertions(+), 42 deletions(-)

diff --git a/src/App.css b/src/App.css
index 274e2932e..98bb3495a 100644
--- a/src/App.css
+++ b/src/App.css
@@ -283,13 +283,61 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 }
 
 .rc-slider-mark-text {
-    color: #757257 !important;
+    color: rgba(var(--highlight-gold-one-rgba), 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: var(--highlight-gold-one) !important;
+    color: rgba(var(--highlight-gold-one-rgba), 1) !important;
 }
 
+/* Global reuseable styles, specific to the Tarkov.Dev style */
+.information-section {
+    background: rgba(var(--color-primary-black-rgb), 0.1);
+    border: 1px solid rgba(var(--color-primary-white-rgb), 0.1);
+    border-radius: 0 20px 0 20px;
+    margin-bottom: 50px;
+    overflow: hidden;
+}
+.information-section.has-table {
+    border-radius: 0 20px 0 0;
+}
+
+.information-section h2 {
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    margin: 0;
+    padding: 15px 20px;
+    background: rgba(var(--primary-color-black-rgb), 0.4);
+    color: var(--highlight-gold-one);
+}
+.information-section h2 svg {
+    width: 1.6rem !important;
+    height: auto !important;
+    margin: 0 12px 0 0;
+}
+.information-section .content {
+  padding: 20px;
+}
+.information-section .content p {
+  margin: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 @media screen and (min-width: 800px) {
     .control-wrapper {
         display: none;
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 634889783..9b0de2884 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -7,46 +7,13 @@
 }
 
 
-.information-section {
-    background: rgba(var(--color-primary-black-rgb), 0.1);
-    border: 1px solid rgba(var(--color-primary-white-rgb), 0.1);
-    border-radius: 0 20px 0 20px;
-    margin-bottom: 50px;
-    overflow: hidden;
-}
-.information-section.has-table {
-    border-radius: 0 20px 0 0;
-}
-
-.information-section h2 {
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-    margin: 0;
-    padding: 15px 20px;
-    background: rgba(var(--primary-color-black-rgb), 0.4);
-    color: var(--highlight-gold-one);
-}
-.information-section h2 svg {
-    width: 1.6rem !important;
-    height: auto !important;
-    margin: 0 12px 0 0;
-}
-.information-section .content {
-  padding: 20px;
-}
-.information-section .content p {
-  margin: 0;
-}
-
-
 /* Top Section */
 .boss-information-wrapper {
     display: flex;
     background-color: rgba(var(--color-primary-black-rgb), 0.1);
     border: 1px solid rgba(var(--highlight-gold-two-rgb), 0.7);
     margin-bottom: 50px;
-    box-shadow: 0 0 5px 3px rgba(var(--primary-color-white-rgb), 0.034);
+    box-shadow: 0 0 5px 3px rgba(var(--color-primary-white-rgb), 0.034);
     overflow: hidden;
     min-height: 425px;
 }
@@ -81,16 +48,16 @@
 .boss-top-content .title-bar {
     display: flex;
     align-items: center;
-    background: rgba(var(--primary-color-black-rgb), 0.4);
+    background: rgba(var(--color-primary-black-rgb), 0.4);
     padding: 10px 20px;
     border-bottom: 1px solid rgba(var(--color-primary-white-rgb), 0.2);
 }
 .boss-top-content .boss-information-icon {
-  display: none;
-  width: 124px;
-  margin: 20px auto;
-  height: 124px;
-  border: 1px solid rgba(var(--color-primary-white-rgb), 0.5);
+    display: none;
+    width: 124px;
+    margin: 20px auto;
+    height: 124px;
+    border: 1px solid rgba(var(--color-primary-white-rgb), 0.5);
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;

From ec4d8c9b016f57253702776f4b87c03ae09f0066 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 9 Dec 2024 22:17:35 +0000
Subject: [PATCH 06/37] Convert map page over to var

---
 src/App.css              |  7 ++++++
 src/pages/maps/index.css | 46 ++++++++--------------------------------
 src/pages/maps/index.js  |  2 +-
 3 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/src/App.css b/src/App.css
index 98bb3495a..e24a322f4 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,6 +5,9 @@
   --color-primary-white: #fff;
     --color-primary-white-rgb: 255,255,255;
 
+  --color-gunmetal: #383945;
+    --color-gunmetal-rgb: 56,57,69;
+
 
   --highlight-gold-one: #c7c5b3;
     --highlight-gold-one-rgba: 199,197,179;
@@ -310,6 +313,10 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
     padding: 15px 20px;
     background: rgba(var(--primary-color-black-rgb), 0.4);
     color: var(--highlight-gold-one);
+
+    color: var(--highlight-gold-one);
+    background: rgba(0,0,0,0.3);
+    border-bottom: 1px solid rgba(255,255,255,0.1);
 }
 .information-section h2 svg {
     width: 1.6rem !important;
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 80d4944b0..e1c4b345e 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -18,15 +18,15 @@
     position: relative;
     padding-left: 55px;
     transition: all .2s;
-    transition-delay: .2s;
+    transition-delay: .1s;
 }
 .nav-maps .item a:hover {
-    color: #b3a180;
-    text-shadow: 0 0 1px rgba(255,255,255,.1);
+    color: var(--highlight-gold-one);
+    text-shadow: 0 0 1px rgba(var(--color-primary-white-rgb), 0.1);
 }
 .nav-maps .item .icon {
     display: flex;
-    background: rgba(0,0,0,0.2);
+    background: rgba(var(--color-primary-black-rgb), 0.2);
     position: absolute;
     left: 0;
     top: 0;
@@ -36,39 +36,10 @@
     align-items: center;
 }
 
-
 .map-page-wrapper {
     min-height: 0;
 }
 
-/* Indiviaul "map block" */
-.map-block {
-    margin-bottom: 50px;
-    background: rgba(0, 0, 0, 0.1);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 0 20px 0 20px;
-    overflow: hidden;
-}
-
-.map-block h2 {
-    margin: 0;
-    padding: 10px 20px;
-    color: var(--highlight-gold-one);
-    background: rgba(0,0,0,0.3);
-    border-bottom: 1px solid rgba(255,255,255,0.1);
-    margin-bottom: 10px;
-    transition: all .2s;
-}
-.map-block h2 .icon {
-    margin-right: 4px;
-}
-.map-block h2 .icon svg.icon-with-text {
-    margin-left: 0;
-    width: 1.2rem !important; 
-    height: 1.2rem !important;
-}
-
-
 /* Map block text content */
 .map-block .page-wrapper {
     padding: 10px 20px;
@@ -91,21 +62,22 @@
     width: 33.3%;
     padding: 10px;
     position: relative;
-    border: 1px solid rgba(255,255,255,.2);
+    border: 1px solid rgba(var(--color-primary-white-rgb), 0.2);
     padding: 25px 0 50px 0;
-    background: rgb(56 57 69 / 38%);
+    background: rgba(var(--color-gunmetal-rgb), 0.38);
+
 }
 
 .map-block .map-wrapper h3 {
     position: absolute;
     text-align: center;
     letter-spacing: 1px;
-    color: #f1f1f1;
+    color: var(--color-primary-white);
     left: 0;
     bottom: 0;
     width: 100%;
     padding: 10px 20px;
-    background: rgba(0,0,0, .5);   
+    background: rgba(var(--color-primary-black-rgb), 0.5);
     margin: 0;
     transition: all .2s;
 }
diff --git a/src/pages/maps/index.js b/src/pages/maps/index.js
index 9e1538662..8a2921e14 100644
--- a/src/pages/maps/index.js
+++ b/src/pages/maps/index.js
@@ -64,7 +64,7 @@ function Maps() {
 
             {uniqueMaps.map((mapsGroup) => {
                 return (
-                    <div key={mapsGroup.normalizedName} id={mapsGroup.normalizedName} class="map-block">
+                    <div key={mapsGroup.normalizedName} id={mapsGroup.normalizedName} class="information-section map-block">
                         <h2>
                             <span class="icon">
                               <Icon 

From 6f365ec87cda266944866270f498931ec7023921 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:09:57 +0000
Subject: [PATCH 07/37] - add - var - actions, pos/neg

---
 src/App.css                           | 3 +++
 src/components/trader-image/index.css | 4 ++--
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.css b/src/App.css
index e24a322f4..6926926c0 100644
--- a/src/App.css
+++ b/src/App.css
@@ -19,6 +19,9 @@
   --background-primary: #2d2d2f;
     --background-primary-rgb: 45,45,47;
 
+  --action-positive: #00a700;
+  --action-negative: #a70000;
+
 
 
 
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index 6c8fb12aa..36dcab909 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -10,9 +10,9 @@
 }
 
 .positive-rep {
-    color: #00a700;
+    color: var(--action-positive);
 }
 
 .negative-rep {
-    color: #a70000;
+    color: var(--action-negative);
 }

From e42a19c119e3edbf1e3fcb1460de83826ce792f0 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:16:25 +0000
Subject: [PATCH 08/37] - cont

---
 src/App.css                | 21 +++++++++++++--------
 src/pages/player/index.css |  4 ++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index 6926926c0..02c0e8ea7 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,6 +5,11 @@
   --color-primary-white: #fff;
     --color-primary-white-rgb: 255,255,255;
 
+  --color-blue-light: #0292c0;
+  
+
+  --color-gray: #4f4f4f;
+
   --color-gunmetal: #383945;
     --color-gunmetal-rgb: 56,57,69;
 
@@ -149,7 +154,7 @@ cite {
 }
 
 .updated-label {
-    color: #ccc;
+    color: var(--highlight-gold-one);
     font-size: 10px;
     left: 4px;
     position: absolute;
@@ -216,12 +221,12 @@ cite {
 }
 
 .price-wrapper {
-    color: #b0b0b0;
+    color: var(--highlight-gold-one);
     font-size: 14px;
 }
 
 .price-wrapper-tool {
-    color: #0292c0;
+    color: var(--color-blue-light);
     font-size: 14px;
 }
 
@@ -247,7 +252,7 @@ cite {
 div.tippy-box {
     background-color: #2d2c2e;
     color: var(--highlight-gold-one);
-    border-color: #4f4f4f;
+    border-color: var(--color-gray);
     border-radius: 4px;
     border-style: solid;
     border-width: 3px;
@@ -255,22 +260,22 @@ div.tippy-box {
 }
 
 div.tippy-box[data-placement^='top'] > .tippy-arrow::before {
-    border-top-color: #4f4f4f;
+    border-top-color: var(--color-gray);
     bottom: -10px;
 }
 
 div.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
-    border-bottom-color: #4f4f4f;
+    border-bottom-color: var(--color-gray);
     top: -10px;
 }
 
 div.tippy-box[data-placement^='left'] > .tippy-arrow::before {
-    border-left-color: #4f4f4f;
+    border-left-color: var(--color-gray);
     right: -10px;
 }
 
 div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
-    border-right-color: #4f4f4f;
+    border-right-color: var(--color-gray);
     left: -10px;
 }
 
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 32335702e..66d8c04e9 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -56,11 +56,11 @@ ul.favorite-item-list li {
 }
 
 .banned {
-    color: #cd1e2f;
+    color: var(--color-action-positive);
 }
 
 .not-banned {
-    color: #41cd1e;
+    color: var(--color-action-negative);
 }
 
 .turnstile-widget {

From 2e13b95949c491f15a652683d06af1ab984788ab Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:27:23 +0000
Subject: [PATCH 09/37] - cont

---
 src/App.css                           |  5 ++---
 src/components/reward-image/index.css |  4 ++--
 src/components/value-cell/index.css   |  4 ++--
 src/pages/converter/index.css         |  2 +-
 src/pages/players/index.css           | 12 ++++++------
 5 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 02c0e8ea7..0dc121115 100644
--- a/src/App.css
+++ b/src/App.css
@@ -8,7 +8,7 @@
   --color-blue-light: #0292c0;
   
 
-  --color-gray: #4f4f4f;
+  --color-gray: #424242;
 
   --color-gunmetal: #383945;
     --color-gunmetal-rgb: 56,57,69;
@@ -25,8 +25,7 @@
     --background-primary-rgb: 45,45,47;
 
   --action-positive: #00a700;
-  --action-negative: #a70000;
-
+  --action-negative: #cd1e2f;
 
 
 
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 629b7869c..54d495ed9 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -35,12 +35,12 @@
 }
 
 .reward-image-img-tool {
-    outline: 1px solid #0292c0;
+    outline: 1px solid var(--color-blue-light);
     outline-offset: -1px;
 }
 
 .reward-image-img-nonfunctional {
-    outline: 1px solid #c00802;
+    outline: 1px solid var(--action-negative);
     outline-offset: -1px;
 }
 
diff --git a/src/components/value-cell/index.css b/src/components/value-cell/index.css
index 01ff5dbc2..010f68230 100644
--- a/src/components/value-cell/index.css
+++ b/src/components/value-cell/index.css
@@ -1,7 +1,7 @@
 .craft-profit {
-    color: #008800;
+    color: var(--action-negative);
 }
 
 .craft-loss {
-    color: #cd1e2f;
+    color: var(--action-positive);
 }
diff --git a/src/pages/converter/index.css b/src/pages/converter/index.css
index da3e6a710..d1b8423e6 100644
--- a/src/pages/converter/index.css
+++ b/src/pages/converter/index.css
@@ -18,5 +18,5 @@
 }
 
 .error {
-    color: #cd1e2f;
+    color: var(--action-negative);
 }
\ No newline at end of file
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index 2b1dfb26d..a2be21151 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -4,8 +4,8 @@
 }
 
 .search-button:disabled {
-    background-color: var(--highlight-gold-two)55;
-    color: #333;
+    background-color: var(--highlight-gold-two);
+    color: var(--color-gray);
 }
 
 .search-controls {
@@ -22,7 +22,7 @@
 }
 
 .error {
-    color: #cd1e2f;
+    color: var(--action-negative);
 }
 
 .name-results-list {
@@ -32,11 +32,11 @@
 }
 
 .game-mode .select__control {
-    color: #1b1919;
-    background-color: #2d2c2e;
+    color: var(--color-gray);
+    background-color: var(--background-primary);
     border-color: var(--highlight-gold-two);
 }
 
 .game-mode .select__single-value {
-    color: #fff;
+    color: var(--primary-color-white);
 }

From f38ac63e94ecc72e1c4b1afc4e35cc0189abb9d8 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:41:42 +0000
Subject: [PATCH 10/37] - continue

---
 src/App.css                                  |  1 +
 src/components/item-cost/index.css           | 10 +++++-----
 src/components/items-summary-table/index.css |  4 ++--
 src/components/quest-items-cell/index.css    |  4 ++--
 src/components/quest-table/index.css         |  4 ++--
 src/components/server-status/index.css       |  8 ++++----
 6 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0dc121115..650eb34ea 100644
--- a/src/App.css
+++ b/src/App.css
@@ -25,6 +25,7 @@
     --background-primary-rgb: 45,45,47;
 
   --action-positive: #00a700;
+  --action-warning : #ca8a00;
   --action-negative: #cd1e2f;
 
 
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 4dc620cec..24fa4df01 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -2,18 +2,18 @@
     display: none;
 }
 
-.item-cost-cash-sell {
-    color: #c89898;
-}
-
 .item-cost-custom-price {
-    background-color: #292727;
+    background-color: var(--background-primary);
     border: var(--highlight-gold-two) 2px solid;
     color: var(--highlight-gold-one);
     padding: 4px;
     width: 5em;
 }
 
+.item-cost-cash-sell {
+  color: #c89898;
+}
+
 .item-cost-muted-green {
     color: #6a9a66;
 }
diff --git a/src/components/items-summary-table/index.css b/src/components/items-summary-table/index.css
index 62b43753f..905aed3f9 100644
--- a/src/components/items-summary-table/index.css
+++ b/src/components/items-summary-table/index.css
@@ -1,7 +1,7 @@
 .trader-unlock-wrapper {
-    color: #636363;
+    color: var(--color-gray);
 }
 
 .trader-station-level-unmet {
-    color: #cd1e2f;
+    color: var(--action-negative);
 }
diff --git a/src/components/quest-items-cell/index.css b/src/components/quest-items-cell/index.css
index fb40c1bb2..fa3932fac 100644
--- a/src/components/quest-items-cell/index.css
+++ b/src/components/quest-items-cell/index.css
@@ -16,10 +16,10 @@
 .amount-wrapper,
 .found-in-raid-wrapper,
 .reward-type-wrapper {
-    color: #636363;
+    color: var(--color-gray);
     font-size: 14px;
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: #cd1e2f;
+    color: var(--action-negative);
 }
diff --git a/src/components/quest-table/index.css b/src/components/quest-table/index.css
index 6ceab10c7..9a39d51d0 100644
--- a/src/components/quest-table/index.css
+++ b/src/components/quest-table/index.css
@@ -26,12 +26,12 @@
 
 .amount-wrapper,
 .found-in-raid-wrapper {
-    color: #636363;
+    color: var(--color-gray);
     font-size: 14px;
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: #cd1e2f;
+    color: var(--action-negative);
 }
 
 .quest-link-wrapper {
diff --git a/src/components/server-status/index.css b/src/components/server-status/index.css
index fa512e45c..2cf85b96b 100644
--- a/src/components/server-status/index.css
+++ b/src/components/server-status/index.css
@@ -15,17 +15,17 @@
 }
 
 .status-0 {
-    background-color: #70b035;
+    background-color: var(--action-positive);
 }
 
 .status-1 {
-    background-color: #90c1eb;
+    background-color: var(--color-blue);
 }
 
 .status-2 {
-    background-color: #ca8a00;
+    background-color: var(--action-warning);
 }
 
 .status-3 {
-    background-color: #d42929;
+    background-color: var(--action-negative);
 }

From 69d7f190a92edefb4da802fc858852a93d313d37 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:48:49 +0000
Subject: [PATCH 11/37] - continue

---
 src/components/menu/alert-config.js | 8 ++++----
 src/pages/map/index.css             | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/menu/alert-config.js b/src/components/menu/alert-config.js
index 90ad78e2f..590b949d7 100644
--- a/src/components/menu/alert-config.js
+++ b/src/components/menu/alert-config.js
@@ -4,10 +4,10 @@ const alertConfig = {
 
     // valid alert colors
     alertColors: {
-        error: '#D3302F',
-        info: '#0088D1',
-        success: '#378E3C',
-        warning: '#F57D01',
+        error: '#cd1e2f',
+        info: '#0292c0',
+        success: '#00a700',
+        warning: '#ca8a00',
     },
 
     // set this variable to the severity of the alert banner
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 685a0a8bc..e6e7aac02 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -29,7 +29,7 @@
 }
 
 .leaflet-control-coordinates {
-	background-color:#D8D8D8;
+	background-color: var(--color-primary-white);
 	background-color:rgba(255, 255, 255, 0.8);
 	cursor:pointer;
 }

From 271cce5d86689d68f160b5171504b83eec6607b1 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:50:29 +0000
Subject: [PATCH 12/37] - cont

---
 src/pages/map/index.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index e6e7aac02..accad48b1 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -156,19 +156,19 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .extract-name.pmc {
-    color: #00e599;
+    color: var(--action-positive);
 }
 
 .extract-name.scav {
-    color: #ff7800;
+    color: var(--action-warning);
 }
 
 .extract-name.shared {
-    color: #00e4e5;
+    color: var(--color-blue);
 }
 
 .extract-name.transit {
-    color: #e53500;
+    color: var(--action-negative);
 }
 
 .poi-image, img.popup-item {

From 0313affdf397254256f4cea626b7a0908426f7ec Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 19:59:25 +0000
Subject: [PATCH 13/37] - Remove "Primary" from var's - it's useless

---
 src/App.css                                   | 21 ++++++++++---------
 src/components/loading-small/index.css        |  2 +-
 src/components/loyalty-level-icon/index.css   |  2 +-
 src/components/menu/index.css                 |  7 +++----
 .../station-skill-trader-setting/index.css    |  2 +-
 src/pages/boss/index.css                      | 10 ++++-----
 src/pages/item-tracker/index.css              |  2 +-
 src/pages/map/index.css                       |  4 ++--
 src/pages/maps/index.css                      | 10 ++++-----
 src/pages/player/index.css                    |  2 +-
 src/pages/settings/index.css                  |  4 ++--
 11 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/App.css b/src/App.css
index 650eb34ea..73d968971 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,13 +1,11 @@
 /* Variables start */
 :root {
-  --color-primary-black: #000;
-    --color-primary-black-rgb: 0,0,0;
-  --color-primary-white: #fff;
-    --color-primary-white-rgb: 255,255,255;
+  --color-black: #000;
+    --color-black-rgb: 0,0,0;
+  --color-white: #fff;
+    --color-white-rgb: 255,255,255;
 
   --color-blue-light: #0292c0;
-  
-
   --color-gray: #424242;
 
   --color-gunmetal: #383945;
@@ -28,6 +26,9 @@
   --action-warning : #ca8a00;
   --action-negative: #cd1e2f;
 
+  --rarity-rare: #8c6edf;
+  --rarity-legendary: #ffe084;
+
 
 
 
@@ -91,7 +92,7 @@ button,
 input[type='submit'] {
     background-color: var(--highlight-gold-two);
     border: 0;
-    color: #000;
+    color: var(--color-black);
     height: 40px;
     padding: 0;
 }
@@ -250,7 +251,7 @@ cite {
 }
 
 div.tippy-box {
-    background-color: #2d2c2e;
+    background-color: var(--background-primary);
     color: var(--highlight-gold-one);
     border-color: var(--color-gray);
     border-radius: 4px;
@@ -303,8 +304,8 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 
 /* Global reuseable styles, specific to the Tarkov.Dev style */
 .information-section {
-    background: rgba(var(--color-primary-black-rgb), 0.1);
-    border: 1px solid rgba(var(--color-primary-white-rgb), 0.1);
+    background: rgba(var(--color-rgb), 0.1);
+    border: 1px solid rgba(var(--color-white-rgb), 0.1);
     border-radius: 0 20px 0 20px;
     margin-bottom: 50px;
     overflow: hidden;
diff --git a/src/components/loading-small/index.css b/src/components/loading-small/index.css
index f6c5204c3..f61a47ae4 100644
--- a/src/components/loading-small/index.css
+++ b/src/components/loading-small/index.css
@@ -2,7 +2,7 @@
     background: linear-gradient(to left, var(--highlight-gold-one) 20%, var(--highlight-gold-two) 40%, var(--highlight-gold-two) 60%, var(--highlight-gold-one) 80%);
     background-size: 200% auto;
 
-    color: #000;
+    color: var(--color-black);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
diff --git a/src/components/loyalty-level-icon/index.css b/src/components/loyalty-level-icon/index.css
index cf9001b8e..a0790a23d 100644
--- a/src/components/loyalty-level-icon/index.css
+++ b/src/components/loyalty-level-icon/index.css
@@ -9,7 +9,7 @@
 .loyalty-level-wrapper {
     background-color: #bac1c4;
     clip-path: polygon(100% 0, 100% 70%, 70% 100%, 0 100%, 0 0);
-    color: #000;
+    color: var(--color-black);
     font-weight: 700;
     text-align: center;
 }
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 097b1c2c1..e73d5d96f 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -96,7 +96,6 @@
 }
 
 .menu .submenu-wrapper {
-    /* background-color: #000; */
     border-radius: 0;
     font-size: 20px;
     position: relative;
@@ -136,7 +135,7 @@
 }
 
 .menu .submenu-wrapper:hover > a {
-    color: #000;
+    color: var(--color-black);
     color: #bdbbaa;
     text-decoration: underline;
     text-underline-offset: 5px;
@@ -169,9 +168,9 @@
 }
 
 .supporters-wrapper {
-    background-color: #000;
+    background-color: var(--color-black);
     border-radius: 0;
-    color: #fff;
+    color: var(--color-white);
     cursor: default;
     display: none;
     position: absolute;
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 54836c583..08d2b9e85 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -14,7 +14,7 @@
 
 .station-skill-trader-setting-wrapper .select__control {
     color: #1b1919;
-    background-color: #2d2c2e;
+    background-color: var(--background-primary);
     border-color: var(--highlight-gold-two);
 }
 
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 9b0de2884..cc3343042 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -10,10 +10,10 @@
 /* Top Section */
 .boss-information-wrapper {
     display: flex;
-    background-color: rgba(var(--color-primary-black-rgb), 0.1);
+    background-color: rgba(var(--color-black-rgb), 0.1);
     border: 1px solid rgba(var(--highlight-gold-two-rgb), 0.7);
     margin-bottom: 50px;
-    box-shadow: 0 0 5px 3px rgba(var(--color-primary-white-rgb), 0.034);
+    box-shadow: 0 0 5px 3px rgba(var(--color-white-rgb), 0.034);
     overflow: hidden;
     min-height: 425px;
 }
@@ -48,16 +48,16 @@
 .boss-top-content .title-bar {
     display: flex;
     align-items: center;
-    background: rgba(var(--color-primary-black-rgb), 0.4);
+    background: rgba(var(--color-black-rgb), 0.4);
     padding: 10px 20px;
-    border-bottom: 1px solid rgba(var(--color-primary-white-rgb), 0.2);
+    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.2);
 }
 .boss-top-content .boss-information-icon {
     display: none;
     width: 124px;
     margin: 20px auto;
     height: 124px;
-    border: 1px solid rgba(var(--color-primary-white-rgb), 0.5);
+    border: 1px solid rgba(var(--color-white-rgb), 0.5);
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
diff --git a/src/pages/item-tracker/index.css b/src/pages/item-tracker/index.css
index 8757a8ffd..8409cdbb7 100644
--- a/src/pages/item-tracker/index.css
+++ b/src/pages/item-tracker/index.css
@@ -1,4 +1,4 @@
 .item-tracker-wrapper {
-    background-color: #000;
+    background-color: var(--color-black);
     height: auto;
 }
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index accad48b1..eab30a630 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -24,12 +24,12 @@
 
 /* leaflet-control-coordinates */
 .leaflet-control-coordinates {
-    color: var(--color-primary-black);
+    color: var(--color-black);
     font-weight: bold;
 }
 
 .leaflet-control-coordinates {
-	background-color: var(--color-primary-white);
+	background-color: var(--color-white);
 	background-color:rgba(255, 255, 255, 0.8);
 	cursor:pointer;
 }
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index e1c4b345e..4c658d02a 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -22,11 +22,11 @@
 }
 .nav-maps .item a:hover {
     color: var(--highlight-gold-one);
-    text-shadow: 0 0 1px rgba(var(--color-primary-white-rgb), 0.1);
+    text-shadow: 0 0 1px rgba(var(--color-white-rgb), 0.1);
 }
 .nav-maps .item .icon {
     display: flex;
-    background: rgba(var(--color-primary-black-rgb), 0.2);
+    background: rgba(var(--color-black-rgb), 0.2);
     position: absolute;
     left: 0;
     top: 0;
@@ -62,7 +62,7 @@
     width: 33.3%;
     padding: 10px;
     position: relative;
-    border: 1px solid rgba(var(--color-primary-white-rgb), 0.2);
+    border: 1px solid rgba(var(--color-white-rgb), 0.2);
     padding: 25px 0 50px 0;
     background: rgba(var(--color-gunmetal-rgb), 0.38);
 
@@ -72,12 +72,12 @@
     position: absolute;
     text-align: center;
     letter-spacing: 1px;
-    color: var(--color-primary-white);
+    color: var(--color-white);
     left: 0;
     bottom: 0;
     width: 100%;
     padding: 10px 20px;
-    background: rgba(var(--color-primary-black-rgb), 0.5);
+    background: rgba(var(--color-black-rgb), 0.5);
     margin: 0;
     transition: all .2s;
 }
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 66d8c04e9..2ebc6d0c8 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -48,7 +48,7 @@ ul.favorite-item-list li {
 }
 
 .legendary {
-    color: #ffe084;
+    color: var(--rarity-legendary);
 }
 
 .banned, .not-banned {
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index 4a57f515f..e4096b712 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -27,12 +27,12 @@
 
 .language-toggle-wrapper .select__control, .game-mode .select__control {
     color: #1b1919;
-    background-color: #2d2c2e;
+    background-color: var(--background-primary);
     border-color: var(--highlight-gold-two);
 }
 
 .language-toggle-wrapper .select__single-value, .game-mode .select__single-value {
-    color: #fff;
+    color: var(--color-white);
 }
 
 .hidden {

From 49336583d7dd48a24d4a82568ec06dcb7a12ee3b Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 20:06:54 +0000
Subject: [PATCH 14/37] - add, border primary

---
 src/components/data-table/index.css                   | 10 +++++-----
 src/components/filter/index.css                       |  4 ++--
 src/components/item-grid/index.css                    |  2 +-
 src/components/item-search/index.css                  |  2 +-
 src/components/items-for-hideout/index.css            | 10 +++++-----
 src/components/property-list/index.css                |  2 +-
 src/components/station-skill-trader-setting/index.css |  2 +-
 src/pages/api-users/index.css                         |  2 +-
 src/pages/settings/index.css                          |  2 +-
 src/pages/start/index.css                             |  2 +-
 10 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index e64b9dce7..d08b29246 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -29,7 +29,7 @@
 }
 
 .data-table thead tr:first-child {
-    border-top: 4px solid #1b1919;
+    border-top: 4px solid var(--border-primary);
 }
 
 .data-table tbody tr.last-row {
@@ -42,18 +42,18 @@
 
 .data-cell, .data-table tfoot th {
     padding: 5px 15px;
-    border-top: 4px solid #1b1919;
-    border-bottom: 4px solid #1b1919;
+    border-top: 4px solid var(--border-primary);
+    border-bottom: 4px solid var(--border-primary);
 }
 
 th:first-child,
 td.data-cell:first-child {
-    border-left: 4px solid #1b1919;
+    border-left: 4px solid var(--border-primary);
 }
 
 th:last-child,
 td.data-cell:last-child {
-    border-right: 4px solid #1b1919;
+    border-right: 4px solid var(--border-primary);
 }
 
 .data-table .center-content {
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index fea3679bb..006889154 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -108,7 +108,7 @@
 }
 
 .button-group-wrapper {
-    border: 1px solid #1b1919;
+    border: 1px solid var(--border-primary);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -136,7 +136,7 @@
 
 .button-group-button:hover,
 .button-group-button.selected {
-    background-color: #1b1919;
+    background-color: var(--border-primary);
     cursor: pointer;
 }
 
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index 4ae335a76..01739d964 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -1,5 +1,5 @@
 .item-group-wrapper {
-    border: 1px solid #1b1919;
+    border: 1px solid var(--border-primary);
     background-color: var(--background-primary);
     display: flex;
     flex-wrap: wrap;
diff --git a/src/components/item-search/index.css b/src/components/item-search/index.css
index c3e84ff01..b7abb59af 100644
--- a/src/components/item-search/index.css
+++ b/src/components/item-search/index.css
@@ -11,7 +11,7 @@
 }
 
 .item-list-wrapper {
-    background-color: #1b1919;
+    background-color: var(--border-primary);
     position: absolute;
     top: 56px;
     width: 100%;
diff --git a/src/components/items-for-hideout/index.css b/src/components/items-for-hideout/index.css
index 2b21ea915..266c387c0 100644
--- a/src/components/items-for-hideout/index.css
+++ b/src/components/items-for-hideout/index.css
@@ -14,14 +14,14 @@
 }
 
 .hideout-item-list-row {
-    border-left: 4px solid #1b1919;
-    border-right: 4px solid #1b1919;
+    border-left: 4px solid var(--border-primary);
+    border-right: 4px solid var(--border-primary);
 }
 
 .hideout-item-list-column {
     background-color: var(--background-primary);
-    border-top: 4px solid #1b1919;
-    border-bottom: 4px solid #1b1919;
+    border-top: 4px solid var(--border-primary);
+    border-bottom: 4px solid var(--border-primary);
     padding: 5px 15px;
 }
 
@@ -61,5 +61,5 @@
 }
 
 .hideout-item-list thead tr:first-child {
-    border-top: 4px solid #1b1919;
+    border-top: 4px solid var(--border-primary);
 }
diff --git a/src/components/property-list/index.css b/src/components/property-list/index.css
index 68bcc7305..f3978f8fa 100644
--- a/src/components/property-list/index.css
+++ b/src/components/property-list/index.css
@@ -12,7 +12,7 @@
     align-items: flex-start;
     flex-direction: column;
     background-color: var(--background-primary);
-    border: 1px solid #1b1919;
+    border: 1px solid var(--border-primary);
     flex-basis: calc(50% - 2.5px);
     padding: 10px 20px;
     flex: 1 auto;
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 08d2b9e85..485ecf2e0 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -13,7 +13,7 @@
 }
 
 .station-skill-trader-setting-wrapper .select__control {
-    color: #1b1919;
+    color: var(--border-primary);
     background-color: var(--background-primary);
     border-color: var(--highlight-gold-two);
 }
diff --git a/src/pages/api-users/index.css b/src/pages/api-users/index.css
index ec798903e..2ec075a33 100644
--- a/src/pages/api-users/index.css
+++ b/src/pages/api-users/index.css
@@ -10,7 +10,7 @@
 .api-user-wrapper {
     align-items: center;
     background-color: var(--background-primary);
-    border: 1px solid #1b1919;
+    border: 1px solid var(--border-primary);
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 10px;
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index e4096b712..2e82c4444 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -26,7 +26,7 @@
 }
 
 .language-toggle-wrapper .select__control, .game-mode .select__control {
-    color: #1b1919;
+    color: var(--border-primary);
     background-color: var(--background-primary);
     border-color: var(--highlight-gold-two);
 }
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index 27543df77..0bf85fb9e 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -46,7 +46,7 @@
 
 .start-section-wrapper {
     background-color: var(--background-primary);
-    border: 4px solid #1b1919;
+    border: 4px solid var(--border-primary);
     padding: 10px;
     margin-top: 10px;
     margin-bottom: 10px;

From 3ed43c123b72123850b07cebcde7b0f736c598a1 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 20:07:04 +0000
Subject: [PATCH 15/37] - cont

---
 src/App.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.css b/src/App.css
index 73d968971..c1562d685 100644
--- a/src/App.css
+++ b/src/App.css
@@ -29,6 +29,7 @@
   --rarity-rare: #8c6edf;
   --rarity-legendary: #ffe084;
 
+  --border-primary: #1b1919;
 
 
 

From 4f8c0c55318dfe6a9972858ab9c6a01675925bf3 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 20:36:34 +0000
Subject: [PATCH 16/37] - cont

---
 src/App.css                                | 4 ++++
 src/components/crafts-table/index.css      | 2 +-
 src/components/data-table/index.css        | 2 +-
 src/components/filter/index.css            | 2 +-
 src/components/item-cost/index.css         | 2 +-
 src/components/item-grid/index.css         | 2 +-
 src/components/items-for-hideout/index.css | 2 +-
 src/components/property-list/index.css     | 2 +-
 src/components/reward-cell/index.css       | 4 ++--
 src/components/trader-price-cell/index.css | 2 +-
 src/pages/boss/index.css                   | 2 +-
 11 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/App.css b/src/App.css
index c1562d685..f54f210de 100644
--- a/src/App.css
+++ b/src/App.css
@@ -7,6 +7,7 @@
 
   --color-blue-light: #0292c0;
   --color-gray: #424242;
+  --color-gray-light : #636363;
 
   --color-gunmetal: #383945;
     --color-gunmetal-rgb: 56,57,69;
@@ -32,6 +33,9 @@
   --border-primary: #1b1919;
 
 
+  --muted-green: #6a9a66;
+  --muted-red: #9a6666;
+
 
 
 
diff --git a/src/components/crafts-table/index.css b/src/components/crafts-table/index.css
index 1d0ba97b3..5f05f294f 100644
--- a/src/components/crafts-table/index.css
+++ b/src/components/crafts-table/index.css
@@ -1,5 +1,5 @@
 .duration-wrapper, .finish-wrapper {
-    color: #636363;
+    color: var(--color-gray-light);
     font-size: 14px;
 }
 
diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index d08b29246..bf68d2e2f 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -74,7 +74,7 @@ td.data-cell:last-child {
 }
 
 .data-table tbody tr.expanded td {
-    background-color: #242324;
+    background-color: var(--background-primary);
 }
 
 .arrow-icon,
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index 006889154..c5e8ca057 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -19,7 +19,7 @@
 }
 
 .filter-content-wrapper {
-    background-color: #292727;
+    background-color: var(--background-primary);
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 24fa4df01..3450a514c 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -15,7 +15,7 @@
 }
 
 .item-cost-muted-green {
-    color: #6a9a66;
+    color: var(--muted-green);
 }
 
 .item-cost-muted-red {
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index 01739d964..5552b95f3 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -45,7 +45,7 @@
 }
 
 .item-group-subtitle-wrapper .note {
-    color: #636363;
+    color: var(--color-gray-light);
 }
 
 .item-group-items {
diff --git a/src/components/items-for-hideout/index.css b/src/components/items-for-hideout/index.css
index 266c387c0..8f129b816 100644
--- a/src/components/items-for-hideout/index.css
+++ b/src/components/items-for-hideout/index.css
@@ -56,7 +56,7 @@
 }
 
 .amount-wrapper {
-    color: #636363;
+    color: var(--color-gray-light);
     font-size: 14px;
 }
 
diff --git a/src/components/property-list/index.css b/src/components/property-list/index.css
index f3978f8fa..f013c9c6b 100644
--- a/src/components/property-list/index.css
+++ b/src/components/property-list/index.css
@@ -30,7 +30,7 @@
 .property-key-wrapper {
     cursor: default;
     display: inline-block;
-    color: #636363;
+    color: var(--color-gray-light);
     font-size: 18px;
     margin-bottom: 5px;
     font-weight: 600;
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index 1f5639dfa..e537012dd 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -26,7 +26,7 @@
 }
 
 .reward-custom-price {
-    background-color: #292727;
+    background-color: var(--background-primary);
     border: var(--highlight-gold-two) 2px solid;
     color: var(--highlight-gold-one);
     padding: 4px;
@@ -34,7 +34,7 @@
 }
 
 .reward-muted-green {
-    color: #6a9a66;
+    color: var(--muted-green);
 }
 
 .reward-muted-red {
diff --git a/src/components/trader-price-cell/index.css b/src/components/trader-price-cell/index.css
index 700dcab99..5a31c61e3 100644
--- a/src/components/trader-price-cell/index.css
+++ b/src/components/trader-price-cell/index.css
@@ -1,3 +1,3 @@
 .trader-unlock-wrapper {
-    color: #636363;
+    color: var(--color-gray-light);
 }
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index cc3343042..7adb9211b 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -20,7 +20,7 @@
 
 .boss-icon-cont {
     border-left: 1px solid var(--highlight-gold-two);
-    background: #3b31203d;
+    background: var(--background-primary);
     display: flex;
     min-width: 350px;
     height: inherit;

From 0009eb3207cd09ceebb98495f647405f141f6bd4 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Mon, 6 Jan 2025 21:16:05 +0000
Subject: [PATCH 17/37] -continue

---
 src/components/footer/index.css             | 2 +-
 src/components/item-cost/index.css          | 2 +-
 src/components/loyalty-level-icon/index.css | 2 +-
 src/components/remote-control-id/index.css  | 4 ++--
 src/components/reward-cell/index.css        | 2 +-
 src/pages/achievements/index.css            | 4 ++--
 src/pages/item/index.css                    | 2 +-
 src/pages/player/index.css                  | 2 +-
 src/pages/start/index.css                   | 4 ++--
 9 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/footer/index.css b/src/components/footer/index.css
index 332040fc1..56aaa5e69 100644
--- a/src/components/footer/index.css
+++ b/src/components/footer/index.css
@@ -1,5 +1,5 @@
 .footer-wrapper {
-    background-color: #000;
+    background-color: var(--color-black);
     display: flex;
     flex-flow: wrap;
     gap: 30px;
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 3450a514c..3df4dbea0 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -19,7 +19,7 @@
 }
 
 .item-cost-muted-red {
-    color: #9a6666;
+    color: var(--muted-red);
 }
 
 .item-cost-barter-icon {
diff --git a/src/components/loyalty-level-icon/index.css b/src/components/loyalty-level-icon/index.css
index a0790a23d..60d441ae2 100644
--- a/src/components/loyalty-level-icon/index.css
+++ b/src/components/loyalty-level-icon/index.css
@@ -7,7 +7,7 @@
 }
 
 .loyalty-level-wrapper {
-    background-color: #bac1c4;
+    background-color: var(--color-white);
     clip-path: polygon(100% 0, 100% 70%, 70% 100%, 0 100%, 0 0);
     color: var(--color-black);
     font-weight: 700;
diff --git a/src/components/remote-control-id/index.css b/src/components/remote-control-id/index.css
index 4e472b0c9..ae8f776f9 100644
--- a/src/components/remote-control-id/index.css
+++ b/src/components/remote-control-id/index.css
@@ -68,7 +68,7 @@
     border: none;
     cursor: pointer;
     text-decoration: none;
-    color: #ccc;
+    color: var(--color-white);
 }
 
 .session-switch-side:hover,
@@ -94,7 +94,7 @@
 .update-label {
     font-size: 10px;
     text-align: center;
-    color: #ccc;
+    color: var(--color-white);
 }
 
 @media screen and (min-width: 800px) {
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index e537012dd..58ef4f28b 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -38,7 +38,7 @@
 }
 
 .reward-muted-red {
-    color: #9a6666;
+    color: var(--muted-red);
 }
 
 @media screen and (min-width: 800px) {
diff --git a/src/pages/achievements/index.css b/src/pages/achievements/index.css
index 976ac0d87..b72ebd847 100644
--- a/src/pages/achievements/index.css
+++ b/src/pages/achievements/index.css
@@ -1,7 +1,7 @@
 .rare {
-    color: #8c6edf;
+    color: var(--rarity-rare);
 }
 
 .legendary {
-    color: #ffe084;
+    color: var(--rarity-legendary);
 }
diff --git a/src/pages/item/index.css b/src/pages/item/index.css
index 121325cc2..0bf9580b0 100644
--- a/src/pages/item/index.css
+++ b/src/pages/item/index.css
@@ -131,7 +131,7 @@
 
 .price-wrapper.locked,
 .best-profit .price-wrapper.locked {
-    color: #626151;
+    color: var(--highlight-gold-two);
 }
 
 .text-and-image-information-wrapper.price-info-wrapper {
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 2ebc6d0c8..21bddbcc7 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -44,7 +44,7 @@ ul.favorite-item-list li {
 }
 
 .rare {
-    color: #8c6edf;
+    color: var(--rarity-rare);
 }
 
 .legendary {
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index 0bf85fb9e..f4d7b90cf 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -101,8 +101,8 @@
 }
 
 .load-more-button:hover {
-    background-color: #6e5f43;
-    color: white;
+    background-color: var(--highlight-gold-two);
+    color: var(--color-white);
     cursor: pointer;
   }
 

From ce9d0c28ad9b5afcc477b517a7422ac390627d47 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 17:50:05 +0000
Subject: [PATCH 18/37] Refactor: Remove "highlight" and simply use "color-X"

---
 src/App.css                                   | 42 +++++++++----------
 src/components/cost-items-cell/index.css      |  2 +-
 src/components/data-table/index.css           |  2 +-
 src/components/filter/index.css               |  2 +-
 src/components/item-cost/index.css            |  4 +-
 src/components/item-grid/index.css            |  2 +-
 src/components/item-image/index.css           |  4 +-
 src/components/item-search/index.css          |  2 +-
 src/components/loading-small/index.css        |  2 +-
 src/components/menu/index.css                 | 12 +++---
 src/components/remote-control-id/index.css    |  2 +-
 src/components/reward-cell/index.css          |  4 +-
 src/components/reward-image/index.css         |  2 +-
 src/components/server-status/index.css        |  2 +-
 .../station-skill-trader-setting/index.css    |  2 +-
 src/components/trader-image/index.css         |  2 +-
 src/pages/boss/index.css                      |  6 +--
 src/pages/item/index.css                      |  8 ++--
 src/pages/items/index.css                     |  2 +-
 src/pages/map/index.css                       |  2 +-
 src/pages/maps/index.css                      |  6 +--
 src/pages/players/index.css                   |  4 +-
 src/pages/quest/index.css                     |  2 +-
 src/pages/settings/index.css                  |  2 +-
 src/pages/start/index.css                     |  2 +-
 src/pages/wipe-length/index.css               |  4 +-
 26 files changed, 62 insertions(+), 64 deletions(-)

diff --git a/src/App.css b/src/App.css
index f54f210de..98a587927 100644
--- a/src/App.css
+++ b/src/App.css
@@ -10,15 +10,13 @@
   --color-gray-light : #636363;
 
   --color-gunmetal: #383945;
-    --color-gunmetal-rgb: 56,57,69;
+  --color-gunmetal-rgb: 56,57,69;
 
 
-  --highlight-gold-one: #c7c5b3;
-    --highlight-gold-one-rgba: 199,197,179;
-
-
-  --highlight-gold-two: #9a8866;
-    --highlight-gold-two-rgb: 154,136,102;
+  --color-gold-one: #c7c5b3;
+  --color-gold-one-rgba: 199,197,179;
+  --color-gold-one: #9a8866;
+  --color-gold-one-rgb: 154,136,102;
 
   --background-primary: #2d2d2f;
     --background-primary-rgb: 45,45,47;
@@ -57,7 +55,7 @@
 body {
     background-color: var(--background-primary);
     background-image: url('images/background-1.png');
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     margin: 0;
     padding: 0;
     height: 100%;
@@ -95,7 +93,7 @@ button {
 
 button,
 input[type='submit'] {
-    background-color: var(--highlight-gold-two);
+    background-color: var(--color-gold-one);
     border: 0;
     color: var(--color-black);
     height: 40px;
@@ -107,15 +105,15 @@ input[type='number'] {
     padding: 12px;
     max-height: 40px;
 
-    border: 2px solid var(--highlight-gold-two);
+    border: 2px solid var(--color-gold-one);
     background-color: var(--background-primary);
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 }
 
 input[type='text']:focus,
 input[type='number']:focus {
     outline: none;
-    border: 2px solid var(--highlight-gold-one);
+    border: 2px solid var(--color-gold-one);
 }
 
 input[type='text'].number {
@@ -132,7 +130,7 @@ select {
 }
 
 a {
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
     text-decoration: none;
 }
 
@@ -160,7 +158,7 @@ cite {
 }
 
 .updated-label {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 10px;
     left: 4px;
     position: absolute;
@@ -227,7 +225,7 @@ cite {
 }
 
 .price-wrapper {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 14px;
 }
 
@@ -257,7 +255,7 @@ cite {
 
 div.tippy-box {
     background-color: var(--background-primary);
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     border-color: var(--color-gray);
     border-radius: 4px;
     border-style: solid;
@@ -287,24 +285,24 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 
 .hr-muted {
     margin-top: 2rem;
-    border-bottom: 1px solid var(--highlight-gold-two);
+    border-bottom: 1px solid var(--color-gold-one);
     width: 80%;
     opacity: 0.4;
 }
 
 .hr-muted-full {
     margin-top: 2rem;
-    border-bottom: 1px solid var(--highlight-gold-two);
+    border-bottom: 1px solid var(--color-gold-one);
     width: 100%;
     opacity: 0.4;
 }
 
 .rc-slider-mark-text {
-    color: rgba(var(--highlight-gold-one-rgba), 0.8) !important;
+    color: rgba(var(--color-gold-one-rgba), 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: rgba(var(--highlight-gold-one-rgba), 1) !important;
+    color: rgba(var(--color-gold-one-rgba), 1) !important;
 }
 
 /* Global reuseable styles, specific to the Tarkov.Dev style */
@@ -326,9 +324,9 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
     margin: 0;
     padding: 15px 20px;
     background: rgba(var(--primary-color-black-rgb), 0.4);
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     background: rgba(0,0,0,0.3);
     border-bottom: 1px solid rgba(255,255,255,0.1);
 }
diff --git a/src/components/cost-items-cell/index.css b/src/components/cost-items-cell/index.css
index 6640a8bdd..a038cdb2f 100644
--- a/src/components/cost-items-cell/index.css
+++ b/src/components/cost-items-cell/index.css
@@ -20,7 +20,7 @@
 }
 
 .cost-item-count-wrapper {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 }
 
 .cost-image-wrapper {
diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index bf68d2e2f..dd93c7a05 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -79,7 +79,7 @@ td.data-cell:last-child {
 
 .arrow-icon,
 .arrow-placeholder {
-    fill: var(--highlight-gold-one);
+    fill: var(--color-gold-one);
     height: 10px;
     width: 10px;
 }
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index c5e8ca057..2e14b9632 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -118,7 +118,7 @@
 .button-group-button {
     border-radius: 0;
     background-color: var(--background-primary);
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     height: 40px;
     width: 40px;
     outline: none;
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 3df4dbea0..8a6bc9619 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -4,8 +4,8 @@
 
 .item-cost-custom-price {
     background-color: var(--background-primary);
-    border: var(--highlight-gold-two) 2px solid;
-    color: var(--highlight-gold-one);
+    border: var(--color-gold-one) 2px solid;
+    color: var(--color-gold-one);
     padding: 4px;
     width: 5em;
 }
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index 5552b95f3..7d0594d32 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -75,7 +75,7 @@
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
     bottom: 1px;
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 14px;
     height: 24px;
     line-height: 24px;
diff --git a/src/components/item-image/index.css b/src/components/item-image/index.css
index 4b7ef76c7..58a8fb3f0 100644
--- a/src/components/item-image/index.css
+++ b/src/components/item-image/index.css
@@ -1,5 +1,5 @@
 .item-image-mask {
-    background: linear-gradient(to left, var(--highlight-gold-two) 20%, var(--highlight-gold-one) 40%, var(--highlight-gold-one) 60%, var(--highlight-gold-two) 80%);
+    background: linear-gradient(to left, var(--color-gold-one) 20%, var(--color-gold-one) 40%, var(--color-gold-one) 60%, var(--color-gold-one) 80%);
     background-size: 200% auto;
     width: 200px;
     height: 200px;
@@ -32,7 +32,7 @@
 .item-image-count {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/components/item-search/index.css b/src/components/item-search/index.css
index b7abb59af..a81894e6a 100644
--- a/src/components/item-search/index.css
+++ b/src/components/item-search/index.css
@@ -42,7 +42,7 @@
 
 @media screen and (min-width: 800px) {
     .search-tip-wrapper {
-        border: 2px solid var(--highlight-gold-two);
+        border: 2px solid var(--color-gold-one);
         display: inline-flex;
     }
 }
diff --git a/src/components/loading-small/index.css b/src/components/loading-small/index.css
index f61a47ae4..b93bbe591 100644
--- a/src/components/loading-small/index.css
+++ b/src/components/loading-small/index.css
@@ -1,5 +1,5 @@
 .loading-wipe {
-    background: linear-gradient(to left, var(--highlight-gold-one) 20%, var(--highlight-gold-two) 40%, var(--highlight-gold-two) 60%, var(--highlight-gold-one) 80%);
+    background: linear-gradient(to left, var(--color-gold-one) 20%, var(--color-gold-one) 40%, var(--color-gold-one) 60%, var(--color-gold-one) 80%);
     background-size: 200% auto;
 
     color: var(--color-black);
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index e73d5d96f..f80cd4474 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -7,7 +7,7 @@
 .navigation {
     align-items: center;
     box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
     display: flex;
     font-size: 40px;
     gap: 10px;
@@ -18,7 +18,7 @@
 .overflow-menu a {
     border-radius: 0;
     border: 0;
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
     text-align: left;
     /* text-decoration: none; */
     white-space: nowrap;
@@ -72,7 +72,7 @@
 }
 
 .mobile-icon svg {
-    fill: var(--highlight-gold-two);
+    fill: var(--color-gold-one);
     height: 54px;
 }
 
@@ -136,7 +136,7 @@
 
 .menu .submenu-wrapper:hover > a {
     color: var(--color-black);
-    color: #bdbbaa;
+    color: var(--color-gold-one);
     text-decoration: underline;
     text-underline-offset: 5px;
     text-decoration-thickness: 1px;
@@ -239,7 +239,7 @@ li.mobile-only-link {
 }
 
 .submenu-items {
-    border-left: 1px solid var(--highlight-gold-two);
+    border-left: 1px solid var(--color-gold-one);
     border-right: 1px solid rgba(0, 0, 0, 0);
 }
 
@@ -312,7 +312,7 @@ nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-las
 }
 
 .MuiPopover-root svg.icon-with-text {
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
 }
 
 .MuiPopover-root .overflow-hidden {
diff --git a/src/components/remote-control-id/index.css b/src/components/remote-control-id/index.css
index ae8f776f9..436552375 100644
--- a/src/components/remote-control-id/index.css
+++ b/src/components/remote-control-id/index.css
@@ -78,7 +78,7 @@
 }
 
 .id-wrapper svg {
-    fill: var(--highlight-gold-one);
+    fill: var(--color-gold-one);
     height: 35px;
     margin-right: 1vh;
     width: 35px;
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index 58ef4f28b..e06537d5d 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -27,8 +27,8 @@
 
 .reward-custom-price {
     background-color: var(--background-primary);
-    border: var(--highlight-gold-two) 2px solid;
-    color: var(--highlight-gold-one);
+    border: var(--color-gold-one) 2px solid;
+    color: var(--color-gold-one);
     padding: 4px;
     width: 5em;
 }
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 54d495ed9..6897657bd 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -21,7 +21,7 @@
 .reward-image-count {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/components/server-status/index.css b/src/components/server-status/index.css
index 2cf85b96b..abbde9e5a 100644
--- a/src/components/server-status/index.css
+++ b/src/components/server-status/index.css
@@ -3,7 +3,7 @@
 }
 
 .server-status-wrapper a {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 }
 
 .status-indicator {
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 485ecf2e0..8d2ce114b 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -15,7 +15,7 @@
 .station-skill-trader-setting-wrapper .select__control {
     color: var(--border-primary);
     background-color: var(--background-primary);
-    border-color: var(--highlight-gold-two);
+    border-color: var(--color-gold-one);
 }
 
 .station-skill-trader-setting-wrapper .select__single-value {
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index 36dcab909..735411ba5 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -1,7 +1,7 @@
 .trader-image-reputation {
     background-color: rgba(0, 0, 0, 0.8);
     border-top-left-radius: 3px;
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     font-size: 14px;
     height: 18px;
     line-height: 20px;
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 7adb9211b..f04025107 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -11,7 +11,7 @@
 .boss-information-wrapper {
     display: flex;
     background-color: rgba(var(--color-black-rgb), 0.1);
-    border: 1px solid rgba(var(--highlight-gold-two-rgb), 0.7);
+    border: 1px solid rgba(var(--color-gold-one-rgb), 0.7);
     margin-bottom: 50px;
     box-shadow: 0 0 5px 3px rgba(var(--color-white-rgb), 0.034);
     overflow: hidden;
@@ -19,7 +19,7 @@
 }
 
 .boss-icon-cont {
-    border-left: 1px solid var(--highlight-gold-two);
+    border-left: 1px solid var(--color-gold-one);
     background: var(--background-primary);
     display: flex;
     min-width: 350px;
@@ -61,7 +61,7 @@
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     align-items: center;
     justify-content: space-between;
     cursor: default;
diff --git a/src/pages/item/index.css b/src/pages/item/index.css
index 0bf9580b0..1fbb59c78 100644
--- a/src/pages/item/index.css
+++ b/src/pages/item/index.css
@@ -117,21 +117,21 @@
 
 .text-and-image-information-wrapper.best-profit .price-wrapper,
 .best-profit {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 }
 
 .best-profit img {
-    outline: var(--highlight-gold-two) solid 1px;
+    outline: var(--color-gold-one) solid 1px;
     outline-offset: -1px;
 }
 
 .price-wrapper-bright {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
 }
 
 .price-wrapper.locked,
 .best-profit .price-wrapper.locked {
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
 }
 
 .text-and-image-information-wrapper.price-info-wrapper {
diff --git a/src/pages/items/index.css b/src/pages/items/index.css
index 1c732c837..31971b21f 100644
--- a/src/pages/items/index.css
+++ b/src/pages/items/index.css
@@ -18,5 +18,5 @@
 }
 
 .items-list-wrapper img:hover {
-    outline: 2px solid var(--highlight-gold-two);
+    outline: 2px solid var(--color-gold-one);
 }
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index eab30a630..35257bc5f 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -19,7 +19,7 @@
 }
 
 .leaflet-popup-content-wrapper a {
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
 }
 
 /* leaflet-control-coordinates */
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 4c658d02a..6b180d3e1 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -5,7 +5,7 @@
     margin-bottom: 50px;
 }
 .nav-maps .item {
-    border: 1px solid var(--highlight-gold-two);
+    border: 1px solid var(--color-gold-one);
     display: flex;
     flex-basis: max-content;
     min-width: 200px;
@@ -21,7 +21,7 @@
     transition-delay: .1s;
 }
 .nav-maps .item a:hover {
-    color: var(--highlight-gold-one);
+    color: var(--color-gold-one);
     text-shadow: 0 0 1px rgba(var(--color-white-rgb), 0.1);
 }
 .nav-maps .item .icon {
@@ -82,7 +82,7 @@
     transition: all .2s;
 }
 .map-block .map-wrapper:hover h3 {
-    color: var(--highlight-gold-two);
+    color: var(--color-gold-one);
 }
 
 .map-block .map-wrapper a {
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index a2be21151..7c95dc285 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -4,7 +4,7 @@
 }
 
 .search-button:disabled {
-    background-color: var(--highlight-gold-two);
+    background-color: var(--color-gold-one);
     color: var(--color-gray);
 }
 
@@ -34,7 +34,7 @@
 .game-mode .select__control {
     color: var(--color-gray);
     background-color: var(--background-primary);
-    border-color: var(--highlight-gold-two);
+    border-color: var(--color-gold-one);
 }
 
 .game-mode .select__single-value {
diff --git a/src/pages/quest/index.css b/src/pages/quest/index.css
index c89c480b0..9944bfd17 100644
--- a/src/pages/quest/index.css
+++ b/src/pages/quest/index.css
@@ -17,7 +17,7 @@ ul.quest-item-list li {
 }
 
 .hover-item-name {
-    color: var(--highlight-gold-two)
+    color: var(--color-gold-one)
 }
 
 
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index 2e82c4444..8166c9907 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -28,7 +28,7 @@
 .language-toggle-wrapper .select__control, .game-mode .select__control {
     color: var(--border-primary);
     background-color: var(--background-primary);
-    border-color: var(--highlight-gold-two);
+    border-color: var(--color-gold-one);
 }
 
 .language-toggle-wrapper .select__single-value, .game-mode .select__single-value {
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index f4d7b90cf..3e8c4caf5 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -101,7 +101,7 @@
 }
 
 .load-more-button:hover {
-    background-color: var(--highlight-gold-two);
+    background-color: var(--color-gold-one);
     color: var(--color-white);
     cursor: pointer;
   }
diff --git a/src/pages/wipe-length/index.css b/src/pages/wipe-length/index.css
index 1270bba47..54678c0fa 100644
--- a/src/pages/wipe-length/index.css
+++ b/src/pages/wipe-length/index.css
@@ -8,7 +8,7 @@
     /* display: inline-block; */
     height: 10px;
     width: 200px;
-    background-color: var(--highlight-gold-one);
+    background-color: var(--color-gold-one);
     border-radius: 10px;
     overflow: hidden;
     margin-right: 10px;
@@ -17,5 +17,5 @@
 .wipe-length-bar {
     height: 10px;
     border-radius: 10px;
-    background-color: var(--highlight-gold-two);
+    background-color: var(--color-gold-one);
 }

From ae66357d1ffaacccccf600ee82c21125ccc5c516 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 17:54:17 +0000
Subject: [PATCH 19/37] Refactor: Naming convention is now color-x-x

---
 src/App.css                                  | 23 ++++++--------------
 src/components/item-cost/index.css           |  4 ++--
 src/components/items-summary-table/index.css |  2 +-
 src/components/quest-items-cell/index.css    |  2 +-
 src/components/quest-table/index.css         |  2 +-
 src/components/reward-cell/index.css         |  4 ++--
 src/components/reward-image/index.css        |  2 +-
 src/components/server-status/index.css       |  6 ++---
 src/components/trader-image/index.css        |  4 ++--
 src/components/value-cell/index.css          |  4 ++--
 src/pages/achievements/index.css             |  4 ++--
 src/pages/converter/index.css                |  2 +-
 src/pages/map/index.css                      |  6 ++---
 src/pages/player/index.css                   |  4 ++--
 src/pages/players/index.css                  |  2 +-
 15 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/App.css b/src/App.css
index 98a587927..0f53b3ee1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -20,26 +20,17 @@
 
   --background-primary: #2d2d2f;
     --background-primary-rgb: 45,45,47;
-
-  --action-positive: #00a700;
-  --action-warning : #ca8a00;
-  --action-negative: #cd1e2f;
-
-  --rarity-rare: #8c6edf;
-  --rarity-legendary: #ffe084;
-
   --border-primary: #1b1919;
 
+  --color-action-positive: #00a700;
+  --color-action-warning : #ca8a00;
+  --color-action-negative: #cd1e2f;
 
-  --muted-green: #6a9a66;
-  --muted-red: #9a6666;
-
-
-
-
-
-
+  --color-rarity-rare: #8c6edf;
+  --color-rarity-legendary: #ffe084;
 
+  --color-muted-green: #6a9a66;
+  --color-muted-red: #9a6666;
 
   /* This is to ensure maps do not clip. Please do not remove */
     --display-height: auto;
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 8a6bc9619..083ad36ae 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -15,11 +15,11 @@
 }
 
 .item-cost-muted-green {
-    color: var(--muted-green);
+    color: var(--color-muted-green);
 }
 
 .item-cost-muted-red {
-    color: var(--muted-red);
+    color: var(--color-muted-red);
 }
 
 .item-cost-barter-icon {
diff --git a/src/components/items-summary-table/index.css b/src/components/items-summary-table/index.css
index 905aed3f9..42bc15849 100644
--- a/src/components/items-summary-table/index.css
+++ b/src/components/items-summary-table/index.css
@@ -3,5 +3,5 @@
 }
 
 .trader-station-level-unmet {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
diff --git a/src/components/quest-items-cell/index.css b/src/components/quest-items-cell/index.css
index fa3932fac..cafc75086 100644
--- a/src/components/quest-items-cell/index.css
+++ b/src/components/quest-items-cell/index.css
@@ -21,5 +21,5 @@
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
diff --git a/src/components/quest-table/index.css b/src/components/quest-table/index.css
index 9a39d51d0..dc5066f23 100644
--- a/src/components/quest-table/index.css
+++ b/src/components/quest-table/index.css
@@ -31,7 +31,7 @@
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
 
 .quest-link-wrapper {
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index e06537d5d..985ea50d0 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -34,11 +34,11 @@
 }
 
 .reward-muted-green {
-    color: var(--muted-green);
+    color: var(--color-muted-green);
 }
 
 .reward-muted-red {
-    color: var(--muted-red);
+    color: var(--color-muted-red);
 }
 
 @media screen and (min-width: 800px) {
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 6897657bd..69893c21d 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -40,7 +40,7 @@
 }
 
 .reward-image-img-nonfunctional {
-    outline: 1px solid var(--action-negative);
+    outline: 1px solid var(--color-action-negative);
     outline-offset: -1px;
 }
 
diff --git a/src/components/server-status/index.css b/src/components/server-status/index.css
index abbde9e5a..b3a15f616 100644
--- a/src/components/server-status/index.css
+++ b/src/components/server-status/index.css
@@ -15,7 +15,7 @@
 }
 
 .status-0 {
-    background-color: var(--action-positive);
+    background-color: var(--color-action-positive);
 }
 
 .status-1 {
@@ -23,9 +23,9 @@
 }
 
 .status-2 {
-    background-color: var(--action-warning);
+    background-color: var(--color-action-warning);
 }
 
 .status-3 {
-    background-color: var(--action-negative);
+    background-color: var(--color-action-negative);
 }
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index 735411ba5..828cd7f0d 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -10,9 +10,9 @@
 }
 
 .positive-rep {
-    color: var(--action-positive);
+    color: var(--color-action-positive);
 }
 
 .negative-rep {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
diff --git a/src/components/value-cell/index.css b/src/components/value-cell/index.css
index 010f68230..e56905943 100644
--- a/src/components/value-cell/index.css
+++ b/src/components/value-cell/index.css
@@ -1,7 +1,7 @@
 .craft-profit {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
 
 .craft-loss {
-    color: var(--action-positive);
+    color: var(--color-action-positive);
 }
diff --git a/src/pages/achievements/index.css b/src/pages/achievements/index.css
index b72ebd847..986782ff2 100644
--- a/src/pages/achievements/index.css
+++ b/src/pages/achievements/index.css
@@ -1,7 +1,7 @@
 .rare {
-    color: var(--rarity-rare);
+    color: var(--color-rarity-rare);
 }
 
 .legendary {
-    color: var(--rarity-legendary);
+    color: var(--color-rarity-legendary);
 }
diff --git a/src/pages/converter/index.css b/src/pages/converter/index.css
index d1b8423e6..c05da908e 100644
--- a/src/pages/converter/index.css
+++ b/src/pages/converter/index.css
@@ -18,5 +18,5 @@
 }
 
 .error {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
\ No newline at end of file
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 35257bc5f..38903f7fd 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -156,11 +156,11 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .extract-name.pmc {
-    color: var(--action-positive);
+    color: var(--color-action-positive);
 }
 
 .extract-name.scav {
-    color: var(--action-warning);
+    color: var(--color-action-warning);
 }
 
 .extract-name.shared {
@@ -168,7 +168,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .extract-name.transit {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
 
 .poi-image, img.popup-item {
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 21bddbcc7..393f7c235 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -44,11 +44,11 @@ ul.favorite-item-list li {
 }
 
 .rare {
-    color: var(--rarity-rare);
+    color: var(--color-rarity-rare);
 }
 
 .legendary {
-    color: var(--rarity-legendary);
+    color: var(--color-rarity-legendary);
 }
 
 .banned, .not-banned {
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index 7c95dc285..d6ee3b6c3 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -22,7 +22,7 @@
 }
 
 .error {
-    color: var(--action-negative);
+    color: var(--color-action-negative);
 }
 
 .name-results-list {

From b2d530ba1ff3f62fffa9e63b39e6623ed76e01a3 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 18:07:57 +0000
Subject: [PATCH 20/37] - WIP JS color vars

---
 src/colors.js                       | 45 +++++++++++++++++++++++++++++
 src/components/canvas-grid/index.js |  3 +-
 src/components/item-image/index.js  |  4 +--
 src/index.js                        |  4 ++-
 4 files changed, 52 insertions(+), 4 deletions(-)
 create mode 100644 src/colors.js

diff --git a/src/colors.js b/src/colors.js
new file mode 100644
index 000000000..211784105
--- /dev/null
+++ b/src/colors.js
@@ -0,0 +1,45 @@
+// src/colors.js
+
+
+// These colors should  always be the same as /app.css :root color vars.
+// They are static, since color changes/additions are not likely to happen, 
+// and dynamicly "getting" them on the client feels like a waste of resources.
+const colors = {
+  black: '#000',
+  blackRgb: '0,0,0',
+
+  colorWhite: '#fff',
+  colorWhiteRgb: '255,255,255',
+
+  colorBlueLight: '#0292c0',
+  colorGray: '#424242',
+  colorGrayLight: '#636363',
+
+  colorGunmetal: '#383945',
+  colorGunmetalRgb: '56,57,69',
+
+  colorGoldOne: '#c7c5b3',
+  colorGoldOneRgba: '199,197,179',
+  colorGoldTwo: '#9a8866',
+  colorGoldTwoRgba: '154,136,102',
+
+  /*
+  --background-primary: #2d2d2f;
+    --background-primary-rgb: 45,45,47;
+  --border-primary: #1b1919;
+
+  --color-action-positive: #00a700;
+  --color-action-warning : #ca8a00;
+  --color-action-negative: #cd1e2f;
+
+  --color-rarity-rare: #8c6edf;
+  --color-rarity-legendary: #ffe084;
+
+  --color-muted-green: #6a9a66;
+  --color-muted-red: #9a6666;
+  */
+};
+
+window.colors = colors; // Add colors to the global `window` object
+
+export default colors;
\ No newline at end of file
diff --git a/src/components/canvas-grid/index.js b/src/components/canvas-grid/index.js
index efeb08d05..355428a6f 100644
--- a/src/components/canvas-grid/index.js
+++ b/src/components/canvas-grid/index.js
@@ -1,3 +1,4 @@
+import { colors } from '@mui/material';
 import { useRef, useEffect } from 'react';
 
 function CanvasGrid(props) {
@@ -48,7 +49,7 @@ function CanvasGrid(props) {
         const width = 20;
 
         ctx.beginPath();
-        ctx.fillStyle = '#000'; // outer border color
+        ctx.fillStyle = colors.black; // outer border color
         ctx.fillRect(startX, startY, horizontal * 20 + 2, vertical * 20 + 2);
 
         startX = startX + 1;
diff --git a/src/components/item-image/index.js b/src/components/item-image/index.js
index 1c358465e..6f2840efa 100644
--- a/src/components/item-image/index.js
+++ b/src/components/item-image/index.js
@@ -241,7 +241,7 @@ function ItemImage({
                         <rect x="0" y="0" width="100%" height="100%" style={{fill:`rgba(${colorString})`}} />
                     </pattern>
                 </defs>
-                <rect width="100%" height="100%" fill="#000"/>
+                <rect width="100%" height="100%" style={{fill:window.colors.black}}/>
                 <rect width="100%" height="100%" fill="url(#gridCell)"/>
             </svg>;
         const backgroundStyle = {
@@ -267,7 +267,7 @@ function ItemImage({
             cursor: 'default',
             color: '#a4aeb4',
             fontWeight: 'bold',
-            textShadow: '1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000',
+            textShadow: '1px 1px 0 '+ colors.black + ', -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000',
             fontSize: `${textSize}px`,
             textAlign: 'right',
         };
diff --git a/src/index.js b/src/index.js
index 9808a8913..d177c8267 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,14 +4,16 @@ import ReactDOM from 'react-dom/client';
 // import { BrowserTracing } from '@sentry/tracing';
 import App from './App.js';
 import store from './store.js';
+import colors from './colors.js';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
-
 import ScrollToTop from './components/scroll-to-top/index.js';
 
+
 const queryClient = new QueryClient();
 
+
 // Uncomment to enable Sentry
 // if (
 //     window.location.hostname !== 'localhost' &&

From 9f59e5c71e6409f4b876c9aeaf6eb6d7b3de5f07 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 18:19:41 +0000
Subject: [PATCH 21/37] Fix: Bad refactor of gold one broke all references to
 gold two? fixed now.

---
 src/App.css                                       | 15 +++++++--------
 src/components/item-cost/index.css                |  2 +-
 src/components/item-image/index.css               |  2 +-
 src/components/item-search/index.css              |  2 +-
 src/components/loading-small/index.css            |  2 +-
 src/components/menu/index.css                     | 10 +++++-----
 src/components/reward-cell/index.css              |  4 ++--
 .../station-skill-trader-setting/index.css        |  2 +-
 src/pages/boss/index.css                          |  6 +++---
 src/pages/item/index.css                          |  4 ++--
 src/pages/items/index.css                         |  2 +-
 src/pages/map/index.css                           |  2 +-
 src/pages/maps/index.css                          |  4 ++--
 src/pages/players/index.css                       | 10 +++++-----
 src/pages/quest/index.css                         |  2 +-
 src/pages/settings/index.css                      |  2 +-
 src/pages/start/index.css                         |  2 +-
 src/pages/wipe-length/index.css                   |  2 +-
 18 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/src/App.css b/src/App.css
index 0f53b3ee1..5b775074b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -15,8 +15,8 @@
 
   --color-gold-one: #c7c5b3;
   --color-gold-one-rgba: 199,197,179;
-  --color-gold-one: #9a8866;
-  --color-gold-one-rgb: 154,136,102;
+  --color-gold-two: #9a8866;
+  --color-gold-two-rgb: 154,136,102;
 
   --background-primary: #2d2d2f;
     --background-primary-rgb: 45,45,47;
@@ -84,7 +84,7 @@ button {
 
 button,
 input[type='submit'] {
-    background-color: var(--color-gold-one);
+    background-color: var(--color-gold-two);
     border: 0;
     color: var(--color-black);
     height: 40px;
@@ -95,8 +95,7 @@ input[type='text'],
 input[type='number'] {
     padding: 12px;
     max-height: 40px;
-
-    border: 2px solid var(--color-gold-one);
+    border: 2px solid var(--color-gold-two);
     background-color: var(--background-primary);
     color: var(--color-gold-one);
 }
@@ -121,7 +120,7 @@ select {
 }
 
 a {
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
     text-decoration: none;
 }
 
@@ -276,14 +275,14 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 
 .hr-muted {
     margin-top: 2rem;
-    border-bottom: 1px solid var(--color-gold-one);
+    border-bottom: 1px solid var(--color-gold-two);
     width: 80%;
     opacity: 0.4;
 }
 
 .hr-muted-full {
     margin-top: 2rem;
-    border-bottom: 1px solid var(--color-gold-one);
+    border-bottom: 1px solid var(--color-gold-two);
     width: 100%;
     opacity: 0.4;
 }
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 083ad36ae..16e2c1d55 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -4,7 +4,7 @@
 
 .item-cost-custom-price {
     background-color: var(--background-primary);
-    border: var(--color-gold-one) 2px solid;
+    border: var(--color-gold-two) 2px solid;
     color: var(--color-gold-one);
     padding: 4px;
     width: 5em;
diff --git a/src/components/item-image/index.css b/src/components/item-image/index.css
index 58a8fb3f0..3aade9ccf 100644
--- a/src/components/item-image/index.css
+++ b/src/components/item-image/index.css
@@ -1,5 +1,5 @@
 .item-image-mask {
-    background: linear-gradient(to left, var(--color-gold-one) 20%, var(--color-gold-one) 40%, var(--color-gold-one) 60%, var(--color-gold-one) 80%);
+    background: linear-gradient(to left, var(--color-gold-two) 20%, var(--color-gold-one) 40%, var(--color-gold-one) 60%, var(--color-gold-two) 80%);
     background-size: 200% auto;
     width: 200px;
     height: 200px;
diff --git a/src/components/item-search/index.css b/src/components/item-search/index.css
index a81894e6a..86fba8768 100644
--- a/src/components/item-search/index.css
+++ b/src/components/item-search/index.css
@@ -42,7 +42,7 @@
 
 @media screen and (min-width: 800px) {
     .search-tip-wrapper {
-        border: 2px solid var(--color-gold-one);
+        border: 2px solid var(--color-gold-two);
         display: inline-flex;
     }
 }
diff --git a/src/components/loading-small/index.css b/src/components/loading-small/index.css
index b93bbe591..3a69ddefe 100644
--- a/src/components/loading-small/index.css
+++ b/src/components/loading-small/index.css
@@ -1,5 +1,5 @@
 .loading-wipe {
-    background: linear-gradient(to left, var(--color-gold-one) 20%, var(--color-gold-one) 40%, var(--color-gold-one) 60%, var(--color-gold-one) 80%);
+    background: linear-gradient(to left, var(--color-gold-one) 20%, var(--color-gold-two) 40%, var(--color-gold-two) 60%, var(--color-gold-one) 80%);
     background-size: 200% auto;
 
     color: var(--color-black);
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index f80cd4474..4c89c8e78 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -7,7 +7,7 @@
 .navigation {
     align-items: center;
     box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
     display: flex;
     font-size: 40px;
     gap: 10px;
@@ -18,7 +18,7 @@
 .overflow-menu a {
     border-radius: 0;
     border: 0;
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
     text-align: left;
     /* text-decoration: none; */
     white-space: nowrap;
@@ -72,7 +72,7 @@
 }
 
 .mobile-icon svg {
-    fill: var(--color-gold-one);
+    fill: var(--color-gold-two);
     height: 54px;
 }
 
@@ -239,7 +239,7 @@ li.mobile-only-link {
 }
 
 .submenu-items {
-    border-left: 1px solid var(--color-gold-one);
+    border-left: 1px solid var(--color-gold-two);
     border-right: 1px solid rgba(0, 0, 0, 0);
 }
 
@@ -312,7 +312,7 @@ nav.navigation ul.menu li:nth-last-child(1 of li.visible-menu-item):not(:nth-las
 }
 
 .MuiPopover-root svg.icon-with-text {
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
 }
 
 .MuiPopover-root .overflow-hidden {
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index 985ea50d0..f8fcb6b7c 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -27,8 +27,8 @@
 
 .reward-custom-price {
     background-color: var(--background-primary);
-    border: var(--color-gold-one) 2px solid;
-    color: var(--color-gold-one);
+    border: var(--color-gold-two) 2px solid;
+    color: var(--color-gold-two);
     padding: 4px;
     width: 5em;
 }
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 8d2ce114b..2800da779 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -15,7 +15,7 @@
 .station-skill-trader-setting-wrapper .select__control {
     color: var(--border-primary);
     background-color: var(--background-primary);
-    border-color: var(--color-gold-one);
+    border-color: var(--color-gold-two);
 }
 
 .station-skill-trader-setting-wrapper .select__single-value {
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index f04025107..6212dd0b8 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -11,7 +11,7 @@
 .boss-information-wrapper {
     display: flex;
     background-color: rgba(var(--color-black-rgb), 0.1);
-    border: 1px solid rgba(var(--color-gold-one-rgb), 0.7);
+    border: 1px solid rgba(var(--color-gold-two-rgb), 0.7);
     margin-bottom: 50px;
     box-shadow: 0 0 5px 3px rgba(var(--color-white-rgb), 0.034);
     overflow: hidden;
@@ -19,7 +19,7 @@
 }
 
 .boss-icon-cont {
-    border-left: 1px solid var(--color-gold-one);
+    border-left: 1px solid var(--color-gold-two);
     background: var(--background-primary);
     display: flex;
     min-width: 350px;
@@ -61,7 +61,7 @@
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
     align-items: center;
     justify-content: space-between;
     cursor: default;
diff --git a/src/pages/item/index.css b/src/pages/item/index.css
index 1fbb59c78..6cde88b2c 100644
--- a/src/pages/item/index.css
+++ b/src/pages/item/index.css
@@ -121,7 +121,7 @@
 }
 
 .best-profit img {
-    outline: var(--color-gold-one) solid 1px;
+    outline: var(--color-gold-two) solid 1px;
     outline-offset: -1px;
 }
 
@@ -131,7 +131,7 @@
 
 .price-wrapper.locked,
 .best-profit .price-wrapper.locked {
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
 }
 
 .text-and-image-information-wrapper.price-info-wrapper {
diff --git a/src/pages/items/index.css b/src/pages/items/index.css
index 31971b21f..aece54cdd 100644
--- a/src/pages/items/index.css
+++ b/src/pages/items/index.css
@@ -18,5 +18,5 @@
 }
 
 .items-list-wrapper img:hover {
-    outline: 2px solid var(--color-gold-one);
+    outline: 2px solid var(--color-gold-two);
 }
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 38903f7fd..8ec7526f9 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -19,7 +19,7 @@
 }
 
 .leaflet-popup-content-wrapper a {
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
 }
 
 /* leaflet-control-coordinates */
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 6b180d3e1..909cc560f 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -5,7 +5,7 @@
     margin-bottom: 50px;
 }
 .nav-maps .item {
-    border: 1px solid var(--color-gold-one);
+    border: 1px solid var(--color-gold-two);
     display: flex;
     flex-basis: max-content;
     min-width: 200px;
@@ -82,7 +82,7 @@
     transition: all .2s;
 }
 .map-block .map-wrapper:hover h3 {
-    color: var(--color-gold-one);
+    color: var(--color-gold-two);
 }
 
 .map-block .map-wrapper a {
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index d6ee3b6c3..7f7d8d5a4 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -1,11 +1,11 @@
 .search-button {
-    padding: .2rem;
-    border-radius: 4px;
+  padding: .2rem;
+  border-radius: 4px;
 }
 
 .search-button:disabled {
-    background-color: var(--color-gold-one);
-    color: var(--color-gray);
+  background-color: var(--color-gold-two);
+  color: var(--color-gray);
 }
 
 .search-controls {
@@ -34,7 +34,7 @@
 .game-mode .select__control {
     color: var(--color-gray);
     background-color: var(--background-primary);
-    border-color: var(--color-gold-one);
+    border-color: var(--color-gold-two);
 }
 
 .game-mode .select__single-value {
diff --git a/src/pages/quest/index.css b/src/pages/quest/index.css
index 9944bfd17..3ad426561 100644
--- a/src/pages/quest/index.css
+++ b/src/pages/quest/index.css
@@ -17,7 +17,7 @@ ul.quest-item-list li {
 }
 
 .hover-item-name {
-    color: var(--color-gold-one)
+    color: var(--color-gold-two)
 }
 
 
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index 8166c9907..c145d44ab 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -28,7 +28,7 @@
 .language-toggle-wrapper .select__control, .game-mode .select__control {
     color: var(--border-primary);
     background-color: var(--background-primary);
-    border-color: var(--color-gold-one);
+    border-color: var(--color-gold-two);
 }
 
 .language-toggle-wrapper .select__single-value, .game-mode .select__single-value {
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index 3e8c4caf5..eedba6877 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -101,7 +101,7 @@
 }
 
 .load-more-button:hover {
-    background-color: var(--color-gold-one);
+    background-color: var(--color-gold-two);
     color: var(--color-white);
     cursor: pointer;
   }
diff --git a/src/pages/wipe-length/index.css b/src/pages/wipe-length/index.css
index 54678c0fa..0ed3e30f8 100644
--- a/src/pages/wipe-length/index.css
+++ b/src/pages/wipe-length/index.css
@@ -17,5 +17,5 @@
 .wipe-length-bar {
     height: 10px;
     border-radius: 10px;
-    background-color: var(--color-gold-one);
+    background-color: var(--color-gold-two);
 }

From 2e7a235e14d0f1c2ebdcf151232a64cae051f95c Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 18:41:50 +0000
Subject: [PATCH 22/37] - cont JS work

---
 src/App.js                          | 1 +
 src/colors.js                       | 9 ++-------
 src/components/canvas-grid/index.js | 3 +--
 src/components/item-image/index.js  | 2 +-
 src/index.js                        | 5 +++--
 5 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index a804e2381..b2ced0754 100644
--- a/src/App.js
+++ b/src/App.js
@@ -7,6 +7,7 @@ import CookieConsent from "react-cookie-consent";
 import { ErrorBoundary } from "react-error-boundary";
 
 import './App.css';
+
 import i18n from './i18n.js';
 import loadPolyfills from './modules/polyfills.js';
 
diff --git a/src/colors.js b/src/colors.js
index 211784105..b4ec9f5ce 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -1,10 +1,7 @@
-// src/colors.js
-
-
 // These colors should  always be the same as /app.css :root color vars.
 // They are static, since color changes/additions are not likely to happen, 
 // and dynamicly "getting" them on the client feels like a waste of resources.
-const colors = {
+const globalColors = {
   black: '#000',
   blackRgb: '0,0,0',
 
@@ -40,6 +37,4 @@ const colors = {
   */
 };
 
-window.colors = colors; // Add colors to the global `window` object
-
-export default colors;
\ No newline at end of file
+export default globalColors;
\ No newline at end of file
diff --git a/src/components/canvas-grid/index.js b/src/components/canvas-grid/index.js
index 355428a6f..57569f849 100644
--- a/src/components/canvas-grid/index.js
+++ b/src/components/canvas-grid/index.js
@@ -1,4 +1,3 @@
-import { colors } from '@mui/material';
 import { useRef, useEffect } from 'react';
 
 function CanvasGrid(props) {
@@ -49,7 +48,7 @@ function CanvasGrid(props) {
         const width = 20;
 
         ctx.beginPath();
-        ctx.fillStyle = colors.black; // outer border color
+        ctx.fillStyle = window.globalColors.black; // outer border color
         ctx.fillRect(startX, startY, horizontal * 20 + 2, vertical * 20 + 2);
 
         startX = startX + 1;
diff --git a/src/components/item-image/index.js b/src/components/item-image/index.js
index 6f2840efa..b12204018 100644
--- a/src/components/item-image/index.js
+++ b/src/components/item-image/index.js
@@ -267,7 +267,7 @@ function ItemImage({
             cursor: 'default',
             color: '#a4aeb4',
             fontWeight: 'bold',
-            textShadow: '1px 1px 0 '+ colors.black + ', -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000',
+            textShadow: '1px 1px 0 '+ window.globalColors.black + ', -1px -1px 0 '+ window.globalColors.black + ', 1px -1px 0 '+ window.globalColors.black + ', -1px 1px 0 '+ window.globalColors.black,
             fontSize: `${textSize}px`,
             textAlign: 'right',
         };
diff --git a/src/index.js b/src/index.js
index d177c8267..819cee1b6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,16 +4,17 @@ import ReactDOM from 'react-dom/client';
 // import { BrowserTracing } from '@sentry/tracing';
 import App from './App.js';
 import store from './store.js';
-import colors from './colors.js';
 import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import ScrollToTop from './components/scroll-to-top/index.js';
 
-
+import globalColors from './colors.js';
 const queryClient = new QueryClient();
 
 
+window.globalColors = globalColors
+
 // Uncomment to enable Sentry
 // if (
 //     window.location.hostname !== 'localhost' &&

From 0c3ae26911947e5f8095f64fccd2554388c8c3fd Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 18:45:31 +0000
Subject: [PATCH 23/37] - js continue

---
 src/colors.js                  | 4 ++--
 src/components/filter/index.js | 8 ++++----
 src/pages/control/index.js     | 8 ++++----
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/colors.js b/src/colors.js
index b4ec9f5ce..837101014 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -20,9 +20,9 @@ const globalColors = {
   colorGoldTwo: '#9a8866',
   colorGoldTwoRgba: '154,136,102',
 
+  colorBackgroundPrimary: '#2d2d2f',
+  colorbackgroundPrimaryRgb: '45,45,47',
   /*
-  --background-primary: #2d2d2f;
-    --background-primary-rgb: 45,45,47;
   --border-primary: #1b1919;
 
   --color-action-positive: #00a700;
diff --git a/src/components/filter/index.js b/src/components/filter/index.js
index f3d663658..036471f9a 100644
--- a/src/components/filter/index.js
+++ b/src/components/filter/index.js
@@ -175,13 +175,13 @@ const selectFilterStyle = {
     }),
     menu: (provided) => ({
         ...provided,
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
         border: '2px solid #9a8866',
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
         border: '2px solid #9a8866',
         borderRadius: 0,
     }),
@@ -193,12 +193,12 @@ const selectFilterStyle = {
     option: (provided) => ({
         ...provided,
         color: '#E5E5E5',
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
 
         borderRadius: 0,
         '&:hover': {
             backgroundColor: '#9a8866',
-            color: '#2d2d2f',
+            color: window.globalColors.backgroundPrimary,
             fontweight: 700,
         },
     }),
diff --git a/src/pages/control/index.js b/src/pages/control/index.js
index 2dc1d2355..673777b65 100644
--- a/src/pages/control/index.js
+++ b/src/pages/control/index.js
@@ -19,13 +19,13 @@ const ammoTypes = caliberArrayWithSplit();
 const selectFilterStyle = {
     menu: (provided) => ({
         ...provided,
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
         border: '2px solid #9a8866',
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
         border: '2px solid #9a8866',
         borderRadius: 0,
     }),
@@ -37,12 +37,12 @@ const selectFilterStyle = {
     option: (provided) => ({
         ...provided,
         color: '#E5E5E5',
-        backgroundColor: '#2d2d2f',
+        backgroundColor: window.globalColors.backgroundPrimary,
 
         borderRadius: 0,
         '&:hover': {
             backgroundColor: '#9a8866',
-            color: '#2d2d2f',
+            color: window.globalColors.backgroundPrimary,
             fontweight: 700,
         },
     }),

From f0e5b80d31dec67bf1244433b8ff334023530a67 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 18:48:47 +0000
Subject: [PATCH 24/37] - Add remaining color var's to colors.js

---
 src/colors.js | 26 ++++++++++++--------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/colors.js b/src/colors.js
index 837101014..a5b4f4e74 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -21,20 +21,18 @@ const globalColors = {
   colorGoldTwoRgba: '154,136,102',
 
   colorBackgroundPrimary: '#2d2d2f',
-  colorbackgroundPrimaryRgb: '45,45,47',
-  /*
-  --border-primary: #1b1919;
-
-  --color-action-positive: #00a700;
-  --color-action-warning : #ca8a00;
-  --color-action-negative: #cd1e2f;
-
-  --color-rarity-rare: #8c6edf;
-  --color-rarity-legendary: #ffe084;
-
-  --color-muted-green: #6a9a66;
-  --color-muted-red: #9a6666;
-  */
+  colorBackgroundPrimaryRgb: '45,45,47',
+  colorBorderPrimary: '#1b1919',
+  
+  colorActionPositive: '#00a700',
+  colorActionWarning: '#ca8a00',
+  colorActionNegative: '#cd1e2f',
+
+  colorRarityRare: '#8c6edf',
+  colorRarityLegendary: '#ffe084',
+
+  colorMutedGreen:'#6a9a66',
+  colorMutedRed: '#9a6666'
 };
 
 export default globalColors;
\ No newline at end of file

From 3e8e888c6c54d8e90bb8c13f180b1ed9b00074ba Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 19:01:14 +0000
Subject: [PATCH 25/37] - continue js var work

---
 src/components/api-metrics-graph/index.js | 2 +-
 src/components/filter/index.js            | 8 ++++----
 src/components/price-graph/index.js       | 4 ++--
 src/pages/control/index.js                | 6 +++---
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/api-metrics-graph/index.js b/src/components/api-metrics-graph/index.js
index a70d316a6..f5da15648 100644
--- a/src/components/api-metrics-graph/index.js
+++ b/src/components/api-metrics-graph/index.js
@@ -87,7 +87,7 @@ function ApiMetricsGraph({ graph }) {
                         }}
                         style={{
                             data: {
-                                stroke: '#3b9c3a',
+                                stroke: window.globalColors.colorActionPositive,
                                 strokeWidth: 4,
                             },
                             parent: { border: '1px solid #ccc' },
diff --git a/src/components/filter/index.js b/src/components/filter/index.js
index 036471f9a..e4940e2f0 100644
--- a/src/components/filter/index.js
+++ b/src/components/filter/index.js
@@ -176,13 +176,13 @@ const selectFilterStyle = {
     menu: (provided) => ({
         ...provided,
         backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid #9a8866',
+        border: '2px solid ' + window.globalColors.colorGoldTwo,
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
         backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid #9a8866',
+        border: '2px solid ' + window.globalColors.colorGoldTwo,
         borderRadius: 0,
     }),
     menuList: (provided) => ({
@@ -197,7 +197,7 @@ const selectFilterStyle = {
 
         borderRadius: 0,
         '&:hover': {
-            backgroundColor: '#9a8866',
+            backgroundColor: window.globalColors.colorGoldTwo,
             color: window.globalColors.backgroundPrimary,
             fontweight: 700,
         },
@@ -436,7 +436,7 @@ function Filter({ center, children, fullWidth }) {
             ref={toggleButton}
         >
             <Fab
-                style={{ backgroundColor: '#9a8866' }}
+                style={{ backgroundColor: window.globalColors.colorGoldTwo }}
                 aria-label="add"
                 key="filter-toggle-icon"
                 onClick={(e) => setShowFilter(!showFilter)}
diff --git a/src/components/price-graph/index.js b/src/components/price-graph/index.js
index a4d3af9de..c56236170 100644
--- a/src/components/price-graph/index.js
+++ b/src/components/price-graph/index.js
@@ -162,7 +162,7 @@ function PriceGraph({ item, itemId }) {
                     }}
                     style={{
                         data: {
-                            stroke: filteredAvgDown ? '#c43a31' : '#3b9c3a',
+                            stroke: filteredAvgDown ? window.globalColors.colorActionNegative : window.globalColors.colorActionPositive,
                         },
                         parent: { border: '1px solid #ccc' },
                     }}
@@ -181,7 +181,7 @@ function PriceGraph({ item, itemId }) {
                     }}
                     style={{
                         data: {
-                            stroke: filteredMinDown ? '#c43a31' : '#3b9c3a',
+                            stroke: filteredMinDown ? window.globalColors.colorActionNegative : window.globalColors.colorActionPositive,
                             strokeDasharray: 5
                         },
                         parent: { border: '1px solid #ccc' },
diff --git a/src/pages/control/index.js b/src/pages/control/index.js
index 673777b65..8262c1421 100644
--- a/src/pages/control/index.js
+++ b/src/pages/control/index.js
@@ -20,13 +20,13 @@ const selectFilterStyle = {
     menu: (provided) => ({
         ...provided,
         backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid #9a8866',
+        border: '2px solid ' + window.globalColors.colorGoldTwo,
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
         backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid #9a8866',
+        border: '2px solid ' + window.globalColors.colorGoldTwo,
         borderRadius: 0,
     }),
     menuList: (provided) => ({
@@ -41,7 +41,7 @@ const selectFilterStyle = {
 
         borderRadius: 0,
         '&:hover': {
-            backgroundColor: '#9a8866',
+            backgroundColor: window.globalColors.colorGoldTwo,
             color: window.globalColors.backgroundPrimary,
             fontweight: 700,
         },

From 34c219184778ac6cdface7cd1ffc5643044f34f2 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 19:30:51 +0000
Subject: [PATCH 26/37] - JS, I think I've got all of the variables in JS done
 now

---
 src/App.css                         |  5 +++++
 src/colors.js                       |  1 +
 src/components/filter/index.js      | 10 +++++-----
 src/components/menu/alert-config.js |  8 ++++----
 src/pages/control/index.js          | 10 +++++-----
 5 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/App.css b/src/App.css
index 5b775074b..cccb93328 100644
--- a/src/App.css
+++ b/src/App.css
@@ -5,6 +5,7 @@
   --color-white: #fff;
     --color-white-rgb: 255,255,255;
 
+  --color-yellow-light: #E0DFD6;
   --color-blue-light: #0292c0;
   --color-gray: #424242;
   --color-gray-light : #636363;
@@ -32,8 +33,12 @@
   --color-muted-green: #6a9a66;
   --color-muted-red: #9a6666;
 
+
+
   /* This is to ensure maps do not clip. Please do not remove */
     --display-height: auto;
+
+  
 }
 
 
diff --git a/src/colors.js b/src/colors.js
index a5b4f4e74..098f538f8 100644
--- a/src/colors.js
+++ b/src/colors.js
@@ -8,6 +8,7 @@ const globalColors = {
   colorWhite: '#fff',
   colorWhiteRgb: '255,255,255',
 
+  colorYellowLight: '#E0DFD6',
   colorBlueLight: '#0292c0',
   colorGray: '#424242',
   colorGrayLight: '#636363',
diff --git a/src/components/filter/index.js b/src/components/filter/index.js
index e4940e2f0..8cfef4040 100644
--- a/src/components/filter/index.js
+++ b/src/components/filter/index.js
@@ -170,7 +170,7 @@ function ToggleFilter({ label, onChange, checked, tooltipContent, disabled }) {
 const selectFilterStyle = {
     multiValueLabel: (provided) => ({
         ...provided,
-        color: '#E0DFD6',
+        color: window.globalColors.colorYellowLight,
         padding: '0.1rem'
     }),
     menu: (provided) => ({
@@ -187,12 +187,12 @@ const selectFilterStyle = {
     }),
     menuList: (provided) => ({
         ...provided,
-        color: '#E5E5E5',
+        color: window.globalColors.colorYellowLight,
         borderRadius: 0,
     }),
     option: (provided) => ({
         ...provided,
-        color: '#E5E5E5',
+        color: window.globalColors.colorWhite,
         backgroundColor: window.globalColors.backgroundPrimary,
 
         borderRadius: 0,
@@ -204,12 +204,12 @@ const selectFilterStyle = {
     }),
     singleValue: (provided) => ({
         ...provided,
-        color: '#c7c5b3',
+        color: window.globalColors.colorGoldOne,
     }),
     multiValue: (provided) => ({
         ...provided,
         backgroundColor: '#5F553B',
-        color: '#E5E5E5',
+        color: window.globalColors.colorWhite,
     }),
 };
 
diff --git a/src/components/menu/alert-config.js b/src/components/menu/alert-config.js
index 590b949d7..371b1f36f 100644
--- a/src/components/menu/alert-config.js
+++ b/src/components/menu/alert-config.js
@@ -4,10 +4,10 @@ const alertConfig = {
 
     // valid alert colors
     alertColors: {
-        error: '#cd1e2f',
-        info: '#0292c0',
-        success: '#00a700',
-        warning: '#ca8a00',
+        error: window.globalColors.colorActionNegative,
+        info: window.globalColors.colorBlueLight,
+        success: window.globalColors.colorActionPositive,
+        warning: window.globalColors.colorActionWarning,
     },
 
     // set this variable to the severity of the alert banner
diff --git a/src/pages/control/index.js b/src/pages/control/index.js
index 8262c1421..f49aca2b8 100644
--- a/src/pages/control/index.js
+++ b/src/pages/control/index.js
@@ -31,12 +31,12 @@ const selectFilterStyle = {
     }),
     menuList: (provided) => ({
         ...provided,
-        color: '#E5E5E5',
+        color: window.globalColors.colorYellowLight,
         borderRadius: 0,
     }),
     option: (provided) => ({
         ...provided,
-        color: '#E5E5E5',
+        color: window.globalColors.colorYellowLight,
         backgroundColor: window.globalColors.backgroundPrimary,
 
         borderRadius: 0,
@@ -48,12 +48,12 @@ const selectFilterStyle = {
     }),
     singleValue: (provided) => ({
         ...provided,
-        color: '#c7c5b3',
+        color: window.globalColors.colorGoldOne,
     }),
     multiValue: (provided) => ({
         ...provided,
-        backgroundColor: '#E5E5E5',
-        color: '#E5E5E5',
+        backgroundColor: window.globalColors.colorWhite,
+        color: window.globalColors.colorWhite,
     }),
 };
 

From 00f4ec51b0c5135a079de02cf7927f42df7961fb Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 19:35:35 +0000
Subject: [PATCH 27/37] Fix: alert config unable to read window.globals,
 reverted

---
 src/components/menu/alert-config.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/menu/alert-config.js b/src/components/menu/alert-config.js
index 371b1f36f..494a8ee5b 100644
--- a/src/components/menu/alert-config.js
+++ b/src/components/menu/alert-config.js
@@ -4,10 +4,10 @@ const alertConfig = {
 
     // valid alert colors
     alertColors: {
-        error: window.globalColors.colorActionNegative,
-        info: window.globalColors.colorBlueLight,
-        success: window.globalColors.colorActionPositive,
-        warning: window.globalColors.colorActionWarning,
+      error: '#cd1e2f',
+      info: '#0292c0',
+      success: '#00a700',
+      warning: '#ca8a00',
     },
 
     // set this variable to the severity of the alert banner

From 732430f8815992a19275a1fcf23c18fa31e1a231 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 20:23:38 +0000
Subject: [PATCH 28/37] - Ref , using var's for rgb, as suggested by fs-c

---
 src/App.css | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/App.css b/src/App.css
index cccb93328..fa1f45b5e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,9 +1,9 @@
 /* Variables start */
 :root {
   --color-black: #000;
-    --color-black-rgb: 0,0,0;
+    --color-black-rgb: rgb(var(--color-black));
   --color-white: #fff;
-    --color-white-rgb: 255,255,255;
+    --color-white-rgb: rgb(var(--color-white-rgb));
 
   --color-yellow-light: #E0DFD6;
   --color-blue-light: #0292c0;
@@ -11,13 +11,13 @@
   --color-gray-light : #636363;
 
   --color-gunmetal: #383945;
-  --color-gunmetal-rgb: 56,57,69;
+  --color-gunmetal-rgb: rgb(var(--color-gunmetal));
 
 
   --color-gold-one: #c7c5b3;
-  --color-gold-one-rgba: 199,197,179;
+  --color-gold-one-rgb: rgb(var(--color-gold-one));
   --color-gold-two: #9a8866;
-  --color-gold-two-rgb: 154,136,102;
+  --color-gold-two-rgb: rgb(var(--color-gold-two));
 
   --background-primary: #2d2d2f;
     --background-primary-rgb: 45,45,47;
@@ -36,9 +36,7 @@
 
 
   /* This is to ensure maps do not clip. Please do not remove */
-    --display-height: auto;
-
-  
+    --display-height: auto;  
 }
 
 
@@ -293,11 +291,11 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 }
 
 .rc-slider-mark-text {
-    color: rgba(var(--color-gold-one-rgba), 0.8) !important;
+    color: rgba(var(--color-gold-one-rgb), 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: rgba(var(--color-gold-one-rgba), 1) !important;
+    color: rgba(var(--color-gold-one-rgb), 1) !important;
 }
 
 /* Global reuseable styles, specific to the Tarkov.Dev style */

From b7c2c82117225e9aa0df0429a7ed2647bcac750c Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Tue, 7 Jan 2025 20:34:57 +0000
Subject: [PATCH 29/37] - Refactor, Var names in App.css follow
 color-name-attribute, suggested via fs-c

---
 src/App.css                                   | 42 ++++++++-----------
 src/components/data-table/index.css           | 14 +++----
 src/components/filter/index.css               | 10 ++---
 src/components/item-cost/index.css            |  6 +--
 src/components/item-grid/index.css            |  4 +-
 src/components/item-search/index.css          |  2 +-
 src/components/items-for-hideout/index.css    | 12 +++---
 src/components/items-summary-table/index.css  |  2 +-
 src/components/menu/index.css                 |  6 +--
 src/components/property-list/index.css        |  4 +-
 src/components/quest-items-cell/index.css     |  2 +-
 src/components/quest-table/index.css          |  2 +-
 src/components/reward-cell/index.css          |  6 +--
 src/components/reward-image/index.css         |  2 +-
 src/components/server-status/index.css        |  6 +--
 .../station-skill-trader-setting/index.css    |  4 +-
 src/components/trader-image/index.css         |  4 +-
 src/components/value-cell/index.css           |  4 +-
 src/pages/achievements/index.css              |  4 +-
 src/pages/api-users/index.css                 |  4 +-
 src/pages/boss/index.css                      |  2 +-
 src/pages/converter/index.css                 |  2 +-
 src/pages/map/index.css                       |  6 +--
 src/pages/player/index.css                    |  8 ++--
 src/pages/players/index.css                   |  4 +-
 src/pages/settings/index.css                  |  4 +-
 src/pages/start/index.css                     |  4 +-
 27 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/src/App.css b/src/App.css
index fa1f45b5e..3b71c83e9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,37 +2,31 @@
 :root {
   --color-black: #000;
     --color-black-rgb: rgb(var(--color-black));
+  --color-black-light: #1b1919;
   --color-white: #fff;
     --color-white-rgb: rgb(var(--color-white-rgb));
 
-  --color-yellow-light: #E0DFD6;
-  --color-blue-light: #0292c0;
-  --color-gray: #424242;
-  --color-gray-light : #636363;
-
   --color-gunmetal: #383945;
-  --color-gunmetal-rgb: rgb(var(--color-gunmetal));
-
+    --color-gunmetal-rgb: rgb(var(--color-gunmetal));
+  --color-gunmetal-dark: #2d2d2f;
+    --color-gunmetal-dark-rgb: rgb(var(--color-gunmetal-dark));
 
   --color-gold-one: #c7c5b3;
   --color-gold-one-rgb: rgb(var(--color-gold-one));
   --color-gold-two: #9a8866;
   --color-gold-two-rgb: rgb(var(--color-gold-two));
 
-  --background-primary: #2d2d2f;
-    --background-primary-rgb: 45,45,47;
-  --border-primary: #1b1919;
-
-  --color-action-positive: #00a700;
-  --color-action-warning : #ca8a00;
-  --color-action-negative: #cd1e2f;
-
-  --color-rarity-rare: #8c6edf;
-  --color-rarity-legendary: #ffe084;
-
-  --color-muted-green: #6a9a66;
-  --color-muted-red: #9a6666;
-
+  --color-yellow-light: #E0DFD6;
+  --color-blue-light: #0292c0;
+  --color-gray: #424242;
+  --color-gray-light : #636363;
+  --color-green: #00a700;
+  --color-green-light: #6a9a66;
+  --color-orange : #ca8a00;
+  --color-red: #cd1e2f;
+  --color-red-light: #9a6666;
+  --color-purple: #8c6edf;
+  --color-yellow: #ffe084;
 
 
   /* This is to ensure maps do not clip. Please do not remove */
@@ -47,7 +41,7 @@
 }
 
 body {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     background-image: url('images/background-1.png');
     color: var(--color-gold-one);
     margin: 0;
@@ -99,7 +93,7 @@ input[type='number'] {
     padding: 12px;
     max-height: 40px;
     border: 2px solid var(--color-gold-two);
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     color: var(--color-gold-one);
 }
 
@@ -247,7 +241,7 @@ cite {
 }
 
 div.tippy-box {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     color: var(--color-gold-one);
     border-color: var(--color-gray);
     border-radius: 4px;
diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index dd93c7a05..3c7d5d7c6 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -29,7 +29,7 @@
 }
 
 .data-table thead tr:first-child {
-    border-top: 4px solid var(--border-primary);
+    border-top: 4px solid var(--color-black-light);
 }
 
 .data-table tbody tr.last-row {
@@ -42,18 +42,18 @@
 
 .data-cell, .data-table tfoot th {
     padding: 5px 15px;
-    border-top: 4px solid var(--border-primary);
-    border-bottom: 4px solid var(--border-primary);
+    border-top: 4px solid var(--color-black-light);
+    border-bottom: 4px solid var(--color-black-light);
 }
 
 th:first-child,
 td.data-cell:first-child {
-    border-left: 4px solid var(--border-primary);
+    border-left: 4px solid var(--color-black-light);
 }
 
 th:last-child,
 td.data-cell:last-child {
-    border-right: 4px solid var(--border-primary);
+    border-right: 4px solid var(--color-black-light);
 }
 
 .data-table .center-content {
@@ -70,11 +70,11 @@ td.data-cell:last-child {
 }
 
 .data-table tr td {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
 }
 
 .data-table tbody tr.expanded td {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
 }
 
 .arrow-icon,
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index 2e14b9632..96508894a 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -19,7 +19,7 @@
 }
 
 .filter-content-wrapper {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     display: flex;
     flex-grow: 1;
     flex-wrap: wrap;
@@ -100,7 +100,7 @@
 
 .basic-multi-select {
     min-width: 110px;
-    color: var(--background-primary);
+    color: var(--color-gunmetal-dark);
 }
 
 .rc-slider {
@@ -108,7 +108,7 @@
 }
 
 .button-group-wrapper {
-    border: 1px solid var(--border-primary);
+    border: 1px solid var(--color-black-light);
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
@@ -117,7 +117,7 @@
 
 .button-group-button {
     border-radius: 0;
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     color: var(--color-gold-one);
     height: 40px;
     width: 40px;
@@ -136,7 +136,7 @@
 
 .button-group-button:hover,
 .button-group-button.selected {
-    background-color: var(--border-primary);
+    background-color: var(--color-black-light);
     cursor: pointer;
 }
 
diff --git a/src/components/item-cost/index.css b/src/components/item-cost/index.css
index 16e2c1d55..a49b29907 100644
--- a/src/components/item-cost/index.css
+++ b/src/components/item-cost/index.css
@@ -3,7 +3,7 @@
 }
 
 .item-cost-custom-price {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     border: var(--color-gold-two) 2px solid;
     color: var(--color-gold-one);
     padding: 4px;
@@ -15,11 +15,11 @@
 }
 
 .item-cost-muted-green {
-    color: var(--color-muted-green);
+    color: var(--color-green-light);
 }
 
 .item-cost-muted-red {
-    color: var(--color-muted-red);
+    color: var(--color-red-light);
 }
 
 .item-cost-barter-icon {
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index 7d0594d32..24fbdd990 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -1,6 +1,6 @@
 .item-group-wrapper {
-    border: 1px solid var(--border-primary);
-    background-color: var(--background-primary);
+    border: 1px solid var(--color-black-light);
+    background-color: var(--color-gunmetal-dark);
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 10px;
diff --git a/src/components/item-search/index.css b/src/components/item-search/index.css
index 86fba8768..2295b05a5 100644
--- a/src/components/item-search/index.css
+++ b/src/components/item-search/index.css
@@ -11,7 +11,7 @@
 }
 
 .item-list-wrapper {
-    background-color: var(--border-primary);
+    background-color: var(--color-black-light);
     position: absolute;
     top: 56px;
     width: 100%;
diff --git a/src/components/items-for-hideout/index.css b/src/components/items-for-hideout/index.css
index 8f129b816..52072a8b5 100644
--- a/src/components/items-for-hideout/index.css
+++ b/src/components/items-for-hideout/index.css
@@ -14,14 +14,14 @@
 }
 
 .hideout-item-list-row {
-    border-left: 4px solid var(--border-primary);
-    border-right: 4px solid var(--border-primary);
+    border-left: 4px solid var(--color-black-light);
+    border-right: 4px solid var(--color-black-light);
 }
 
 .hideout-item-list-column {
-    background-color: var(--background-primary);
-    border-top: 4px solid var(--border-primary);
-    border-bottom: 4px solid var(--border-primary);
+    background-color: var(--color-gunmetal-dark);
+    border-top: 4px solid var(--color-black-light);
+    border-bottom: 4px solid var(--color-black-light);
     padding: 5px 15px;
 }
 
@@ -61,5 +61,5 @@
 }
 
 .hideout-item-list thead tr:first-child {
-    border-top: 4px solid var(--border-primary);
+    border-top: 4px solid var(--color-black-light);
 }
diff --git a/src/components/items-summary-table/index.css b/src/components/items-summary-table/index.css
index 42bc15849..6e1bdba34 100644
--- a/src/components/items-summary-table/index.css
+++ b/src/components/items-summary-table/index.css
@@ -3,5 +3,5 @@
 }
 
 .trader-station-level-unmet {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 4c89c8e78..15a22768f 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -1,7 +1,7 @@
 .menu,
 .navigation,
 .overflow-menu .MuiPaper-root ul {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
 }
 
 .navigation {
@@ -102,7 +102,7 @@
 }
 
 .menu .submenu-wrapper ul {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     border-bottom-left-radius: 3px;
     border-bottom-right-radius: 3px;
     display: none;
@@ -244,7 +244,7 @@ li.mobile-only-link {
 }
 
 .overflow-menu .MuiPaper-root {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
 }
 
 .overflow-menu ul.MuiList-root {
diff --git a/src/components/property-list/index.css b/src/components/property-list/index.css
index f013c9c6b..2a9fd6fbf 100644
--- a/src/components/property-list/index.css
+++ b/src/components/property-list/index.css
@@ -11,8 +11,8 @@
     align-items: center;
     align-items: flex-start;
     flex-direction: column;
-    background-color: var(--background-primary);
-    border: 1px solid var(--border-primary);
+    background-color: var(--color-gunmetal-dark);
+    border: 1px solid var(--color-black-light);
     flex-basis: calc(50% - 2.5px);
     padding: 10px 20px;
     flex: 1 auto;
diff --git a/src/components/quest-items-cell/index.css b/src/components/quest-items-cell/index.css
index cafc75086..68c3b983f 100644
--- a/src/components/quest-items-cell/index.css
+++ b/src/components/quest-items-cell/index.css
@@ -21,5 +21,5 @@
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
diff --git a/src/components/quest-table/index.css b/src/components/quest-table/index.css
index dc5066f23..e6c4621bb 100644
--- a/src/components/quest-table/index.css
+++ b/src/components/quest-table/index.css
@@ -31,7 +31,7 @@
 }
 
 .found-in-raid-wrapper.find-in-raid {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
 
 .quest-link-wrapper {
diff --git a/src/components/reward-cell/index.css b/src/components/reward-cell/index.css
index f8fcb6b7c..2cb3a1820 100644
--- a/src/components/reward-cell/index.css
+++ b/src/components/reward-cell/index.css
@@ -26,7 +26,7 @@
 }
 
 .reward-custom-price {
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     border: var(--color-gold-two) 2px solid;
     color: var(--color-gold-two);
     padding: 4px;
@@ -34,11 +34,11 @@
 }
 
 .reward-muted-green {
-    color: var(--color-muted-green);
+    color: var(--color-green-light);
 }
 
 .reward-muted-red {
-    color: var(--color-muted-red);
+    color: var(--color-red-light);
 }
 
 @media screen and (min-width: 800px) {
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 69893c21d..2a918e027 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -40,7 +40,7 @@
 }
 
 .reward-image-img-nonfunctional {
-    outline: 1px solid var(--color-action-negative);
+    outline: 1px solid var(--color-red);
     outline-offset: -1px;
 }
 
diff --git a/src/components/server-status/index.css b/src/components/server-status/index.css
index b3a15f616..1b6cbe9c4 100644
--- a/src/components/server-status/index.css
+++ b/src/components/server-status/index.css
@@ -15,7 +15,7 @@
 }
 
 .status-0 {
-    background-color: var(--color-action-positive);
+    background-color: var(--color-green);
 }
 
 .status-1 {
@@ -23,9 +23,9 @@
 }
 
 .status-2 {
-    background-color: var(--color-action-warning);
+    background-color: var(--color-orange);
 }
 
 .status-3 {
-    background-color: var(--color-action-negative);
+    background-color: var(--color-red);
 }
diff --git a/src/components/station-skill-trader-setting/index.css b/src/components/station-skill-trader-setting/index.css
index 2800da779..f8c486f98 100644
--- a/src/components/station-skill-trader-setting/index.css
+++ b/src/components/station-skill-trader-setting/index.css
@@ -13,8 +13,8 @@
 }
 
 .station-skill-trader-setting-wrapper .select__control {
-    color: var(--border-primary);
-    background-color: var(--background-primary);
+    color: var(--color-black-light);
+    background-color: var(--color-gunmetal-dark);
     border-color: var(--color-gold-two);
 }
 
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index 828cd7f0d..d3880959c 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -10,9 +10,9 @@
 }
 
 .positive-rep {
-    color: var(--color-action-positive);
+    color: var(--color-green);
 }
 
 .negative-rep {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
diff --git a/src/components/value-cell/index.css b/src/components/value-cell/index.css
index e56905943..ee8c3930e 100644
--- a/src/components/value-cell/index.css
+++ b/src/components/value-cell/index.css
@@ -1,7 +1,7 @@
 .craft-profit {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
 
 .craft-loss {
-    color: var(--color-action-positive);
+    color: var(--color-green);
 }
diff --git a/src/pages/achievements/index.css b/src/pages/achievements/index.css
index 986782ff2..4729202c0 100644
--- a/src/pages/achievements/index.css
+++ b/src/pages/achievements/index.css
@@ -1,7 +1,7 @@
 .rare {
-    color: var(--color-rarity-rare);
+    color: var(--color-purple);
 }
 
 .legendary {
-    color: var(--color-rarity-legendary);
+    color: var(--color-yellow);
 }
diff --git a/src/pages/api-users/index.css b/src/pages/api-users/index.css
index 2ec075a33..7b5e2f1bb 100644
--- a/src/pages/api-users/index.css
+++ b/src/pages/api-users/index.css
@@ -9,8 +9,8 @@
 
 .api-user-wrapper {
     align-items: center;
-    background-color: var(--background-primary);
-    border: 1px solid var(--border-primary);
+    background-color: var(--color-gunmetal-dark);
+    border: 1px solid var(--color-black-light);
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 10px;
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 6212dd0b8..41f38498b 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -20,7 +20,7 @@
 
 .boss-icon-cont {
     border-left: 1px solid var(--color-gold-two);
-    background: var(--background-primary);
+    background: var(--color-gunmetal-dark);
     display: flex;
     min-width: 350px;
     height: inherit;
diff --git a/src/pages/converter/index.css b/src/pages/converter/index.css
index c05da908e..78a81700d 100644
--- a/src/pages/converter/index.css
+++ b/src/pages/converter/index.css
@@ -18,5 +18,5 @@
 }
 
 .error {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
\ No newline at end of file
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 8ec7526f9..6cc89b199 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -156,11 +156,11 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .extract-name.pmc {
-    color: var(--color-action-positive);
+    color: var(--color-green);
 }
 
 .extract-name.scav {
-    color: var(--color-action-warning);
+    color: var(--color-orange);
 }
 
 .extract-name.shared {
@@ -168,7 +168,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .extract-name.transit {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
 
 .poi-image, img.popup-item {
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 393f7c235..9bccc15ce 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -44,11 +44,11 @@ ul.favorite-item-list li {
 }
 
 .rare {
-    color: var(--color-rarity-rare);
+    color: var(--color-purple);
 }
 
 .legendary {
-    color: var(--color-rarity-legendary);
+    color: var(--color-yellow);
 }
 
 .banned, .not-banned {
@@ -56,11 +56,11 @@ ul.favorite-item-list li {
 }
 
 .banned {
-    color: var(--color-action-positive);
+    color: var(--color-green);
 }
 
 .not-banned {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
 
 .turnstile-widget {
diff --git a/src/pages/players/index.css b/src/pages/players/index.css
index 7f7d8d5a4..788f55a0b 100644
--- a/src/pages/players/index.css
+++ b/src/pages/players/index.css
@@ -22,7 +22,7 @@
 }
 
 .error {
-    color: var(--color-action-negative);
+    color: var(--color-red);
 }
 
 .name-results-list {
@@ -33,7 +33,7 @@
 
 .game-mode .select__control {
     color: var(--color-gray);
-    background-color: var(--background-primary);
+    background-color: var(--color-gunmetal-dark);
     border-color: var(--color-gold-two);
 }
 
diff --git a/src/pages/settings/index.css b/src/pages/settings/index.css
index c145d44ab..eeaf1dc6e 100644
--- a/src/pages/settings/index.css
+++ b/src/pages/settings/index.css
@@ -26,8 +26,8 @@
 }
 
 .language-toggle-wrapper .select__control, .game-mode .select__control {
-    color: var(--border-primary);
-    background-color: var(--background-primary);
+    color: var(--color-black-light);
+    background-color: var(--color-gunmetal-dark);
     border-color: var(--color-gold-two);
 }
 
diff --git a/src/pages/start/index.css b/src/pages/start/index.css
index eedba6877..55d00cf52 100644
--- a/src/pages/start/index.css
+++ b/src/pages/start/index.css
@@ -45,8 +45,8 @@
 }
 
 .start-section-wrapper {
-    background-color: var(--background-primary);
-    border: 4px solid var(--border-primary);
+    background-color: var(--color-gunmetal-dark);
+    border: 4px solid var(--color-black-light);
     padding: 10px;
     margin-top: 10px;
     margin-bottom: 10px;

From 7d125bb1282d96fc2ed9ca493639da639c153957 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Wed, 8 Jan 2025 11:59:12 +0000
Subject: [PATCH 30/37] - Remove colors.JS- completely forget in 2025 JS can
 ref css vars. Crazy.

---
 src/App.css                               | 10 +++---
 src/colors.js                             | 39 -----------------------
 src/components/api-metrics-graph/index.js |  2 +-
 src/components/canvas-grid/index.js       |  2 +-
 src/components/filter/index.js            | 26 +++++++--------
 src/components/item-image/index.js        |  4 +--
 src/components/price-graph/index.js       |  4 +--
 src/index.js                              |  4 ---
 src/pages/control/index.js                | 24 +++++++-------
 9 files changed, 36 insertions(+), 79 deletions(-)
 delete mode 100644 src/colors.js

diff --git a/src/App.css b/src/App.css
index 3b71c83e9..f69b00aca 100644
--- a/src/App.css
+++ b/src/App.css
@@ -16,18 +16,18 @@
   --color-gold-two: #9a8866;
   --color-gold-two-rgb: rgb(var(--color-gold-two));
 
-  --color-yellow-light: #E0DFD6;
+
   --color-blue-light: #0292c0;
   --color-gray: #424242;
-  --color-gray-light : #636363;
+    --color-gray-light : #636363;
   --color-green: #00a700;
-  --color-green-light: #6a9a66;
+   --color-green-light: #6a9a66;
   --color-orange : #ca8a00;
   --color-red: #cd1e2f;
-  --color-red-light: #9a6666;
+    --color-red-light: #9a6666;
   --color-purple: #8c6edf;
   --color-yellow: #ffe084;
-
+    --color-yellow-light: #E0DFD6;
 
   /* This is to ensure maps do not clip. Please do not remove */
     --display-height: auto;  
diff --git a/src/colors.js b/src/colors.js
deleted file mode 100644
index 098f538f8..000000000
--- a/src/colors.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// These colors should  always be the same as /app.css :root color vars.
-// They are static, since color changes/additions are not likely to happen, 
-// and dynamicly "getting" them on the client feels like a waste of resources.
-const globalColors = {
-  black: '#000',
-  blackRgb: '0,0,0',
-
-  colorWhite: '#fff',
-  colorWhiteRgb: '255,255,255',
-
-  colorYellowLight: '#E0DFD6',
-  colorBlueLight: '#0292c0',
-  colorGray: '#424242',
-  colorGrayLight: '#636363',
-
-  colorGunmetal: '#383945',
-  colorGunmetalRgb: '56,57,69',
-
-  colorGoldOne: '#c7c5b3',
-  colorGoldOneRgba: '199,197,179',
-  colorGoldTwo: '#9a8866',
-  colorGoldTwoRgba: '154,136,102',
-
-  colorBackgroundPrimary: '#2d2d2f',
-  colorBackgroundPrimaryRgb: '45,45,47',
-  colorBorderPrimary: '#1b1919',
-  
-  colorActionPositive: '#00a700',
-  colorActionWarning: '#ca8a00',
-  colorActionNegative: '#cd1e2f',
-
-  colorRarityRare: '#8c6edf',
-  colorRarityLegendary: '#ffe084',
-
-  colorMutedGreen:'#6a9a66',
-  colorMutedRed: '#9a6666'
-};
-
-export default globalColors;
\ No newline at end of file
diff --git a/src/components/api-metrics-graph/index.js b/src/components/api-metrics-graph/index.js
index f5da15648..c1bffd149 100644
--- a/src/components/api-metrics-graph/index.js
+++ b/src/components/api-metrics-graph/index.js
@@ -87,7 +87,7 @@ function ApiMetricsGraph({ graph }) {
                         }}
                         style={{
                             data: {
-                                stroke: window.globalColors.colorActionPositive,
+                                stroke: 'var(--color-green)',
                                 strokeWidth: 4,
                             },
                             parent: { border: '1px solid #ccc' },
diff --git a/src/components/canvas-grid/index.js b/src/components/canvas-grid/index.js
index 57569f849..586803e85 100644
--- a/src/components/canvas-grid/index.js
+++ b/src/components/canvas-grid/index.js
@@ -48,7 +48,7 @@ function CanvasGrid(props) {
         const width = 20;
 
         ctx.beginPath();
-        ctx.fillStyle = window.globalColors.black; // outer border color
+        ctx.fillStyle = 'var(--color-black)'; // outer border color
         ctx.fillRect(startX, startY, horizontal * 20 + 2, vertical * 20 + 2);
 
         startX = startX + 1;
diff --git a/src/components/filter/index.js b/src/components/filter/index.js
index 8cfef4040..0bd521a9e 100644
--- a/src/components/filter/index.js
+++ b/src/components/filter/index.js
@@ -170,46 +170,46 @@ function ToggleFilter({ label, onChange, checked, tooltipContent, disabled }) {
 const selectFilterStyle = {
     multiValueLabel: (provided) => ({
         ...provided,
-        color: window.globalColors.colorYellowLight,
+        color: 'var(--color-yellow-light)',
         padding: '0.1rem'
     }),
     menu: (provided) => ({
         ...provided,
-        backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid ' + window.globalColors.colorGoldTwo,
+        backgroundColor: 'var(--color-gunmetal-dark)',
+        border: '2px solid var(--color-gold-two)',
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
-        backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid ' + window.globalColors.colorGoldTwo,
+        backgroundColor: 'var(--color-gunmetal-dark)',
+        border: '2px solid var(--color-gold-two)',
         borderRadius: 0,
     }),
     menuList: (provided) => ({
         ...provided,
-        color: window.globalColors.colorYellowLight,
+        color: 'var(--color-yellow-light)',
         borderRadius: 0,
     }),
     option: (provided) => ({
         ...provided,
-        color: window.globalColors.colorWhite,
-        backgroundColor: window.globalColors.backgroundPrimary,
+        color: 'var(--color-white)',
+        backgroundColor: 'var(--color-gunmetal-dark)',
 
         borderRadius: 0,
         '&:hover': {
-            backgroundColor: window.globalColors.colorGoldTwo,
-            color: window.globalColors.backgroundPrimary,
+            backgroundColor: 'var(--color-gold-two)',
+            color: 'var(--color-gunmetal-dark)',
             fontweight: 700,
         },
     }),
     singleValue: (provided) => ({
         ...provided,
-        color: window.globalColors.colorGoldOne,
+        color: 'var(--color-gold-one)',
     }),
     multiValue: (provided) => ({
         ...provided,
         backgroundColor: '#5F553B',
-        color: window.globalColors.colorWhite,
+        color: 'var(--color-white)',
     }),
 };
 
@@ -436,7 +436,7 @@ function Filter({ center, children, fullWidth }) {
             ref={toggleButton}
         >
             <Fab
-                style={{ backgroundColor: window.globalColors.colorGoldTwo }}
+                style={{ backgroundColor: 'var(--color-gold-two)' }}
                 aria-label="add"
                 key="filter-toggle-icon"
                 onClick={(e) => setShowFilter(!showFilter)}
diff --git a/src/components/item-image/index.js b/src/components/item-image/index.js
index b12204018..fea58a908 100644
--- a/src/components/item-image/index.js
+++ b/src/components/item-image/index.js
@@ -241,7 +241,7 @@ function ItemImage({
                         <rect x="0" y="0" width="100%" height="100%" style={{fill:`rgba(${colorString})`}} />
                     </pattern>
                 </defs>
-                <rect width="100%" height="100%" style={{fill:window.colors.black}}/>
+                <rect width="100%" height="100%" fill="var(--color-black)"/>
                 <rect width="100%" height="100%" fill="url(#gridCell)"/>
             </svg>;
         const backgroundStyle = {
@@ -267,7 +267,7 @@ function ItemImage({
             cursor: 'default',
             color: '#a4aeb4',
             fontWeight: 'bold',
-            textShadow: '1px 1px 0 '+ window.globalColors.black + ', -1px -1px 0 '+ window.globalColors.black + ', 1px -1px 0 '+ window.globalColors.black + ', -1px 1px 0 '+ window.globalColors.black,
+            textShadow: '1px 1px 0 var(--color-black), -1px -1px 0 var(--color-black), 1px -1px 0 var(--color-black), -1px 1px 0 var(--color-black)',
             fontSize: `${textSize}px`,
             textAlign: 'right',
         };
diff --git a/src/components/price-graph/index.js b/src/components/price-graph/index.js
index c56236170..13de7f0a8 100644
--- a/src/components/price-graph/index.js
+++ b/src/components/price-graph/index.js
@@ -162,7 +162,7 @@ function PriceGraph({ item, itemId }) {
                     }}
                     style={{
                         data: {
-                            stroke: filteredAvgDown ? window.globalColors.colorActionNegative : window.globalColors.colorActionPositive,
+                            stroke: filteredAvgDown ? 'var(--color-green)' : 'var(--color-green)',
                         },
                         parent: { border: '1px solid #ccc' },
                     }}
@@ -181,7 +181,7 @@ function PriceGraph({ item, itemId }) {
                     }}
                     style={{
                         data: {
-                            stroke: filteredMinDown ? window.globalColors.colorActionNegative : window.globalColors.colorActionPositive,
+                            stroke: filteredMinDown ? 'var(--color-red)' : 'var(--color-green)',
                             strokeDasharray: 5
                         },
                         parent: { border: '1px solid #ccc' },
diff --git a/src/index.js b/src/index.js
index 819cee1b6..85a1583a4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,12 +9,8 @@ import { BrowserRouter } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import ScrollToTop from './components/scroll-to-top/index.js';
 
-import globalColors from './colors.js';
 const queryClient = new QueryClient();
 
-
-window.globalColors = globalColors
-
 // Uncomment to enable Sentry
 // if (
 //     window.location.hostname !== 'localhost' &&
diff --git a/src/pages/control/index.js b/src/pages/control/index.js
index f49aca2b8..9900891ec 100644
--- a/src/pages/control/index.js
+++ b/src/pages/control/index.js
@@ -19,41 +19,41 @@ const ammoTypes = caliberArrayWithSplit();
 const selectFilterStyle = {
     menu: (provided) => ({
         ...provided,
-        backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid ' + window.globalColors.colorGoldTwo,
+        backgroundColor: 'var(--color-gunmetal-dark)',
+        border: '2px solid var(--color-gold-two)',
         borderRadius: 0,
     }),
     control: (provided) => ({
         ...provided,
-        backgroundColor: window.globalColors.backgroundPrimary,
-        border: '2px solid ' + window.globalColors.colorGoldTwo,
+        backgroundColor: 'var(--color-gunmetal-dark)',
+        border: '2px solid var(--color-gold-two)',
         borderRadius: 0,
     }),
     menuList: (provided) => ({
         ...provided,
-        color: window.globalColors.colorYellowLight,
+        color: 'var(--color-yellow-light)',
         borderRadius: 0,
     }),
     option: (provided) => ({
         ...provided,
-        color: window.globalColors.colorYellowLight,
-        backgroundColor: window.globalColors.backgroundPrimary,
+        color: 'var(--color-yellow-light)',
+        backgroundColor: 'var(--color-gunmetal-dark)',
 
         borderRadius: 0,
         '&:hover': {
-            backgroundColor: window.globalColors.colorGoldTwo,
-            color: window.globalColors.backgroundPrimary,
+            backgroundColor: 'var(--color-gold-two)',
+            color: 'var(--color-gunmetal-dark)',
             fontweight: 700,
         },
     }),
     singleValue: (provided) => ({
         ...provided,
-        color: window.globalColors.colorGoldOne,
+        color: 'var(--color-gold-one)',
     }),
     multiValue: (provided) => ({
         ...provided,
-        backgroundColor: window.globalColors.colorWhite,
-        color: window.globalColors.colorWhite,
+        backgroundColor: 'var(--color-white)',
+        color: 'var(--color-white)',
     }),
 };
 

From 54ee3a7b740995480444e7650e00e248a72fb9e0 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Wed, 8 Jan 2025 13:52:19 +0000
Subject: [PATCH 31/37] Fix: boss page no longer using RGBA

---
 src/pages/boss/index.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index 41f38498b..a419ec4fe 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -10,10 +10,10 @@
 /* Top Section */
 .boss-information-wrapper {
     display: flex;
-    background-color: rgba(var(--color-black-rgb), 0.1);
-    border: 1px solid rgba(var(--color-gold-two-rgb), 0.7);
+    background-color: rgb(from var(--color-black) r g b /  0.1);
+    border: 1px solid rgb(from var(--color-gold-two) r g b /  0.7);
     margin-bottom: 50px;
-    box-shadow: 0 0 5px 3px rgba(var(--color-white-rgb), 0.034);
+    box-shadow: 0 0 5px 3px rgb(from var(--color-white r g b / 0.034));
     overflow: hidden;
     min-height: 425px;
 }
@@ -48,9 +48,9 @@
 .boss-top-content .title-bar {
     display: flex;
     align-items: center;
-    background: rgba(var(--color-black-rgb), 0.4);
+    background: rgba(var(--color-black-rgba), 0.4);
     padding: 10px 20px;
-    border-bottom: 1px solid rgba(var(--color-white-rgb), 0.2);
+    border-bottom: 1px solid rgba(var(--color-white-rgba), 0.2);
 }
 .boss-top-content .boss-information-icon {
     display: none;

From fc9319460875eafed09c5fcdff09c14d2a294e16 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Wed, 8 Jan 2025 13:53:15 +0000
Subject: [PATCH 32/37] - cont

---
 src/pages/boss/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index a419ec4fe..bef3d6459 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -48,16 +48,16 @@
 .boss-top-content .title-bar {
     display: flex;
     align-items: center;
-    background: rgba(var(--color-black-rgba), 0.4);
+    background: rgb( from var(--color-black) r g b / 0.4);
     padding: 10px 20px;
-    border-bottom: 1px solid rgba(var(--color-white-rgba), 0.2);
+    border-bottom: 1px solid rgb(from var(--color-white) r g b / 0.2);
 }
 .boss-top-content .boss-information-icon {
     display: none;
     width: 124px;
     margin: 20px auto;
     height: 124px;
-    border: 1px solid rgba(var(--color-white-rgb), 0.5);
+    border: 1px solid rgb(from var(--color-white) r g b / 0.5);
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;

From a84ad81e088d29f7e18410cc93ea47307ebc4366 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Wed, 8 Jan 2025 14:09:21 +0000
Subject: [PATCH 33/37] - Removal of -rgba, convert over to 'from var r g b /
 opacity '

---
 src/App.css                                 | 26 +++++++--------------
 src/components/cost-items-cell/index.css    |  2 +-
 src/components/data-table/index.css         |  2 +-
 src/components/filter/index.css             |  2 +-
 src/components/item-grid/index.css          |  4 ++--
 src/components/item-image/index.css         |  2 +-
 src/components/items-for-hideout/index.css  |  2 +-
 src/components/loyalty-level-icon/index.css |  2 +-
 src/components/menu/index.css               |  8 +++----
 src/components/remote-control-id/index.css  |  4 ++--
 src/components/reward-image/index.css       |  2 +-
 src/components/trader-image/index.css       |  2 +-
 src/pages/map/index.css                     | 10 ++++----
 src/pages/maps/index.css                    | 10 ++++----
 src/pages/player/index.css                  |  2 +-
 15 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/src/App.css b/src/App.css
index f69b00aca..99e3aaf6c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,20 +1,14 @@
 /* Variables start */
 :root {
   --color-black: #000;
-    --color-black-rgb: rgb(var(--color-black));
   --color-black-light: #1b1919;
   --color-white: #fff;
-    --color-white-rgb: rgb(var(--color-white-rgb));
 
   --color-gunmetal: #383945;
-    --color-gunmetal-rgb: rgb(var(--color-gunmetal));
   --color-gunmetal-dark: #2d2d2f;
-    --color-gunmetal-dark-rgb: rgb(var(--color-gunmetal-dark));
 
   --color-gold-one: #c7c5b3;
-  --color-gold-one-rgb: rgb(var(--color-gold-one));
   --color-gold-two: #9a8866;
-  --color-gold-two-rgb: rgb(var(--color-gold-two));
 
 
   --color-blue-light: #0292c0;
@@ -153,7 +147,7 @@ cite {
 }
 
 .time-wrapper {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb( from var(--color-black) r g b / 0.5);
     padding: 10px 20px;
     position: absolute;
     right: -10px;
@@ -247,7 +241,7 @@ div.tippy-box {
     border-radius: 4px;
     border-style: solid;
     border-width: 3px;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 0 1px rgb( from var(--color-black) r g b / 0.1);
 }
 
 div.tippy-box[data-placement^='top'] > .tippy-arrow::before {
@@ -285,17 +279,17 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 }
 
 .rc-slider-mark-text {
-    color: rgba(var(--color-gold-one-rgb), 0.8) !important;
+    color: rgb(from var(--color-gold-one) r g b / 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: rgba(var(--color-gold-one-rgb), 1) !important;
+    color: rgb(from var(--color-gold-one) r g b/ 1) !important;
 }
 
 /* Global reuseable styles, specific to the Tarkov.Dev style */
 .information-section {
-    background: rgba(var(--color-rgb), 0.1);
-    border: 1px solid rgba(var(--color-white-rgb), 0.1);
+    background: rgb(from var(--color-black) r g b / 0.1);
+    border: 1px solid rgb( from var(--color-white) r g b/ 0.1);
     border-radius: 0 20px 0 20px;
     margin-bottom: 50px;
     overflow: hidden;
@@ -310,12 +304,10 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
     font-size: 24px;
     margin: 0;
     padding: 15px 20px;
-    background: rgba(var(--primary-color-black-rgb), 0.4);
+    background: rgb( from var(--primary-color-black) r g b / 0.4);
     color: var(--color-gold-one);
-
-    color: var(--color-gold-one);
-    background: rgba(0,0,0,0.3);
-    border-bottom: 1px solid rgba(255,255,255,0.1);
+    background: rgb( from var(--color-black) r g b / 0.3);
+    border-bottom: 1px solid rgb( from var(--color-white) r g b / 0.1);
 }
 .information-section h2 svg {
     width: 1.6rem !important;
diff --git a/src/components/cost-items-cell/index.css b/src/components/cost-items-cell/index.css
index a038cdb2f..270923e6d 100644
--- a/src/components/cost-items-cell/index.css
+++ b/src/components/cost-items-cell/index.css
@@ -10,7 +10,7 @@
 }
 
 .cost-item-wrapper.disabled::after {
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgb( from var(--color-black) r g b / 0.3);
     bottom: 0;
     content: ' ';
     left: 0;
diff --git a/src/components/data-table/index.css b/src/components/data-table/index.css
index 3c7d5d7c6..3ec50a786 100644
--- a/src/components/data-table/index.css
+++ b/src/components/data-table/index.css
@@ -15,7 +15,7 @@
 }
 
 .data-table thead, .data-table tfoot {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb( from var(--color-black) r g b / 0.4);
     position: sticky;
     top: 0;
 }
diff --git a/src/components/filter/index.css b/src/components/filter/index.css
index 96508894a..6754d707a 100644
--- a/src/components/filter/index.css
+++ b/src/components/filter/index.css
@@ -35,7 +35,7 @@
 }
 
 .filter-wrapper.open {
-    box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.69);
+    box-shadow: 0px 5px 15px 5px rgb( from var(--color-black) r g b / 0.70);
     overflow: visible;
     transform: scaleY(1);
 }
diff --git a/src/components/item-grid/index.css b/src/components/item-grid/index.css
index 24fbdd990..87598e3b8 100644
--- a/src/components/item-grid/index.css
+++ b/src/components/item-grid/index.css
@@ -72,7 +72,7 @@
 }
 
 .sell-to-icon {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb( from var(--color-black) r g b / 0.8);
     border-top-left-radius: 3px;
     bottom: 1px;
     color: var(--color-gold-one);
@@ -91,7 +91,7 @@
 }
 
 .grid-item-tooltip {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb( from var(--color-black) r g b / 0.8);
     color: #fff;
     font-size: 12px;
     opacity: 0;
diff --git a/src/components/item-image/index.css b/src/components/item-image/index.css
index 3aade9ccf..cdd2b1e00 100644
--- a/src/components/item-image/index.css
+++ b/src/components/item-image/index.css
@@ -30,7 +30,7 @@
 }
 
 .item-image-count {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb( from var(--color-black) r g b / 0.8);
     border-top-left-radius: 3px;
     color: var(--color-gold-one);
     font-size: 14px;
diff --git a/src/components/items-for-hideout/index.css b/src/components/items-for-hideout/index.css
index 52072a8b5..20aefce54 100644
--- a/src/components/items-for-hideout/index.css
+++ b/src/components/items-for-hideout/index.css
@@ -1,5 +1,5 @@
 .hideout-item-list thead {
-    background: rgba(0, 0, 0, 0.4);
+    background: rgb( from var(--color-black) r g b / 0.4);
     position: sticky;
     top: 0;
 }
diff --git a/src/components/loyalty-level-icon/index.css b/src/components/loyalty-level-icon/index.css
index 60d441ae2..6724c4ac0 100644
--- a/src/components/loyalty-level-icon/index.css
+++ b/src/components/loyalty-level-icon/index.css
@@ -1,5 +1,5 @@
 .loyalty-level-parent {
-    filter: drop-shadow(2px 3px 1px rgba(0, 0, 0, 0.5));
+    filter: drop-shadow(2px 3px 1px rgb( from var(--color-black) r g b / 0.5));
     left: 2px;
     position: absolute;
     top: 2px;
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 15a22768f..2a33623d5 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -6,7 +6,7 @@
 
 .navigation {
     align-items: center;
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
     color: var(--color-gold-two);
     display: flex;
     font-size: 40px;
@@ -45,7 +45,7 @@
 }
 
 .menu.open {
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 5px 10px 0px rgb(from var(--color-black) r g b / 0.2);
     display: block;
     padding: 20px 20px 20px 20px;
     position: absolute;
@@ -111,7 +111,7 @@
     padding: 10px;
     position: absolute;
     z-index: 2000;
-    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
+    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
     top: 24px;
 }
 
@@ -240,7 +240,7 @@ li.mobile-only-link {
 
 .submenu-items {
     border-left: 1px solid var(--color-gold-two);
-    border-right: 1px solid rgba(0, 0, 0, 0);
+    border-right: 1px solid rgb( from var(--color-black) r g b / 0);
 }
 
 .overflow-menu .MuiPaper-root {
diff --git a/src/components/remote-control-id/index.css b/src/components/remote-control-id/index.css
index 436552375..6e9678e73 100644
--- a/src/components/remote-control-id/index.css
+++ b/src/components/remote-control-id/index.css
@@ -1,5 +1,5 @@
 .id-wrapper {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(from var(--color-black) r g b / 0.5);
     bottom: 0;
     color: #fff;
     display: none;
@@ -41,7 +41,7 @@
     position: absolute;
     bottom: 0;
     width: 30vw;
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb(from var(--color-black) r g b / 0.8);
     padding: 15px;
     font-size: 16px;
 }
diff --git a/src/components/reward-image/index.css b/src/components/reward-image/index.css
index 2a918e027..0c06788c6 100644
--- a/src/components/reward-image/index.css
+++ b/src/components/reward-image/index.css
@@ -19,7 +19,7 @@
 }
 
 .reward-image-count {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb( from var(--color-black) r g b  / 0.8);
     border-top-left-radius: 3px;
     color: var(--color-gold-one);
     font-size: 14px;
diff --git a/src/components/trader-image/index.css b/src/components/trader-image/index.css
index d3880959c..12c536950 100644
--- a/src/components/trader-image/index.css
+++ b/src/components/trader-image/index.css
@@ -1,5 +1,5 @@
 .trader-image-reputation {
-    background-color: rgba(0, 0, 0, 0.8);
+    background-color: rgb( from var(--color-black) r g b / 0.8);
     border-top-left-radius: 3px;
     color: var(--color-gold-one);
     font-size: 14px;
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 6cc89b199..4eaf12d17 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -30,7 +30,7 @@
 
 .leaflet-control-coordinates {
 	background-color: var(--color-white);
-	background-color:rgba(255, 255, 255, 0.8);
+	background-color:rgb(from var(--color-white) r g b / 0.8);
 	cursor:pointer;
 }
 
@@ -183,7 +183,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* general control styles */
 .leaflet-control {
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: rgb(from var(--color-black) r g b / 0.75);
     color: rgb(199, 197, 179);
     font-family: bender, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-style: normal;
@@ -197,7 +197,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .leaflet-control-map-settings {
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: rgb(from var(--color-black) r g b / 0.75);
 }
 
 .leaflet-container.only-active-quest-markers .inactive-quest-marker {
@@ -206,7 +206,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* fullscreen control */
 .leaflet-control-fullscreen a {
-    background-color: rgba(0, 0, 0, 0.75);
+    background-color: rgb(from var(--color-black) r g b / 0.75);
 }
 
 .leaflet-control-fullscreen a:hover {
@@ -244,7 +244,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* Raid Info control */
 .leaflet-control-raid-info {
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgb(from var(--color-black) r g b / 0.5);
     line-height: normal;
 }
 
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 909cc560f..9741eabe6 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -22,11 +22,11 @@
 }
 .nav-maps .item a:hover {
     color: var(--color-gold-one);
-    text-shadow: 0 0 1px rgba(var(--color-white-rgb), 0.1);
+    text-shadow: 0 0 1px rgb( from var(--color-white) r g b / 0.1);
 }
 .nav-maps .item .icon {
     display: flex;
-    background: rgba(var(--color-black-rgb), 0.2);
+    background: rgb(from var(--color-black) r g b / 0.2);
     position: absolute;
     left: 0;
     top: 0;
@@ -62,9 +62,9 @@
     width: 33.3%;
     padding: 10px;
     position: relative;
-    border: 1px solid rgba(var(--color-white-rgb), 0.2);
+    border: 1px solid rgb( from var(--color-white) r g b / 0.2);
     padding: 25px 0 50px 0;
-    background: rgba(var(--color-gunmetal-rgb), 0.38);
+    background: rgb( from var(--color-gunmetal) r g b / 0.38);
 
 }
 
@@ -77,7 +77,7 @@
     bottom: 0;
     width: 100%;
     padding: 10px 20px;
-    background: rgba(var(--color-black-rgb), 0.5);
+    background: rgb( from var(--color-black) r g b / 0.5);
     margin: 0;
     transition: all .2s;
 }
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index 9bccc15ce..f5a6eab7a 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -24,7 +24,7 @@
 }
 
 .grid-container>div {
-    background-color: rgba(0, 0, 0, 0.4);
+    background-color: rgb(from var(--color-black) r g b / 0.4);
     text-align: center;
     font-size: 20px;
 }

From 9b92fc4d096dbea972087dccd822f6c129cd2716 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Sat, 11 Jan 2025 09:02:24 +0000
Subject: [PATCH 34/37] - Refactor, rgb(from -> rgb( from

---
 src/App.css                                |  6 +++---
 src/components/menu/index.css              |  2 +-
 src/components/remote-control-id/index.css |  4 ++--
 src/pages/boss/index.css                   | 10 +++++-----
 src/pages/map/index.css                    | 10 +++++-----
 src/pages/maps/index.css                   |  2 +-
 src/pages/player/index.css                 |  2 +-
 7 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/App.css b/src/App.css
index 99e3aaf6c..35f5136e5 100644
--- a/src/App.css
+++ b/src/App.css
@@ -279,16 +279,16 @@ div.tippy-box[data-placement^='right'] > .tippy-arrow::before {
 }
 
 .rc-slider-mark-text {
-    color: rgb(from var(--color-gold-one) r g b / 0.8) !important;
+    color: rgb( from var(--color-gold-one) r g b / 0.8) !important;
 }
 
 .rc-slider-mark-text-active {
-    color: rgb(from var(--color-gold-one) r g b/ 1) !important;
+    color: rgb( from var(--color-gold-one) r g b/ 1) !important;
 }
 
 /* Global reuseable styles, specific to the Tarkov.Dev style */
 .information-section {
-    background: rgb(from var(--color-black) r g b / 0.1);
+    background: rgb( from var(--color-black) r g b / 0.1);
     border: 1px solid rgb( from var(--color-white) r g b/ 0.1);
     border-radius: 0 20px 0 20px;
     margin-bottom: 50px;
diff --git a/src/components/menu/index.css b/src/components/menu/index.css
index 2a33623d5..24e2575bd 100644
--- a/src/components/menu/index.css
+++ b/src/components/menu/index.css
@@ -45,7 +45,7 @@
 }
 
 .menu.open {
-    box-shadow: 0px 5px 10px 0px rgb(from var(--color-black) r g b / 0.2);
+    box-shadow: 0px 5px 10px 0px rgb( from var(--color-black) r g b / 0.2);
     display: block;
     padding: 20px 20px 20px 20px;
     position: absolute;
diff --git a/src/components/remote-control-id/index.css b/src/components/remote-control-id/index.css
index 6e9678e73..798b325cd 100644
--- a/src/components/remote-control-id/index.css
+++ b/src/components/remote-control-id/index.css
@@ -1,5 +1,5 @@
 .id-wrapper {
-    background-color: rgb(from var(--color-black) r g b / 0.5);
+    background-color: rgb( from var(--color-black) r g b / 0.5);
     bottom: 0;
     color: #fff;
     display: none;
@@ -41,7 +41,7 @@
     position: absolute;
     bottom: 0;
     width: 30vw;
-    background-color: rgb(from var(--color-black) r g b / 0.8);
+    background-color: rgb( from var(--color-black) r g b / 0.8);
     padding: 15px;
     font-size: 16px;
 }
diff --git a/src/pages/boss/index.css b/src/pages/boss/index.css
index bef3d6459..81f19dbca 100644
--- a/src/pages/boss/index.css
+++ b/src/pages/boss/index.css
@@ -10,10 +10,10 @@
 /* Top Section */
 .boss-information-wrapper {
     display: flex;
-    background-color: rgb(from var(--color-black) r g b /  0.1);
-    border: 1px solid rgb(from var(--color-gold-two) r g b /  0.7);
+    background-color: rgb( from var(--color-black) r g b /  0.1);
+    border: 1px solid rgb( from var(--color-gold-two) r g b /  0.7);
     margin-bottom: 50px;
-    box-shadow: 0 0 5px 3px rgb(from var(--color-white r g b / 0.034));
+    box-shadow: 0 0 5px 3px rgb( from var(--color-white r g b / 0.034));
     overflow: hidden;
     min-height: 425px;
 }
@@ -50,14 +50,14 @@
     align-items: center;
     background: rgb( from var(--color-black) r g b / 0.4);
     padding: 10px 20px;
-    border-bottom: 1px solid rgb(from var(--color-white) r g b / 0.2);
+    border-bottom: 1px solid rgb( from var(--color-white) r g b / 0.2);
 }
 .boss-top-content .boss-information-icon {
     display: none;
     width: 124px;
     margin: 20px auto;
     height: 124px;
-    border: 1px solid rgb(from var(--color-white) r g b / 0.5);
+    border: 1px solid rgb( from var(--color-white) r g b / 0.5);
 }
 .boss-top-content .title-bar h1 {
     display: inline-block;
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 4eaf12d17..599deae7c 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -30,7 +30,7 @@
 
 .leaflet-control-coordinates {
 	background-color: var(--color-white);
-	background-color:rgb(from var(--color-white) r g b / 0.8);
+	background-color:rgb( from var(--color-white) r g b / 0.8);
 	cursor:pointer;
 }
 
@@ -183,7 +183,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* general control styles */
 .leaflet-control {
-    background-color: rgb(from var(--color-black) r g b / 0.75);
+    background-color: rgb( from var(--color-black) r g b / 0.75);
     color: rgb(199, 197, 179);
     font-family: bender, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-style: normal;
@@ -197,7 +197,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .leaflet-control-map-settings {
-    background-color: rgb(from var(--color-black) r g b / 0.75);
+    background-color: rgb( from var(--color-black) r g b / 0.75);
 }
 
 .leaflet-container.only-active-quest-markers .inactive-quest-marker {
@@ -206,7 +206,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* fullscreen control */
 .leaflet-control-fullscreen a {
-    background-color: rgb(from var(--color-black) r g b / 0.75);
+    background-color: rgb( from var(--color-black) r g b / 0.75);
 }
 
 .leaflet-control-fullscreen a:hover {
@@ -244,7 +244,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 
 /* Raid Info control */
 .leaflet-control-raid-info {
-    background-color: rgb(from var(--color-black) r g b / 0.5);
+    background-color: rgb( from var(--color-black) r g b / 0.5);
     line-height: normal;
 }
 
diff --git a/src/pages/maps/index.css b/src/pages/maps/index.css
index 9741eabe6..fd00b77d1 100644
--- a/src/pages/maps/index.css
+++ b/src/pages/maps/index.css
@@ -26,7 +26,7 @@
 }
 .nav-maps .item .icon {
     display: flex;
-    background: rgb(from var(--color-black) r g b / 0.2);
+    background: rgb( from var(--color-black) r g b / 0.2);
     position: absolute;
     left: 0;
     top: 0;
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index f5a6eab7a..aa73b4833 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -24,7 +24,7 @@
 }
 
 .grid-container>div {
-    background-color: rgb(from var(--color-black) r g b / 0.4);
+    background-color: rgb( from var(--color-black) r g b / 0.4);
     text-align: center;
     font-size: 20px;
 }

From 8313c2587c4c558c78d15d59f8ab27f909a2cf74 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Sat, 11 Jan 2025 09:06:44 +0000
Subject: [PATCH 35/37] - Ensure Red and Green are correctly assigned for
 positive and negative instances

---
 src/components/value-cell/index.css | 4 ++--
 src/pages/player/index.css          | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/value-cell/index.css b/src/components/value-cell/index.css
index ee8c3930e..cd26a67b8 100644
--- a/src/components/value-cell/index.css
+++ b/src/components/value-cell/index.css
@@ -1,7 +1,7 @@
 .craft-profit {
-    color: var(--color-red);
+    color: var(--color-green);
 }
 
 .craft-loss {
-    color: var(--color-green);
+    color: var(--color-red);
 }
diff --git a/src/pages/player/index.css b/src/pages/player/index.css
index aa73b4833..626dcaee8 100644
--- a/src/pages/player/index.css
+++ b/src/pages/player/index.css
@@ -56,11 +56,11 @@ ul.favorite-item-list li {
 }
 
 .banned {
-    color: var(--color-green);
+    color: var(--color-red);
 }
 
 .not-banned {
-    color: var(--color-red);
+    color: var(--color-green);
 }
 
 .turnstile-widget {

From 0bd7e17bd9f6c66901b152ba0c1cca5beeca17c8 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Sat, 11 Jan 2025 09:12:08 +0000
Subject: [PATCH 36/37] - Move map css out of main, refactor some existing hex
 into var's in map.css

---
 src/App.css             |  7 ------
 src/pages/map/index.css | 47 +++++++++++++++++++++++------------------
 2 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/App.css b/src/App.css
index 35f5136e5..a4fbdac19 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,14 +3,10 @@
   --color-black: #000;
   --color-black-light: #1b1919;
   --color-white: #fff;
-
   --color-gunmetal: #383945;
   --color-gunmetal-dark: #2d2d2f;
-
   --color-gold-one: #c7c5b3;
   --color-gold-two: #9a8866;
-
-
   --color-blue-light: #0292c0;
   --color-gray: #424242;
     --color-gray-light : #636363;
@@ -22,9 +18,6 @@
   --color-purple: #8c6edf;
   --color-yellow: #ffe084;
     --color-yellow-light: #E0DFD6;
-
-  /* This is to ensure maps do not clip. Please do not remove */
-    --display-height: auto;  
 }
 
 
diff --git a/src/pages/map/index.css b/src/pages/map/index.css
index 599deae7c..76cd7c7e6 100644
--- a/src/pages/map/index.css
+++ b/src/pages/map/index.css
@@ -1,3 +1,8 @@
+:root {
+    /* This is to ensure maps do not clip. Please do not remove */
+    --display-height: auto;  
+}
+
 #leaflet-map {
     background-color: transparent;
 }
@@ -12,7 +17,7 @@
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-content-wrapper a {
-    color: rgb(199, 197, 179);
+    color: var(--color-gold-one);
     font-family: bender, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-style: normal;
     /*font-weight: 400;*/
@@ -30,31 +35,31 @@
 
 .leaflet-control-coordinates {
 	background-color: var(--color-white);
-	background-color:rgb( from var(--color-white) r g b / 0.8);
-	cursor:pointer;
+	background-color: rgb( from var(--color-white) r g b / 0.8);
+	cursor: pointer;
 }
 
 .leaflet-control-coordinates,
 .leaflet-control-coordinates .uiElement input {
-	-webkit-border-radius:5px;
-	-moz-border-radius:5px;
-	border-radius:5px;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
 }
 
 .leaflet-control-coordinates .uiElement {
-	margin:4px;
+	margin: 4px;
 }
 
 .leaflet-control-coordinates .uiElement .labelFirst {
-	margin-right:4px;
+	margin-right: 4px;
 }
 
 .leaflet-control-coordinates .uiHidden{
-	display:none;
+	display: none;
 }
 
 .leaflet-control-coordinates .uiElement.label {
-	color:inherit;
+	color: inherit;
 	font-weight: inherit;
 	font-size: inherit;
 	padding: 0;
@@ -147,12 +152,12 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
     font-weight: 800;
     font-size: 18px;
     font-family: Arial, Helvetica, sans-serif;
-    color: white;
+    color: var(--color-white);
     white-space: nowrap;
     /* text-transform: uppercase; */
     vertical-align: top;
-    text-shadow: 0 0 3px black;
-    -webkit-text-stroke: 0.5px black;
+    text-shadow: 0 0 3px var(--color-black);
+    -webkit-text-stroke: 0.5px var(--color-black);
 }
 
 .extract-name.pmc {
@@ -184,7 +189,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 /* general control styles */
 .leaflet-control {
     background-color: rgb( from var(--color-black) r g b / 0.75);
-    color: rgb(199, 197, 179);
+    color: var(--color-gold-one);
     font-family: bender, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-style: normal;
     font-weight: 400;
@@ -216,17 +221,17 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 /* zoom control */
 .leaflet-bar a {
     background-color: transparent;
-    color: rgb(199, 197, 179);
+    color: var(--color-gold-one);
     border-bottom-color: rgb(50, 50, 50);
 }
 
 .leaflet-bar a:hover, .leaflet-bar a:active {
     background-color: rgba(25, 25, 25, 0.75);
-    color: rgb(199, 197, 179);
+    color: var(--color-gold-one);
 }
 
 .leaflet-bar a.leaflet-disabled {
-    color: rgb(109, 107, 89);
+    color: var(--color-gold-two);
     background-color: rgba(50, 50, 50, 0.75);
 }
 
@@ -249,7 +254,7 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
 }
 
 .leaflet-control-raid-info a {
-    color: rgb(199, 197, 179);
+    color: var(--color-gold-one);
 }
 
 /* Area labels */
@@ -257,9 +262,9 @@ div.leaflet-overlay-pane > svg.leaflet-zoom-animated > g > path.off-level {
     font-family: bender, -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     font-weight: 800;
     font-size: 20px;
-    color: rgb(199, 197, 179);
-    text-shadow: 0 0 3px black;
-    -webkit-text-stroke: 0.5px black;
+    color: var(--color-gold-one);
+    text-shadow: 0 0 3px var(--color-black);
+    -webkit-text-stroke: 0.5px var(--color-black);
     text-align: center;
 }
 

From 8a5879d80639d6bfffc25358b4e125c19705b162 Mon Sep 17 00:00:00 2001
From: Allan <workofcode@gmail.com>
Date: Sat, 11 Jan 2025 09:13:05 +0000
Subject: [PATCH 37/37] - main.css indentation consistency for attributes

---
 src/App.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.css b/src/App.css
index a4fbdac19..e8034e448 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,17 +1,17 @@
 /* Variables start */
 :root {
   --color-black: #000;
-  --color-black-light: #1b1919;
+    --color-black-light: #1b1919;
   --color-white: #fff;
   --color-gunmetal: #383945;
-  --color-gunmetal-dark: #2d2d2f;
+    --color-gunmetal-dark: #2d2d2f;
   --color-gold-one: #c7c5b3;
   --color-gold-two: #9a8866;
   --color-blue-light: #0292c0;
   --color-gray: #424242;
     --color-gray-light : #636363;
   --color-green: #00a700;
-   --color-green-light: #6a9a66;
+    --color-green-light: #6a9a66;
   --color-orange : #ca8a00;
   --color-red: #cd1e2f;
     --color-red-light: #9a6666;