From a863cf656c46e98e822b69d689bd0853e71e5e91 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Sun, 23 Apr 2023 14:13:02 -0700
Subject: [PATCH 01/31] Initial work on color variables

---
 css/dark-theme.scss              | 2074 ++++++++++++++++--------------
 js/extension/user-preferences.js |    2 +-
 2 files changed, 1092 insertions(+), 984 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 520162e4..10a69ee1 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -1,12 +1,117 @@
+:root {
+  /* Main Discogs Header */
+  --site-header-bg: #000000;
+  /* Main Page color */
+  --main-bg-color: #323334;
+  /* Text Colors */
+  --text-bold: #ffffff;
+  --text-muted: #858585;
+  --text-normal: #cccccc;
+  --text-placeholder: #757575;
+  /* Table Row alteration color */
+  --row-even: #383838;
+  /* Box Shadows */
+  --box-shadow-a: rgba(0, 0, 0, 0.5);
+  --box-shadow-b: rgba(0, 0, 0, 0.8);
+  /* Table Headers / Borders */
+  --headers-and-borders: #454545;
+  /* Links */
+  --link-hover: #cae0fa;
+  --link-visited: #a590d0;
+  --link: #829fc4;
+  /* Collection / Inventory / Wantlist Skittles */
+  --search-results-active: #222222;
+  --skittle-inventory: #326fb2;
+  --skittle-wantlist: #bf3a38;
+  /* Inputs */
+  --input-bg: #292929;
+  --input-focus-border: #386aff;
+  /* Master Release Submission Status Colors */
+  --needs-changes: #ff0000;
+  --new-submission: #f2b90d;
+  --order-sidebar-bg: #1f1f1f;
+  /* Release In Collection / Wantlist Blocks */
+  --in-collection-bg: #1c3814;
+  --in-collection-border: #60c43f;
+  --in-wantlist-bg: #561d1d;
+  --in-wantlist-border: #e7413f;
+  /* Marketplace Selected Filters (Facets) */
+  --facet-selected: #72a3d8;
+  /* Drag & Drop Image Uploader On Release Submission Form (dotted border) */
+  --uploader-hover: #4dd2ff;
+  /* Borders Disabled */
+  --border-disabled-bottom: #d3d3d3;
+  --border-disabled-top: #e0e0e0;
+  --border-disabled: #dbdbdb;
+  /* Buttons */
+  --button-blue-border: #3e7fb8;
+  --button-blue: #4588c4;
+  --button-disabled-text: #999999;
+  --button-disabled: #f2f2f2;
+  --button-green-border: #4ea332;
+  --button-green: #60c43f;
+  --button-red: #982e2c;
+  /* Alert banners */
+  --alert-accept-bg: #d1f7c5;
+  --alert-error-bg: #f7cdc5;
+  --alert-error-text: #812512;
+  --alert-info-bg: #c5def7;
+  --alert-warning-bg: #f7eac5;
+  --alert-warning-text: #816612;
+  --alert-warning-highlight: #E56000;
+  /* Release Rating Stars */
+  --star-rating: #f7d06c;
+  --submission-form-error: #360d0d;
+  /* Odds & Ends */
+  --black: #000000;
+  --scroll-bar-thumb: #666666;
+  /* Release History */
+  --history-highlight: #4a3f50;
+  --history-hover: #322b36;
+}
+
+.theme-navy {
+  --site-header-bg-old: #0f1115;
+  --site-header-bg-old: #2d333b;
+  --site-header-bg: #121519;
+  --main-bg-color: #22272e;
+  --headers-and-borders: #2d333b;
+  --headers-and-borders: #373e47; // border
+  /* --headers-and-borders: #323942; // header */
+
+  --row-even: #282e35;
+  --input-bg: #1c2128;
+  --alert-warning-bg: #f7d77a;
+  --in-collection-bg: #12311a;
+
+  --history-highlight: #484560;
+  --history-hover: #353345;
+  /*
+  --in-collection-border: #558958;
+   --text-normal: #adbac7; */
+}
+
+.theme-film {
+  --site-header-bg: #121519;
+  --main-bg-color: #25272B;
+  --headers-and-borders: #303338;
+  --headers-and-borders: #3b3d43;
+  --row-even: #2B2E32;
+  --input-bg: #1F2125;
+  --in-collection-bg: #12311a;/*
+  --in-collection-border: #558958;
+   --text-normal: #adbac7; */
+}
+
 .de-dark-theme {
   *:not(select) {
     background-color: transparent !important;
     border-color: transparent !important;
-    color: #cccccc !important;
+    color: var(--text-normal) !important;
   }
 
   b {
-    color: #ffffff !important;
+    color: var(--text-bold) !important;
   }
 
   html,
@@ -22,7 +127,7 @@
   #mr_panel,
   .inline-error,
   .inline-error-with-actions {
-    background-color: #323334 !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   #quicklister .pane .inner_pane,
@@ -31,11 +136,11 @@
   }
 
   select[size] {
-    background-color: #2f2f2f !important;
+    background-color: var(--row-even) !important;
   }
 
   .is_not_mobile .notes_field:hover {
-    background: rgba(0, 0, 0, 0.5) !important;
+    background: var(--box-shadow-a) !important;
   }
 
   #youtube_tracklist {
@@ -49,7 +154,7 @@
 
   ::-webkit-scrollbar-thumb:not(.mac) {
     width: 3px;
-    background: #666666;
+    background: var(--scroll-bar-thumb);
     -webkit-border-radius: 0.5ex;
     border-radius: 0.5ex;
   }
@@ -61,15 +166,15 @@
   #quicklister {
     #searchPane {
       .main_search form::-webkit-scrollbar-thumb:not(.mac) {
-        background-color: #454545 !important;
-        border: 2px solid #454545 !important;
+        background-color: var(--headers-and-borders) !important;
+        border: 2px solid var(--headers-and-borders) !important;
         border-radius: 8px !important;
       }
       .my_upload_wrapper {
         &::-webkit-scrollbar-thumb:not(.mac),
         ul.searchFields::-webkit-scrollbar-thumb:not(.mac) {
-          background-color: #454545 !important;
-          border: 2px solid #454545 !important;
+          background-color: var(--headers-and-borders) !important;
+          border: 2px solid var(--headers-and-borders) !important;
           border-radius: 8px !important;
         }
       }
@@ -79,15 +184,15 @@
     .releasePreview::-webkit-scrollbar-thumb:not(.mac),
     #postPane::-webkit-scrollbar-thumb:not(.mac),
     #postPaneDefault::-webkit-scrollbar-thumb:not(.mac) {
-      background-color: #454545 !important;
-      border: 2px solid #454545 !important;
+      background-color: var(--headers-and-borders) !important;
+      border: 2px solid var(--headers-and-borders) !important;
       border-radius: 8px !important;
     }
   }
 
   body.mac .force_vertical_scrollbar::-webkit-scrollbar-thumb:not(.mac) {
-    background-color: red !important;
-    border: 2px solid red !important;
+    background-color: var(--needs-changes) !important;
+    border: 2px solid var(--needs-changes) !important;
     border-radius: 8px !important;
   }
 
@@ -96,21 +201,21 @@
   /* Links */
 
   a {
-    color: #829fc4 !important;
+    color: var(--link) !important;
     time,
     i,
     s,
     b,
     strong {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
     // Credit links on Master Releases
     &.credit-link span.credit_name {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
 
     .linked_username {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
   }
 
@@ -121,22 +226,22 @@
   .pagination ul li a span,
   .row_actions a *,
   .link_text {
-    color: #829fc4 !important;
+    color: var(--link) !important;
   }
 
   a {
     &.sortable-link {
       span,
       &:visited i.icon {
-        color: #829fc4 !important;
+        color: var(--link) !important;
       }
     }
     span.rating_count {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
 
     .linked_username {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
   }
 
@@ -146,19 +251,19 @@
   a .tracklist_track_title,
   .FacetGroup a span,
   #track-release a span {
-    color: #829fc4 !important;
+    color: var(--link) !important;
   }
 
   a > {
     sup.de-discriminator,
     span.de-discriminator,
     .trim-me {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
   }
 
   .release-info a span {
-    color: #829fc4 !important;
+    color: var(--link) !important;
   }
 
   a {
@@ -173,26 +278,22 @@
 
   a:visited {
     s {
-      color: #a590d0 !important;
-      /* OG: #7d65ae*/
+      color: var(--link-visited) !important;
     }
-    color: #a590d0 !important;
-    /* OG: #7d65ae*/
+    color: var(--link-visited) !important;
     .linked_username {
-      color: #a590d0 !important;
+      color: var(--link-visited) !important;
     }
   }
 
   .right li a:visited b {
-    color: #a590d0 !important;
-    /* OG: #7d65ae*/
+    color: var(--link-visited) !important;
   }
 
   a:visited {
     &:not(.button) i,
     span.rating_count {
-      color: #a590d0 !important;
-      /* OG: #7d65ae*/
+      color: var(--link-visited) !important;
     }
   }
 
@@ -201,22 +302,19 @@
   a:visited .tracklist_track_title,
   .FacetGroup a:visited span,
   #track-release a:visited span {
-    color: #a590d0 !important;
-    /* OG: #7d65ae*/
+    color: var(--link-visited) !important;
   }
 
   a:visited > {
     sup.de-discriminator,
     span.de-discriminator,
     .trim-me {
-      color: #a590d0 !important;
-      /* OG: #7d65ae*/
+      color: var(--link-visited) !important;
     }
   }
 
   .release-info a:visited span {
-    color: #a590d0 !important;
-    /* OG: #7d65ae*/
+    color: var(--link-visited) !important;
   }
 
   /* Link Hovers */
@@ -224,10 +322,10 @@
   a:hover {
     s,
     &:not(.button) {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
     }
     .linked_username {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
     }
   }
 
@@ -242,39 +340,42 @@
   a:hover .tracklist_track_title,
   .FacetGroup a:hover span,
   #track-release a:hover span {
-    color: #cae0fa !important;
+    color: var(--link-hover) !important;
   }
 
   a:hover > {
     sup.de-discriminator,
     span.de-discriminator,
     .trim-me {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
     }
   }
 
   .release-info a:hover span {
-    color: #cae0fa !important;
+    color: var(--link-hover) !important;
   }
 
   /* gray text links */
 
   #site_navigation > li {
+    &.opened {
+      background: var(--black) !important;
+    }
     > a {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
     .nav_group_control {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
       i {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
     }
   }
 
   .site_nav_tray {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     h4 {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
@@ -282,46 +383,46 @@
   .site_nav_tray a,
   .site_nav_submenu a:visited,
   .site_nav_tray a:visited {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
   }
 
   #site_navigation > li {
     > a:hover i,
     .nav_group_control:hover i {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   #activity_menu > li {
     > a i,
     .nav_group_control i {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   .activity_menu_total {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
   }
 
   #activity_menu > li {
     > a {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
       &:hover {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
     }
     .nav_group_control {
       &:hover,
       span {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   #messages_list .messagelist tr.unread_message {
-    background-color: #444444 !important;
-    border-bottom: 1px solid #323334 !important;
+    background-color: var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--main-bg-color) !important;
   }
 
   .menu,
@@ -331,61 +432,61 @@
   .ac_div .yui-ac-content,
   #feedSubscribeLine .handlersMenuPopup,
   #site_footer_language ul {
-    background: #000000 !important;
+    background: var(--black) !important;
   }
 
   #site_nav_submenu_account i,
   #site_navigation i {
-    color: white !important;
+    color: var(--text-bold) !important;
     &:visited {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .ui-autocomplete a {
-    border-bottom: 1px #454545 solid !important;
+    border-bottom: 1px var(--headers-and-borders) solid !important;
     &:hover {
-      background: #323334 !important;
+      background: var(--main-bg-color) !important;
     }
   }
 
   ol#search_tabs li {
     label {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even)   !important;
     }
     input[type="radio"]:checked + label {
-      background-color: #326fb2 !important;
-      color: white !important;
+      background-color: var(--skittle-inventory) !important;
+      color: var(--text-bold) !important;
     }
   }
 
   li.ui-menu-item {
     a.ui-state-focus {
-      background: #222 !important;
+      background: var(--search-results-active)!important;
     }
   }
 
   li.ui-menu-item a {
     span.with-sublabel {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
     span.sublabel {
-      color: #ccc !important;
+      color: var(--text-normal) !important;
     }
   }
 
   #site_footer_wrap {
-    border-top: 1px #454545 solid !important;
+    border-top: 1px var(--headers-and-borders) solid !important;
   }
 
   .search_group .group_view_more {
-    border-top: 1px #454545 solid !important;
-    background-color: #454545 !important;
+    border-top: 1px var(--headers-and-borders) solid !important;
+    background-color: var(--headers-and-borders) !important;
   }
 
   .site_nav_tray {
     top: 55px !important;
-    border: 1px #000000 !important;
+    border: 1px var(--black) !important;
   }
 
   /* Muted Gray */
@@ -394,14 +495,14 @@
   .broadcast_table .gutter .icon_wrapper,
   .facet_count,
   table.table_block td.empty_row {
-    color: #858585 !important;
+    color: var(--text-muted) !important;
   }
 
   blockquote,
   table.wantlist-card,
   #report_abuse_form,
   #forum_search_results .search-result-snippet {
-    background-color: #292929 !important;
+    background-color: var(--input-bg) !important;
     box-shadow: none !important;
   }
 
@@ -410,30 +511,30 @@
   }
 
   blockquote .tracklist_extra_artist_span {
-    background-color: #323334 !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   .side_menu a:hover {
-    background-color: #2f2f2f !important;
+    background-color: var(--row-even) !important;
   }
 
   .order-page-aside,
   .item_actions_well {
-    background-color: #1f1f1f !important;
+    background-color: var(--order-sidebar-bg) !important;
   }
 
   .box_header_row {
-    background-color: #2f2f2f !important;
-    border-bottom: 1px #454545 solid !important;
+    background-color: var(--row-even) !important;
+    border-bottom: 1px var(--headers-and-borders) solid !important;
   }
 
   .box-card .box-card-header {
-    border-bottom: 1px solid #1f1f1f !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   .order-user-address,
   .user-shipping-address {
-    border-left: 4px solid #858585 !important;
+    border-left: 4px solid var(--text-muted) !important;
   }
 
   table {
@@ -442,100 +543,101 @@
     &.cards tr.new td.status,
     &.release_list_table tr.new td.status,
     td[class*="newsubmission_"] {
-      background: #f2b90d !important;
+      background: var(--new-submission) !important;
     }
     &.mpitems tr {
-      border-bottom: 1px dotted #454545 !important;
+      border-bottom: 1px dotted var(--headers-and-borders) !important;
     }
     td[class*="needschanges_"] {
-      background: red !important;
+      background: var(--needs-changes) !important;
     }
   }
 
   aside li > a,
   .no_aside .doc_question > a {
-    border-bottom: 1px dotted #454545 !important;
+    border-bottom: 1px dotted var(--headers-and-borders) !important;
   }
 
   /* green success message after purchase */
 
   .cart_page .order_success {
-    background-color: #142e09 !important;
+    background-color: var(--in-collection-bg) !important;
+    border: 1px solid var(--in-collection-border) !important;
   }
 
   /* in collection */
 
   .cw_block {
     &.cw_block_collection {
-      background-color: #1c3814 !important;
-      border: 1px solid #60c43f !important;
+      background-color: var(--in-collection-bg) !important;
+      border: 1px solid var(--in-collection-border) !important;
       border-radius: 3px;
       margin-top: 10px;
       div {
         margin-bottom: 0.2rem;
       }
       h2 {
-        border-color: #60c43f !important;
+        border-color: var(--in-collection-border) !important;
       }
     }
     &.cw_block_wantlist {
-      background-color: #561d1d !important;
-      border: 1px solid #e7413f !important;
+      background-color: var(--in-wantlist-bg) !important;
+      border: 1px solid var(--in-wantlist-border) !important;
       border-radius: 3px;
       margin-top: 10px;
       h2 {
-        border-color: #e7413f !important;
+        border-color: var(--in-wantlist-border) !important;
       }
     }
     h2 {
-      border-bottom: 1px solid #454545 !important;
-      color: white !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
+      color: var(--text-bold) !important;
     }
     .notes_field_label {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .notes_text {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   /* "Edit" in empty notes fields */
 
   .notes_add {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     opacity: 0.8;
   }
 
   div.readmore_wrapper {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
   #full-width-header div.readmore_wrapper {
-    background: #222 !important;
+    background: var(--search-results-active)!important;
   }
 
   .profile a.readmore_toggler {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
 
   /* search input */
 
   .aside_search_form,
   .cw_block .notes_textarea {
-    background: #292929 !important;
-    color: white !important;
+    background: var(--input-bg) !important;
+    color: var(--text-bold) !important;
   }
 
   .aside_search_form {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   #commentPreview {
-    border: 2px solid #454545 !important;
+    border: 2px solid var(--headers-and-borders) !important;
   }
 
   .order-success-header {
-    border-bottom: 2px solid #454545 !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
   }
 
   /* TODO: might make this an option */
@@ -547,70 +649,70 @@
   .facets_nav a .facet_name,
   div[class^="more_"] p,
   .more_facets_text {
-    color: #809bbe !important;
+    color: var(--link) !important;
 
     &:hover {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
     }
   }
 
   #page_aside .selected_facets li a {
-    background-color: #72a3d8 !important;
+    background-color: var(--facet-selected) !important;
     border-radius: 2px !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     span {
-      background-color: #72a3d8 !important;
+      background-color: var(--facet-selected) !important;
       border-radius: 2px !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
     i {
-      background-color: #72a3d8 !important;
+      background-color: var(--facet-selected) !important;
       border-radius: 2px !important;
-      color: white !important;
+      color: var(--text-bold) !important;
       &:visited {
-        background-color: #72a3d8 !important;
+        background-color: var(--facet-selected) !important;
         border-radius: 2px !important;
-        color: white !important;
+        color: var(--text-bold) !important;
       }
     }
   }
 
   .facets_nav a.selected,
   .current_filter {
-    background-color: #72a3d8 !important;
+    background-color: var(--facet-selected) !important;
     border-radius: 2px !important;
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   .order_status_icon {
-    background-color: #454545 !important;
-    border: 2px solid #858585 !important;
+    background-color: var(--headers-and-borders) !important;
+    border: 2px solid var(--text-muted) !important;
   }
 
   /* verticle timeline strand on orders */
 
   .thread.thread_linear .thread_message:before {
-    background-color: #858585 !important;
+    background-color: var(--text-muted) !important;
   }
 
   /* white icons */
 
   .selected_marketplace_filters .icon {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   .icon {
     &.icon-cogs,
     &.icon-list-alt,
     &.icon-font {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .selected_marketplace_filters a.clear_selected_marketplace_filters i {
-    color: white !important;
+    color: var(--text-bold) !important;
     &:visited {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -623,34 +725,34 @@
   table .wantlist-button,
   button.button-red i,
   a.button-red i {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
-  /* white icons on colored buttons */
+  /* white icons on colovar(--needs-changes) buttons */
 
   #user_header .user_avatar {
-    border: 3px solid white !important;
+    border: 3px solid var(--text-bold) !important;
   }
 
   .credit_type.selected .facet_count {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   table.cards tr {
     &.sub_first.card.sub {
-      box-shadow: inset 0 10px 5px -8px #202020 !important;
+      box-shadow: inset 0 10px 5px -8px var(--search-results-active) !important;
       td {
-        box-shadow: inset 0 10px 5px -8px #202020 !important;
+        box-shadow: inset 0 10px 5px -8px var(--search-results-active) !important;
       }
     }
     &.sub_last.card.sub {
-      box-shadow: inset 0 -10px 5px -8px #202020 !important;
+      box-shadow: inset 0 -10px 5px -8px var(--search-results-active) !important;
       td {
-        box-shadow: inset 0 -10px 5px -8px #202020 !important;
+        box-shadow: inset 0 -10px 5px -8px var(--search-results-active) !important;
       }
     }
     &.sub {
-      background-color: #292929 !important;
+      background-color: var(--input-bg) !important;
     }
   }
 
@@ -660,58 +762,58 @@
       border-top: none !important;
     }
     &.tracklist_track.track_heading {
-      background-color: #292929 !important;
+      background-color: var(--input-bg) !important;
     }
   }
 
   .de-durations {
-    border-top: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
   }
 
   .module_blocks .dashboard_addmodules,
   ul.module_blocks > li.module_placeholder {
-    border: 5px dashed #454545 !important;
+    border: 5px dashed var(--headers-and-borders) !important;
   }
 
   .shipping_policy_editor {
     .add_range,
     .add_block {
-      border: 5px dashed #454545 !important;
+      border: 5px dashed var(--headers-and-borders) !important;
     }
   }
 
   .uploader {
-    border: 5px dashed #454545 !important;
+    border: 5px dashed var(--headers-and-borders) !important;
   }
 
   .has_files #uploader_messaging {
-    background-color: #2f2f2f !important;
+    background-color: var(--row-even)   !important;
   }
 
   .uploader:hover {
-    border-color: #4dd2ff !important;
+    border-color: var(--uploader-hover) !important;
   }
 
   .vid_list ul {
-    border: 2px dashed #454545 !important;
+    border: 2px dashed var(--headers-and-borders) !important;
   }
 
   #quicklister .pane .inner_pane {
-    border-right: 2px dashed #454545 !important;
+    border-right: 2px dashed var(--headers-and-borders) !important;
   }
 
   #items {
-    border-right: 2px solid #454545 !important;
+    border-right: 2px solid var(--headers-and-borders) !important;
   }
 
   table.table_block tbody tr.even {
-    background-color: #2f2f2f !important;
+    background-color: var(--row-even)   !important;
   }
 
   .cart_page {
     .order_contents tr.even,
     .order_suggestions {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even)   !important;
     }
   }
 
@@ -719,21 +821,21 @@
     &.body_row.even,
     &.header,
     &.footer {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even)   !important;
     }
   }
 
   ol.as_table_block li {
     &.header,
     &.footer {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even)   !important;
     }
   }
 
   .cart_page .order_suggestions {
-    border-left: 1px solid #454545 !important;
-    border-right: 1px solid #454545 !important;
-    border-bottom: 1px solid #454545 !important;
+    border-left: 1px solid var(--headers-and-borders) !important;
+    border-right: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
     border-top: none !important;
   }
 
@@ -746,7 +848,7 @@
     }
     .thread_message,
     &.thread_linear .thread_message .thread_content {
-      border-top: 1px solid #454545 !important;
+      border-top: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -762,58 +864,58 @@
   ul.subs_list li,
   .history table tr,
   table.table_block tbody tr.delimit_above {
-    border-top: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
   }
 
   ul.subs_list li:hover {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
   }
 
   hr {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
   }
 
   #full-width-header,
   .toolbar-wrapper,
   .footer-wrapper {
-    background: #222222 !important;
+    background: var(--main-bg-color) !important;
   }
 
   #full-width-header {
     .column-content {
-      background: #323334 !important;
+      background: var(--main-bg-color) !important;
     }
     #full-width-header-bar {
-      background-color: rgba(0, 0, 0, 0.7) !important;
-      color: white !important;
+      background-color: var(--box-shadow-b) !important;
+      color: var(--text-bold) !important;
     }
   }
 
   #user_header #full-width-header-bar {
-    background-color: rgba(0, 0, 0, 0.7) !important;
-    color: white !important;
+    background-color: var(--box-shadow-b) !important;
+    color: var(--text-bold) !important;
   }
 
   #full-width-header #full-width-header-bar a,
   #user_header #full-width-header-bar a,
   #full-width-header #full-width-header-bar a:visited,
   #user_header #full-width-header-bar a:visited {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   #full-width-header #full-width-header-navigation li {
     &.active_header_section {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even) !important;
       text-decoration: none !important;
     }
     &:last-child {
-      border-right: 1px solid #454545 !important;
+      border-right: 1px solid var(--headers-and-borders) !important;
     }
   }
 
   .profile_sections.user_profile li {
     &:last-child {
-      border-right: 1px solid #454545 !important;
+      border-right: 1px solid var(--headers-and-borders) !important;
     }
     margin-left: -4px;
   }
@@ -824,32 +926,28 @@
   #postBtn,
   #cancelDelete,
   input.preview_button {
-    background-color: #f2f2f2 !important;
-    border-color: #dbdbdb !important;
-    border-top-color: #e0e0e0 !important;
-    border-bottom-color: #d3d3d3 !important;
+    background-color: var(--button-disabled) !important;
+    border-color: var(--border-disabled) !important;
   }
 
   .preview_comment_button_wrap #previewBtn:hover,
   #postBtn:hover {
-    background-image: -webkit-linear-gradient(#ffffff, #fafafa) !important;
-    background-image: linear-gradient(#ffffff, #fafafa) !important;
-    border-color: #d9d9d9 !important;
-    border-top-color: #d3d3d3 !important;
-    border-bottom-color: #cccccc !important;
+    background-image: -webkit-linear-gradient(var(--text-bold), var(--button-disabled)) !important;
+    background-image: linear-gradient(var(--text-bold), var(--button-disabled)) !important;
+    border-color: var(--border-disabled) !important;
   }
 
   /* gray text on white buttons */
 
   .button,
   a.button {
-    color: #454545 !important;
+    color: var(--headers-and-borders) !important;
   }
 
   .button {
     i,
     span {
-      color: #454545 !important;
+      color: var(--headers-and-borders) !important;
     }
   }
 
@@ -858,63 +956,63 @@
   .inline_buttons.no_offer a,
   a.button.inv_add_button,
   .section_content.release_info_buttons a:not(.button-blue) {
-    color: #454545 !important;
+    color: var(--headers-and-borders) !important;
   }
 
   /* force color overrides on sell release/history links: ^= starts with, $= ends with, *= contains */
 
   div.section_content.release_info_buttons a[href^="/sell/history/"] {
-    color: #809bbe !important;
+    color: var(--link) !important;
   }
 
   span.marketplace_for_sale_count a {
     &[href^="/sell/release/"] strong,
     &[href^="/sell/list?master_id"] strong {
-      color: #809bbe !important;
+      color: var(--link) !important;
     }
   }
 
   div.section_content.release_info_buttons a[href^="/sell/history/"] {
     &:visited {
-      color: #a590d0 !important;
+      color: var(--link-visited) !important;
     }
     &:hover {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
       text-decoration: underline !important;
-      text-decoration-color: #cae0fa !important;
+      text-decoration-color: var(--link-hover) !important;
     }
   }
 
   span.marketplace_for_sale_count a {
     &[href^="/sell/release/"]:hover strong,
     &[href^="/sell/list?master_id"]:hover strong {
-      color: #cae0fa !important;
+      color: var(--link-hover) !important;
       text-decoration: underline !important;
-      text-decoration-color: #cae0fa !important;
+      text-decoration-color: var(--link-hover) !important;
     }
   }
 
   div.multiple_buttons a[href^="/lists/"]:visited {
-    color: #454545 !important;
+    color: var(--headers-and-borders) !important;
   }
 
   #list_details.editable .textedit:hover div,
   #list_details.editable .textedit:hover h1 {
-      background: #282828 !important;
+      background: var(--input-bg) !important;
   }
 
   a.inset_button[disabled] {
-    background: rgba(0, 0, 0, 0.5) !important;
-    border-color: #2f2f2f !important;
-    box-shadow: rgba(0, 0, 0, 0.5) 0 0 3px 1px inset !important;
+    background: var(--box-shadow-a) !important;
+    border-color: var(--row-even)   !important;
+    box-shadow: var(--box-shadow-a) 0 0 3px 1px inset !important;
   }
 
   .tag-list a {
     display: block !important;
     padding: 2px 5px !important;
-    background: #326fb2 !important;
+    background: var(--skittle-inventory) !important;
     border-radius: 2px !important;
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   #site_header .button-green.button,
@@ -922,135 +1020,131 @@
   #login button,
   .inline_buttons.no_offer a.button.button-green,
   .bulk_actions_submit input {
-    background-color: #60c43f !important;
-    border-color: #4ea332 !important;
-    border-top-color: #52ab34 !important;
-    border-bottom-color: #49972e !important;
-    color: white !important;
+    background-color: var(--button-green) !important;
+    border-color: var(--button-green-border) !important;
+    color: var(--text-bold) !important;
   }
 
   .button {
     &.button-green {
       span {
-        border-color: #4ea332 !important;
-        border-top-color: #52ab34 !important;
-        border-bottom-color: #49972e !important;
-        color: white !important;
+        border-color: var(--button-green-border) !important;
+        color: var(--text-bold) !important;
       }
       &[disabled] {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
         i,
         &:hover,
         &:active,
         &:visited,
         &:focus {
-          background-color: #f2f2f2 !important;
-          background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-          border-color: #dbdbdb !important;
-          border-top-color: #e0e0e0 !important;
-          border-bottom-color: #d3d3d3 !important;
-          color: #999999 !important;
+          background-color: var(--button-disabled) !important;
+          background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+          border-color: var(--border-disabled) !important;
+          border-top-color: var(--border-disabled-top) !important;
+          border-bottom-color: var(--border-disabled-bottom) !important;
+          color: var(--button-disabled-text) !important;
           cursor: pointer !important;
         }
       }
     }
     &.button-blue[disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       &:hover,
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
     &.button-red[disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       &:hover,
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
     &.button_dark[disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       &:hover,
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
     &.button-white[disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       &:hover,
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
     &[disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       i,
       span,
@@ -1058,94 +1152,80 @@
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
   }
 
-  .cart_page .order_success {
-    border: 1px solid #9acd89 !important;
-  }
-
   .button {
-    background: #f2f2f2 !important;
+    background: var(--button-disabled) !important;
 
     &.button-blue {
-      background: #4588c4 !important;
+      background: var(--button-blue) !important;
     }
 
     &.button-red {
-      background: #982e2c !important;
+      background: var(--button-red) !important;
     }
 
     &.button-green {
-      background: #60c43f !important;
+      background: var(--button-green) !important;
     }
 
     &.button-white {
-      background: #f2f2f2 !important;
+      background: var(--button-disabled) !important;
     }
   }
 
   .button.button-red {
-    border-color: #982e2c !important;
-    background: #982e2c !important;
-    border-top-color: #902c2a !important;
-    border-bottom-color: #842827 !important;
-    color: white !important;
+    border-color: var(--button-red) !important;
+    background: var(--button-red) !important;
+    color: var(--text-bold) !important;
     span {
-      border-color: #982e2c !important;
-      border-top-color: #902c2a !important;
-      border-bottom-color: #842827 !important;
-      color: white !important;
+      border-color: var(--button-red) !important;
+      color: var(--text-bold) !important;
     }
   }
 
   a.button.button_facebook_login span,
   .button.button-blue {
-    background: #4588c4 !important;
-    background-color: #4588c4 !important;
-    border-color: #3571a6 !important;
-    border-top-color: #3776ae !important;
-    border-bottom-color: #31699b !important;
-    color: white !important;
+    background: var(--button-blue) !important;
+    background-color: var(--button-blue) !important;
+    border-color: var(--button-blue-border) !important;
+    color: var(--text-bold) !important;
   }
 
   a {
     &.button.button-blue,
     &.button-blue {
-      background-color: #4588c4 !important;
-      border-color: #3571a6 !important;
-      border-top-color: #3776ae !important;
-      border-bottom-color: #31699b !important;
-      color: white !important;
+      background-color: var(--button-blue) !important;
+      border-color: var(--button-blue-border) !important;
+      color: var(--text-bold) !important;
     }
   }
 
   #user_header .button-blue,
   #user_header .button-green,
   .button.button-blue span {
-    background-color: #4588c4 !important;
-    border-color: #3571a6 !important;
-    border-top-color: #3776ae !important;
-    border-bottom-color: #31699b !important;
-    color: white !important;
+    background-color: var(--button-blue) !important;
+    border-color: var(--button-blue-border) !important;
+    color: var(--text-bold) !important;
   }
 
   a.button.button_facebook_login.blue {
-    background-color: #4588c4 !important;
+    background-color: var(--button-blue) !important;
   }
 
   .button {
     &.button-green .icon,
     &.button-red .icon {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -1157,17 +1237,12 @@
     background: none !important;
   }
 
-  /* red add to cart button in shop */
-
-  input.btn {
-    background: #f45b4f !important;
-    color: white !important;
-  }
+  /* I think these might be related to the old shop.discogs.com?
 
   a.btn-default {
     background-color: #ebebeb !important;
     border-color: #adadad !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
     i,
     &:hover,
     &:focus,
@@ -1175,129 +1250,130 @@
     &.active {
       background-color: #ebebeb !important;
       border-color: #adadad !important;
-      color: #2f2f2f !important;
+      color: var(--row-even)   !important;
     }
   }
 
   .open .dropdown-toggle.btn-default {
     background-color: #ebebeb !important;
     border-color: #adadad !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .btn-primary {
     background-color: #428bca !important;
     border-color: #357ebd !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     &:visited {
       background-color: #428bca !important;
       border-color: #357ebd !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .btn-success {
     background-color: #5cb85c !important;
     border-color: #4cae4c !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     &:visited {
       background-color: #5cb85c !important;
       border-color: #4cae4c !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .btn-danger {
     background-color: #d9534f !important;
     border-color: #d43f3a !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     &:visited {
       background-color: #d9534f !important;
       border-color: #d43f3a !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .btn-warning {
     background-color: #ed9c28 !important;
     border-color: #d58512 !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     &:hover,
     &:focus,
     &.active {
       background-color: #ed9c28 !important;
       border-color: #d58512 !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .open .dropdown-toggle.btn-warning {
     background-color: #ed9c28 !important;
     border-color: #d58512 !important;
-    color: white !important;
+    color: var(--text-bold) !important;
   }
+  */
 
   button {
     &.button.button-white {
-      background-color: white !important;
+      background-color: var(--text-bold) !important;
       background-image: none !important;
-      color: #595959;
+      color: var(--headers-and-borders);
     }
     &.mr_toggler.button.button-white {
-      background-color: gray !important;
+      background-color: var(--scroll-bar-thumb) !important;
       background-image: none !important;
-      color: #cccccc !important;
+      color: var(--text-normal) !important;
       i {
-        background-color: gray !important;
+        background-color: transparent !important;
         background-image: none !important;
-        color: #cccccc !important;
+        color: var(--text-normal) !important;
       }
     }
   }
 
   .artist_search_form {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
     button {
       background: none !important;
     }
   }
 
   .button.button-white:hover {
-    background-color: #f2f2f2 !important;
+    background-color: var(--button-disabled) !important;
   }
 
   .price {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
     span, td {
-      color: #e7413f !important;
+      color: var(--in-wantlist-border) !important;
     }
   }
 
   .cart_page .order_summary_errors {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
   }
 
   #search_results .needs_changes {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
     i {
-      color: #e7413f !important;
+      color: var(--in-wantlist-border) !important;
     }
   }
 
   a.report_item.mplabel.hide_mobile,
   .required {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
   }
 
   // price_flags in Inventory
   .error-light-red,
   .report-item-abuse-note {
-    color: red !important;
+    color: var(--needs-changes) !important;
   }
 
   div.price_flag_inline {
-    border-top: 8px solid red !important;
-    border-right: 8px solid #454545 !important;
+    border-top: 8px solid var(--needs-changes) !important;
+    border-right: 8px solid var(--headers-and-borders) !important;
   }
 
   /* weird chrome textarea override */
@@ -1305,36 +1381,36 @@
   #review_compose.form_block textarea,
   textarea,
   input,
-  .lookup-field.credit-lookup.fake-input .lookup-field.credit-lookup.fake-input input {
-    background: #292929 !important;
+  .lookup-field.ceredit-lookup.fake-input .lookup-field.ceredit-lookup.fake-input input {
+    background: var(--input-bg) !important;
     outline: none !important;
     box-shadow: none !important;
     font-family: "Helvetica Neue", Helvetica, "Nimbus Sans", Arial, sans-serif !important;
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   #review_compose.form_block div.review_preview {
     min-height: 10px !important;
     padding: 5px !important;
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   .form_block legend {
-    background-color: #2f2f2f !important;
-    border-bottom: 1px solid #454545 !important;
+    background-color: var(--row-even) !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   .product-options {
-    border-top: 1px solid #454545 !important;
-    border-bottom: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   button.lazy_gallery_nav {
     &.lazy_gallery_next {
-      background: linear-gradient(to left, #323334, rgba(41, 41, 41, 0)) !important;
+      background: linear-gradient(to left, var(--main-bg-color), var(--input-bg)) !important;
     }
     &.lazy_gallery_prev {
-      background: linear-gradient(to right, #323334, rgba(41, 41, 41, 0)) !important;
+      background: linear-gradient(to right, var(--main-bg-color), var(--input-bg)) !important;
     }
   }
 
@@ -1345,22 +1421,22 @@
   }
 
   .image_gallery_thumb.current {
-    border-color: white !important;
+    border-color: var(--text-bold) !important;
   }
 
   select {
     background-color: default !important;
     border-color: default !important;
-    color: #000000 !important;
+    color: var(--black) !important;
   }
 
   .grid #image_uploader_list li:hover .image_info {
-    background: #00000082 !important;
+    background: var(--box-shadow-a) !important;
   }
 
   .grid #image_uploader_list .image_info a:hover,
   .grid #image_uploader_list .image_info button:hover {
-    background: #00000070 !important;
+    background: var(--box-shadow-a) !important;
   }
 
 
@@ -1371,12 +1447,20 @@
   .pagination.top,
   .collection-value-and-pagination,
   #list_details .listitem,
-  .order-item-row,
   #youtube_tracklist,
   .react-modal-header,
   #messages_list .messagelist tr,
   table.marketplace-table-react td {
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--main-bg-color) !important;
+  }
+
+  /* bottom border overrides */
+  #messages_list tr.msg,
+  #list_details .listitem,
+  .order-item-row,
+  .pagination.top,
+  .review {
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   #collection .pagination.top {
@@ -1386,19 +1470,19 @@
   .cards .card {
     &.card_normal,
     &.card_text-only {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
   }
 
   #product h3.collection-title,
   .order-page-header {
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   table.table_block {
     thead tr,
     tfoot tr {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -1410,7 +1494,7 @@
   div.subform_table div.align_right,
   div.subform_table div.submission-form-section,
   .history_browser_facet_found {
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   div.submission-form-section ul li.image_preview {
@@ -1419,26 +1503,26 @@
 
   table.release_list_table.table_block thead tr,
   .order_total_row {
-    background: #2f2f2f !important;
+    background: var(--row-even) !important;
   }
 
   table.table_block {
     thead tr,
     tfoot tr {
-      background: #2f2f2f !important;
+      background: var(--headers-and-borders) !important;
     }
   }
 
   .is_not_mobile table.release_list_table tbody tr:hover,
   .doc_resource:first-child {
-    background: #2f2f2f !important;
+    background: var(--row-even) !important;
   }
 
   li {
     &.section-box.section_as_link:hover,
     &.doc_question.section_as_link:hover,
     &.doc_resource.section_as_link:hover {
-      background: #2f2f2f !important;
+      background: var(--row-even) !important;
     }
   }
 
@@ -1446,13 +1530,13 @@
   .drag_drop_field_list > li,
   .react_drag_drop_field_list .drag_drop_content,
   .editable_item {
-    background: #2f2f2f !important;
+    background: var(--row-even) !important;
   }
 
   .history tr {
     &.even,
     &:nth-child(even) {
-      background: #2f2f2f !important;
+      background: var(--row-even) !important;
     }
   }
 
@@ -1461,7 +1545,7 @@
   .subform-lookup-results-list,
   .subform-lookup-results,
   .rh {
-    background: #2f2f2f !important;
+    background: var(--row-even) !important;
   }
 
   table.release_list_table {
@@ -1472,7 +1556,7 @@
       }
     }
     thead th {
-      border-left: 1px solid #454545 !important;
+      border-left: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -1480,39 +1564,40 @@
   .profile_sections.user_profile a,
   .section-box:nth-child(3n + 1),
   .doc_resource:nth-child(3n + 1) {
-    border-left: 1px solid #454545 !important;
+    border-left: 1px solid var(--headers-and-borders) !important;
   }
 
   table {
     &.release_list_table tbody td,
     &.subform_table td {
-      border-left: 1px dotted #454545 !important;
+      border-left: 1px dotted var(--headers-and-borders) !important;
     }
   }
 
   table.subform_tracklist tr.subform_track  {
-    border-left: 1px solid #454545 !important;
+    border-left: 1px solid var(--headers-and-borders) !important;
   }
 
   .filtergroup {
-    border-left: 1px dotted #454545 !important;
+    border-left: 1px dotted var(--headers-and-borders) !important;
   }
 
   .doc_article {
-    border-right: 1px dotted #454545 !important;
+    border-right: 1px dotted var(--headers-and-borders) !important;
   }
 
   .card .card_body .card_status {
-    color: gray !important;
+    color: var(--scroll-bar-thumb) !important;
     a,
     i {
-      color: gray !important;
+      color: var(--scroll-bar-thumb) !important;
     }
   }
 
   .pagination.bottom,
+  .user-feedback-component,
   #cartform table tr td {
-    border-top: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
   }
 
   #releases .pagination.bottom {
@@ -1521,46 +1606,46 @@
 
   #cartform {
     th {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
     tr td {
-      color: white !important;
+      color: var(--text-bold) !important;
       &.remove a,
       strong {
-        color: #e7413f !important;
+        color: var(--in-wantlist-border) !important;
       }
     }
   }
 
   .order-total-row {
-    border-bottom: 2px solid #454545 !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
   }
 
   /* green shipped */
   div[class*="skittles_"] span[class*="collection_"],
   .skittles .skittle.skittle_collection {
-    background-color: #60c43f !important;
-    color: white !important;
+    background-color: var(--button-green) !important;
+    color: var(--text-bold) !important;
 
     i[class^="icon"] {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .skittle.skittle_collection {
-    background-color: #60c43f !important;
-    color: white !important;
+    background-color: var(--button-green) !important;
+    color: var(--text-bold) !important;
     span {
-      background-color: #60c43f !important;
-      color: white !important;
+      background-color: var(--button-green) !important;
+      color: var(--text-bold) !important;
     }
     i[class^="icon"] {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   span[class*="skittle_"] svg[class^="icon_"] path {
-    fill: white !important;
+    fill: var(--text-bold) !important;
   }
 
   #order_process .order_step .order-status-label.order-status-label-shipped,
@@ -1568,24 +1653,24 @@
   .order-page-header .order-status-label.order-status-label-in-progress i,
   #order_process .order_step .order_status_icon.small_icon.in_progress,
   #order_process .order_step .order_status_icon.small_icon.in_progress i {
-    background-color: #60c43f !important;
-    color: white !important;
-    border-color: #e3e3e3 !important;
+    background-color: var(--button-green) !important;
+    color: var(--text-bold) !important;
+    border-color: var(--text-bold) !important;
   }
 
   .order-status-label {
     &.order-status-label-shipped {
-      background-color: #60c43f !important;
-      color: white !important;
+      background-color: var(--button-green) !important;
+      color: var(--text-bold) !important;
       span,
       i {
-        background-color: #60c43f !important;
-        color: white !important;
+        background-color: var(--button-green) !important;
+        color: var(--text-bold) !important;
       }
     }
     &.order-status-label-new-order {
-      background-color: #60c43f !important;
-      color: white !important;
+      background-color: var(--button-green) !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -1593,36 +1678,36 @@
   span.skittle.skittle_wantlist span.count,
   .skittle.skittle_inventory span.count,
   span.skittle.skittle_wantlist.needs_delegated_tooltip span.count {
-    color: white !important;
+    color: var(--text-bold) !important;
 
     i[class^="icon"] {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .skittle.skittle_wantlist,
   div[class*="skittles_"] span[class*="wantlist_"],
   span.skittle.skittle_wantlist.needs_delegated_tooltip {
-    background-color: #bf3a38 !important;
-    color: white !important;
+    background-color: var(--skittle-wantlist) !important;
+    color: var(--text-bold) !important;
 
     i[class^="icon"] {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .skittle.skittle_inventory,
   div[class*="header_"] a[class*="skittle_"],
   div[class*="skittles_"] span[class*="inventory_"] {
-    background-color: #326fb2 !important;
-    color: white !important;
+    background-color: var(--skittle-inventory) !important;
+    color: var(--text-bold) !important;
 
     i[class^="icon"] {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
-  /* NEW SKITTLES */
+  /* NEW SKITTLES
 
   .show-new-skittles {
     .skittles .skittle.skittle_collection,
@@ -1641,14 +1726,14 @@
       }
       &.skittle_inventory {
         background-color: transparent !important;
-        color: #a590d0 !important;
+        color: var(--link-visited) !important;
       }
     }
     a.skittle.skittle_inventory i,
     .skittle.skittle_inventory span.count,
     a.skittle.skittle_inventory span.count:visited {
       background-color: transparent !important;
-      color: #a590d0 !important;
+      color: var(--link-visited) !important;
     }
     .card_actions {
       top: 0;
@@ -1656,14 +1741,16 @@
       background: rgba(255, 255, 255, 0.85) !important;
     }
   }
+  */
 
-  /* inventory */
+  /* inventory
 
   #manual_update_collection_or_wantlist .show-new-skittles .card_actions {
     background: transparent !important;
   }
+  */
 
-  /* wantlist */
+  /* wantlist
 
   .show-new-skittles {
     span.skittle.skittle_wantlist {
@@ -1693,18 +1780,19 @@
       color: #3fc4b2 !important;
     }
   }
+   */
 
   #order_process .order_step .order-status-label.order-status-label-shipped {
     span,
     i {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .order-status-label.order-status-label-new-order {
     span,
     i {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -1713,12 +1801,12 @@
     &.buyer_contacted i,
     &.cancelled i,
     &.invoice_sent i {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .order_step.active_step span {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   /* blue invoiced */
@@ -1726,12 +1814,12 @@
   .order-status-label.order-status-label-invoice-sent {
     background: #407fbf !important;
     border-color: #3973ac !important;
-    color: white !important;
+    color: var(--text-bold) !important;
     span,
     i {
       background: #407fbf !important;
       border-color: #3973ac !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -1740,26 +1828,26 @@
   .order_status_icon {
     &.payment_received {
       background: #bf9f40 !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
       color: #f9f5ec !important;
       i,
       span {
         background: #bf9f40 !important;
-        border-color: white !important;
+        border-color: var(--text-bold) !important;
         color: #f9f5ec !important;
       }
     }
     &.shipped {
       background: #60bf40 !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
     }
     &.buyer_contacted {
       background: #4580b7 !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
     }
     &.invoice_sent {
       background: #407fbf !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
       color: #ecf2f9 !important;
     }
   }
@@ -1797,62 +1885,62 @@
   .order_pay_now {
     span,
     i {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   /* red canceled */
 
   .order-status-label.order-status-label-cancelled {
-    background: red !important;
-    color: white !important;
+    background: var(--needs-changes) !important;
+    color: var(--text-bold) !important;
     span,
     i {
-      background: red !important;
-      color: white !important;
+      background: var(--needs-changes) !important;
+      color: var(--text-bold) !important;
     }
   }
 
   .order_status_icon.cancelled {
-    background: red !important;
-    border-color: white !important;
+    background: var(--needs-changes) !important;
+    border-color: var(--text-bold) !important;
   }
 
   .order-status-label.order-status-label-payment-pending {
     background: #f2ecd9 !important;
-    border-color: white !important;
+    border-color: var(--text-bold) !important;
     color: #393013 !important;
     i,
     span {
       background: #f2ecd9 !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
       color: #393013 !important;
     }
   }
 
   .order_status_icon.payment_pending {
     background: #f2ecd9 !important;
-    border-color: white !important;
+    border-color: var(--text-bold) !important;
     color: #393013 !important;
     i,
     span {
       background: #f2ecd9 !important;
-      border-color: white !important;
+      border-color: var(--text-bold) !important;
       color: #393013 !important;
     }
   }
 
   #site_header_wrap {
-    background-color: #000000 !important;
+    background-color: var(--site-header-bg) !important;
     border-bottom: none !important;
   }
 
   .icon.icon-search {
-    color: gray !important;
+    color: var(--scroll-bar-thumb) !important;
   }
 
   .video-search-js .icon.icon-search {
-    color: white !important;
+    color: var(--text-bold) !important;
   }
 
   .pos_rating {
@@ -1870,7 +1958,7 @@
   .pos-rating-text {
     strong,
     i {
-      color: #60C43F !important;
+      color: var(--button-green) !important;
     }
   }
 
@@ -1889,7 +1977,7 @@
   .neg-rating-text {
     strong,
     i {
-      color: #e7413f !important;
+      color: var(--in-wantlist-border) !important;
     }
   }
 
@@ -1910,19 +1998,25 @@
   #pw_new,
   #pw_confirm_new,
   input[type="text"]:not(.image_copy_permalink_text) {
-    background: #292929 !important;
-    border: none !important;
+    background: var(--input-bg) !important;
+    border: 1px solid var(--headers-and-borders) !important;
     outline: none !important;
     box-shadow: none !important;
-    color: #ffffff !important;
+    color: var(--text-bold) !important;
 
     &::placeholder {
-      color: #757575 !important;
+      color: var(--text-placeholder) !important;
     }
   }
 
+  // override border property on specific inputs
+  input[type="text"][name="q"],
+  div[class*="filters_"] input[type="text"] {
+    border: none !important;
+  }
+
   #site_search {
-    background-color: #292929 !important;
+    background-color: var(--input-bg) !important;
     input#search_q {
       border: none !important;
     }
@@ -1931,18 +2025,18 @@
   table.cards tr.credit_header,
   ul.module_blocks .header,
   table.table_block tfoot tr {
-    background: #454545 !important;
-    border-bottom: 1px solid #323334 !important;
+    background: var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--main-bg-color) !important;
   }
 
   /* x icons on dashboard modules */
 
   ul.module_blocks .header i {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
   }
 
   div.search_result.needschanges div.flag {
-    background: red !important;
+    background: var(--needs-changes) !important;
   }
 
   table {
@@ -1950,7 +2044,7 @@
     &.list tr.change td.status,
     &.cw_releases tr.change td.status,
     &.release_list_table tr.change td.status {
-      background: red !important;
+      background: var(--needs-changes) !important;
     }
     &.list tr.edit td.status,
     &.cw_releases tr.edit td.status {
@@ -1971,19 +2065,19 @@
 
   .tooltip {
     .tooltip-inner {
-      background: black !important;
+      background: var(--black) !important;
     }
     &.top .tooltip-arrow {
-      border-color: black transparent transparent transparent !important;
+      border-color: var(--black) transparent transparent transparent !important;
     }
     &.left .tooltip-arrow {
-      border-color: transparent transparent transparent black !important;
+      border-color: transparent transparent transparent var(--black) !important;
     }
     &.right .tooltip-arrow {
-      border-color: transparent black transparent transparent !important;
+      border-color: transparent var(--black) transparent transparent !important;
     }
     &.bottom .tooltip-arrow {
-      border-color: transparent transparent black transparent !important;
+      border-color: transparent transparent var(--black) transparent !important;
     }
   }
 
@@ -2006,13 +2100,13 @@
   #object_preview,
   ul.module_blocks > li,
   .tab_menu {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   .cart_page {
     .order_container,
     .order_help {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -2028,11 +2122,11 @@
   .panel-default,
   .offers_box,
   .search_group {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   ul.module_blocks > li {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
 
   #listadd.form_block {
@@ -2040,43 +2134,43 @@
   }
 
   ul.module_blocks > li.table_body table thead tr {
-    background: #454545 !important;
-    border-bottom: 2px solid #414141 !important;
+    background: var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
   }
 
   .panel-success,
   .panel-info,
   .panel-danger,
   .panel-warning {
-    border-color: #454545 !important;
+    border-color: var(--headers-and-borders) !important;
   }
 
   .group-list-group-content {
-    background: rgba(0, 0, 0, 0.6) !important;
-    border-right: 7px solid #323334 !important;
-    border-bottom: 7px solid #323334 !important;
+    background: var(--box-shadow-a) !important;
+    border-right: 7px solid var(--main-bg-color) !important;
+    border-bottom: 7px solid var(--main-bg-color) !important;
   }
 
   a.list-group-item.heading {
-    background-color: #2f2f2f !important;
-    color: white !important;
+    background-color: var(--row-even)   !important;
+    color: var(--text-bold) !important;
     &:visited {
-      background-color: #2f2f2f !important;
-      color: white !important;
+      background-color: var(--row-even)   !important;
+      color: var(--text-bold) !important;
     }
   }
 
   code {
-    background-color: #000000 !important;
+    background-color: var(--black) !important;
     font-size: 90% !important;
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
   }
 
   pre {
-    background: #000000 !important;
-    border: 1px solid #454545 !important;
+    background: var(--black) !important;
+    border: 1px solid var(--headers-and-borders) !important;
     code {
-      background: #000000 !important;
+      background: var(--black) !important;
     }
   }
 
@@ -2139,30 +2233,30 @@
 
   .alert-message {
     &.alert-message-info {
-      background: #c5def7 !important;
-      color: #454545 !important;
+      background: var(--alert-info-bg) !important;
+      color: var(--headers-and-borders) !important;
       line-height: 20px !important;
       i,
       div,
       .alert-message-content div {
-        background: #c5def7 !important;
-        color: #454545 !important;
+        background: var(--alert-info-bg) !important;
+        color: var(--headers-and-borders) !important;
         line-height: 20px !important;
       }
     }
     .icon.icon-times,
     &.alert-message-warning i {
       background: transparent !important;
-      color: #454545 !important;
+      color: var(--headers-and-borders) !important;
     }
     &.alert-message-info a:not(.button):hover {
-      color: #a590d0 !important;
+      color: var(--link-visited) !important;
     }
   }
 
   .alert-message-announcement.alert-message .icon.icon-times {
     background: none !important;
-    color: #ccc !important;
+    color: var(--text-normal) !important;
   }
 
   /* buttons with icons in added to collection banner */
@@ -2175,44 +2269,52 @@
       }
     }
     &.alert-message-error {
-      background: #f7cdc5 !important;
+      background: var(--alert-error-bg) !important;
       font-size: 14px !important;
-      color: #812512 !important;
+      color: var(--alert-error-text) !important;
       line-height: 20px !important;
       i {
-        background: #f7cdc5 !important;
+        background: var(--alert-error-bg) !important;
         font-size: 14px !important;
-        color: #812512 !important;
+        color: var(--alert-error-text) !important;
         line-height: 20px !important;
       }
     }
     &.alert-message-accept {
-      background: #d1f7c5 !important;
-      color: #60c43f !important;
+      background: var(--alert-accept-bg) !important;
+      color: var(--button-green) !important;
       i,
       span {
-        background: #d1f7c5 !important;
-        color: #60c43f !important;
+        background: var(--alert-accept-bg) !important;
+        color: var(--button-green) !important;
       }
       i.icon-check {
         background: transparent !important;
       }
     }
     &.alert-message-broadcast {
-      background-color: #2f2f2f !important;
+      background-color: var(--headers-and-borders) !important;
     }
     &.alert-message-news .announcement-title {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
     a.alert-message-close-icon i {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
       &:visited {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
     }
     &.alert-message-warning {
-      background: #f7eac5 !important;
-      color: #816612 !important;
+      background: var(--alert-warning-bg) !important;
+      color: var(--alert-warning-text) !important;
+      border-left: 4px solid var(--alert-warning-highlight) !important;
+
+      i,
+      a,
+      a strong,
+      a small {
+        color: var(--alert-warning-highlight) !important;
+      }
     }
   }
 
@@ -2220,43 +2322,43 @@
     &.alert-message-text {
       p,
       ul li label {
-        background: #f7eac5 !important;
-        color: #816612 !important;
+        background: var(--alert-warning-bg) !important;
+        color: var(--alert-warning-text) !important;
       }
     }
     &.alert-message-content {
       h3,
       h4 {
-        background: #f7eac5 !important;
-        color: #816612 !important;
+        background: var(--alert-warning-bg) !important;
+        color: var(--alert-warning-text) !important;
       }
       ul li a {
         strong,
         small {
-          background: #f7eac5 !important;
-          color: #816612 !important;
+          background: var(--alert-warning-bg) !important;
+          color: var(--alert-warning-text) !important;
         }
       }
     }
     &.alert-message-text {
-      color: #454545 !important;
+      color: var(--headers-and-borders) !important;
       h4,
       .text,
       small {
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
       }
       strong,
       em {
-        color: #777 !important;
+        color: var(--text-placeholder) !important;
         a {
-          color: #454545 !important;
+          color: var(--headers-and-borders) !important;
           &:hover {
-            color: #454545 !important;
+            color: var(--headers-and-borders) !important;
           }
         }
       }
       ul li {
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
       }
     }
   }
@@ -2265,28 +2367,28 @@
 
   #page_aside span.alert-message-text,
   .alert-message-broadcast span.alert-message-text {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     strong {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   .tab_menu {
     border-top: none !important;
     border-right: none !important;
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
     border-left: none !important;
     li {
       &.current {
-        background: #323334 !important;
-        border-top: 1px solid #454545 !important;
-        border-right: 1px solid #454545 !important;
-        border-left: 1px solid #454545 !important;
+        background: var(--main-bg-color) !important;
+        border-top: 1px solid var(--headers-and-borders) !important;
+        border-right: 1px solid var(--headers-and-borders) !important;
+        border-left: 1px solid var(--headers-and-borders) !important;
         font-weight: bold;
         a {
-          color: white !important;
+          color: var(--text-bold) !important;
           &:visited span {
-            color: white !important;
+            color: var(--text-bold) !important;
           }
         }
       }
@@ -2297,14 +2399,14 @@
   }
 
   .section-box {
-    border-top: 1px solid #454545 !important;
-    border-right: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
+    border-right: 1px solid var(--headers-and-borders) !important;
   }
 
   .doc_resource {
-    border-top: 1px solid #454545 !important;
-    border-right: 1px solid #454545 !important;
-    border-left: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
+    border-right: 1px solid var(--headers-and-borders) !important;
+    border-left: 1px solid var(--headers-and-borders) !important;
   }
 
   .section-box {
@@ -2318,9 +2420,10 @@
   /* background bar graph on release stats sidebar */
 
   .facet-bar {
-    background-color: #454545 !important;
+    background-color: var(--headers-and-borders) !important;
   }
 
+  /* Have / Want square bar graphs shown on each item in the Marketplace */
   .want_indicator {
     background-color: #f0d0d0 !important;
     &.high_want {
@@ -2336,7 +2439,7 @@
   }
 
   .community_number {
-    color: #323334 !important;
+    color: var(--main-bg-color) !important;
     text-shadow: none !important;
   }
 
@@ -2346,11 +2449,11 @@
     border-radius: 0 !important;
   }
 
-  /* Yellow */
+  /* Star Ratings */
 
   .rating_range .icon-star,
   .star_rating i {
-    color: #f7d06c !important;
+    color: var(--star-rating) !important;
   }
 
   /* react modals */
@@ -2361,7 +2464,7 @@
   #image_gallery_modal,
   #image_gallery_modal_1,
   .full-width-header-cover {
-    background-color: rgba(0, 0, 0, 0.75) !important;
+    background-color: var(--box-shadow-a) !important;
   }
 
   div.react-modal,
@@ -2372,19 +2475,19 @@
   .releasePreview.push_down,
   .user-details-tooltip,
   ul.dropdown-button-options {
-    background-color: #323334 !important;
-    border: 2px solid #ccc !important;
+    background-color: var(--main-bg-color) !important;
+    border: 2px solid var(--text-normal) !important;
   }
 
   .is_not_mobile {
     .action_menu li.menu-item:hover,
     .dropdown-button .dropdown-button-options li.menu-item:hover {
-      background-color: #2f2f2f !important;
+      background-color: var(--row-even) !important;
     }
   }
 
   .dropdown-button .is_not_mobile .dropdown-button-options li.menu-item:hover {
-    background-color: #2f2f2f !important;
+    background-color: var(--row-even) !important;
   }
 
   /* price history */
@@ -2394,19 +2497,19 @@
   }
 
   .ct-grid {
-    stroke: #454545 !important;
+    stroke: var(--headers-and-borders) !important;
     stroke-width: 1px !important;
     stroke-dasharray: 2px !important;
   }
 
   .chart-tooltip {
     background: #f4c63d !important;
-    color: #454545 !important;
+    color: var(--headers-and-borders) !important;
     span {
       &.tooltip-label,
       &.tooltip-name {
         background: #f4c63d !important;
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
       }
     }
   }
@@ -2415,36 +2518,35 @@
 
   .react_drag_drop_field_list .drag_drop_content,
   .editable_item {
-    /*    background: #2f2f2f !important;*/
-    border-top: 1px solid #454545 !important;
-    border-bottom: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   .react_drag_drop_field_list .drag_drop_content:hover,
   .editable_item:hover {
-    background: #292929 !important;
+    background: var(--headers-and-borders) !important;
   }
 
   .ref_guidelines_list > li.ref_guidelines_highlight {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
     &:hover {
-      background: #454545 !important;
+      background: var(--headers-and-borders) !important;
     }
   }
 
-  div.subform_table tr {
+  div.subform_table {
     &.subnotes,
     &.collection {
-      background: #1f1f1f !important;
+      background: var(--order-sidebar-bg) !important;
     }
   }
 
   table#subform_submit {
     td.left {
-      background: #2f2f2f !important;
+      background: var(--row-even)   !important;
     }
     td.last {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
     }
   }
 
@@ -2452,81 +2554,81 @@
 
   .ref_guidelines_list .ref_guidelines_heading {
     a {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
       &:hover,
       &:visited,
       i,
       &:hover i,
       &:visited i {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
     }
     i {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
       &:hover,
       &:visited {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
     }
   }
 
   div.format.collapsible a.collapse i {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     &:hover {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   .subform_track_actions a i {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     &:hover,
     &:visited {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   span#layout_buttons a.inset_button i {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
     &:visited {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
   }
 
   #ref_arrow {
-    border-right-color: #666666 !important;
+    border-right-color: var(--scroll-bar-thumb) !important;
     div {
-      border-right-color: #323334 !important;
+      border-right-color: var(--main-bg-color) !important;
     }
   }
 
   .reference_on #subform {
-    box-shadow: inset -10px -5px 6px -10px #000000 !important;
+    box-shadow: inset -10px -5px 6px -10px var(--black) !important;
   }
 
   .ref_mode_toggle {
-    color: #4dd2ff !important;
+    color: var(--uploader-hover) !important;
   }
 
   /* history form */
 
   .history_form {
-    border-top: 2px solid #454545 !important;
-    border-bottom: 2px solid #454545 !important;
+    border-top: 2px solid var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
     .actions {
-      border-left: 2px solid #454545 !important;
+      border-left: 2px solid var(--headers-and-borders) !important;
     }
   }
 
   .history {
     table tr.datarow:hover {
-      background: #322b36 !important;
+      background: var(--history-hover) !important;
     }
     .hili {
-      background: #ccc !important;
-      color: #322b36 !important;
+      background: var(--text-normal) !important;
+      color: var(--history-hover) !important;
     }
     table tr.datarow.highlight {
-      background: #4a3f50 !important;
+      background: var(--history-highlight) !important;
     }
   }
 
@@ -2534,36 +2636,36 @@
 
   .vote_info_helper {
     background-color: #fff2cc !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .hl_added {
     background-color: #aaffaa !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .hl_removed {
     background-color: #ffaaaa !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .hl_changed1 {
     background-color: #ffff77 !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .hl_changed2 {
     background-color: #dddd77 !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   .hl_warning {
     background-color: #99ffff !important;
-    color: #2f2f2f !important;
+    color: var(--row-even)   !important;
   }
 
   #namecheckmsg {
-    color: #000000 !important;
+    color: var(--black) !important;
   }
 
   /* options modal */
@@ -2587,17 +2689,17 @@
     z-index: 1000;
     top: 0;
     left: 0;
-    background-color: rgba(0, 0, 0, 0.4) !important;
+    background-color: var(--box-shadow-a) !important;
   }
 
   .options-modal-content {
     width: 25%;
     margin: 15% auto;
     padding: 20px;
-    background-color: #343434 !important;
-    border: 1px solid #888888;
+    background-color: var(--order-sidebar-bg) !important;
+    border: 1px solid var(--headers-and-borders) !important;
     border-radius: 5px;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 1px 5px var(--box-shadow-a) !important;
   }
 
   .options-close {
@@ -2628,12 +2730,12 @@
 
   .currency-converter {
     background-color: #333333 !important;
-    border: 1px solid gray !important;
-    color: white !important;
+    border: 1px solid var(--scroll-bar-thumb) !important;
+    color: var(--text-bold) !important;
     .toggle {
       background-color: #333333 !important;
       border-bottom: 1px solid #333333 !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -2644,56 +2746,55 @@
   }
 
   #de-next {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
   }
 
-  /* new feedback dialog box */
+  /* buyer / seller order feedback dialog box */
 
   .send-feedback-button {
-    border: solid 1px #525252 !important;
+    border: solid 1px var(--headers-and-borders) !important;
     border-right: 0 !important;
   }
 
   .send-feedback-button-negative {
-    border-right: 1px solid #525252 !important;
+    border-right: 1px solid var(--headers-and-borders) !important;
   }
 
   .send-feedback-buttons {
     .send-feedback-button-positive {
       i.icon.icon-thumbs-o-up,
       span {
-        color: #60c43f !important;
+        color: var(--button-green) !important;
       }
     }
     .send-feedback-button-negative {
       i.icon.icon-thumbs-o-down,
       span {
-        color: #bf3a38 !important;
+        color: var(--skittle-wantlist) !important;
       }
     }
   }
 
   #subform_preview {
-    border: 5px solid #292929 !important;
+    border: 5px solid var(--input-bg) !important;
     header {
-      background-color: #292929 !important;
+      background-color: var(--input-bg) !important;
     }
   }
 
   .subform_submission_notes {
-    border-top: 1px solid #454545 !important;
-    border-bottom: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   .subform_errors {
-    background: #360d0d !important;
+    background: var(--submission-form-error) !important;
   }
 
   /* Edit Master Release Page */
-
   .master_edit table.subform_table {
-    thead tr {
-      background: #1f1f1f !important;
+    tr.thead {
+      background: var(--headers-and-borders) !important;
     }
     border: none !important;
     tr,
@@ -2709,34 +2810,34 @@
   /* https://www.discogs.com/release/6265588-The-Rise-And-Fall-Of-Paramount-Records-1928-1932-Volume-2/history#latest */
 
   .data span.alert-message-text {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
   }
 
   /* Login Screen */
 
   #content {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
   }
 
   a.button.red {
-    background: #bf3a38 !important;
-    border-color: #982e2c !important;
+    background: var(--skittle-wantlist) !important;
+    border-color: var(--button-red) !important;
     span {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   i {
     &.icon-facebook,
     &.icon-google-plus {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   /* Data Quality chart on artist pages*/
 
   .data_quality_list .data_quality_meter {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
   }
 
   .data_quality {
@@ -2758,17 +2859,17 @@
   /* Offers page: user address popup */
 
   .user-details-tooltip.ui-dialog-arrow.ui-dialog-arrow-bottom-right::after {
-    border: #434343 !important;
+    border: var(--headers-and-borders) !important;
   }
 
   /* Offers page: accepted offer notification */
 
   .page-loading-bar.page-loading-bar-has-message {
-    background: #439adc !important;
+    background: var(--button-blue) !important;
     .loading-message span {
-      color: white !important;
+      color: var(--text-bold) !important;
       a {
-        color: white !important;
+        color: var(--text-bold) !important;
       }
     }
   }
@@ -2776,23 +2877,23 @@
   /* Edit Release page */
 
   .format .format_current_desc_list span {
-    color: white !important;
-    background: #326fb2 !important;
+    color: var(--text-bold) !important;
+    background: var(--skittle-inventory) !important;
   }
 
   .facet-tag {
-    color: white !important;
-    background: #326fb2 !important;
+    color: var(--text-bold) !important;
+    background: var(--skittle-inventory) !important;
     span,
     i {
-      color: white !important;
-      background: #326fb2 !important;
+      color: var(--text-bold) !important;
+      background: var(--skittle-inventory) !important;
     }
   }
 
   .result-item.current,
   .no-results.current {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
   }
 
   /* Beta Tracks UI */
@@ -2805,42 +2906,42 @@
     background: #2b5c87 !important;
     .open-survey-modal {
       background: #3b7eb9 !important;
-      color: #ccc !important;
+      color: var(--text-normal) !important;
     }
   }
 
   .tracks-beta-banner .open-survey-modal {
     background: #3b7eb9 !important;
-    color: #ccc !important;
+    color: var(--text-normal) !important;
   }
 
   .collection-beta-banner .open-survey-modal i,
   .tracks-beta-banner .open-survey-modal i {
-    color: #ccc !important;
+    color: var(--text-normal) !important;
   }
 
   .FacetGroup {
     .facet_count,
     a:hover .facet_count {
-      color: #ccc !important;
+      color: var(--text-normal) !important;
     }
   }
 
   #discography_header {
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
   }
 
   .TracksTable {
     header,
     .row {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
   }
 
   .CompositionApp {
     h3,
     .TrackOverview .TrackTitle {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -2849,30 +2950,30 @@
   }
 
   .viewing-tracks .TracksApp .CompositionDetails {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
   }
 
   .TracksApp .table-header .container,
   .viewing-tracks .TracksApp .CompositionDetails .Releases {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
 
   .TracksTable .row.expanded {
     &:after,
     &:before {
-      background: #454545 !important;
+      background: var(--headers-and-borders) !important;
     }
   }
 
   .CommunityStats .label,
   .track-title .CountLabel,
   .CompositionDetails footer {
-    color: #858585 !important;
+    color: var(--text-muted) !important;
   }
 
   .TracksApp > header .container,
   .viewing-tracks .TracksApp .Releases header .columns {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
 
   /* Dashboard friend comments */
@@ -2888,9 +2989,9 @@
 
   .form-block legend,
   .box-header-row.box-header-row-first {
-    background: #2f2f2f !important;
-    border-bottom: 1px solid #454545 !important;
-    border-top: 1px solid #454545 !important;
+    background: var(--row-even)   !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
   }
 
   .form-block legend.first {
@@ -2900,7 +3001,7 @@
   /* Advanced Search */
 
   #advanced_search_form.form-block {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   /* Wantlist search form */
@@ -2914,16 +3015,16 @@
   input {
     &[type="text"][disabled],
     &[type="password"][disabled] {
-      background: #2f2f2f !important;
+      background: var(--row-even)   !important;
     }
   }
 
   textarea[disabled],
   .fake-input[disabled] {
-    background: #2f2f2f !important;
+    background: var(--row-even)   !important;
   }
 
-  /* Edit Release: free text field and credits inputs */
+  /* Edit Release: free text field and cvar(--needs-changes)its inputs */
 
   #subform
     > table:nth-child(2)
@@ -2943,7 +3044,7 @@
     > li
     > input,
   .subform_react div.subform_table input {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   /* Edit Release: credits boxes */
@@ -2955,7 +3056,7 @@
   /* Edit Release: BAOI fields */
 
   #subform > table:nth-child(2) > tbody > tr:nth-child(4) > td > div > ul > li > div > fieldset > input[type="text"] {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   /* Fix weird margin on border with the dark theme */
@@ -2967,50 +3068,50 @@
   /* Staff label in forums */
 
   .text_label_staff {
-    background-color: #326fb2 !important;
-    color: #ccc !important;
+    background-color: var(--skittle-inventory) !important;
+    color: var(--text-normal) !important;
     &:visited {
-      background-color: #326fb2 !important;
-      color: #ccc !important;
+      background-color: var(--skittle-inventory) !important;
+      color: var(--text-normal) !important;
     }
   }
 
   /* Background color of the default icon SVGs */
 
   .default-image-as-icon {
-    background-color: #292929 !important;
+    background-color: var(--input-bg) !important;
   }
 
   /* Sound preview buttons */
 
   a.sound_preview strong {
-    color: #454545 !important;
+    color: var(--headers-and-borders) !important;
   }
 
   /* Index track background color */
 
   .section.tracklist table tr.tracklist_track.index_track {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
   }
 
   tr[class*="index_"] {
-    background: #292929 !important;
+    background: var(--input-bg) !important;
   }
 
   /* API Gear icon in forums */
 
   .forum-landing-topic-list.section-boxes {
     .icon.icon-cogs {
-      color: #ccc !important;
+      color: var(--text-normal) !important;
     }
     li {
       &:hover {
-        background: #2f2f2f !important;
+        background: var(--row-even)   !important;
       }
       border-top: none !important;
       border-left: none !important;
       border-right: none !important;
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
       &:last-child {
         border-bottom: none !important;
       }
@@ -3025,7 +3126,7 @@
   /* border between star rating and share link on release page */
 
   .section.social .rating_wrapper {
-    border-right: 1px solid #454545 !important;
+    border-right: 1px solid var(--headers-and-borders) !important;
   }
 
   /* Collection page */
@@ -3033,19 +3134,19 @@
   .FacetGroup.active .selected {
     span,
     i {
-      color: #fff !important;
+      color: var(--text-bold) !important;
     }
   }
 
   table.release-table thead tr {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
     th a span {
-      color: #809bbe !important;
+      color: var(--link) !important;
     }
   }
 
   .release-cards tr.release-table-card {
-    border-bottom: 2px solid #454545 !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
   }
 
   .collection-header .tab_menu {
@@ -3057,14 +3158,14 @@
       border-right: none !important;
     }
     .current {
-      border-bottom: 2px solid #ccc !important;
+      border-bottom: 2px solid var(--text-normal) !important;
       &.menu-item span,
       .icon {
-        color: #fff !important;
+        color: var(--text-bold) !important;
       }
     }
     .menu-item span {
-      color: #809bbe !important;
+      color: var(--link) !important;
     }
   }
 
@@ -3073,13 +3174,13 @@
       background: #354250 !important;
     }
     .bulk-actions {
-      background: #323334 !important;
-      border: 1px solid #454545 !important;
+      background: var(--main-bg-color) !important;
+      border: 1px solid var(--headers-and-borders) !important;
       // h5 {
-      //   background: #292929 !important;
+      //   background: var(--input-bg) !important;
       // }
       > div {
-        border-right: 1px solid #454545 !important;
+        border-right: 1px solid var(--headers-and-borders) !important;
       }
     }
   }
@@ -3089,21 +3190,21 @@
   #payment_columns .box-card-header,
   #payment_columns .box-card-content,
   #payment_columns .box-card {
-    background-color: #454545 !important;
+    background-color: var(--headers-and-borders) !important;
   }
 
   #paypal-button-container {
-    background: white !important;
+    background: var(--text-bold) !important;
   }
 
   .checkout-divider > span {
-    background: #323334 !important;
+    background: var(--main-bg-color) !important;
   }
 
   /* Review Preview box border */
 
   #review_compose.form-block div.review_preview {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   /* extra line height in reviews */
@@ -3115,13 +3216,13 @@
   /* filter sidebar in collection page */
 
   #CollectionApp .release-list aside {
-    background-color: #323334 !important;
+    background-color: var(--main-bg-color) !important;
   }
 
   /* Message header (Inbox) */
 
   .messageHeader {
-    border-bottom: 2px solid #454545 !important;
+    border-bottom: 2px solid var(--headers-and-borders) !important;
   }
 
   /* Buyer/Seller Settings */
@@ -3130,13 +3231,13 @@
   #seller-address-form,
   #seller-payment-form,
   #seller-shipping-policy {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   #seller-buyers-form {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
     + form {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
   }
 
@@ -3144,7 +3245,7 @@
     .form-block,
     .outset-box,
     .inset-box.push_down {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
     .reviews .form-block {
       border: none !important;
@@ -3153,70 +3254,71 @@
 
   /* Shipping policies */
 
-  .policies .inset-box {
-    border: 1px solid #454545 !important;
+  .policies .inset-box,
+  .inset-box {
+    border: 1px solid var(--headers-and-borders) !important;
   }
 
   .shipping_policy_editor {
     .policy,
     .method,
     .remove_link {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
     .method {
-      background: #323334 !important;
-      border: 1px solid gray !important;
+      background: var(--main-bg-color) !important;
+      border: 1px solid var(--scroll-bar-thumb) !important;
       &.contracted {
-        // background: #454545 !important;
-        border: 1px solid #454545 !important;
+        // background: var(--headers-and-borders) !important;
+        border: 1px solid var(--headers-and-borders) !important;
       }
       tr.range button {
-        background: #454545 !important;
-        border: 1px solid #cccccc !important;
+        background: var(--headers-and-borders) !important;
+        border: 1px solid var(--text-normal)  !important;
       }
     }
     .policy_right {
-      border-left: 1px solid #454545 !important;
+      border-left: 1px solid var(--headers-and-borders) !important;
     }
     .policy_bottom {
-      border-top: 1px solid #454545 !important;
+      border-top: 1px solid var(--headers-and-borders) !important;
     }
     .policy.contracted:hover:not(.disabled) {
       box-shadow: 0px 0px 0px 3px rgba(122, 155, 190, 0.4);
     }
     .policy_header {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
     .policy.expanded {
       .policy_top,
       .policy_tray {
-        border-bottom: 1px solid #454545 !important;
+        border-bottom: 1px solid var(--headers-and-borders) !important;
       }
     }
     .method.expanded .method_metadata,
     .method_time,
     .method_ranges,
     .method_constraint {
-      border-top: 1px solid #454545 !important;
+      border-top: 1px solid var(--headers-and-borders) !important;
     }
     .policy_header {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
     }
     .expander {
       .expander-icon {
         background-color: lightblue !important;
-        color: black !important;
+        color: var(--black) !important;
       }
     }
 
     .destinations li.branch.expanded:before {
-      border-left: 1px dotted gray !important;
+      border-left: 1px dotted var(--scroll-bar-thumb) !important;
     }
 
     .valid_policy_icon {
-      color: #60C43F !important;
+      color: var(--button-green) !important;
       i, div {
-        color: #60C43F !important;
+        color: var(--button-green) !important;
       }
     }
 
@@ -3237,7 +3339,7 @@
     .formats,
     .range_type_wrap,
     #shipping_service {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
 
     input[type="checkbox"].styled-checkbox:checked {
@@ -3255,16 +3357,16 @@
 
     .saved_policy_icon {
       border: 2px solid #5fc33e !important;
-      color: white !important;
+      color: var(--text-bold) !important;
 
       div {
-        color: white !important;
+        color: var(--text-bold) !important;
       }
     }
 
     .policy_errors {
       border: 2px solid #ba3837 !important;
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
@@ -3278,29 +3380,29 @@
 
   .cart_page .item-changed-hint,
   .order_free_shipping {
-    color: #323334 !important;
+    color: var(--main-bg-color) !important;
     background: #f7d266 !important;
     padding: 0px 3px;
     border-radius: 3px;
     i {
-      color: #323334 !important;
+      color: var(--main-bg-color) !important;
       background: #f7d266 !important;
       padding: 0px 3px;
       border-radius: 3px;
     }
 
     span {
-      color: #323334 !important;
+      color: var(--main-bg-color) !important;
     }
   }
 
   /* selected payment method */
 
   .cart-payment-method {
-    border-color: #454545 !important;
+    border-color: var(--headers-and-borders) !important;
     &.selected-method {
       background: rgba(50, 111, 178, 0.14) !important;
-      border-color: #326fb2 !important;
+      border-color: var(--skittle-inventory) !important;
     }
   }
 
@@ -3311,7 +3413,7 @@
   }
 
   .cart_page .order_total td {
-    border-top: 1px solid #454545 !important;
+    border-top: 1px solid var(--headers-and-borders) !important;
   }
 
   .order_container .box-header-row {
@@ -3322,24 +3424,24 @@
 
   .de-page-stamp {
     position: sticky;
-    background: #2f2f2f !important;
-    filter: drop-shadow(0px 1px #454545) !important;
+    background: var(--main-bg-color) !important;
+    filter: drop-shadow(0px 1px var(--headers-and-borders)) !important;
   }
 
   /* filter countries info tooltip */
 
   .country-list-info .country-list {
-    background: #454545 !important;
-    filter: drop-shadow(0 2px 2px #202020) !important;
+    background: var(--headers-and-borders) !important;
+    filter: drop-shadow(0 2px 2px var(--search-results-active)) !important;
   }
 
   /* inventory-ratings */
 
   .de-inventory-rating {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
     font-weight: bold;
     strong {
-      color: #e7413f !important;
+      color: var(--in-wantlist-border) !important;
       font-weight: bold;
     }
   }
@@ -3359,12 +3461,12 @@
 
   /* Quick search external icon */
   .de-external {
-    color: #829fc4 !important;
+    color: var(--link) !important;
   }
 
   // inbox message dropshadow
   #deh-wrapper table table {
-    box-shadow: 0 0 25px 0 #292929 !important;
+    box-shadow: 0 0 25px 0 var(--input-bg) !important;
   }
   #deh-wrapper table table table {
     box-shadow: none !important;
@@ -3372,76 +3474,76 @@
 
   // Disabled image tag in Release History page
   .text_label_red {
-    background: #BF3A38 !important;
+    background: var(--skittle-wantlist) !important;
   }
 
   .image_preview {
-    border-bottom: 1px solid #454545 !important;
+    border-bottom: 1px solid var(--headers-and-borders) !important;
 
     &.disabled {
-      background-color: #292929 !important;
+      background-color: var(--input-bg) !important;
     }
 
     &.dragging {
-      border: 5px dashed #454545 !important;
-      border-color: #4dd2ff !important;
+      border: 5px dashed var(--headers-and-borders) !important;
+      border-color: var(--uploader-hover) !important;
     }
   }
 
   // Highlights
   .highlight {
-    background: #4a3f50 !important;
+    background: var(--history-highlight) !important;
   }
   .hotkey {
-    color: #fff !important;
+    color: var(--text-bold) !important;
   }
 
   // text-format-shortcuts
   .quick-button {
-    color: #cccccc !important;
+    color: var(--text-normal)  !important;
 
     i.icon-chain {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
 
     &:hover,
     &:hover > i.icon-chain {
-      color: white !important;
+      color: var(--text-bold) !important;
     }
   }
 
   // demand-index
   .de-demand-negative {
-    color: #e7413f !important;
+    color: var(--in-wantlist-border) !important;
   }
   .de-demand-positive {
-    color: #60C43F !important;
+    color: var(--button-green) !important;
   }
 
   // cookie consent
   #onetrust-consent-sdk #onetrust-banner-sdk {
-    background-color: #000000 !important;
+    background-color: var(--black) !important;
 
     #onetrust-pc-btn-handler.cookie-setting-link {
       background-color: #1276ce !important;
-      color: #fff !important;
+      color: var(--text-bold) !important;
     }
 
     #onetrust-accept-btn-handler {
       background-color: #68b631 !important;
-      color: #fff !important;
+      color: var(--text-bold) !important;
       border-color: #68b631 !important;
     }
   }
   // Cookie settings
   #onetrust-pc-sdk {
-    background: #454545 !important;
+    background: var(--headers-and-borders) !important;
 
     .always-active {
       color: #287ce9 !important;
     }
     .close-icon {
-      color: #fff !important;
+      color: var(--text-bold) !important;
     }
     .accordion-text .switch-label {
       border: 1px solid #ddd !important;
@@ -3457,7 +3559,7 @@
     button {
       background-color: #68b631 !important;
       border-color: #68b631 !important;
-      color: #FFFFFF !important;
+      color: var(--text-bold) !important;
     }
   }
   #ot-sdk-btn.ot-sdk-show-settings {
@@ -3465,31 +3567,31 @@
     border: 1px solid #7d91b0 !important;
 
     &:hover {
-      color: #cae0fa !important;
-      border: 1px solid #cae0fa !important;
+      color: var(--link-hover) !important;
+      border: 1px solid var(--link-hover) !important;
     }
   }
 
   // + List Activity button in Customize This Page modal on Dashboard
   .react-modal #add_modules button:disabled span,
   .react-modal #add_modules button:disabled i {
-    color: #777777 !important;
+    color: var(--text-placeholder) !important;
   }
 
   // shipping rates modal
   .show-seller-terms,
   .view-shipping-methods,
   .show-shipping-methods {
-    color: #829fc4 !important;
+    color: var(--link) !important;
   }
 
   // View More Lists link
   .more_lists_link:before {
-    border-top: solid 1px #454545 !important;
+    border-top: solid 1px var(--headers-and-borders) !important;
   }
 
   .free-shipping-banner {
-    background: black !important;
+    background: var(--black) !important;
 
     div {
       color: #ecb10c !important;
@@ -3501,20 +3603,20 @@
   }
   // Search term highlights
   ins, mark {
-    background: gray !important;
-    color: #000000 !important;
+    background: var(--alert-info-bg) !important;
+    color: var(--black) !important;
   }
   // Additional Instructions on order page
   .additional-instructions {
-    background: #360d0d !important;
+    background: var(--submission-form-error) !important;
   }
 
   // Image Upload Consent Form
   #save_images {
-    border: 2px solid #454545 !important;
+    border: 2px solid var(--headers-and-borders) !important;
 
     .button-primary__default {
-      background-color: #000000 !important;
+      background-color: var(--black) !important;
     }
   }
 
@@ -3524,72 +3626,73 @@
 
   // Nav Bar
   div[id*="__header_root_"] header {
-    background: black !important;
+    background: var(--site-header-bg) !important;
 
     // Tooltips
     div[class*="_tooltip_"] {
-      background: black !important;
+      background: var(--black) !important;
     }
 
     // Search button
     button[type="submit"] {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
 
       svg[class*="_icon_"] path {
-        fill: grey !important;
+        fill: var(--text-muted) !important;
       }
     }
 
     // Search results
     div[class*="_listbox_"] {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
 
       a {
-        color: #ccc !important;
+        color: var(--text-normal) !important;
       }
     }
 
     // Explore / Marketplace / Community dropdowns
+    div[class*="_open"],
     div[class*="_desktop"] div[class*="_content"] {
-      background: black !important;
+      background: var(--black) !important;
 
       a {
-        color: #ccc !important;
+        color: var(--text-normal) !important;
       }
     }
 
     svg[class*="_spinner_"] {
-      fill: #ccc !important;
+      fill: var(--text-normal) !important;
     }
 
     // Category buttons on search results
     div[class*="_categories_"] {
       label[class*="_category_"] {
-        background: #454545 !important;
-        color: white !important;
+        background: var(--headers-and-borders) !important;
+        color: var(--text-bold) !important;
       }
 
       label[class*="_selected_"] {
-        background: #326fb2 !important;
+        background: var(--skittle-inventory) !important;
       }
     }
 
     // Search Results
     div[class*="_suggestions_"] {
       li[class*="_result_"] {
-        border-bottom: 1px solid #454545 !important;
+        border-bottom: 1px solid var(--headers-and-borders) !important;
 
         span[class*="_link_"] {
-          color: #829fc4 !important;
+          color: var(--link) !important;
         }
 
         &:hover {
-          background: #222 !important;
+          background: var(--search-results-active)!important;
         }
       }
 
       li[class*="_result_"][class*="_active_"] {
-        background: #222 !important;
+        background: var(--search-results-active)!important;
         outline: 2px solid #668cff !important;
         border-radius: 4px;
       }
@@ -3597,63 +3700,70 @@
 
     div[class*="_listbox_"] li {
       list-style: none;
-      color: #326fb2 !important;
+      color: var(--skittle-inventory) !important;
     }
 
     // Skittles
     div[class*="_skittle_"][class*="_collection_"] {
-      background: #60c43f !important;
-      color: white !important;
+      background: var(--button-green) !important;
+      color: var(--text-bold) !important;
 
       svg path {
-        fill: white !important;
+        fill: var(--text-bold) !important;
       }
     }
 
     div[class*="_skittle_"][class*="_wantlist_"] {
-      background: #bf3a38 !important;
-      color: white !important;
+      background: var(--skittle-wantlist) !important;
+      color: var(--text-bold) !important;
 
       svg path {
-        fill: white !important;
+        fill: var(--text-bold) !important;
       }
     }
 
     div[class*="_skittle_"][class*="_inventory_"] {
-      background: #326fb2 !important;
-      color: white !important;
+      background: var(--skittle-inventory) !important;
+      color: var(--text-bold) !important;
 
       svg path {
-        fill: white !important;
+        fill: var(--text-bold) !important;
       }
     }
 
     .de-random-item-tooltip {
-      background: black !important;
+      background: var(--black) !important;
+    }
+
+    nav[class*="_user"] {
+      a,
+      a:visited {
+        color: var(--text-normal) !important;
+      }
     }
   }
 
   #app {
     a[class*="logo_"] svg g {
-      fill: white !important;
+      fill: var(--text-bold) !important;
     }
 
     // search bar focus state
     form[class*="search_"][class*="focus_"] {
-        border: 2px solid #386aff !important;
+        border: 2px solid var(--input-focus-border) !important;
     }
 
     // search bar
     div[class*="root_"] > header[class*="header_"]:first-of-type {
-      background: black !important;
+      background: var(--site-header-bg) !important;
       border: none;
 
       form[class*="search_"] {
-        background: #292929 !important;
+        background: var(--input-bg) !important;
 
         button[class*="submit_"] {
           svg path {
-            color: grey !important;
+            color: var(--text-muted) !important;
           }
         }
       }
@@ -3661,8 +3771,8 @@
 
     #Credits {
       span[class*="fallback_"] {
-        border: 1px solid #454545 !important;
-        background: #292929 !important;
+        border: 1px solid var(--headers-and-borders) !important;
+        background: var(--input-bg) !important;
       }
     }
 
@@ -3680,7 +3790,7 @@
     }
 
     div[class*="noItems_"] {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
     }
 
     nav[class*="profile_"] {
@@ -3697,21 +3807,21 @@
       }
 
       div[class*="user_"] nav[class*="dropdown_"] li a[class*="link_"] {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
 
         &:hover {
-          color: #cccccc !important;
+          color: var(--text-normal)  !important;
           text-decoration: underline;
         }
       }
 
       // cart icon text
       a[href="/sell/cart"] {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
       }
       // messages icon
       a[href="/messages"] {
-        color: white !important;
+        color: var(--text-bold) !important;
       }
     }
 
@@ -3719,26 +3829,26 @@
     div[class*="tooltip_"],
     div[class*="active_"],
     nav[class*="dropdown_"] {
-      background: #000000 !important;
+      background: var(--black) !important;
 
       a {
-        color: #829fc4 !important;
+        color: var(--link) !important;
         &:visited {
-          color: #829fc4 !important;
+          color: var(--link) !important;
         }
         &:hover {
-          color: #cae0fa !important;
+          color: var(--link-hover) !important;
         }
       }
 
       div[class*="group_"] {
         a {
-          color: #ccc !important;
+          color: var(--text-normal) !important;
           &:visited {
-            color: #ccc !important;
+            color: var(--text-normal) !important;
           }
           &:hover {
-            color: #ccc !important;
+            color: var(--text-normal) !important;
           }
         }
       }
@@ -3749,62 +3859,62 @@
     }
 
     div[class*="user_"] ul[class*="dropdown_"] {
-      background: #000000 !important;
+      background: var(--black) !important;
       a {
-        color: #ccc !important;
+        color: var(--text-normal) !important;
         &:visited {
-          color: #ccc !important;
+          color: var(--text-normal) !important;
         }
         &:hover {
-          color: #ccc !important;
+          color: var(--text-normal) !important;
         }
       }
     }
 
-    // left arrow on credits tooltips
+    // left arrow on cvar(--needs-changes)its tooltips
     span[class*="link_"] {
       div[class*="tooltip_"] {
         &::before {
-          border-right-color: black !important;
+          border-right-color: var(--black) !important;
         }
         &::after {
-          border-right-color: black !important;
+          border-right-color: var(--black) !important;
         }
       }
     }
 
     .de-random-item-tooltip {
-      background: black !important;
+      background: var(--black) !important;
     }
 
     // release ID tooltip
     div#discogsid-tooltip {
-      background: #000000 !important;
+      background: var(--black) !important;
     }
 
     // global banner style (temporary?)
     div[class*="banner_"] {
-      background: #444444 !important;
+      background: var(--headers-and-borders) !important;
 
       div[class*="content_"] span a {
-        color: #829fc4 !important;
+        color: var(--link) !important;
 
         &:hover {
-          color: #cae0fa !important;
+          color: var(--link-hover) !important;
         }
 
         &:visited {
-          color: #829fc4 !important;
+          color: var(--link) !important;
         }
       }
     }
 
     div[class*="masterWrapper"] {
-      border-top: 1px solid #454545 !important;
+      border-top: 1px solid var(--headers-and-borders) !important;
     }
 
     button[class*="showMoreButton"] {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
 
     #release-header {
@@ -3815,7 +3925,7 @@
 
     #release-actions {
       header {
-        border-bottom: 1px solid #454545 !important;
+        border-bottom: 1px solid var(--headers-and-borders) !important;
       }
     }
 
@@ -3830,12 +3940,12 @@
 
     #release-videos {
       div[class*="player_"] {
-        background: black !important;
+        background: var(--black) !important;
       }
     }
 
     button[class*="grey_"][class*="disabled_"] {
-      background-color: #cccccc !important;
+      background-color: var(--text-normal)  !important;
       color: rgb(153, 153, 153) !important;
 
       svg[class*="icon_"] path {
@@ -3845,35 +3955,35 @@
 
     // in Collection box
     div[class*="collection_"] {
-      background-color: #1c3814 !important;
-      border: 1px solid #60c43f !important;
+      background-color: var(--in-collection-bg) !important;
+      border: 1px solid var(--in-collection-border) !important;
       border-radius: 3px;
       margin: 10px 5px;
-      color: white !important;
+      color: var(--text-bold) !important;
       font-size: 14px;
 
       label {
         font-weight: 400;
         font-size: 13px;
-        color: white !important;
+        color: var(--text-bold) !important;
       }
 
       div[class*="header_"] {
-        border-color: #60c43f !important;
+        border-color: var(--in-collection-border) !important;
 
         h2 {
-          color: white !important;
+          color: var(--text-bold) !important;
         }
       }
 
       div[class*="value_"] {
         white-space: pre-line !important;
-        color: white !important;
+        color: var(--text-bold) !important;
         word-break: break-word;
 
         div[class*="markup_"] {
           white-space: pre-line !important;
-          color: white !important;
+          color: var(--text-bold) !important;
           word-break: break-word;
         }
       }
@@ -3883,31 +3993,31 @@
       }
 
       button[class*="remove_"] {
-        color: #829fc4 !important;
+        color: var(--link) !important;
 
         &:hover {
-          color: #cae0fa !important;
+          color: var(--link-hover) !important;
         }
       }
 
       button[class*="save_"] {
-        color: #fff !important;
+        color: var(--text-bold) !important;
 
         &:hover {
-          background-image: linear-gradient(#60C43F, #59ba39) !important;
+          background-image: linear-gradient(var(--button-green), #59ba39) !important;
         }
       }
 
       button[class*="grey_"] {
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
 
         &:hover {
-          background-image: linear-gradient(#fff, #fafafa) !important;
+          background-image: linear-gradient(var(--text-bold), var(--button-disabled)) !important;
         }
       }
 
       select[class*="dropdown_"] {
-        color: white !important;
+        color: var(--text-bold) !important;
         &:hover {
           background: #355235 !important;
         }
@@ -3926,24 +4036,24 @@
 
     // In Wantlist box
     div[class*="wantlist_"] {
-      background-color: #561d1d !important;
-      border: 1px solid #e7413f !important;
+      background-color: var(--in-wantlist-bg) !important;
+      border: 1px solid var(--in-wantlist-border) !important;
       border-radius: 3px;
       margin-top: 10px;
 
       div[class*="header_"] {
-        border-color: #e7413f !important;
+        border-color: var(--in-wantlist-border) !important;
       }
     }
 
     div[class*="buttons_"] {
       button, path {
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
       }
     }
 
     div[class*="side_"]:nth-of-type(4) {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
 
     div[class*="side_"]:nth-of-type(5) {
@@ -3952,11 +4062,11 @@
 
         &:hover {
           svg[class*="icon_"] path {
-            color: #cae0fa !important;
+            color: var(--link-hover) !important;
           }
         }
         svg[class*="icon_"] path {
-          color: #829fc4 !important;
+          color: var(--link) !important;
         }
       }
     }
@@ -3967,20 +4077,20 @@
     // }
 
     div[class*="left_"] {
-      border-right: 1px solid #454545 !important;
+      border-right: 1px solid var(--headers-and-borders) !important;
     }
 
     // Star Ratings
     div[class*="ratings_"] svg[class*="fill_"] path,
     span[class*="rating_"] svg[class*="fill_"] path {
-      color: #f7d06c !important;
+      color: var(--star-rating) !important;
     }
 
     // Tracklist
     #release-tracklist {
       table {
         tr {
-          border-top: 1px solid #454545 !important;
+          border-top: 1px solid var(--headers-and-borders) !important;
         }
       }
       tbody > tr:first-child {
@@ -3988,11 +4098,11 @@
       }
       tbody {
         tr[class*="heading_"] {
-          background-color: #292929 !important;
+          background-color: var(--input-bg) !important;
         }
       }
       .tracklist_track.track_heading {
-        background-color: #292929 !important;
+        background-color: var(--input-bg) !important;
       }
       div[class*="buttons_"] {
         button[class*="disabled_"]:disabled {
@@ -4007,43 +4117,43 @@
     // search dropdown
     form[class*="search_"] {
       div[class*="dropdown_"] {
-        background-color: #292929 !important;
+        background-color: var(--input-bg) !important;
 
         div[class*="categories_"] {
           button {
-            border-right: 1px solid #292929 !important;
-            background: #454545 !important;
+            border-right: 1px solid var(--input-bg) !important;
+            background: var(--headers-and-borders) !important;
           }
           button[class*="active_"] {
-            background: #326fb2 !important;
-            color: white !important;
+            background: var(--skittle-inventory) !important;
+            color: var(--text-bold) !important;
           }
         }
 
         ul[class*="results_"] li {
-          border-bottom: 1px solid #454545 !important;
+          border-bottom: 1px solid var(--headers-and-borders) !important;
 
           a[class*="active_"] {
-            background: #222 !important;
+            background: var(--search-results-active)!important;
           }
 
           a:visited span[class*="title_"] {
-            color: #a590d0 !important;
+            color: var(--link-visited) !important;
           }
 
           a:hover span[class*="title_"] {
-            color: #cae0fa !important;
+            color: var(--link-hover) !important;
           }
 
           span[class*="title_"] {
-            color: #829fc4 !important;
+            color: var(--link) !important;
           }
 
           &:hover {
-            background: #222 !important;
+            background: var(--search-results-active)!important;
 
             span[class*="title_"] {
-              color: #cae0fa !important;
+              color: var(--link-hover) !important;
             }
           }
         }
@@ -4051,24 +4161,24 @@
     }
 
     nav[class*="dropdown_"] {
-      background-color: black !important;
+      background-color: var(--black) !important;
     }
 
     div[class*="menu_"] div[class*="dropdown_"] a {
-      color: #cccccc !important;
+      color: var(--text-normal)  !important;
     }
 
     div[class*="menu_"] div[class*="dropdown_"][class*="active_"] {
       h4 a,
       ul li a {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
 
         &:hover {
-          color: #cccccc !important;
+          color: var(--text-normal)  !important;
           text-decoration: underline;
         }
         &:visited {
-          color: #cccccc !important;
+          color: var(--text-normal)  !important;
         }
       }
     }
@@ -4076,48 +4186,48 @@
     // Other versions
     #release-other-versions {
       tr {
-        border-bottom: 1px solid #454545 !important;
+        border-bottom: 1px solid var(--headers-and-borders) !important;
       }
       span[class*="skittle_"][class*="collection_"],
       span[class*="skittle_"][class*="collection_"] span {
-        background: #60c43f !important;
-        color: white !important;
+        background: var(--button-green) !important;
+        color: var(--text-bold) !important;
       }
       span[class*="skittle_"][class*="wantlist_"] {
-        background: #bf3a38 !important;
-        color: white !important;
+        background: var(--skittle-wantlist) !important;
+        color: var(--text-bold) !important;
       }
       span[class*="skittle_"][class*="inventory_"] {
-        background: #326fb2 !important;
-        color: white !important;
+        background: var(--skittle-inventory) !important;
+        color: var(--text-bold) !important;
       }
     }
 
     // quick search skittles results
     span[class*="skittle_"][class*="collection_"],
     span[class*="skittle_"][class*="collection_"] span {
-      // background: #60c43f !important;
-      color: white !important;
+      // background: var(--button-green) !important;
+      color: var(--text-bold) !important;
     }
     span[class*="skittle_"][class*="wantlist_"],
     span[class*="skittle_"][class*="wantlist_"] span {
-      // background: #bf3a38 !important;
-      color: white !important;
+      // background: var(--skittle-wantlist) !important;
+      color: var(--text-bold) !important;
     }
     span[class*="skittle_"][class*="inventory_"],
     span[class*="skittle_"][class*="inventory_"] span {
-      // background: #326fb2 !important;
-      color: white !important;
+      // background: var(--skittle-inventory) !important;
+      color: var(--text-bold) !important;
     }
 
     // add to list modal
     div[class*="modal_"] {
-      background: #454545 !important;
+      background: var(--headers-and-borders) !important;
     }
 
     // reviews
     div[class*="review_"] {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
 
       &:last-of-type {
         border-bottom: none !important;
@@ -4130,27 +4240,27 @@
           background: none !important;
 
           svg[class*="icon_"] path {
-            color: #cae0fa !important;
+            color: var(--link-hover) !important;
           }
         }
 
         &[class*="link_"][class*="disabled_"] {
           background: none !important;
-          color: #999999 !important;
+          color: var(--button-disabled-text) !important;
 
           svg[class*="icon_"] path {
-            color: #999999 !important;
+            color: var(--button-disabled-text) !important;
           }
         }
       }
 
       button[class*="button_"] svg[class*="icon_"] path,
       a[class*="link_"] svg[class*="icon_"] path {
-        color: #829fc4 !important;
+        color: var(--link) !important;
       }
 
       div[class*="dropdown_"] button[class*="grey_"] {
-        color: #cccccc !important;
+        color: var(--text-normal)  !important;
 
         svg[class*="icon_"] {
           margin-right: 5px;
@@ -4161,27 +4271,27 @@
       div[class*="dropdown_"] ul {
         &::before,
         &::after {
-          border-bottom-color: black !important;
+          border-bottom-color: var(--black) !important;
         }
         li a::after {
-          border-bottom-color: black !important;
+          border-bottom-color: var(--black) !important;
         }
       }
 
       div[class*="dropdown_"] ul,
       div[class*="dropdown_"] ul li {
-        background: black !important;
+        background: var(--black) !important;
 
         // report button
         a:hover {
-          background: black !important;
+          background: var(--black) !important;
         }
       }
 
       // div[class*="dropdown_"] ul li button::hover {
-      //   border-bottom-color: #292929 !important;
+      //   border-bottom-color: var(--input-bg) !important;
       //   &::after {
-      //     border-bottom-color: #292929 !important;
+      //     border-bottom-color: var(--input-bg) !important;
       //   }
       // }
     }
@@ -4189,8 +4299,8 @@
     #release-marketplace {
       // inventory skittle on release page
       a[class*="skittle_"] {
-        background: #326fb2 !important;
-        color: white !important;
+        background: var(--skittle-inventory) !important;
+        color: var(--text-bold) !important;
       }
     }
 
@@ -4200,49 +4310,49 @@
       // Gradient overlays
       div[class*="wrapper_"] {
         &::before {
-          background: linear-gradient(to right, #323334, rgba(41, 41, 41, 0)) !important;
+          background: linear-gradient(to right, var(--main-bg-color), transparent) !important;
         }
         &::after {
-          background: linear-gradient(to left, #323334, rgba(41, 41, 41, 0)) !important;
+          background: linear-gradient(to left, var(--main-bg-color), transparent) !important;
         }
       }
 
       nav {
         button {
           svg path {
-            color: #829fc4 !important;
+            color: var(--link) !important;
           }
         }
       }
     }
 
     button[type="submit"][class*="grey_"] {
-      color: #454545 !important;
+      color: var(--headers-and-borders) !important;
     }
 
     button[type="submit"][class*="green_"] {
-      color: #ffffff !important;
-      background-color: #60c43f !important;
+      color: var(--text-bold) !important;
+      background-color: var(--button-green) !important;
     }
 
     button[type="submit"][disabled] {
-      background-color: #f2f2f2 !important;
-      background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-      border-color: #dbdbdb !important;
-      border-top-color: #e0e0e0 !important;
-      border-bottom-color: #d3d3d3 !important;
-      color: #999999 !important;
+      background-color: var(--button-disabled) !important;
+      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+      border-color: var(--border-disabled) !important;
+      border-top-color: var(--border-disabled-top) !important;
+      border-bottom-color: var(--border-disabled-bottom) !important;
+      color: var(--button-disabled-text) !important;
       cursor: pointer !important;
       &:hover,
       &:active,
       &:visited,
       &:focus {
-        background-color: #f2f2f2 !important;
-        background-image: linear-gradient(#f2f2f2, #eaeaea) !important;
-        border-color: #dbdbdb !important;
-        border-top-color: #e0e0e0 !important;
-        border-bottom-color: #d3d3d3 !important;
-        color: #999999 !important;
+        background-color: var(--button-disabled) !important;
+        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
+        border-color: var(--border-disabled) !important;
+        border-top-color: var(--border-disabled-top) !important;
+        border-bottom-color: var(--border-disabled-bottom) !important;
+        color: var(--button-disabled-text) !important;
         cursor: pointer !important;
       }
     }
@@ -4251,35 +4361,35 @@
 
     #release-reviews {
       div[class*="dropdown_"] ul li {
-        background: #292929 !important;
+        background: var(--input-bg) !important;
       }
     }
     div[class*="main_"] section[class*="open_"]:last-child {
       header {
-        border-bottom: 1px solid #454545 !important;
+        border-bottom: 1px solid var(--headers-and-borders) !important;
       }
     }
 
     div[class*="preview_"] div[class*="content_"] {
       min-height: 10px !important;
       padding: 5px !important;
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
 
     section header {
-      border-bottom: 1px solid #454545 !important;
+      border-bottom: 1px solid var(--headers-and-borders) !important;
     }
 
     div[class*="side_"] > div[class*="wrapper_"] {
-      border-top: 1px solid #454545 !important;
+      border-top: 1px solid var(--headers-and-borders) !important;
     }
 
     div[class*="content_"] {
       button[class*="link_"] {
-        color: #829fc4 !important;
+        color: var(--link) !important;
 
         &:hover {
-          color: #cae0fa !important;
+          color: var(--link-hover) !important;
         }
       }
     }
@@ -4287,55 +4397,53 @@
     // blue Buy button
     a[class*="blue_"],
     button[class*="blue_"] {
-      color: white !important;
+      color: var(--text-bold) !important;
 
       &:hover {
-        background-color: #4588c4 !important;
-        border-color: #3571a6 !important;
-        border-top-color: #3776ae !important;
-        border-bottom-color: #31699b !important;
-        color: white !important;
+        background-color: var(--button-blue) !important;
+        border-color: var(--button-blue-border) !important;
+        color: var(--text-bold) !important;
       }
     }
 
     // grey Sell button
     a[class*="grey_"],
     button[class*="grey_"] {
-      color: #454545 !important;
+      color: var(--headers-and-borders) !important;
 
       &:hover {
-        background-color: white !important;
+        background-color: var(--text-bold) !important;
         background-image: none !important;
-        color: #595959;
+        color: var(--headers-and-borders);
       }
     }
 
     // for sale count
     span[class*="forsale_"] span[class*="price_"] {
-      color: #e7413f !important;
+      color: var(--in-wantlist-border) !important;
     }
 
     #shortcuts {
-      background: #323334 !important;
+      background: var(--main-bg-color) !important;
 
       span[class*="key_"] {
-        background: #444 !important;
+        background: var(--headers-and-borders) !important;
       }
     }
 
     // Footer / Social Icons
     #site_footer_wrap {
       ul button {
-        color: #829fc4 !important;
+        color: var(--link) !important;
       }
 
       ul li h2 button {
-        color: #ccc !important;
+        color: var(--text-normal) !important;
       }
     }
 
     ul[class*="social_"] li span {
-      color: #829fc4 !important;
+      color: var(--link) !important;
 
       &:hover {
         color: #c9e0f9 !important;
@@ -4343,21 +4451,21 @@
     }
 
     ul[class*="social_"] svg path {
-      color: #829fc4 !important;
+      color: var(--link) !important;
     }
   }
 
   // Video Editor
   div[class*="panel_"] {
-    border: 1px solid #454545 !important;
+    border: 1px solid var(--headers-and-borders) !important;
 
     h3[class^="title_"] {
-      background: #454545 !important;
+      background: var(--headers-and-borders) !important;
     }
 
     button[class*="green_"] {
-      color: #ffffff !important;
-      background-color: #60c43f !important;
+      color: var(--text-bold) !important;
+      background-color: var(--button-green) !important;
 
       &[class^="disabled_"] {
         color: hsla(0,0%,100%,.6) !important;
@@ -4366,19 +4474,19 @@
 
     li[class^="video_"] {
       div[class^="duration_"] {
-        background: #000000 !important;
+        background: var(--black) !important;
       }
     }
 
     button[class*="grey_"] {
       svg[class*="icon_"] path {
-        color: #454545 !important;
+        color: var(--headers-and-borders) !important;
       }
     }
 
     ul[class*="list_"] {
       li[class*="video_"]:hover {
-        background: #454545 !important;
+        background: var(--headers-and-borders) !important;
       }
     }
   }
@@ -4388,89 +4496,89 @@
     button.aui-primary,
     // Shop This Version button
     a[class*="shop_"] {
-      background: black !important;
+      background: var(--black) !important;
     }
 
     #wantlist-button button[class*="_primary"] {
-      background: black !important;
+      background: var(--black) !important;
     }
 
     #wantlist-button--menu {
-      background: #292929 !important;
+      background: var(--input-bg) !important;
       box-shadow: 0 5px 10px hsl(0deg 0% 1% / 40%) !important;
 
       button:hover {
-        background: black !important;
+        background: var(--black) !important;
       }
     }
 
     button.aui-secondary {
-      border: 1px solid #454545 !important;
-      background: #292929 !important;
+      border: 1px solid var(--headers-and-borders) !important;
+      background: var(--input-bg) !important;
 
       &:hover {
-        background: #000 !important;
+        background: var(--black) !important;
       }
     }
 
     span[class*="tick_"] {
-      border: 1px solid #454545 !important;
+      border: 1px solid var(--headers-and-borders) !important;
     }
 
     span[class*="size_"] {
-      background: #454545 !important;
+      background: var(--headers-and-borders) !important;
     }
 
     div[class*="box_"] {
-      border: 1px solid #454545 !important;
-      background: #292929 !important;
+      border: 1px solid var(--headers-and-borders) !important;
+      background: var(--input-bg) !important;
       box-shadow: none;
 
       button.button_1Cxan,
       button:hover {
-        background: black !important;
+        background: var(--black) !important;
       }
 
       div[class*="item_"]:hover {
         span[class*="tick_"] {
-          border: 1px solid #cccccc !important;
+          border: 1px solid var(--text-normal)  !important;
         }
       }
 
       div[class*="size_"] {
-        background: #454545 !important;
+        background: var(--headers-and-borders) !important;
       }
     }
 
     div[class*="well_"] {
-      background-color: #292929 !important;
+      background-color: var(--input-bg) !important;
 
       td[class*="cell_"] {
         button[aria-checked=true] {
-          background-color: black !important;
+          background-color: var(--black) !important;
         }
       }
 
       td[class*="toggle_"] {
-        border-left: 1px solid #292929 !important;
+        border-left: 1px solid var(--input-bg) !important;
       }
 
       div[class*="tray_"] button[class*="_secondary"] {
-        border: 1px solid black !important;
+        border: 1px solid var(--black) !important;
 
         &:hover {
-          background: black !important;
+          background: var(--black) !important;
         }
       }
     }
 
     div[class*="list_"] {
-      border: 1px solid #454545 !important;
-      background: #292929 !important;
+      border: 1px solid var(--headers-and-borders) !important;
+      background: var(--input-bg) !important;
       box-shadow: none;
 
       button:hover {
-        background: black !important;
+        background: var(--black) !important;
       }
     }
 
@@ -4478,101 +4586,101 @@
       div[class*="content_"] {
 
         button[class*="chip_"] {
-          background: black !important;
+          background: var(--black) !important;
         }
 
         div[class*="progress_"] div[class*="bar_"] {
-          background: #7e99bc !important;
+          background: var(--link) !important;
         }
 
         table {
           tr[class*="row_"] {
-            background: #323334 !important;
+            background: var(--main-bg-color) !important;
           }
 
           div[class*="block_"] {
-            border-left: 1px solid #222222 !important;
+            border-left: 1px solid var(--search-results-active) !important;
           }
           div[class*="block_"] {
-            border-top: 1px solid #222222 !important;
-            border-left: 1px solid #222222 !important;
+            border-top: 1px solid var(--search-results-active) !important;
+            border-left: 1px solid var(--search-results-active) !important;
           }
           div[class*="tray_"] {
-            border-top: 1px solid #222222 !important;
-            background: #323334 !important;
+            border-top: 1px solid var(--search-results-active) !important;
+            background: var(--main-bg-color) !important;
           }
           div[class*="ratings_"] {
-            border-top: 1px solid #222222 !important;
-            border-bottom: 1px solid #222222 !important;
+            border-top: 1px solid var(--search-results-active) !important;
+            border-bottom: 1px solid var(--search-results-active) !important;
           }
           div[class*="footer_"] {
-            border-top: 1px solid #222222 !important;
+            border-top: 1px solid var(--search-results-active) !important;
           }
           div[class*="column_"]:not(:first-child) {
-            border-left: 1px solid #222222 !important;
+            border-left: 1px solid var(--search-results-active) !important;
           }
 
           tr[class*="row_"] {
-            background: #323334 !important;
-            border: 1px solid #454545 !important;
+            background: var(--main-bg-color) !important;
+            border: 1px solid var(--headers-and-borders) !important;
 
             &:hover {
-              background: #444 !important;
+              background: var(--headers-and-borders) !important;
             }
 
             td[class*="toggle__"] {
               svg path {
-                fill: #ccc !important;
+                fill: var(--text-normal) !important;
               }
 
               span[class*="skittle_"] svg[class^="icon_"] path {
-                fill: white !important;
+                fill: var(--text-bold) !important;
               }
 
               span[class*="row__Tag"] {
                 background: #f5df2e !important;
-                color: black !important;
+                color: var(--black) !important;
               }
             }
 
             button[class*="row__SortButton"] {
-              color: #829fc4 !important;
+              color: var(--link) !important;
               svg {
                 path {
-                  fill: #829fc4 !important;
+                  fill: var(--link) !important;
                 }
               }
             }
 
             div[class*="row__Tooltip"] {
-              background: black !important;
+              background: var(--black) !important;
             }
 
             span[class*="skittle_"][class*="collection_"] {
-              background: #60c43f !important;
-              color: white !important;
+              background: var(--button-green) !important;
+              color: var(--text-bold) !important;
             }
             span[class*="skittle_"][class*="wantlist_"] {
-              background: #bf3a38 !important;
-              color: white !important;
+              background: var(--skittle-wantlist) !important;
+              color: var(--text-bold) !important;
             }
             span[class*="skittle_"][class*="inventory_"] {
-              background: #326fb2 !important;
-              color: white !important;
+              background: var(--skittle-inventory) !important;
+              color: var(--text-bold) !important;
             }
           }
           // new submission
           span[class*="newsubmission_"] {
-            background: #f2b90d !important;
-            color: #323334 !important;
+            background: var(--new-submission) !important;
+            color: var(--main-bg-color) !important;
           }
           .oXLEV {
             background-color: rgba(242, 185, 13, 0.2) !important;
           }
           // needs changes
           span[class*="needschanges_"] {
-            background: red !important;
-            color: #323334 !important;
+            background: var(--needs-changes) !important;
+            color: var(--main-bg-color) !important;
           }
           // Data correct
           span[class*="correct_"] {
@@ -4580,7 +4688,7 @@
           }
           // prices
           .cWLZCm {
-            color: #e7413f !important;
+            color: var(--in-wantlist-border) !important;
           }
         }
 
@@ -4588,42 +4696,42 @@
           div[class*="ui__Wrapper"] {
 
             div[class*="ui__Box"] {
-              border: 1px solid #454545 !important;
-              background: #292929 !important;
+              border: 1px solid var(--headers-and-borders) !important;
+              background: var(--input-bg) !important;
 
               input {
                 &::placeholder {
-                  color: #666 !important;
+                  color: var(--scroll-bar-thumb) !important;
                 }
               }
 
               button[class*="ui__Button"] {
                 &:hover {
-                  background: black !important;
+                  background: var(--black) !important;
                 }
               }
             }
 
             #filter-select-listbox {
-              border: 1px solid #454545 !important;
-              background: #292929 !important;
+              border: 1px solid var(--headers-and-borders) !important;
+              background: var(--input-bg) !important;
               box-shadow: none;
 
               span[class*="ui__Tick"] {
-                border: 1px solid #454545 !important;
+                border: 1px solid var(--headers-and-borders) !important;
 
                 &.dMPUAr {
-                  background: black !important;
+                  background: var(--black) !important;
                 }
               }
 
               div[class*="ui__Size"] {
-                background: #454545 !important;
+                background: var(--headers-and-borders) !important;
               }
 
               div[class*="ui__Item-"] {
                 &:hover {
-                  background: #222 !important;
+                  background: var(--search-results-active)!important;
                 }
               }
 
@@ -4633,7 +4741,7 @@
 
         form[class*="ui__SearchBox"] {
           input:focus {
-            border: 1px solid #386aff !important;
+            border: 1px solid var(--input-focus-border) !important;
           }
         }
       }
@@ -4642,7 +4750,7 @@
 
   // Opt In toggle
   .optin_3Ze0T {
-    background: #222222 !important;
+    background: var(--search-results-active) !important;
 
     .switch_2cmFj.enabled_lxcoE {
       background: #377d25 !important;
diff --git a/js/extension/user-preferences.js b/js/extension/user-preferences.js
index 0fc0bc20..32e34d6c 100644
--- a/js/extension/user-preferences.js
+++ b/js/extension/user-preferences.js
@@ -213,7 +213,7 @@ window.getCookie = function (name) {
 // ========================================================
 
 // Dark Theme CSS is automatically appened via manifest.json on 'document_start'
-document.documentElement.classList.add('de-dark-theme', 'de-enabled');
+document.documentElement.classList.add('de-dark-theme', 'de-enabled', 'theme-navy');
 
 // Get the user's preferences (preferences are created on install in background.js)
 chrome.storage.sync.get('prefs', result => {

From b2681b97980491a3f1d57fd567485aa39533c1de Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:45:10 -0700
Subject: [PATCH 02/31] Add themeSelect element

---
 html/popup.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/html/popup.html b/html/popup.html
index 9523ac77..e4496c90 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -206,6 +206,11 @@ <h2>&#x1F44B; Heads up!</h2>
     <div class="toggle-group">
       <p class="label">Dark theme</p>
       <div class="meta hide">Dark Theme Colors Skin</div>
+      <select id="themeSelect">
+        <option value="" selected>Classic</option>
+        <option value="dimmed">Dimmed</option>
+        <option value="nebula">Nebula</option>
+      </select>
       <div class="onoffswitch">
         <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="toggleDarkTheme" checked>
         <label class="onoffswitch-label" for="toggleDarkTheme">

From 9bf681b70d1fc3a91f3fabfa1991643d59c74d43 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:45:26 -0700
Subject: [PATCH 03/31] Styles for themeSelect

---
 css/popup/popup.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/css/popup/popup.scss b/css/popup/popup.scss
index be53eef8..334329ee 100644
--- a/css/popup/popup.scss
+++ b/css/popup/popup.scss
@@ -680,6 +680,12 @@ input[type="checkbox"]:focus {
   z-index: 10;
 }
 
+#themeSelect {
+  margin-left: 9px;
+  margin-top: 1rem;
+  z-index: 10;
+}
+
 .status,
 .condition-status {
   position: absolute;

From cf7b483f42d5c7f7ae64b27339198bfe111e08a7 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:46:01 -0700
Subject: [PATCH 04/31] Add theme select logic

---
 js/extension/background.js                  |  1 +
 js/extension/user-preferences.js            |  4 ++-
 js/popup/popup-logic/features/dark-theme.js | 31 +++++++++++++++++++++
 js/popup/popup-logic/popup.js               |  3 ++
 js/popup/popup-logic/utils.js               |  1 +
 5 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/js/extension/background.js b/js/extension/background.js
index 41fb1835..f81d137d 100644
--- a/js/extension/background.js
+++ b/js/extension/background.js
@@ -26,6 +26,7 @@ prefs = {
   commentScanner: false,
   converter: true,
   darkTheme: false,
+  darkThemeVariant: '',
   demandIndex: false,
   editingNotepad: false,
   everlastingCollection: false,
diff --git a/js/extension/user-preferences.js b/js/extension/user-preferences.js
index 32e34d6c..f9ca80a6 100644
--- a/js/extension/user-preferences.js
+++ b/js/extension/user-preferences.js
@@ -213,13 +213,15 @@ window.getCookie = function (name) {
 // ========================================================
 
 // Dark Theme CSS is automatically appened via manifest.json on 'document_start'
-document.documentElement.classList.add('de-dark-theme', 'de-enabled', 'theme-navy');
+document.documentElement.classList.add('de-dark-theme', 'de-enabled');
 
 // Get the user's preferences (preferences are created on install in background.js)
 chrome.storage.sync.get('prefs', result => {
   prefs = result.prefs;
   // Disable the Dark Theme
   if (!prefs.darkTheme) document.documentElement.classList.remove('de-dark-theme');
+  // Set theme variant
+  if (prefs.darkThemeVariant) document.documentElement.classList.add(`theme-${prefs.darkThemeVariant}`);
 })
 
 // Resource Library
diff --git a/js/popup/popup-logic/features/dark-theme.js b/js/popup/popup-logic/features/dark-theme.js
index 7c299637..812dd18e 100644
--- a/js/popup/popup-logic/features/dark-theme.js
+++ b/js/popup/popup-logic/features/dark-theme.js
@@ -22,3 +22,34 @@ export async function useDarkTheme(event) {
     files: ['js/extension/features/toggle-dark-theme.js']
   }, () => { applySave(null, event) });
 }
+
+/**
+ * Sets the theme's classname to the root documentElement
+ * @method selectTheme
+ * @param {string} name - The name of the theme to apply
+ */
+function selectTheme(name) {
+  let prefix = "theme-",
+      classes = document.documentElement.className.split(' ').filter(c => !c.startsWith(prefix));
+
+  document.documentElement.className = classes.join(' ').trim();
+  document.documentElement.classList.add(`${prefix}${name}`);
+}
+
+/**
+ * Sets a specific dark theme
+ * @method   setDarkTheme
+ * @param    {Object}  event [The event object]
+ * @return   {undefined}
+ */
+export async function setDarkTheme(event) {
+
+  let tabId = await getTabId(),
+      select = document.getElementById('themeSelect')
+
+  chrome.scripting.executeScript({
+    target: {tabId: tabId},
+    func: selectTheme,
+    args: [select.value]
+  }, () => { applySave(null, event) });
+}
diff --git a/js/popup/popup-logic/popup.js b/js/popup/popup-logic/popup.js
index 92d56cc9..2069cac0 100644
--- a/js/popup/popup-logic/popup.js
+++ b/js/popup/popup-logic/popup.js
@@ -71,6 +71,7 @@ window.addEventListener('load', () => {
 
   let
       searchbox = document.getElementById('searchbox'),
+      selectDarkTheme = document.getElementById('themeSelect'),
       toggleAbsoluteDate = document.getElementById('toggleAbsoluteDate'),
       toggleAveragePrice = document.getElementById('toggleAveragePrice'),
       toggleBaoiFields = document.getElementById('toggleBaoiFields'),
@@ -263,6 +264,7 @@ window.addEventListener('load', () => {
   // ========================================================
   //
   // Adding A Feature: Step 5
+  selectDarkTheme.addEventListener('change', darkTheme.setDarkTheme);
   toggleAbsoluteDate.addEventListener('change', triggerSave);
   toggleAveragePrice.addEventListener('change', triggerSave);
   toggleBaoiFields.addEventListener('change', baoiFields.toggleBAOIfields);
@@ -441,6 +443,7 @@ window.addEventListener('load', () => {
     // Adding A Feature: Step 5
     chrome.storage.sync.get('prefs', ({ prefs }) => {
       // Feature preferences
+      selectDarkTheme.value = prefs.darkThemeVariant || '',
       toggleAbsoluteDate.checked = prefs.absoluteDate;
       toggleAveragePrice.checked = prefs.averagePrice;
       toggleBaoiFields.checked = prefs.baoiFields;
diff --git a/js/popup/popup-logic/utils.js b/js/popup/popup-logic/utils.js
index ef1e6944..dc3d5694 100644
--- a/js/popup/popup-logic/utils.js
+++ b/js/popup/popup-logic/utils.js
@@ -47,6 +47,7 @@ export function applySave(message, event, currencyTarget = 'currency') {
         confirmBeforeRemoving: document.getElementById('toggleConfirmBeforeRemoving').checked,
         converter: document.getElementById('toggleConverter').checked,
         darkTheme: document.getElementById('toggleDarkTheme').checked,
+        darkThemeVariant: document.getElementById('themeSelect').value,
         demandIndex: document.getElementById('toggleDemandIndex').checked,
         editingNotepad: document.getElementById( 'toggleEditingNotepad' ).checked,
         everlastingCollection: document.getElementById('toggleEverlastingCollection').checked,

From 365f128e241440544e31b16abe9e6053e44c014e Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 15:46:11 -0700
Subject: [PATCH 05/31] Update dark-theme.scss

---
 css/dark-theme.scss | 517 ++++++++++++++++++++++++--------------------
 1 file changed, 281 insertions(+), 236 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 10a69ee1..b250fe7d 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -1,3 +1,8 @@
+/*
+////////////////////////////////////
+// Classic Theme
+////////////////////////////////////
+*/
 :root {
   /* Main Discogs Header */
   --site-header-bg: #000000;
@@ -9,12 +14,13 @@
   --text-normal: #cccccc;
   --text-placeholder: #757575;
   /* Table Row alteration color */
-  --row-even: #383838;
+  --row-even: #2f2f2f;
   /* Box Shadows */
   --box-shadow-a: rgba(0, 0, 0, 0.5);
   --box-shadow-b: rgba(0, 0, 0, 0.8);
   /* Table Headers / Borders */
-  --headers-and-borders: #454545;
+  --headers: #454545;
+  --borders: #454545;
   /* Links */
   --link-hover: #cae0fa;
   --link-visited: #a590d0;
@@ -37,7 +43,7 @@
   --in-wantlist-border: #e7413f;
   /* Marketplace Selected Filters (Facets) */
   --facet-selected: #72a3d8;
-  /* Drag & Drop Image Uploader On Release Submission Form (dotted border) */
+  /* Drag & Drop Image Uploader On Release Submission Form and Dashboard modules (dotted border) */
   --uploader-hover: #4dd2ff;
   /* Borders Disabled */
   --border-disabled-bottom: #d3d3d3;
@@ -64,43 +70,56 @@
   --submission-form-error: #360d0d;
   /* Odds & Ends */
   --black: #000000;
+  --white: #ffffff;
   --scroll-bar-thumb: #666666;
   /* Release History */
   --history-highlight: #4a3f50;
   --history-hover: #322b36;
 }
+/*
+////////////////////////////////////
+// Dimmed Theme Overrides
+////////////////////////////////////
+*/
+.theme-dimmed {
+  --site-header-bg: #171717;
+  --main-bg-color: #2B2E32;
 
-.theme-navy {
-  --site-header-bg-old: #0f1115;
-  --site-header-bg-old: #2d333b;
+  --headers: #383a3e;
+  --borders: #3d3f45;
+
+  --row-even: #27292c;
+  --input-bg: #232428;
+
+  --in-collection-bg: #12311a;
+
+  --link: #7d9fcc;
+}
+/*
+////////////////////////////////////
+// Nebula Theme Overrides
+////////////////////////////////////
+*/
+.theme-nebula {
   --site-header-bg: #121519;
   --main-bg-color: #22272e;
-  --headers-and-borders: #2d333b;
-  --headers-and-borders: #373e47; // border
-  /* --headers-and-borders: #323942; // header */
+
+  --headers: #31373e;
+  --borders: #31373e;
 
   --row-even: #282e35;
   --input-bg: #1c2128;
+
   --alert-warning-bg: #f7d77a;
   --in-collection-bg: #12311a;
 
   --history-highlight: #484560;
   --history-hover: #353345;
-  /*
-  --in-collection-border: #558958;
-   --text-normal: #adbac7; */
-}
 
-.theme-film {
-  --site-header-bg: #121519;
-  --main-bg-color: #25272B;
-  --headers-and-borders: #303338;
-  --headers-and-borders: #3b3d43;
-  --row-even: #2B2E32;
-  --input-bg: #1F2125;
-  --in-collection-bg: #12311a;/*
-  --in-collection-border: #558958;
-   --text-normal: #adbac7; */
+  --text-muted: #768390;
+  --text-normal: #bdbdbd;
+  --text-bold: #d9d9d9;
+  --link-visited: #a78fd6;
 }
 
 .de-dark-theme {
@@ -166,15 +185,15 @@
   #quicklister {
     #searchPane {
       .main_search form::-webkit-scrollbar-thumb:not(.mac) {
-        background-color: var(--headers-and-borders) !important;
-        border: 2px solid var(--headers-and-borders) !important;
+        background-color: var(--headers) !important;
+        border: 2px solid var(--borders) !important;
         border-radius: 8px !important;
       }
       .my_upload_wrapper {
         &::-webkit-scrollbar-thumb:not(.mac),
         ul.searchFields::-webkit-scrollbar-thumb:not(.mac) {
-          background-color: var(--headers-and-borders) !important;
-          border: 2px solid var(--headers-and-borders) !important;
+          background-color: var(--headers) !important;
+          border: 2px solid var(--borders) !important;
           border-radius: 8px !important;
         }
       }
@@ -184,15 +203,15 @@
     .releasePreview::-webkit-scrollbar-thumb:not(.mac),
     #postPane::-webkit-scrollbar-thumb:not(.mac),
     #postPaneDefault::-webkit-scrollbar-thumb:not(.mac) {
-      background-color: var(--headers-and-borders) !important;
-      border: 2px solid var(--headers-and-borders) !important;
+      background-color: var(--headers) !important;
+      border: 2px solid var(--borders) !important;
       border-radius: 8px !important;
     }
   }
 
   body.mac .force_vertical_scrollbar::-webkit-scrollbar-thumb:not(.mac) {
-    background-color: var(--needs-changes) !important;
-    border: 2px solid var(--needs-changes) !important;
+    background-color: var(--headers) !important;
+    border: 2px solid var(--borders) !important;
     border-radius: 8px !important;
   }
 
@@ -421,7 +440,7 @@
   }
 
   #messages_list .messagelist tr.unread_message {
-    background-color: var(--headers-and-borders) !important;
+    background-color: var(--headers) !important;
     border-bottom: 1px solid var(--main-bg-color) !important;
   }
 
@@ -444,7 +463,7 @@
   }
 
   .ui-autocomplete a {
-    border-bottom: 1px var(--headers-and-borders) solid !important;
+    border-bottom: 1px var(--borders) solid !important;
     &:hover {
       background: var(--main-bg-color) !important;
     }
@@ -476,12 +495,12 @@
   }
 
   #site_footer_wrap {
-    border-top: 1px var(--headers-and-borders) solid !important;
+    background: var(--site-header-bg) !important;
   }
 
   .search_group .group_view_more {
-    border-top: 1px var(--headers-and-borders) solid !important;
-    background-color: var(--headers-and-borders) !important;
+    border-top: 1px var(--borders) solid !important;
+    background-color: var(--headers) !important;
   }
 
   .site_nav_tray {
@@ -525,11 +544,11 @@
 
   .box_header_row {
     background-color: var(--row-even) !important;
-    border-bottom: 1px var(--headers-and-borders) solid !important;
+    border-bottom: 1px var(--borders) solid !important;
   }
 
   .box-card .box-card-header {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   .order-user-address,
@@ -546,7 +565,7 @@
       background: var(--new-submission) !important;
     }
     &.mpitems tr {
-      border-bottom: 1px dotted var(--headers-and-borders) !important;
+      border-bottom: 1px dotted var(--borders) !important;
     }
     td[class*="needschanges_"] {
       background: var(--needs-changes) !important;
@@ -555,7 +574,7 @@
 
   aside li > a,
   .no_aside .doc_question > a {
-    border-bottom: 1px dotted var(--headers-and-borders) !important;
+    border-bottom: 1px dotted var(--borders) !important;
   }
 
   /* green success message after purchase */
@@ -590,7 +609,7 @@
       }
     }
     h2 {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
       color: var(--text-bold) !important;
     }
     .notes_field_label {
@@ -629,15 +648,15 @@
   }
 
   .aside_search_form {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   #commentPreview {
-    border: 2px solid var(--headers-and-borders) !important;
+    border: 2px solid var(--borders) !important;
   }
 
   .order-success-header {
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--borders) !important;
   }
 
   /* TODO: might make this an option */
@@ -685,7 +704,7 @@
   }
 
   .order_status_icon {
-    background-color: var(--headers-and-borders) !important;
+    background-color: var(--headers) !important;
     border: 2px solid var(--text-muted) !important;
   }
 
@@ -725,7 +744,7 @@
   table .wantlist-button,
   button.button-red i,
   a.button-red i {
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
   }
 
   /* white icons on colovar(--needs-changes) buttons */
@@ -767,43 +786,44 @@
   }
 
   .de-durations {
-    border-top: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
   }
 
   .module_blocks .dashboard_addmodules,
   ul.module_blocks > li.module_placeholder {
-    border: 5px dashed var(--headers-and-borders) !important;
+    border: 5px dashed var(--borders) !important;
   }
 
   .shipping_policy_editor {
     .add_range,
     .add_block {
-      border: 5px dashed var(--headers-and-borders) !important;
+      border: 5px dashed var(--borders) !important;
     }
   }
 
   .uploader {
-    border: 5px dashed var(--headers-and-borders) !important;
+    border: 5px dashed var(--borders) !important;
   }
 
   .has_files #uploader_messaging {
     background-color: var(--row-even)   !important;
   }
 
-  .uploader:hover {
+  .uploader:hover,
+  .dashboard_addmodules:hover {
     border-color: var(--uploader-hover) !important;
   }
 
   .vid_list ul {
-    border: 2px dashed var(--headers-and-borders) !important;
+    border: 2px dashed var(--borders) !important;
   }
 
   #quicklister .pane .inner_pane {
-    border-right: 2px dashed var(--headers-and-borders) !important;
+    border-right: 2px dashed var(--borders) !important;
   }
 
   #items {
-    border-right: 2px solid var(--headers-and-borders) !important;
+    border-right: 2px solid var(--borders) !important;
   }
 
   table.table_block tbody tr.even {
@@ -833,9 +853,9 @@
   }
 
   .cart_page .order_suggestions {
-    border-left: 1px solid var(--headers-and-borders) !important;
-    border-right: 1px solid var(--headers-and-borders) !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-left: 1px solid var(--borders) !important;
+    border-right: 1px solid var(--borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
     border-top: none !important;
   }
 
@@ -848,7 +868,7 @@
     }
     .thread_message,
     &.thread_linear .thread_message .thread_content {
-      border-top: 1px solid var(--headers-and-borders) !important;
+      border-top: 1px solid var(--borders) !important;
     }
   }
 
@@ -864,7 +884,7 @@
   ul.subs_list li,
   .history table tr,
   table.table_block tbody tr.delimit_above {
-    border-top: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
   }
 
   ul.subs_list li:hover {
@@ -872,13 +892,13 @@
   }
 
   hr {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
   }
 
   #full-width-header,
   .toolbar-wrapper,
   .footer-wrapper {
-    background: var(--main-bg-color) !important;
+    background: var(--input-bg) !important;
   }
 
   #full-width-header {
@@ -909,13 +929,13 @@
       text-decoration: none !important;
     }
     &:last-child {
-      border-right: 1px solid var(--headers-and-borders) !important;
+      border-right: 1px solid var(--borders) !important;
     }
   }
 
   .profile_sections.user_profile li {
     &:last-child {
-      border-right: 1px solid var(--headers-and-borders) !important;
+      border-right: 1px solid var(--borders) !important;
     }
     margin-left: -4px;
   }
@@ -941,13 +961,13 @@
 
   .button,
   a.button {
-    color: var(--headers-and-borders) !important;
+    color: var(--headers) !important;
   }
 
   .button {
     i,
     span {
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
     }
   }
 
@@ -956,7 +976,7 @@
   .inline_buttons.no_offer a,
   a.button.inv_add_button,
   .section_content.release_info_buttons a:not(.button-blue) {
-    color: var(--headers-and-borders) !important;
+    color: var(--headers) !important;
   }
 
   /* force color overrides on sell release/history links: ^= starts with, $= ends with, *= contains */
@@ -993,7 +1013,7 @@
   }
 
   div.multiple_buttons a[href^="/lists/"]:visited {
-    color: var(--headers-and-borders) !important;
+    color: var(--headers) !important;
   }
 
   #list_details.editable .textedit:hover div,
@@ -1022,14 +1042,14 @@
   .bulk_actions_submit input {
     background-color: var(--button-green) !important;
     border-color: var(--button-green-border) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
   }
 
   .button {
     &.button-green {
       span {
         border-color: var(--button-green-border) !important;
-        color: var(--text-bold) !important;
+        color: var(--white) !important;
       }
       &[disabled] {
         background-color: var(--button-disabled) !important;
@@ -1215,7 +1235,7 @@
   .button.button-blue span {
     background-color: var(--button-blue) !important;
     border-color: var(--button-blue-border) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
   }
 
   a.button.button_facebook_login.blue {
@@ -1225,7 +1245,7 @@
   .button {
     &.button-green .icon,
     &.button-red .icon {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1317,7 +1337,7 @@
     &.button.button-white {
       background-color: var(--text-bold) !important;
       background-image: none !important;
-      color: var(--headers-and-borders);
+      color: var(--headers);
     }
     &.mr_toggler.button.button-white {
       background-color: var(--scroll-bar-thumb) !important;
@@ -1373,7 +1393,7 @@
 
   div.price_flag_inline {
     border-top: 8px solid var(--needs-changes) !important;
-    border-right: 8px solid var(--headers-and-borders) !important;
+    border-right: 8px solid var(--borders) !important;
   }
 
   /* weird chrome textarea override */
@@ -1392,17 +1412,17 @@
   #review_compose.form_block div.review_preview {
     min-height: 10px !important;
     padding: 5px !important;
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   .form_block legend {
     background-color: var(--row-even) !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   .product-options {
-    border-top: 1px solid var(--headers-and-borders) !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   button.lazy_gallery_nav {
@@ -1460,7 +1480,7 @@
   .order-item-row,
   .pagination.top,
   .review {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   #collection .pagination.top {
@@ -1470,19 +1490,19 @@
   .cards .card {
     &.card_normal,
     &.card_text-only {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
   }
 
   #product h3.collection-title,
   .order-page-header {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   table.table_block {
     thead tr,
     tfoot tr {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
   }
 
@@ -1494,7 +1514,7 @@
   div.subform_table div.align_right,
   div.subform_table div.submission-form-section,
   .history_browser_facet_found {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   div.submission-form-section ul li.image_preview {
@@ -1509,7 +1529,7 @@
   table.table_block {
     thead tr,
     tfoot tr {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
   }
 
@@ -1556,7 +1576,7 @@
       }
     }
     thead th {
-      border-left: 1px solid var(--headers-and-borders) !important;
+      border-left: 1px solid var(--borders) !important;
     }
   }
 
@@ -1564,26 +1584,26 @@
   .profile_sections.user_profile a,
   .section-box:nth-child(3n + 1),
   .doc_resource:nth-child(3n + 1) {
-    border-left: 1px solid var(--headers-and-borders) !important;
+    border-left: 1px solid var(--borders) !important;
   }
 
   table {
     &.release_list_table tbody td,
     &.subform_table td {
-      border-left: 1px dotted var(--headers-and-borders) !important;
+      border-left: 1px dotted var(--borders) !important;
     }
   }
 
   table.subform_tracklist tr.subform_track  {
-    border-left: 1px solid var(--headers-and-borders) !important;
+    border-left: 1px solid var(--borders) !important;
   }
 
   .filtergroup {
-    border-left: 1px dotted var(--headers-and-borders) !important;
+    border-left: 1px dotted var(--borders) !important;
   }
 
   .doc_article {
-    border-right: 1px dotted var(--headers-and-borders) !important;
+    border-right: 1px dotted var(--borders) !important;
   }
 
   .card .card_body .card_status {
@@ -1597,7 +1617,7 @@
   .pagination.bottom,
   .user-feedback-component,
   #cartform table tr td {
-    border-top: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
   }
 
   #releases .pagination.bottom {
@@ -1618,29 +1638,29 @@
   }
 
   .order-total-row {
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--borders) !important;
   }
 
   /* green shipped */
   div[class*="skittles_"] span[class*="collection_"],
   .skittles .skittle.skittle_collection {
     background-color: var(--button-green) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
 
     i[class^="icon"] {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
   .skittle.skittle_collection {
     background-color: var(--button-green) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     span {
       background-color: var(--button-green) !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
     i[class^="icon"] {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1654,23 +1674,23 @@
   #order_process .order_step .order_status_icon.small_icon.in_progress,
   #order_process .order_step .order_status_icon.small_icon.in_progress i {
     background-color: var(--button-green) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     border-color: var(--text-bold) !important;
   }
 
   .order-status-label {
     &.order-status-label-shipped {
       background-color: var(--button-green) !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
       span,
       i {
         background-color: var(--button-green) !important;
-        color: var(--text-bold) !important;
+        color: var(--white) !important;
       }
     }
     &.order-status-label-new-order {
       background-color: var(--button-green) !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1999,7 +2019,7 @@
   #pw_confirm_new,
   input[type="text"]:not(.image_copy_permalink_text) {
     background: var(--input-bg) !important;
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
     outline: none !important;
     box-shadow: none !important;
     color: var(--text-bold) !important;
@@ -2015,6 +2035,10 @@
     border: none !important;
   }
 
+  div[class*="filters_"] div[role="listbox"] {
+    top: 72px;
+  }
+
   #site_search {
     background-color: var(--input-bg) !important;
     input#search_q {
@@ -2025,7 +2049,7 @@
   table.cards tr.credit_header,
   ul.module_blocks .header,
   table.table_block tfoot tr {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
     border-bottom: 1px solid var(--main-bg-color) !important;
   }
 
@@ -2100,13 +2124,13 @@
   #object_preview,
   ul.module_blocks > li,
   .tab_menu {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   .cart_page {
     .order_container,
     .order_help {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
   }
 
@@ -2122,7 +2146,7 @@
   .panel-default,
   .offers_box,
   .search_group {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   ul.module_blocks > li {
@@ -2134,15 +2158,15 @@
   }
 
   ul.module_blocks > li.table_body table thead tr {
-    background: var(--headers-and-borders) !important;
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    background: var(--headers) !important;
+    border-bottom: 2px solid var(--borders) !important;
   }
 
   .panel-success,
   .panel-info,
   .panel-danger,
   .panel-warning {
-    border-color: var(--headers-and-borders) !important;
+    border-color: var(--borders) !important;
   }
 
   .group-list-group-content {
@@ -2168,7 +2192,7 @@
 
   pre {
     background: var(--black) !important;
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
     code {
       background: var(--black) !important;
     }
@@ -2234,20 +2258,20 @@
   .alert-message {
     &.alert-message-info {
       background: var(--alert-info-bg) !important;
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
       line-height: 20px !important;
       i,
       div,
       .alert-message-content div {
         background: var(--alert-info-bg) !important;
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
         line-height: 20px !important;
       }
     }
     .icon.icon-times,
     &.alert-message-warning i {
       background: transparent !important;
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
     }
     &.alert-message-info a:not(.button):hover {
       color: var(--link-visited) !important;
@@ -2293,7 +2317,7 @@
       }
     }
     &.alert-message-broadcast {
-      background-color: var(--headers-and-borders) !important;
+      background-color: var(--headers) !important;
     }
     &.alert-message-news .announcement-title {
       color: var(--text-normal)  !important;
@@ -2341,24 +2365,24 @@
       }
     }
     &.alert-message-text {
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
       h4,
       .text,
       small {
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
       }
       strong,
       em {
         color: var(--text-placeholder) !important;
         a {
-          color: var(--headers-and-borders) !important;
+          color: var(--headers) !important;
           &:hover {
-            color: var(--headers-and-borders) !important;
+            color: var(--headers) !important;
           }
         }
       }
       ul li {
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
       }
     }
   }
@@ -2376,14 +2400,14 @@
   .tab_menu {
     border-top: none !important;
     border-right: none !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
     border-left: none !important;
     li {
       &.current {
         background: var(--main-bg-color) !important;
-        border-top: 1px solid var(--headers-and-borders) !important;
-        border-right: 1px solid var(--headers-and-borders) !important;
-        border-left: 1px solid var(--headers-and-borders) !important;
+        border-top: 1px solid var(--borders) !important;
+        border-right: 1px solid var(--borders) !important;
+        border-left: 1px solid var(--borders) !important;
         font-weight: bold;
         a {
           color: var(--text-bold) !important;
@@ -2399,14 +2423,14 @@
   }
 
   .section-box {
-    border-top: 1px solid var(--headers-and-borders) !important;
-    border-right: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
+    border-right: 1px solid var(--borders) !important;
   }
 
   .doc_resource {
-    border-top: 1px solid var(--headers-and-borders) !important;
-    border-right: 1px solid var(--headers-and-borders) !important;
-    border-left: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
+    border-right: 1px solid var(--borders) !important;
+    border-left: 1px solid var(--borders) !important;
   }
 
   .section-box {
@@ -2420,7 +2444,7 @@
   /* background bar graph on release stats sidebar */
 
   .facet-bar {
-    background-color: var(--headers-and-borders) !important;
+    background-color: var(--headers) !important;
   }
 
   /* Have / Want square bar graphs shown on each item in the Marketplace */
@@ -2497,19 +2521,19 @@
   }
 
   .ct-grid {
-    stroke: var(--headers-and-borders) !important;
+    stroke: var(--borders) !important;
     stroke-width: 1px !important;
     stroke-dasharray: 2px !important;
   }
 
   .chart-tooltip {
     background: #f4c63d !important;
-    color: var(--headers-and-borders) !important;
+    color: var(--headers) !important;
     span {
       &.tooltip-label,
       &.tooltip-name {
         background: #f4c63d !important;
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
       }
     }
   }
@@ -2518,19 +2542,19 @@
 
   .react_drag_drop_field_list .drag_drop_content,
   .editable_item {
-    border-top: 1px solid var(--headers-and-borders) !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   .react_drag_drop_field_list .drag_drop_content:hover,
   .editable_item:hover {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
   }
 
   .ref_guidelines_list > li.ref_guidelines_highlight {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
     &:hover {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
   }
 
@@ -2612,10 +2636,10 @@
   /* history form */
 
   .history_form {
-    border-top: 2px solid var(--headers-and-borders) !important;
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    border-top: 2px solid var(--borders) !important;
+    border-bottom: 2px solid var(--borders) !important;
     .actions {
-      border-left: 2px solid var(--headers-and-borders) !important;
+      border-left: 2px solid var(--borders) !important;
     }
   }
 
@@ -2668,6 +2692,16 @@
     color: var(--black) !important;
   }
 
+  /* input / textarea / checkbox focus states */
+  textarea[name="comment"]:focus-within,
+  input[name="query"]:focus-within,
+  .submission-form-section input[type="text"]:focus-within,
+  .submission-form-section textarea:focus-within,
+  .subform_tracklist input[type="text"]:focus-within,
+  .submission-form-section input[type="checkbox"]:focus-within {
+    outline: 2px solid var(--input-focus-border) !important;
+  }
+
   /* options modal */
 
   ul.options {
@@ -2697,7 +2731,7 @@
     margin: 15% auto;
     padding: 20px;
     background-color: var(--order-sidebar-bg) !important;
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
     border-radius: 5px;
     box-shadow: 0 1px 5px var(--box-shadow-a) !important;
   }
@@ -2752,12 +2786,12 @@
   /* buyer / seller order feedback dialog box */
 
   .send-feedback-button {
-    border: solid 1px var(--headers-and-borders) !important;
+    border: solid 1px var(--borders) !important;
     border-right: 0 !important;
   }
 
   .send-feedback-button-negative {
-    border-right: 1px solid var(--headers-and-borders) !important;
+    border-right: 1px solid var(--borders) !important;
   }
 
   .send-feedback-buttons {
@@ -2783,8 +2817,8 @@
   }
 
   .subform_submission_notes {
-    border-top: 1px solid var(--headers-and-borders) !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   .subform_errors {
@@ -2794,7 +2828,7 @@
   /* Edit Master Release Page */
   .master_edit table.subform_table {
     tr.thead {
-      background: var(--headers-and-borders) !important;
+      background: var(--borders) !important;
     }
     border: none !important;
     tr,
@@ -2816,7 +2850,7 @@
   /* Login Screen */
 
   #content {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
   }
 
   a.button.red {
@@ -2837,7 +2871,7 @@
   /* Data Quality chart on artist pages*/
 
   .data_quality_list .data_quality_meter {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
   }
 
   .data_quality {
@@ -2859,7 +2893,7 @@
   /* Offers page: user address popup */
 
   .user-details-tooltip.ui-dialog-arrow.ui-dialog-arrow-bottom-right::after {
-    border: var(--headers-and-borders) !important;
+    border: var(--borders) !important;
   }
 
   /* Offers page: accepted offer notification */
@@ -2893,7 +2927,7 @@
 
   .result-item.current,
   .no-results.current {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
   }
 
   /* Beta Tracks UI */
@@ -2928,20 +2962,20 @@
   }
 
   #discography_header {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
   }
 
   .TracksTable {
     header,
     .row {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
   }
 
   .CompositionApp {
     h3,
     .TrackOverview .TrackTitle {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
   }
 
@@ -2961,7 +2995,7 @@
   .TracksTable .row.expanded {
     &:after,
     &:before {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
   }
 
@@ -2990,8 +3024,8 @@
   .form-block legend,
   .box-header-row.box-header-row-first {
     background: var(--row-even)   !important;
-    border-bottom: 1px solid var(--headers-and-borders) !important;
-    border-top: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
+    border-top: 1px solid var(--borders) !important;
   }
 
   .form-block legend.first {
@@ -3001,7 +3035,7 @@
   /* Advanced Search */
 
   #advanced_search_form.form-block {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   /* Wantlist search form */
@@ -3044,7 +3078,7 @@
     > li
     > input,
   .subform_react div.subform_table input {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   /* Edit Release: credits boxes */
@@ -3056,7 +3090,7 @@
   /* Edit Release: BAOI fields */
 
   #subform > table:nth-child(2) > tbody > tr:nth-child(4) > td > div > ul > li > div > fieldset > input[type="text"] {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   /* Fix weird margin on border with the dark theme */
@@ -3085,7 +3119,7 @@
   /* Sound preview buttons */
 
   a.sound_preview strong {
-    color: var(--headers-and-borders) !important;
+    color: var(--headers) !important;
   }
 
   /* Index track background color */
@@ -3111,7 +3145,7 @@
       border-top: none !important;
       border-left: none !important;
       border-right: none !important;
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
       &:last-child {
         border-bottom: none !important;
       }
@@ -3126,7 +3160,7 @@
   /* border between star rating and share link on release page */
 
   .section.social .rating_wrapper {
-    border-right: 1px solid var(--headers-and-borders) !important;
+    border-right: 1px solid var(--borders) !important;
   }
 
   /* Collection page */
@@ -3139,14 +3173,14 @@
   }
 
   table.release-table thead tr {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
     th a span {
       color: var(--link) !important;
     }
   }
 
   .release-cards tr.release-table-card {
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--borders) !important;
   }
 
   .collection-header .tab_menu {
@@ -3175,12 +3209,12 @@
     }
     .bulk-actions {
       background: var(--main-bg-color) !important;
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
       // h5 {
       //   background: var(--input-bg) !important;
       // }
       > div {
-        border-right: 1px solid var(--headers-and-borders) !important;
+        border-right: 1px solid var(--borders) !important;
       }
     }
   }
@@ -3190,7 +3224,7 @@
   #payment_columns .box-card-header,
   #payment_columns .box-card-content,
   #payment_columns .box-card {
-    background-color: var(--headers-and-borders) !important;
+    background-color: var(--headers) !important;
   }
 
   #paypal-button-container {
@@ -3204,7 +3238,7 @@
   /* Review Preview box border */
 
   #review_compose.form-block div.review_preview {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   /* extra line height in reviews */
@@ -3222,7 +3256,7 @@
   /* Message header (Inbox) */
 
   .messageHeader {
-    border-bottom: 2px solid var(--headers-and-borders) !important;
+    border-bottom: 2px solid var(--borders) !important;
   }
 
   /* Buyer/Seller Settings */
@@ -3231,13 +3265,13 @@
   #seller-address-form,
   #seller-payment-form,
   #seller-shipping-policy {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   #seller-buyers-form {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
     + form {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
   }
 
@@ -3245,7 +3279,7 @@
     .form-block,
     .outset-box,
     .inset-box.push_down {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
     .reviews .form-block {
       border: none !important;
@@ -3256,50 +3290,50 @@
 
   .policies .inset-box,
   .inset-box {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
   }
 
   .shipping_policy_editor {
     .policy,
     .method,
     .remove_link {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
     .method {
       background: var(--main-bg-color) !important;
       border: 1px solid var(--scroll-bar-thumb) !important;
       &.contracted {
-        // background: var(--headers-and-borders) !important;
-        border: 1px solid var(--headers-and-borders) !important;
+        // background: var(--headers) !important;
+        border: 1px solid var(--borders) !important;
       }
       tr.range button {
-        background: var(--headers-and-borders) !important;
+        background: var(--borders) !important;
         border: 1px solid var(--text-normal)  !important;
       }
     }
     .policy_right {
-      border-left: 1px solid var(--headers-and-borders) !important;
+      border-left: 1px solid var(--borders) !important;
     }
     .policy_bottom {
-      border-top: 1px solid var(--headers-and-borders) !important;
+      border-top: 1px solid var(--borders) !important;
     }
     .policy.contracted:hover:not(.disabled) {
       box-shadow: 0px 0px 0px 3px rgba(122, 155, 190, 0.4);
     }
     .policy_header {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
     .policy.expanded {
       .policy_top,
       .policy_tray {
-        border-bottom: 1px solid var(--headers-and-borders) !important;
+        border-bottom: 1px solid var(--borders) !important;
       }
     }
     .method.expanded .method_metadata,
     .method_time,
     .method_ranges,
     .method_constraint {
-      border-top: 1px solid var(--headers-and-borders) !important;
+      border-top: 1px solid var(--borders) !important;
     }
     .policy_header {
       background: var(--input-bg) !important;
@@ -3339,7 +3373,7 @@
     .formats,
     .range_type_wrap,
     #shipping_service {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
 
     input[type="checkbox"].styled-checkbox:checked {
@@ -3399,7 +3433,7 @@
   /* selected payment method */
 
   .cart-payment-method {
-    border-color: var(--headers-and-borders) !important;
+    border-color: var(--borders) !important;
     &.selected-method {
       background: rgba(50, 111, 178, 0.14) !important;
       border-color: var(--skittle-inventory) !important;
@@ -3413,7 +3447,7 @@
   }
 
   .cart_page .order_total td {
-    border-top: 1px solid var(--headers-and-borders) !important;
+    border-top: 1px solid var(--borders) !important;
   }
 
   .order_container .box-header-row {
@@ -3425,13 +3459,13 @@
   .de-page-stamp {
     position: sticky;
     background: var(--main-bg-color) !important;
-    filter: drop-shadow(0px 1px var(--headers-and-borders)) !important;
+    filter: drop-shadow(0px 1px var(--headers)) !important;
   }
 
   /* filter countries info tooltip */
 
   .country-list-info .country-list {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
     filter: drop-shadow(0 2px 2px var(--search-results-active)) !important;
   }
 
@@ -3478,14 +3512,14 @@
   }
 
   .image_preview {
-    border-bottom: 1px solid var(--headers-and-borders) !important;
+    border-bottom: 1px solid var(--borders) !important;
 
     &.disabled {
       background-color: var(--input-bg) !important;
     }
 
     &.dragging {
-      border: 5px dashed var(--headers-and-borders) !important;
+      border: 5px dashed var(--borders) !important;
       border-color: var(--uploader-hover) !important;
     }
   }
@@ -3537,7 +3571,7 @@
   }
   // Cookie settings
   #onetrust-pc-sdk {
-    background: var(--headers-and-borders) !important;
+    background: var(--headers) !important;
 
     .always-active {
       color: #287ce9 !important;
@@ -3587,7 +3621,7 @@
 
   // View More Lists link
   .more_lists_link:before {
-    border-top: solid 1px var(--headers-and-borders) !important;
+    border-top: solid 1px var(--borders) !important;
   }
 
   .free-shipping-banner {
@@ -3613,7 +3647,7 @@
 
   // Image Upload Consent Form
   #save_images {
-    border: 2px solid var(--headers-and-borders) !important;
+    border: 2px solid var(--borders) !important;
 
     .button-primary__default {
       background-color: var(--black) !important;
@@ -3624,6 +3658,12 @@
   // NEW RELEASE PAGE STYLES
   // ==============================
 
+  // User Profile Avatar block in main Nav
+  li div[class*="user_"][class*="open_"],
+  #site_account_wrap.opened {
+    background: var(--black) !important;
+  }
+
   // Nav Bar
   div[id*="__header_root_"] header {
     background: var(--site-header-bg) !important;
@@ -3668,7 +3708,7 @@
     // Category buttons on search results
     div[class*="_categories_"] {
       label[class*="_category_"] {
-        background: var(--headers-and-borders) !important;
+        background: var(--headers) !important;
         color: var(--text-bold) !important;
       }
 
@@ -3680,7 +3720,7 @@
     // Search Results
     div[class*="_suggestions_"] {
       li[class*="_result_"] {
-        border-bottom: 1px solid var(--headers-and-borders) !important;
+        border-bottom: 1px solid var(--borders) !important;
 
         span[class*="_link_"] {
           color: var(--link) !important;
@@ -3748,9 +3788,14 @@
       fill: var(--text-bold) !important;
     }
 
-    // search bar focus state
+    // search bar / input / textarea focus state
+    div[class*="focused_"],
     form[class*="search_"][class*="focus_"] {
-        border: 2px solid var(--input-focus-border) !important;
+      outline: 2px solid var(--input-focus-border) !important;
+    }
+    textarea[name="review"]:focus-within,
+    form[class*="searchbox_"]:focus-within {
+      outline: 2px solid var(--input-focus-border) !important;
     }
 
     // search bar
@@ -3771,7 +3816,7 @@
 
     #Credits {
       span[class*="fallback_"] {
-        border: 1px solid var(--headers-and-borders) !important;
+        border: 1px solid var(--borders) !important;
         background: var(--input-bg) !important;
       }
     }
@@ -3894,7 +3939,7 @@
 
     // global banner style (temporary?)
     div[class*="banner_"] {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
 
       div[class*="content_"] span a {
         color: var(--link) !important;
@@ -3910,11 +3955,11 @@
     }
 
     div[class*="masterWrapper"] {
-      border-top: 1px solid var(--headers-and-borders) !important;
+      border-top: 1px solid var(--borders) !important;
     }
 
     button[class*="showMoreButton"] {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
 
     #release-header {
@@ -3925,7 +3970,7 @@
 
     #release-actions {
       header {
-        border-bottom: 1px solid var(--headers-and-borders) !important;
+        border-bottom: 1px solid var(--borders) !important;
       }
     }
 
@@ -4009,7 +4054,7 @@
       }
 
       button[class*="grey_"] {
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
 
         &:hover {
           background-image: linear-gradient(var(--text-bold), var(--button-disabled)) !important;
@@ -4048,12 +4093,12 @@
 
     div[class*="buttons_"] {
       button, path {
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
       }
     }
 
     div[class*="side_"]:nth-of-type(4) {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
 
     div[class*="side_"]:nth-of-type(5) {
@@ -4077,7 +4122,7 @@
     // }
 
     div[class*="left_"] {
-      border-right: 1px solid var(--headers-and-borders) !important;
+      border-right: 1px solid var(--borders) !important;
     }
 
     // Star Ratings
@@ -4090,7 +4135,7 @@
     #release-tracklist {
       table {
         tr {
-          border-top: 1px solid var(--headers-and-borders) !important;
+          border-top: 1px solid var(--borders) !important;
         }
       }
       tbody > tr:first-child {
@@ -4122,7 +4167,7 @@
         div[class*="categories_"] {
           button {
             border-right: 1px solid var(--input-bg) !important;
-            background: var(--headers-and-borders) !important;
+            background: var(--headers) !important;
           }
           button[class*="active_"] {
             background: var(--skittle-inventory) !important;
@@ -4131,7 +4176,7 @@
         }
 
         ul[class*="results_"] li {
-          border-bottom: 1px solid var(--headers-and-borders) !important;
+          border-bottom: 1px solid var(--borders) !important;
 
           a[class*="active_"] {
             background: var(--search-results-active)!important;
@@ -4186,7 +4231,7 @@
     // Other versions
     #release-other-versions {
       tr {
-        border-bottom: 1px solid var(--headers-and-borders) !important;
+        border-bottom: 1px solid var(--borders) !important;
       }
       span[class*="skittle_"][class*="collection_"],
       span[class*="skittle_"][class*="collection_"] span {
@@ -4222,12 +4267,12 @@
 
     // add to list modal
     div[class*="modal_"] {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
 
     // reviews
     div[class*="review_"] {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
 
       &:last-of-type {
         border-bottom: none !important;
@@ -4327,7 +4372,7 @@
     }
 
     button[type="submit"][class*="grey_"] {
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
     }
 
     button[type="submit"][class*="green_"] {
@@ -4366,22 +4411,22 @@
     }
     div[class*="main_"] section[class*="open_"]:last-child {
       header {
-        border-bottom: 1px solid var(--headers-and-borders) !important;
+        border-bottom: 1px solid var(--borders) !important;
       }
     }
 
     div[class*="preview_"] div[class*="content_"] {
       min-height: 10px !important;
       padding: 5px !important;
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
 
     section header {
-      border-bottom: 1px solid var(--headers-and-borders) !important;
+      border-bottom: 1px solid var(--borders) !important;
     }
 
     div[class*="side_"] > div[class*="wrapper_"] {
-      border-top: 1px solid var(--headers-and-borders) !important;
+      border-top: 1px solid var(--borders) !important;
     }
 
     div[class*="content_"] {
@@ -4409,12 +4454,12 @@
     // grey Sell button
     a[class*="grey_"],
     button[class*="grey_"] {
-      color: var(--headers-and-borders) !important;
+      color: var(--headers) !important;
 
       &:hover {
         background-color: var(--text-bold) !important;
         background-image: none !important;
-        color: var(--headers-and-borders);
+        color: var(--headers);
       }
     }
 
@@ -4427,7 +4472,7 @@
       background: var(--main-bg-color) !important;
 
       span[class*="key_"] {
-        background: var(--headers-and-borders) !important;
+        background: var(--headers) !important;
       }
     }
 
@@ -4457,10 +4502,10 @@
 
   // Video Editor
   div[class*="panel_"] {
-    border: 1px solid var(--headers-and-borders) !important;
+    border: 1px solid var(--borders) !important;
 
     h3[class^="title_"] {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
 
     button[class*="green_"] {
@@ -4480,13 +4525,13 @@
 
     button[class*="grey_"] {
       svg[class*="icon_"] path {
-        color: var(--headers-and-borders) !important;
+        color: var(--headers) !important;
       }
     }
 
     ul[class*="list_"] {
       li[class*="video_"]:hover {
-        background: var(--headers-and-borders) !important;
+        background: var(--headers) !important;
       }
     }
   }
@@ -4513,7 +4558,7 @@
     }
 
     button.aui-secondary {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
       background: var(--input-bg) !important;
 
       &:hover {
@@ -4522,21 +4567,21 @@
     }
 
     span[class*="tick_"] {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
     }
 
     span[class*="size_"] {
-      background: var(--headers-and-borders) !important;
+      background: var(--headers) !important;
     }
 
     div[class*="box_"] {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
       background: var(--input-bg) !important;
       box-shadow: none;
 
       button.button_1Cxan,
       button:hover {
-        background: var(--black) !important;
+        background: var(--row-even) !important;
       }
 
       div[class*="item_"]:hover {
@@ -4546,7 +4591,7 @@
       }
 
       div[class*="size_"] {
-        background: var(--headers-and-borders) !important;
+        background: var(--headers) !important;
       }
     }
 
@@ -4573,7 +4618,7 @@
     }
 
     div[class*="list_"] {
-      border: 1px solid var(--headers-and-borders) !important;
+      border: 1px solid var(--borders) !important;
       background: var(--input-bg) !important;
       box-shadow: none;
 
@@ -4622,10 +4667,10 @@
 
           tr[class*="row_"] {
             background: var(--main-bg-color) !important;
-            border: 1px solid var(--headers-and-borders) !important;
+            border: 1px solid var(--borders) !important;
 
             &:hover {
-              background: var(--headers-and-borders) !important;
+              background: var(--headers) !important;
             }
 
             td[class*="toggle__"] {
@@ -4696,7 +4741,7 @@
           div[class*="ui__Wrapper"] {
 
             div[class*="ui__Box"] {
-              border: 1px solid var(--headers-and-borders) !important;
+              border: 1px solid var(--borders) !important;
               background: var(--input-bg) !important;
 
               input {
@@ -4713,12 +4758,12 @@
             }
 
             #filter-select-listbox {
-              border: 1px solid var(--headers-and-borders) !important;
+              border: 1px solid var(--borders) !important;
               background: var(--input-bg) !important;
               box-shadow: none;
 
               span[class*="ui__Tick"] {
-                border: 1px solid var(--headers-and-borders) !important;
+                border: 1px solid var(--borders) !important;
 
                 &.dMPUAr {
                   background: var(--black) !important;
@@ -4726,7 +4771,7 @@
               }
 
               div[class*="ui__Size"] {
-                background: var(--headers-and-borders) !important;
+                background: var(--headers) !important;
               }
 
               div[class*="ui__Item-"] {

From c59c51d2aa647882079e683dd4916074bc137dc2 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 20:43:19 -0700
Subject: [PATCH 06/31] Move colors into vars

---
 css/dark-theme.scss | 424 +++++++++++++++++++++++++++-----------------
 1 file changed, 264 insertions(+), 160 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index b250fe7d..67327e3c 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -39,10 +39,37 @@
   /* Release In Collection / Wantlist Blocks */
   --in-collection-bg: #1c3814;
   --in-collection-border: #60c43f;
+  --in-collection-hover: #355235;
   --in-wantlist-bg: #561d1d;
   --in-wantlist-border: #e7413f;
   /* Marketplace Selected Filters (Facets) */
   --facet-selected: #72a3d8;
+  /* Marketplace have / want indicators */
+  --want-low-bg: #f0d0d0;
+  --want-high-bg: #e24242;
+  --have-low-bg: #b0d0b0;
+  --have-high-bg: #12cf12;
+  /* Release Sales Chart Tooltip */
+  --chart-bg: #f4c63d;
+  /* Release History Change Indicators */
+  --vote-helper-bg: #fff2cc;
+  --added: #aaffaa;
+  --removed: #ffaaaa;
+  --changed1: #ffff77;
+  --changed2: #dddd77;
+  --warning: #99ffff;
+  /* Artist Page Data Quality Chart */
+  --data-correct: #8ab87a;
+  --data-nmajc: #b8857a;
+  --data-nminc: #b8a87a;
+  --data-edit: #7a99b8;
+  /* Shipping Policy Editor */
+  --expander-icon: lightblue;
+  --policy-invalid-bg: #fee8d7;
+  --policy-invalid: #c7630e;
+  --policy-checked: #5fc33e;
+  --policy-indeterminate: #095afe;
+  --policy-error: #ba3837;
   /* Drag & Drop Image Uploader On Release Submission Form and Dashboard modules (dotted border) */
   --uploader-hover: #4dd2ff;
   /* Borders Disabled */
@@ -68,13 +95,50 @@
   /* Release Rating Stars */
   --star-rating: #f7d06c;
   --submission-form-error: #360d0d;
+  /* Order Status Badges */
+  --order-status-invoice-bg: #407fbf;
+  --order-status-invoice-border: #3973ac;
+  --order-status-payment-bg: #bf9f40;
+  --order-status-payment-border: #ac8f39;
+  --order-status-pending-bg: #f2ecd9;
+  --order-status-pending-text: #393013;
+  --order-status-shipped-bg: #60bf40;
+  --order-status-buyer-contact-bg: #4580b7;
+  /* Postive / Neutral / Negative Ratings */
+  --rating-positive-bg: #a8d388;
+  --rating-positive-text: #397326;
+  --rating-negative-bg: #ec9c9c;
+  --rating-negative-text: #733326;
+  --rating-negative-link: #822917;
+  --rating-neutral-bg: #cfcdc9;
+  --rating-netutral-text: #504e49;
+  /* Cart Page Order Minimum Notice */
+  --order-minimum-bg: #dbedff;
+  --order-minimum-border: #8ac4ff;
+  --order-minimum-text: #3a708b;
+  /* Cart Page Price Change Notice */
+  --price-change-bg: #f7d266;
+  /* Cart Page Selected Payment Method */
+  --selected-payment-method: rgba(50, 111, 178, 0.14);
+  /* Release History */
+  --history-highlight: #4a3f50;
+  --history-hover: #322b36;
+  /* API Documentation */
+  --api-strings: #718c00;
+  --api-numbers: #f5871f;
+  --api-comment: #8e908c;
+  --api-markup: #c82829;
+  --api-keyword: #8959a8;
+  /* Free Shipping Banner */
+  --free-shipping-text: #ecb10c;
+  --free-shipping-button: #3ea6c9;
+  /* Cookie Consent Modal */
+  --ot-settings: #1276ce;
+  --ot-show-settings: #7d91b0;
   /* Odds & Ends */
   --black: #000000;
   --white: #ffffff;
   --scroll-bar-thumb: #666666;
-  /* Release History */
-  --history-highlight: #4a3f50;
-  --history-hover: #322b36;
 }
 /*
 ////////////////////////////////////
@@ -179,7 +243,7 @@
   }
 
   ::-webkit-scrollbar-corner:not(.mac) {
-    background: rgb(25, 25, 25) !important;
+    background: var(--order-sidebar-bg) !important;
   }
 
   #quicklister {
@@ -340,6 +404,9 @@
 
   a:hover {
     s,
+    strong,
+    time,
+    p,
     &:not(.button) {
       color: var(--link-hover) !important;
     }
@@ -547,7 +614,9 @@
     border-bottom: 1px var(--borders) solid !important;
   }
 
-  .box-card .box-card-header {
+  .box-card .box-card-header,
+  .order-detail-row,
+  .toggle_section_control {
     border-bottom: 1px solid var(--borders) !important;
   }
 
@@ -632,7 +701,7 @@
     background: var(--main-bg-color) !important;
   }
   #full-width-header div.readmore_wrapper {
-    background: var(--search-results-active)!important;
+    background: var(--input-bg) !important;
   }
 
   .profile a.readmore_toggler {
@@ -655,10 +724,15 @@
     border: 2px solid var(--borders) !important;
   }
 
-  .order-success-header {
+  .order-success-header,
+  .order-refund-row.total {
     border-bottom: 2px solid var(--borders) !important;
   }
 
+  .group-list-group-background {
+    background: var(--input-bg) !important;
+  }
+
   /* TODO: might make this an option */
 
   .notes_textarea {
@@ -678,20 +752,20 @@
   #page_aside .selected_facets li a {
     background-color: var(--facet-selected) !important;
     border-radius: 2px !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     span {
       background-color: var(--facet-selected) !important;
       border-radius: 2px !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
     i {
       background-color: var(--facet-selected) !important;
       border-radius: 2px !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
       &:visited {
         background-color: var(--facet-selected) !important;
         border-radius: 2px !important;
-        color: var(--text-bold) !important;
+        color: var(--white) !important;
       }
     }
   }
@@ -1038,6 +1112,7 @@
   #site_header .button-green.button,
   .button.button-green,
   #login button,
+  a.register-btn,
   .inline_buttons.no_offer a.button.button-green,
   .bulk_actions_submit input {
     background-color: var(--button-green) !important;
@@ -1218,7 +1293,7 @@
     background: var(--button-blue) !important;
     background-color: var(--button-blue) !important;
     border-color: var(--button-blue-border) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
   }
 
   a {
@@ -1226,7 +1301,7 @@
     &.button-blue {
       background-color: var(--button-blue) !important;
       border-color: var(--button-blue-border) !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1832,13 +1907,13 @@
   /* blue invoiced */
 
   .order-status-label.order-status-label-invoice-sent {
-    background: #407fbf !important;
-    border-color: #3973ac !important;
+    background: var(--order-status-invoice-bg) !important;
+    border-color: var(--order-status-invoice-border) !important;
     color: var(--text-bold) !important;
     span,
     i {
-      background: #407fbf !important;
-      border-color: #3973ac !important;
+      background: var(--order-status-invoice-bg) !important;
+      border-color: var(--order-status-invoice-border) !important;
       color: var(--text-bold) !important;
     }
   }
@@ -1847,59 +1922,59 @@
 
   .order_status_icon {
     &.payment_received {
-      background: #bf9f40 !important;
+      background: var(--order-status-payment-bg) !important;
       border-color: var(--text-bold) !important;
-      color: #f9f5ec !important;
+      color: var(--white) !important;
       i,
       span {
-        background: #bf9f40 !important;
+        background: var(--order-status-payment-bg) !important;
         border-color: var(--text-bold) !important;
-        color: #f9f5ec !important;
+        color: var(--white) !important;
       }
     }
     &.shipped {
-      background: #60bf40 !important;
+      background: var(--order-status-shipped-bg) !important;
       border-color: var(--text-bold) !important;
     }
     &.buyer_contacted {
-      background: #4580b7 !important;
+      background: var(--order-status-buyer-contact-bg) !important;
       border-color: var(--text-bold) !important;
     }
     &.invoice_sent {
-      background: #407fbf !important;
+      background: var(--order-status-invoice-bg) !important;
       border-color: var(--text-bold) !important;
-      color: #ecf2f9 !important;
+      color: var(--white) !important;
     }
   }
 
   /* yellow payment recieved */
 
   .order-status-label.order-status-label-payment-received {
-    background: #bf9f40 !important;
-    border-color: #ac8f39 !important;
-    color: #f9f5ec !important;
+    background: var(--order-status-payment-bg) !important;
+    border-color: var(--order-status-payment-border) !important;
+    color: var(--white) !important;
     span,
     i {
-      background: #bf9f40 !important;
-      border-color: #ac8f39 !important;
-      color: #f9f5ec !important;
+      background: var(--order-status-payment-bg) !important;
+      border-color: var(--order-status-payment-border) !important;
+      color: var(--white) !important;
     }
   }
 
   .cart_page .order_shipping_hint,
   .cart_page .order_minimum {
-    background: #dbedff !important;
-    border: 1px solid #8ac4ff !important;
-    color: #3a708b !important;
+    background: var(--order-minimum-bg) !important;
+    border: 1px solid var(--order-minimum-border) !important;
+    color: var(--order-minimum-text) !important;
 
     &:hover {
       text-decoration: underline !important;
-      color: #3a708b !important;
+      color: var(--order-minimum-text) !important;
     }
   }
 
   .cart_page .order_minimum .currency_abbr {
-    color: #3a708b !important;
+    color: var(--order-minimum-text) !important;
   }
 
   .order_pay_now {
@@ -1927,26 +2002,26 @@
   }
 
   .order-status-label.order-status-label-payment-pending {
-    background: #f2ecd9 !important;
+    background: var(--order-status-pending-bg) !important;
     border-color: var(--text-bold) !important;
-    color: #393013 !important;
+    color: var(--order-status-pending-text) !important;
     i,
     span {
-      background: #f2ecd9 !important;
+      background: var(--order-status-pending-bg) !important;
       border-color: var(--text-bold) !important;
-      color: #393013 !important;
+      color: var(--order-status-pending-text) !important;
     }
   }
 
   .order_status_icon.payment_pending {
-    background: #f2ecd9 !important;
+    background: var(--order-status-pending-bg) !important;
     border-color: var(--text-bold) !important;
-    color: #393013 !important;
+    color: var(--order-status-pending-text) !important;
     i,
     span {
-      background: #f2ecd9 !important;
+      background: var(--order-status-pending-bg) !important;
       border-color: var(--text-bold) !important;
-      color: #393013 !important;
+      color: var(--order-status-pending-text) !important;
     }
   }
 
@@ -1964,14 +2039,14 @@
   }
 
   .pos_rating {
-    background: #a8d388 !important;
-    color: #397326 !important;
+    background: var(--rating-positive-bg) !important;
+    color: var(--rating-positive-text) !important;
     i {
-      background: #a8d388 !important;
-      color: #397326 !important;
+      background: var(--rating-positive-bg) !important;
+      color: var(--rating-positive-text) !important;
     }
     a {
-      color: #397326 !important;
+      color: var(--rating-positive-text) !important;
     }
   }
 
@@ -1983,14 +2058,14 @@
   }
 
   .neg_rating {
-    background: #ec9c9c !important;
-    color: #733326 !important;
+    background: var(--rating-negative-bg) !important;
+    color: var(--rating-negative-text) !important;
     i {
-      background: #ec9c9c !important;
-      color: #733326 !important;
+      background: var(--rating-negative-bg) !important;
+      color: var(--rating-negative-text) !important;
     }
     a {
-      color: #822917 !important;
+      color: var(--rating-negative-link) !important;
     }
   }
 
@@ -2002,11 +2077,11 @@
   }
 
   .neu_rating {
-    background: #cfcdc9 !important;
-    color: #504e49 !important;
+    background: var(--rating-neutral-bg) !important;
+    color: var(--rating-netutral-text) !important;
     i {
-      background: #cfcdc9 !important;
-      color: #504e49 !important;
+      background: var(--rating-neutral-bg) !important;
+      color: var(--rating-netutral-text) !important;
     }
   }
 
@@ -2072,18 +2147,18 @@
     }
     &.list tr.edit td.status,
     &.cw_releases tr.edit td.status {
-      background: #cfcdc9 !important;
+      background: var(--rating-neutral-bg) !important;
     }
   }
 
   div.search_result.needsvote div.flag {
-    background: #cfcdc9 !important;
+    background: var(--rating-neutral-bg) !important;
   }
 
   table {
     &.cards tr.edit td.status,
     &.release_list_table tr.edit td.status {
-      background: #cfcdc9 !important;
+      background: var(--rating-neutral-bg) !important;
     }
   }
 
@@ -2198,13 +2273,15 @@
     }
   }
 
+  /* Discogs API Documentation */
+
   .hljs-string,
   .hljs-value,
   .hljs-inheritance,
   .hljs-header,
   .ruby .hljs-symbol,
   .xml .hljs-cdata {
-    color: #718c00 !important;
+    color: var(--api-strings) !important;
   }
 
   .hljs-number,
@@ -2214,12 +2291,12 @@
   .hljs-literal,
   .hljs-params,
   .hljs-constant {
-    color: #f5871f !important;
+    color: var(--api-numbers) !important;
   }
 
   .hljs-comment,
   .hljs-title {
-    color: #8e908c !important;
+    color: var(--api-comment) !important;
   }
 
   .hljs-variable,
@@ -2227,32 +2304,32 @@
   .hljs-tag,
   .hljs-regexp,
   .ruby .hljs-constant {
-    color: #c82829 !important;
+    color: var(--api-markup) !important;
   }
 
   .xml {
     .hljs-tag .hljs-title,
     .hljs-pi,
     .hljs-doctype {
-      color: #c82829 !important;
+      color: var(--api-markup) !important;
     }
   }
 
   .html .hljs-doctype {
-    color: #c82829 !important;
+    color: var(--api-markup) !important;
   }
 
   .css {
     .hljs-id,
     .hljs-class,
     .hljs-pseudo {
-      color: #c82829 !important;
+      color: var(--api-markup) !important;
     }
   }
 
   .hljs-keyword,
   .javascript .hljs-function {
-    color: #8959a8 !important;
+    color: var(--api-keyword) !important;
   }
 
   .alert-message {
@@ -2449,16 +2526,16 @@
 
   /* Have / Want square bar graphs shown on each item in the Marketplace */
   .want_indicator {
-    background-color: #f0d0d0 !important;
+    background-color: var(--want-low-bg) !important;
     &.high_want {
-      background-color: #e24242 !important;
+      background-color: var(--want-high-bg) !important;
     }
   }
 
   .have_indicator {
-    background-color: #b0d0b0 !important;
+    background-color: var(--have-low-bg) !important;
     &.high_have {
-      background-color: #12cf12 !important;
+      background-color: var(--have-high-bg) !important;
     }
   }
 
@@ -2527,12 +2604,12 @@
   }
 
   .chart-tooltip {
-    background: #f4c63d !important;
+    background: var(--chart-bg) !important;
     color: var(--headers) !important;
     span {
       &.tooltip-label,
       &.tooltip-name {
-        background: #f4c63d !important;
+        background: var(--chart-bg) !important;
         color: var(--headers) !important;
       }
     }
@@ -2659,32 +2736,32 @@
   /* Release history edit tag bg color */
 
   .vote_info_helper {
-    background-color: #fff2cc !important;
+    background-color: var(--vote-helper-bg) !important;
     color: var(--row-even)   !important;
   }
 
   .hl_added {
-    background-color: #aaffaa !important;
+    background-color: var(--added) !important;
     color: var(--row-even)   !important;
   }
 
   .hl_removed {
-    background-color: #ffaaaa !important;
+    background-color: var(--removed) !important;
     color: var(--row-even)   !important;
   }
 
   .hl_changed1 {
-    background-color: #ffff77 !important;
+    background-color: var(--changed1) !important;
     color: var(--row-even)   !important;
   }
 
   .hl_changed2 {
-    background-color: #dddd77 !important;
+    background-color: var(--changed2) !important;
     color: var(--row-even)   !important;
   }
 
   .hl_warning {
-    background-color: #99ffff !important;
+    background-color: var(--warning) !important;
     color: var(--row-even)   !important;
   }
 
@@ -2695,6 +2772,9 @@
   /* input / textarea / checkbox focus states */
   textarea[name="comment"]:focus-within,
   input[name="query"]:focus-within,
+  input.countable:focus-within,
+  textarea:focus-within,
+  input#marketplace-search-input:focus-within,
   .submission-form-section input[type="text"]:focus-within,
   .submission-form-section textarea:focus-within,
   .subform_tracklist input[type="text"]:focus-within,
@@ -2740,7 +2820,7 @@
     float: right;
     font-size: 18px;
     font-weight: bold;
-    color: #aaaaaa;
+    color: var(--text-normal);
     &:hover,
     &:focus {
       color: black;
@@ -2763,12 +2843,12 @@
   }
 
   .currency-converter {
-    background-color: #333333 !important;
+    background-color: var(--main-bg-color) !important;
     border: 1px solid var(--scroll-bar-thumb) !important;
     color: var(--text-bold) !important;
     .toggle {
-      background-color: #333333 !important;
-      border-bottom: 1px solid #333333 !important;
+      background-color: var(--main-bg-color) !important;
+      border-bottom: 1px solid var(--main-bg-color) !important;
       color: var(--text-bold) !important;
     }
   }
@@ -2876,17 +2956,17 @@
 
   .data_quality {
     &.correct {
-      background: #8ab87a !important;
+      background: var(--data-correct) !important;
     }
     &.nmajc {
-      background: #b8857a !important;
+      background: var(--data-nmajc) !important;
     }
     &.nminc,
     &.new {
-      background: #b8a87a !important;
+      background: var(--data-nminc) !important;
     }
     &.edit {
-      background: #7a99b8 !important;
+      background: var(--data-edit) !important;
     }
   }
 
@@ -2930,7 +3010,7 @@
     background: var(--headers) !important;
   }
 
-  /* Beta Tracks UI */
+  /* Beta Tracks UI
 
   .tracks-beta-banner {
     background: #2b5c87 !important;
@@ -3009,6 +3089,7 @@
   .viewing-tracks .TracksApp .Releases header .columns {
     background: var(--main-bg-color) !important;
   }
+  */
 
   /* Dashboard friend comments */
 
@@ -3049,13 +3130,13 @@
   input {
     &[type="text"][disabled],
     &[type="password"][disabled] {
-      background: var(--row-even)   !important;
+      background: var(--row-even) !important;
     }
   }
 
   textarea[disabled],
   .fake-input[disabled] {
-    background: var(--row-even)   !important;
+    background: var(--row-even) !important;
   }
 
   /* Edit Release: free text field and cvar(--needs-changes)its inputs */
@@ -3340,7 +3421,7 @@
     }
     .expander {
       .expander-icon {
-        background-color: lightblue !important;
+        background-color: var(--expander-icon) !important;
         color: var(--black) !important;
       }
     }
@@ -3357,16 +3438,16 @@
     }
 
     .invalid_policy_icon {
-      color: #c7630e !important;
+      color: var(--policy-invalid) !important;
       i, div {
-        color: #c7630e !important;
+        color: var(--policy-invalid) !important;
       }
     }
 
     .invalid_method {
-      background: #fee8d7 !important;
+      background: var(--policy-invalid-bg) !important;
       i, div {
-        color: #c7630e !important;
+        color: var(--policy-invalid) !important;
       }
     }
 
@@ -3377,11 +3458,11 @@
     }
 
     input[type="checkbox"].styled-checkbox:checked {
-      background: #5fc33e !important;
+      background: var(--policy-checked) !important;
     }
 
     input[type="checkbox"].styled-checkbox:not(.switch):indeterminate {
-      background-color: #095afe !important;
+      background-color: var(--policy-indeterminate) !important;
     }
 
     .destinations li .expander-icon {
@@ -3390,7 +3471,7 @@
     }
 
     .saved_policy_icon {
-      border: 2px solid #5fc33e !important;
+      border: 2px solid var(--policy-checked) !important;
       color: var(--text-bold) !important;
 
       div {
@@ -3399,7 +3480,7 @@
     }
 
     .policy_errors {
-      border: 2px solid #ba3837 !important;
+      border: 2px solid var(--policy-error) !important;
       color: var(--text-bold) !important;
     }
   }
@@ -3415,12 +3496,12 @@
   .cart_page .item-changed-hint,
   .order_free_shipping {
     color: var(--main-bg-color) !important;
-    background: #f7d266 !important;
+    background: var(--price-change-bg) !important;
     padding: 0px 3px;
     border-radius: 3px;
     i {
       color: var(--main-bg-color) !important;
-      background: #f7d266 !important;
+      background: var(--price-change-bg) !important;
       padding: 0px 3px;
       border-radius: 3px;
     }
@@ -3435,7 +3516,7 @@
   .cart-payment-method {
     border-color: var(--borders) !important;
     &.selected-method {
-      background: rgba(50, 111, 178, 0.14) !important;
+      background: var(--selected-payment-method) !important;
       border-color: var(--skittle-inventory) !important;
     }
   }
@@ -3554,51 +3635,65 @@
     color: var(--button-green) !important;
   }
 
-  // cookie consent
-  #onetrust-consent-sdk #onetrust-banner-sdk {
+  // one trust cookie consent
+  #onetrust-consent-sdk {
     background-color: var(--black) !important;
 
     #onetrust-pc-btn-handler.cookie-setting-link {
-      background-color: #1276ce !important;
+      background-color: var(--ot-settings) !important;
       color: var(--text-bold) !important;
     }
 
     #onetrust-accept-btn-handler {
-      background-color: #68b631 !important;
+      background-color: var(--button-green) !important;
       color: var(--text-bold) !important;
-      border-color: #68b631 !important;
+      border-color: var(--button-green) !important;
     }
   }
   // Cookie settings
   #onetrust-pc-sdk {
     background: var(--headers) !important;
 
+    .ot-pc-logo img,
+    #close-pc-btn-handler {
+      filter: invert(1) !important;
+    }
     .always-active {
-      color: #287ce9 !important;
+      color: var(--ot-settings) !important;
     }
     .close-icon {
       color: var(--text-bold) !important;
     }
     .accordion-text .switch-label {
-      border: 1px solid #ddd !important;
-      background-color: #f2f1f1 !important;
+      border: 1px solid var(--button-disabled-text) !important;
+      background-color: var(--white) !important;
     }
     .switch-nob {
-      background: #7d7d7d !important;
-      border: 2px solid #7d7d7d !important;
+      background: var(--button-disabled-text) !important;
+      border: 2px solid var(--button-disabled-text) !important;
     }
+    .ot-tgl input:checked+.ot-switch .ot-switch-nob,
     .switch-inner:before {
-      background-color: #5BD14B !important;
+      background-color: var(--button-green) !important;
     }
-    button {
-      background-color: #68b631 !important;
-      border-color: #68b631 !important;
-      color: var(--text-bold) !important;
+    .ot-tgl input+.ot-switch .ot-switch-nob,
+    .ot-accordion-layout {
+      border: 2px solid var(--button-disabled-text) !important;
+    }
+    .ot-plus-minus span {
+      background: var(--white) !important;
+    }
+    .ot-btn-container {
+      border-top: 2px solid var(--button-disabled-text) !important;
+    }
+    .save-preference-btn-handler {
+      background: var(--black) !important;
     }
   }
+
   #ot-sdk-btn.ot-sdk-show-settings {
-    color: #7d91b0 !important;
-    border: 1px solid #7d91b0 !important;
+    color: var(--ot-show-settings) !important;
+    border: 1px solid var(--ot-show-settings) !important;
 
     &:hover {
       color: var(--link-hover) !important;
@@ -3628,10 +3723,10 @@
     background: var(--black) !important;
 
     div {
-      color: #ecb10c !important;
+      color: var(--free-shipping-text) !important;
 
       button {
-        color: #3ea6c9 !important;
+        color: var(--free-shipping-button) !important;
       }
     }
   }
@@ -3733,7 +3828,7 @@
 
       li[class*="_result_"][class*="_active_"] {
         background: var(--search-results-active)!important;
-        outline: 2px solid #668cff !important;
+        outline: 2px solid var(--input-focus-border) !important;
         border-radius: 4px;
       }
     }
@@ -3991,10 +4086,10 @@
 
     button[class*="grey_"][class*="disabled_"] {
       background-color: var(--text-normal)  !important;
-      color: rgb(153, 153, 153) !important;
+      color: var(--button-disabled-text) !important;
 
       svg[class*="icon_"] path {
-        color: rgb(153, 153, 153) !important;
+        color: var(--button-disabled-text) !important;
       }
     }
 
@@ -4034,7 +4129,7 @@
       }
 
       button[class*="wrapper_"]:hover {
-        background: #355235 !important;
+        background: var(--in-collection-hover) !important;
       }
 
       button[class*="remove_"] {
@@ -4045,26 +4140,28 @@
         }
       }
 
+      // notes save button
       button[class*="save_"] {
-        color: var(--text-bold) !important;
+        color: var(--white) !important;
 
         &:hover {
-          background-image: linear-gradient(var(--button-green), #59ba39) !important;
+          background: var(--button-green-border) !important;
         }
       }
 
+      // notes cancel button
       button[class*="grey_"] {
         color: var(--headers) !important;
 
         &:hover {
-          background-image: linear-gradient(var(--text-bold), var(--button-disabled)) !important;
+          background: var(--text-bold) !important;
         }
       }
 
       select[class*="dropdown_"] {
         color: var(--text-bold) !important;
         &:hover {
-          background: #355235 !important;
+          background: var(--in-collection-hover) !important;
         }
       }
 
@@ -4151,7 +4248,7 @@
       }
       div[class*="buttons_"] {
         button[class*="disabled_"]:disabled {
-          color: #8c8c8c !important;
+          color: var(--text-muted) !important;
         }
         button[class*="button_"] svg[class*="icon_"] {
           margin-right: .5rem;
@@ -4210,20 +4307,20 @@
     }
 
     div[class*="menu_"] div[class*="dropdown_"] a {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
 
     div[class*="menu_"] div[class*="dropdown_"][class*="active_"] {
       h4 a,
       ul li a {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
 
         &:hover {
-          color: var(--text-normal)  !important;
+          color: var(--text-normal) !important;
           text-decoration: underline;
         }
         &:visited {
-          color: var(--text-normal)  !important;
+          color: var(--text-normal) !important;
         }
       }
     }
@@ -4332,13 +4429,12 @@
           background: var(--black) !important;
         }
       }
+    }
 
-      // div[class*="dropdown_"] ul li button::hover {
-      //   border-bottom-color: var(--input-bg) !important;
-      //   &::after {
-      //     border-bottom-color: var(--input-bg) !important;
-      //   }
-      // }
+    div[class*="replies_"] {
+      button[class*="button_"][class*="red_"] {
+        color: var(--white) !important;
+      }
     }
 
     #release-marketplace {
@@ -4382,7 +4478,6 @@
 
     button[type="submit"][disabled] {
       background-color: var(--button-disabled) !important;
-      background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
       border-color: var(--border-disabled) !important;
       border-top-color: var(--border-disabled-top) !important;
       border-bottom-color: var(--border-disabled-bottom) !important;
@@ -4393,7 +4488,6 @@
       &:visited,
       &:focus {
         background-color: var(--button-disabled) !important;
-        background-image: linear-gradient(var(--button-disabled), #eaeaea) !important;
         border-color: var(--border-disabled) !important;
         border-top-color: var(--border-disabled-top) !important;
         border-bottom-color: var(--border-disabled-bottom) !important;
@@ -4491,7 +4585,7 @@
       color: var(--link) !important;
 
       &:hover {
-        color: #c9e0f9 !important;
+        color: var(--link-hover) !important;
       }
     }
 
@@ -4504,7 +4598,7 @@
   div[class*="panel_"] {
     border: 1px solid var(--borders) !important;
 
-    h3[class^="title_"] {
+    > div[class^="title_"] {
       background: var(--headers) !important;
     }
 
@@ -4512,11 +4606,16 @@
       color: var(--text-bold) !important;
       background-color: var(--button-green) !important;
 
-      &[class^="disabled_"] {
-        color: hsla(0,0%,100%,.6) !important;
+      &:disabled {
+        background: var(--button-disabled) !important;
+        color: var(--button-disabled-text) !important;
       }
     }
 
+    button[class*="cancel_"] {
+      color: var(--white) !important;
+    }
+
     li[class^="video_"] {
       div[class^="duration_"] {
         background: var(--black) !important;
@@ -4550,7 +4649,7 @@
 
     #wantlist-button--menu {
       background: var(--input-bg) !important;
-      box-shadow: 0 5px 10px hsl(0deg 0% 1% / 40%) !important;
+      box-shadow: 0 5px 10px var(--box-shadow-b) !important;
 
       button:hover {
         background: var(--black) !important;
@@ -4644,25 +4743,25 @@
           }
 
           div[class*="block_"] {
-            border-left: 1px solid var(--search-results-active) !important;
+            border-left: 1px solid var(--input-bg) !important;
           }
           div[class*="block_"] {
-            border-top: 1px solid var(--search-results-active) !important;
-            border-left: 1px solid var(--search-results-active) !important;
+            border-top: 1px solid var(--input-bg) !important;
+            border-left: 1px solid var(--input-bg) !important;
           }
           div[class*="tray_"] {
-            border-top: 1px solid var(--search-results-active) !important;
+            border-top: 1px solid var(--input-bg) !important;
             background: var(--main-bg-color) !important;
           }
           div[class*="ratings_"] {
-            border-top: 1px solid var(--search-results-active) !important;
-            border-bottom: 1px solid var(--search-results-active) !important;
+            border-top: 1px solid var(--input-bg) !important;
+            border-bottom: 1px solid var(--input-bg) !important;
           }
           div[class*="footer_"] {
-            border-top: 1px solid var(--search-results-active) !important;
+            border-top: 1px solid var(--input-bg) !important;
           }
           div[class*="column_"]:not(:first-child) {
-            border-left: 1px solid var(--search-results-active) !important;
+            border-left: 1px solid var(--input-bg) !important;
           }
 
           tr[class*="row_"] {
@@ -4683,7 +4782,7 @@
               }
 
               span[class*="row__Tag"] {
-                background: #f5df2e !important;
+                background: var(--chart-bg) !important;
                 color: var(--black) !important;
               }
             }
@@ -4719,14 +4818,19 @@
             background: var(--new-submission) !important;
             color: var(--main-bg-color) !important;
           }
-          .oXLEV {
+          div[class*="footer_"] span[class*="newsubmission_"] {
             background-color: rgba(242, 185, 13, 0.2) !important;
+            color: var(--text-normal) !important;
           }
           // needs changes
           span[class*="needschanges_"] {
             background: var(--needs-changes) !important;
             color: var(--main-bg-color) !important;
           }
+          div[class*="footer_"] span[class*="needschanges_"] {
+            background-color: rgba(242, 185, 13, 0.2) !important;
+            color: var(--text-normal) !important;
+          }
           // Data correct
           span[class*="correct_"] {
             background-color: rgba(0, 128, 11, 0.3) !important;
@@ -4798,7 +4902,7 @@
     background: var(--search-results-active) !important;
 
     .switch_2cmFj.enabled_lxcoE {
-      background: #377d25 !important;
+      background: var(--rating-positive-text) !important;
     }
   }
 }

From 3dd3497ec83d6db7059ceff88919081aabef8264 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 21:15:10 -0700
Subject: [PATCH 07/31] Move colors into vars

---
 css/dark-theme.scss | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 67327e3c..061fddb6 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -27,6 +27,7 @@
   --link: #829fc4;
   /* Collection / Inventory / Wantlist Skittles */
   --search-results-active: #222222;
+  --skittle-collection: #60c43f;
   --skittle-inventory: #326fb2;
   --skittle-wantlist: #bf3a38;
   /* Inputs */
@@ -1719,7 +1720,7 @@
   /* green shipped */
   div[class*="skittles_"] span[class*="collection_"],
   .skittles .skittle.skittle_collection {
-    background-color: var(--button-green) !important;
+    background-color: var(--skittle-collection) !important;
     color: var(--white) !important;
 
     i[class^="icon"] {
@@ -1728,10 +1729,10 @@
   }
 
   .skittle.skittle_collection {
-    background-color: var(--button-green) !important;
+    background-color: var(--skittle-collection) !important;
     color: var(--white) !important;
     span {
-      background-color: var(--button-green) !important;
+      background-color: var(--skittle-collection) !important;
       color: var(--white) !important;
     }
     i[class^="icon"] {
@@ -1773,10 +1774,10 @@
   span.skittle.skittle_wantlist span.count,
   .skittle.skittle_inventory span.count,
   span.skittle.skittle_wantlist.needs_delegated_tooltip span.count {
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
 
     i[class^="icon"] {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1784,10 +1785,10 @@
   div[class*="skittles_"] span[class*="wantlist_"],
   span.skittle.skittle_wantlist.needs_delegated_tooltip {
     background-color: var(--skittle-wantlist) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
 
     i[class^="icon"] {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -1795,10 +1796,10 @@
   div[class*="header_"] a[class*="skittle_"],
   div[class*="skittles_"] span[class*="inventory_"] {
     background-color: var(--skittle-inventory) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
 
     i[class^="icon"] {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -3927,6 +3928,11 @@
       div[class*="content_"] {
         line-height: 12px;
       }
+
+      // Discogs Logo in React Header
+      svg g {
+        fill: var(--white) !important;
+      }
     }
 
     div[class*="noItems_"] {

From b054ec3df4bd25e4d4097c97c7c70ac96ad15e52 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Mon, 24 Apr 2023 21:33:40 -0700
Subject: [PATCH 08/31] Update red button text color

---
 css/dark-theme.scss | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 061fddb6..aa3311fa 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -408,6 +408,7 @@
     strong,
     time,
     p,
+    span,
     &:not(.button) {
       color: var(--link-hover) !important;
     }
@@ -1282,10 +1283,10 @@
   .button.button-red {
     border-color: var(--button-red) !important;
     background: var(--button-red) !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     span {
       border-color: var(--button-red) !important;
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -2090,9 +2091,6 @@
   .form_block textarea,
   #review_compose.form_block textarea,
   textarea.thread-compose-message,
-  #pw_current,
-  #pw_new,
-  #pw_confirm_new,
   input[type="text"]:not(.image_copy_permalink_text) {
     background: var(--input-bg) !important;
     border: 1px solid var(--borders) !important;
@@ -2775,6 +2773,9 @@
   input[name="query"]:focus-within,
   input.countable:focus-within,
   textarea:focus-within,
+  input.search_table_field:focus-within,
+  fieldset input[type="text"]:focus-within,
+  input[type="password"]:focus-within,
   input#marketplace-search-input:focus-within,
   .submission-form-section input[type="text"]:focus-within,
   .submission-form-section textarea:focus-within,
@@ -2938,14 +2939,14 @@
     background: var(--skittle-wantlist) !important;
     border-color: var(--button-red) !important;
     span {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
   i {
     &.icon-facebook,
     &.icon-google-plus {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 

From 5cb392f9a7b40b7af542e23242cd76a509caeca2 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Tue, 25 Apr 2023 12:57:48 -0700
Subject: [PATCH 09/31] Add modified cart styles; theme updates

---
 css/dark-theme.scss | 125 ++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 115 insertions(+), 10 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index aa3311fa..adf71ac0 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -93,6 +93,11 @@
   --alert-warning-bg: #f7eac5;
   --alert-warning-text: #816612;
   --alert-warning-highlight: #E56000;
+  /* Modified Cart Notice */
+  --modified-cart-bg: #f7eac5;
+  --modified-cart-htag: #000000;
+  --modified-cart-highlight: #E56000;
+  --modified-cart-text: #816612;
   /* Release Rating Stars */
   --star-rating: #f7d06c;
   --submission-form-error: #360d0d;
@@ -159,6 +164,12 @@
   --in-collection-bg: #12311a;
 
   --link: #7d9fcc;
+  --submission-form-error: #321d1f;
+  --modified-cart-bg: #232428;
+  --modified-cart-highlight: #adbeff;
+  --modified-cart-text: #adbeff;
+  --modified-cart-htag: #c5def7;
+  --modified-cart-remove-icon: #c5def7;
 }
 /*
 ////////////////////////////////////
@@ -175,11 +186,17 @@
   --row-even: #282e35;
   --input-bg: #1c2128;
 
-  --alert-warning-bg: #f7d77a;
+  --modified-cart-bg: #30394b;
+  --modified-cart-highlight: #adbeff;
+  --modified-cart-text: #adbeff;
+  --modified-cart-htag: #d9d9d9;
+  --modified-cart-remove-icon: #c5def7;
+
   --in-collection-bg: #12311a;
 
   --history-highlight: #484560;
   --history-hover: #353345;
+  --submission-form-error: #2e222b;
 
   --text-muted: #768390;
   --text-normal: #bdbdbd;
@@ -699,9 +716,19 @@
     opacity: 0.8;
   }
 
+  /* read more button on artist / label profiles */
   div.readmore_wrapper {
     background: var(--main-bg-color) !important;
+
+    button.readmore_toggler {
+      color: var(--text-muted) !important;
+
+      i.icon {
+        color: var(--text-muted) !important;
+      }
+    }
   }
+
   #full-width-header div.readmore_wrapper {
     background: var(--input-bg) !important;
   }
@@ -776,7 +803,7 @@
   .current_filter {
     background-color: var(--facet-selected) !important;
     border-radius: 2px !important;
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
   }
 
   .order_status_icon {
@@ -902,7 +929,8 @@
     border-right: 2px solid var(--borders) !important;
   }
 
-  table.table_block tbody tr.even {
+  table.table_block tbody tr.even,
+  table tbody tr.even {
     background-color: var(--row-even)   !important;
   }
 
@@ -1683,11 +1711,15 @@
     border-right: 1px dotted var(--borders) !important;
   }
 
+  /*
+    new releases added to the db when viewing text with covers / text only:
+    https://www.discogs.com/search/?sort=nfm
+  */
   .card .card_body .card_status {
-    color: var(--scroll-bar-thumb) !important;
+    color: var(--text-muted) !important;
     a,
     i {
-      color: var(--scroll-bar-thumb) !important;
+      color: var(--text-muted) !important;
     }
   }
 
@@ -2347,7 +2379,7 @@
     .icon.icon-times,
     &.alert-message-warning i {
       background: transparent !important;
-      color: var(--headers) !important;
+      color: var(--alert-warning-remove-icon) !important;
     }
     &.alert-message-info a:not(.button):hover {
       color: var(--link-visited) !important;
@@ -2417,6 +2449,53 @@
       }
     }
   }
+  /* Modified Cart - These items got away banner */
+  #modified-cart.alert-message-warning {
+    background: var(--modified-cart-bg) !important;
+    color: var(--modified-cart-text) !important;
+    border-left: 4px solid var(--modified-cart-highlight) !important;
+    box-shadow: 0 1px 5px var(--box-shadow-a) !important;
+
+    i,
+    a,
+    a strong,
+    a small {
+      color: var(--modified-cart-highlight) !important;
+    }
+
+    .skittle i.icon-wantlist {
+      color: var(--white) !important;
+    }
+
+    /* Add All To Wantlist / Dismiss All buttons */
+    .fright {
+      a.button-small,
+      a.button-small i {
+        color: var(--black) !important;
+      }
+      a.button-red,
+      a.button-red i {
+        color: var(--white) !important;
+      }
+    }
+
+    span {
+      &.alert-message-content {
+        h3,
+        h4 {
+          background: transparent !important;
+          color: var(--modified-cart-htag) !important;
+        }
+        ul li a {
+          strong,
+          small {
+            background: transparent !important;
+            color: var(--modified-cart-text) !important;
+          }
+        }
+      }
+    }
+  }
 
   span {
     &.alert-message-text {
@@ -2429,13 +2508,13 @@
     &.alert-message-content {
       h3,
       h4 {
-        background: var(--alert-warning-bg) !important;
+        background: transparent !important;
         color: var(--alert-warning-text) !important;
       }
       ul li a {
         strong,
         small {
-          background: var(--alert-warning-bg) !important;
+          background: transparent !important;
           color: var(--alert-warning-text) !important;
         }
       }
@@ -2776,6 +2855,8 @@
   input.search_table_field:focus-within,
   fieldset input[type="text"]:focus-within,
   input[type="password"]:focus-within,
+  input[type="checkbox"]:focus-within,
+  input[type="number"]:focus-within,
   input#marketplace-search-input:focus-within,
   .submission-form-section input[type="text"]:focus-within,
   .submission-form-section textarea:focus-within,
@@ -3251,7 +3332,7 @@
   .FacetGroup.active .selected {
     span,
     i {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
     }
   }
 
@@ -3508,6 +3589,11 @@
       border-radius: 3px;
     }
 
+    a,
+    a:hover {
+      color: var(--main-bg-color) !important;
+    }
+
     span {
       color: var(--main-bg-color) !important;
     }
@@ -3526,7 +3612,26 @@
   /* Converted currency in cart page */
 
   .currency_converted {
-    opacity: 0.7;
+    color: var(--text-muted) !important;
+
+    .currency_abbr {
+      color: var(--text-muted) !important;
+    }
+  }
+
+  .order_total.with-price td {
+    color: var(--text-bold) !important;
+
+    .currency_abbr {
+      color: var(--text-bold) !important;
+    }
+    .currency_converted {
+      color: var(--text-muted) !important;
+
+      .currency_abbr {
+        color: var(--text-muted) !important;
+      }
+    }
   }
 
   .cart_page .order_total td {

From d928da1a5c8667845a1a2cead6581de14367dc99 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Tue, 25 Apr 2023 15:52:43 -0700
Subject: [PATCH 10/31] Styles for Donation modal

---
 css/dark-theme.scss | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index adf71ac0..7cc42dec 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -5017,4 +5017,38 @@
       background: var(--rating-positive-text) !important;
     }
   }
+
+  /* Support Discogs Enhancer Modal */
+  .de-donate-modal {
+    background: var(--main-bg-color) !important;
+    border: 1px solid var(--borders) !important;
+    box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
+
+    .inner {
+      h3 {
+        color: var(--text-bold) !important;
+      }
+      button svg {
+        stroke: var(--text-bold) !important;
+      }
+
+      svg path {
+        fill: var(--text-bold) !important;
+      }
+    }
+
+    .disclaimer {
+      color: var(--text-muted) !important;
+    }
+
+    .donate-btn {
+      background: var(--black) !important;
+      color: var(--white) !important;
+
+      &:hover {
+        background: var(--button-green) !important;
+        color: var(--white) !important;
+      }
+    }
+  }
 }

From cbef90794d176d593dc9718711610fdf504be997 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 07:35:06 -0700
Subject: [PATCH 11/31] Donation modal styles

---
 css/dark-theme.scss | 27 +++++++++++++++------------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 7cc42dec..4718222d 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -185,6 +185,7 @@
 
   --row-even: #282e35;
   --input-bg: #1c2128;
+  --search-results-active: #22272e;
 
   --modified-cart-bg: #30394b;
   --modified-cart-highlight: #adbeff;
@@ -850,7 +851,7 @@
     color: var(--white) !important;
   }
 
-  /* white icons on colovar(--needs-changes) buttons */
+  /* white icons on colored buttons */
 
   #user_header .user_avatar {
     border: 3px solid var(--text-bold) !important;
@@ -862,15 +863,15 @@
 
   table.cards tr {
     &.sub_first.card.sub {
-      box-shadow: inset 0 10px 5px -8px var(--search-results-active) !important;
+      box-shadow: inset 0 10px 5px -8px var(--box-shadow-a) !important;
       td {
-        box-shadow: inset 0 10px 5px -8px var(--search-results-active) !important;
+        box-shadow: inset 0 10px 5px -8px var(--box-shadow-a) !important;
       }
     }
     &.sub_last.card.sub {
-      box-shadow: inset 0 -10px 5px -8px var(--search-results-active) !important;
+      box-shadow: inset 0 -10px 5px -8px var(--box-shadow-a) !important;
       td {
-        box-shadow: inset 0 -10px 5px -8px var(--search-results-active) !important;
+        box-shadow: inset 0 -10px 5px -8px var(--box-shadow-a) !important;
       }
     }
     &.sub {
@@ -3654,7 +3655,7 @@
 
   .country-list-info .country-list {
     background: var(--headers) !important;
-    filter: drop-shadow(0 2px 2px var(--search-results-active)) !important;
+    filter: drop-shadow(0 2px 2px var(--box-shadow-a)) !important;
   }
 
   /* inventory-ratings */
@@ -5011,7 +5012,7 @@
 
   // Opt In toggle
   .optin_3Ze0T {
-    background: var(--search-results-active) !important;
+    background: var(--box-shadow-a) !important;
 
     .switch_2cmFj.enabled_lxcoE {
       background: var(--rating-positive-text) !important;
@@ -5020,20 +5021,22 @@
 
   /* Support Discogs Enhancer Modal */
   .de-donate-modal {
-    background: var(--main-bg-color) !important;
-    border: 1px solid var(--borders) !important;
+    background: var(--input-bg) !important;
+    border: 2px solid var(--borders) !important;
+    border-radius: 4px;
     box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
 
     .inner {
       h3 {
         color: var(--text-bold) !important;
       }
-      button svg {
+      // x close button
+      .close-btn svg {
         stroke: var(--text-bold) !important;
       }
-
+      // Icon
       svg path {
-        fill: var(--text-bold) !important;
+        fill: var(--button-green) !important;
       }
     }
 

From 962468d890cb61ee91a5ee9c48dc6d244b7b5312 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 07:36:15 -0700
Subject: [PATCH 12/31] Update the CSS used to hide items

---
 js/extension/features/filter-shipping-country.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/extension/features/filter-shipping-country.js b/js/extension/features/filter-shipping-country.js
index 55818b2d..54285e7c 100644
--- a/js/extension/features/filter-shipping-country.js
+++ b/js/extension/features/filter-shipping-country.js
@@ -66,7 +66,13 @@ rl.ready(() => {
   // ========================================================
   let rules = `
       .de-hide-country {
-        display: none;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        height: 1px;
+        overflow: hidden;
+        position: absolute;
+        white-space: nowrap;
+        width: 1px;
       }`;
 
   // ========================================================

From 8a3ce82e4a8333adc85ff40465a6bec05da8d2e6 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 08:39:38 -0700
Subject: [PATCH 13/31] Update icon color

---
 css/dark-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 4718222d..4c1b4ef7 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -5036,7 +5036,7 @@
       }
       // Icon
       svg path {
-        fill: var(--button-green) !important;
+        fill: var(--button-blue) !important;
       }
     }
 

From 0007dcc673ffc6d381296581158265513dd49a1c Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 11:19:12 -0700
Subject: [PATCH 14/31] Update dark-theme.scss

---
 css/dark-theme.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 4c1b4ef7..b52fc1ee 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -159,7 +159,7 @@
   --borders: #3d3f45;
 
   --row-even: #27292c;
-  --input-bg: #232428;
+  --input-bg: #25262a;
 
   --in-collection-bg: #12311a;
 
@@ -195,7 +195,7 @@
 
   --in-collection-bg: #12311a;
 
-  --history-highlight: #484560;
+  --history-highlight: #3a4260;
   --history-hover: #353345;
   --submission-form-error: #2e222b;
 

From 5d58b123d931793802733e75efc95406c1d09e98 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 15:34:52 -0700
Subject: [PATCH 15/31] Add MR filter chip colors

---
 css/dark-theme.scss | 66 +++++++++++++++++++++++++++++++--------------
 1 file changed, 46 insertions(+), 20 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index b52fc1ee..0589af67 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -37,6 +37,8 @@
   --needs-changes: #ff0000;
   --new-submission: #f2b90d;
   --order-sidebar-bg: #1f1f1f;
+  /* Master Release Filter Chip Color */
+  --filter-chip: #2a4f96;
   /* Release In Collection / Wantlist Blocks */
   --in-collection-bg: #1c3814;
   --in-collection-border: #60c43f;
@@ -152,18 +154,15 @@
 ////////////////////////////////////
 */
 .theme-dimmed {
-  --site-header-bg: #171717;
+  --site-header-bg: #151515;
   --main-bg-color: #2B2E32;
-
   --headers: #383a3e;
   --borders: #3d3f45;
-
   --row-even: #27292c;
   --input-bg: #25262a;
-
   --in-collection-bg: #12311a;
-
   --link: #7d9fcc;
+  --filter-chip: #2a4f96;
   --submission-form-error: #321d1f;
   --modified-cart-bg: #232428;
   --modified-cart-highlight: #adbeff;
@@ -179,26 +178,21 @@
 .theme-nebula {
   --site-header-bg: #121519;
   --main-bg-color: #22272e;
-
   --headers: #31373e;
   --borders: #31373e;
-
   --row-even: #282e35;
   --input-bg: #1c2128;
   --search-results-active: #22272e;
-
   --modified-cart-bg: #30394b;
   --modified-cart-highlight: #adbeff;
   --modified-cart-text: #adbeff;
   --modified-cart-htag: #d9d9d9;
   --modified-cart-remove-icon: #c5def7;
-
   --in-collection-bg: #12311a;
-
+  --filter-chip: #2a4f96;
   --history-highlight: #3a4260;
   --history-hover: #353345;
   --submission-form-error: #2e222b;
-
   --text-muted: #768390;
   --text-normal: #bdbdbd;
   --text-bold: #d9d9d9;
@@ -3678,8 +3672,9 @@
   /* admin link in forums */
 
   h1 a:visited.text_label,
-  a:visited.text_label {
-    background-color: #98158b !important;
+  a:visited.text_label,
+  .admin_bar {
+    background-color: var(--history-highlight) !important;
   }
 
   /* Quick search external icon */
@@ -4791,11 +4786,6 @@
       background: var(--input-bg) !important;
       box-shadow: none;
 
-      button.button_1Cxan,
-      button:hover {
-        background: var(--row-even) !important;
-      }
-
       div[class*="item_"]:hover {
         span[class*="tick_"] {
           border: 1px solid var(--text-normal)  !important;
@@ -4807,6 +4797,23 @@
       }
     }
 
+    div[class*="box_"][aria-controls*="version-"] {
+      // format / labels / country / year filter chips
+      button:not([aria-haspopup="listbox"]),
+      button:not([aria-haspopup="listbox"]):hover {
+        background: var(--filter-chip) !important;
+
+        div {
+          color: var(--text-bold) !important;
+        }
+      }
+
+      // square button with triangle that opens filter list menu when clicked
+      button[aria-haspopup="listbox"]:hover {
+        background: var(--headers) !important;
+      }
+    }
+
     div[class*="well_"] {
       background-color: var(--input-bg) !important;
 
@@ -4831,19 +4838,38 @@
 
     div[class*="list_"] {
       border: 1px solid var(--borders) !important;
-      background: var(--input-bg) !important;
+      background: var(--main-bg-color) !important;
       box-shadow: none;
 
+      div[class*="item_"][class*="highlighted_"] {
+        background: var(--input-bg) !important;
+      }
+
+      // selected checkbox background in Master Release filter lists
+      div[class*="item_"] span[class*="tick_"][class*="selected_"]{
+        background: var(--filter-chip) !important;
+        color: var(--text-bold) !important;
+
+        svg path {
+          fill: var(--text-bold) !important;
+        }
+      }
+
       button:hover {
         background: var(--black) !important;
       }
+
     }
 
     section[class*="section_"] {
       div[class*="content_"] {
 
         button[class*="chip_"] {
-          background: var(--black) !important;
+          background: var(--filter-chip) !important;
+
+          div {
+            color: var(--text-bold) !important;
+          }
         }
 
         div[class*="progress_"] div[class*="bar_"] {

From 18f90b29040ec7ad61184fb0b632b959e4d3d715 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 17:29:10 -0700
Subject: [PATCH 16/31] Update dark-theme.scss

---
 css/dark-theme.scss | 181 ++++++++++++++++++++++----------------------
 1 file changed, 89 insertions(+), 92 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 0589af67..de3dd716 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -94,11 +94,11 @@
   --alert-info-bg: #c5def7;
   --alert-warning-bg: #f7eac5;
   --alert-warning-text: #816612;
-  --alert-warning-highlight: #E56000;
+  --alert-warning-highlight: #e56000;
   /* Modified Cart Notice */
   --modified-cart-bg: #f7eac5;
   --modified-cart-htag: #000000;
-  --modified-cart-highlight: #E56000;
+  --modified-cart-highlight: #e56000;
   --modified-cart-text: #816612;
   /* Release Rating Stars */
   --star-rating: #f7d06c;
@@ -155,7 +155,7 @@
 */
 .theme-dimmed {
   --site-header-bg: #151515;
-  --main-bg-color: #2B2E32;
+  --main-bg-color: #2b2e32;
   --headers: #383a3e;
   --borders: #3d3f45;
   --row-even: #27292c;
@@ -462,20 +462,20 @@
       background: var(--black) !important;
     }
     > a {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
     .nav_group_control {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
       i {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
     }
   }
 
   .site_nav_tray {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     h4 {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
@@ -483,40 +483,40 @@
   .site_nav_tray a,
   .site_nav_submenu a:visited,
   .site_nav_tray a:visited {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
   }
 
   #site_navigation > li {
     > a:hover i,
     .nav_group_control:hover i {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
   #activity_menu > li {
     > a i,
     .nav_group_control i {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
   .activity_menu_total {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
   }
 
   #activity_menu > li {
     > a {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
       &:hover {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
     }
     .nav_group_control {
       &:hover,
       span {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
@@ -552,7 +552,7 @@
 
   ol#search_tabs li {
     label {
-      background-color: var(--row-even)   !important;
+      background-color: var(--row-even) !important;
     }
     input[type="radio"]:checked + label {
       background-color: var(--skittle-inventory) !important;
@@ -562,7 +562,7 @@
 
   li.ui-menu-item {
     a.ui-state-focus {
-      background: var(--search-results-active)!important;
+      background: var(--search-results-active) !important;
     }
   }
 
@@ -707,7 +707,7 @@
   /* "Edit" in empty notes fields */
 
   .notes_add {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     opacity: 0.8;
   }
 
@@ -904,7 +904,7 @@
   }
 
   .has_files #uploader_messaging {
-    background-color: var(--row-even)   !important;
+    background-color: var(--row-even) !important;
   }
 
   .uploader:hover,
@@ -926,13 +926,13 @@
 
   table.table_block tbody tr.even,
   table tbody tr.even {
-    background-color: var(--row-even)   !important;
+    background-color: var(--row-even) !important;
   }
 
   .cart_page {
     .order_contents tr.even,
     .order_suggestions {
-      background-color: var(--row-even)   !important;
+      background-color: var(--row-even) !important;
     }
   }
 
@@ -940,14 +940,14 @@
     &.body_row.even,
     &.header,
     &.footer {
-      background-color: var(--row-even)   !important;
+      background-color: var(--row-even) !important;
     }
   }
 
   ol.as_table_block li {
     &.header,
     &.footer {
-      background-color: var(--row-even)   !important;
+      background-color: var(--row-even) !important;
     }
   }
 
@@ -1117,12 +1117,12 @@
 
   #list_details.editable .textedit:hover div,
   #list_details.editable .textedit:hover h1 {
-      background: var(--input-bg) !important;
+    background: var(--input-bg) !important;
   }
 
   a.inset_button[disabled] {
     background: var(--box-shadow-a) !important;
-    border-color: var(--row-even)   !important;
+    border-color: var(--row-even) !important;
     box-shadow: var(--box-shadow-a) 0 0 3px 1px inset !important;
   }
 
@@ -1464,7 +1464,8 @@
 
   .price {
     color: var(--in-wantlist-border) !important;
-    span, td {
+    span,
+    td {
       color: var(--in-wantlist-border) !important;
     }
   }
@@ -1559,7 +1560,6 @@
     background: var(--box-shadow-a) !important;
   }
 
-
   /* bottom line border rule */
 
   table.release_list_table tbody tr,
@@ -1694,7 +1694,7 @@
     }
   }
 
-  table.subform_tracklist tr.subform_track  {
+  table.subform_tracklist tr.subform_track {
     border-left: 1px solid var(--borders) !important;
   }
 
@@ -2157,7 +2157,7 @@
   /* x icons on dashboard modules */
 
   ul.module_blocks .header i {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
   }
 
   div.search_result.needschanges div.flag {
@@ -2277,10 +2277,10 @@
   }
 
   a.list-group-item.heading {
-    background-color: var(--row-even)   !important;
+    background-color: var(--row-even) !important;
     color: var(--text-bold) !important;
     &:visited {
-      background-color: var(--row-even)   !important;
+      background-color: var(--row-even) !important;
       color: var(--text-bold) !important;
     }
   }
@@ -2288,7 +2288,7 @@
   code {
     background-color: var(--black) !important;
     font-size: 90% !important;
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
   }
 
   pre {
@@ -2423,12 +2423,12 @@
       background-color: var(--headers) !important;
     }
     &.alert-message-news .announcement-title {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
     a.alert-message-close-icon i {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
       &:visited {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
     }
     &.alert-message-warning {
@@ -2541,9 +2541,9 @@
 
   #page_aside span.alert-message-text,
   .alert-message-broadcast span.alert-message-text {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     strong {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
@@ -2717,7 +2717,7 @@
 
   table#subform_submit {
     td.left {
-      background: var(--row-even)   !important;
+      background: var(--row-even) !important;
     }
     td.last {
       background: var(--input-bg) !important;
@@ -2728,43 +2728,43 @@
 
   .ref_guidelines_list .ref_guidelines_heading {
     a {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
       &:hover,
       &:visited,
       i,
       &:hover i,
       &:visited i {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
     }
     i {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
       &:hover,
       &:visited {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
     }
   }
 
   div.format.collapsible a.collapse i {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     &:hover {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
   .subform_track_actions a i {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     &:hover,
     &:visited {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
   span#layout_buttons a.inset_button i {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
     &:visited {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
   }
 
@@ -2810,32 +2810,32 @@
 
   .vote_info_helper {
     background-color: var(--vote-helper-bg) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   .hl_added {
     background-color: var(--added) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   .hl_removed {
     background-color: var(--removed) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   .hl_changed1 {
     background-color: var(--changed1) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   .hl_changed2 {
     background-color: var(--changed2) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   .hl_warning {
     background-color: var(--warning) !important;
-    color: var(--row-even)   !important;
+    color: var(--row-even) !important;
   }
 
   #namecheckmsg {
@@ -3002,7 +3002,7 @@
   /* https://www.discogs.com/release/6265588-The-Rise-And-Fall-Of-Paramount-Records-1928-1932-Volume-2/history#latest */
 
   .data span.alert-message-text {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
   }
 
   /* Login Screen */
@@ -3182,7 +3182,7 @@
 
   .form-block legend,
   .box-header-row.box-header-row-first {
-    background: var(--row-even)   !important;
+    background: var(--row-even) !important;
     border-bottom: 1px solid var(--borders) !important;
     border-top: 1px solid var(--borders) !important;
   }
@@ -3299,7 +3299,7 @@
     }
     li {
       &:hover {
-        background: var(--row-even)   !important;
+        background: var(--row-even) !important;
       }
       border-top: none !important;
       border-left: none !important;
@@ -3467,7 +3467,7 @@
       }
       tr.range button {
         background: var(--borders) !important;
-        border: 1px solid var(--text-normal)  !important;
+        border: 1px solid var(--text-normal) !important;
       }
     }
     .policy_right {
@@ -3510,21 +3510,24 @@
 
     .valid_policy_icon {
       color: var(--button-green) !important;
-      i, div {
+      i,
+      div {
         color: var(--button-green) !important;
       }
     }
 
     .invalid_policy_icon {
       color: var(--policy-invalid) !important;
-      i, div {
+      i,
+      div {
         color: var(--policy-invalid) !important;
       }
     }
 
     .invalid_method {
       background: var(--policy-invalid-bg) !important;
-      i, div {
+      i,
+      div {
         color: var(--policy-invalid) !important;
       }
     }
@@ -3718,10 +3721,10 @@
 
   // text-format-shortcuts
   .quick-button {
-    color: var(--text-normal)  !important;
+    color: var(--text-normal) !important;
 
     i.icon-chain {
-      color: var(--text-normal)  !important;
+      color: var(--text-normal) !important;
     }
 
     &:hover,
@@ -3775,11 +3778,11 @@
       background: var(--button-disabled-text) !important;
       border: 2px solid var(--button-disabled-text) !important;
     }
-    .ot-tgl input:checked+.ot-switch .ot-switch-nob,
+    .ot-tgl input:checked + .ot-switch .ot-switch-nob,
     .switch-inner:before {
       background-color: var(--button-green) !important;
     }
-    .ot-tgl input+.ot-switch .ot-switch-nob,
+    .ot-tgl input + .ot-switch .ot-switch-nob,
     .ot-accordion-layout {
       border: 2px solid var(--button-disabled-text) !important;
     }
@@ -3834,7 +3837,8 @@
     }
   }
   // Search term highlights
-  ins, mark {
+  ins,
+  mark {
     background: var(--alert-info-bg) !important;
     color: var(--black) !important;
   }
@@ -3925,12 +3929,12 @@
         }
 
         &:hover {
-          background: var(--search-results-active)!important;
+          background: var(--search-results-active) !important;
         }
       }
 
       li[class*="_result_"][class*="_active_"] {
-        background: var(--search-results-active)!important;
+        background: var(--search-results-active) !important;
         outline: 2px solid var(--input-focus-border) !important;
         border-radius: 4px;
       }
@@ -4026,7 +4030,6 @@
 
     // header nav line height for hover states
     header[class*="header_"] {
-
       div[class*="content_"] {
         line-height: 12px;
       }
@@ -4042,11 +4045,10 @@
     }
 
     nav[class*="profile_"] {
-
       a[class*="headericon_"] {
         font-size: 13px;
         margin-right: 0;
-        padding-right: .75rem;
+        padding-right: 0.75rem;
 
         svg {
           vertical-align: middle;
@@ -4055,17 +4057,17 @@
       }
 
       div[class*="user_"] nav[class*="dropdown_"] li a[class*="link_"] {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
 
         &:hover {
-          color: var(--text-normal)  !important;
+          color: var(--text-normal) !important;
           text-decoration: underline;
         }
       }
 
       // cart icon text
       a[href="/sell/cart"] {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
       }
       // messages icon
       a[href="/messages"] {
@@ -4167,7 +4169,7 @@
 
     #release-header {
       h1 {
-        margin-bottom: .5rem;
+        margin-bottom: 0.5rem;
       }
     }
 
@@ -4193,7 +4195,7 @@
     }
 
     button[class*="grey_"][class*="disabled_"] {
-      background-color: var(--text-normal)  !important;
+      background-color: var(--text-normal) !important;
       color: var(--button-disabled-text) !important;
 
       svg[class*="icon_"] path {
@@ -4297,7 +4299,8 @@
     }
 
     div[class*="buttons_"] {
-      button, path {
+      button,
+      path {
         color: var(--headers) !important;
       }
     }
@@ -4309,7 +4312,6 @@
     div[class*="side_"]:nth-of-type(5) {
       // share icon
       button[class*="button_"] {
-
         &:hover {
           svg[class*="icon_"] path {
             color: var(--link-hover) !important;
@@ -4359,7 +4361,7 @@
           color: var(--text-muted) !important;
         }
         button[class*="button_"] svg[class*="icon_"] {
-          margin-right: .5rem;
+          margin-right: 0.5rem;
         }
       }
     }
@@ -4384,7 +4386,7 @@
           border-bottom: 1px solid var(--borders) !important;
 
           a[class*="active_"] {
-            background: var(--search-results-active)!important;
+            background: var(--search-results-active) !important;
           }
 
           a:visited span[class*="title_"] {
@@ -4400,7 +4402,7 @@
           }
 
           &:hover {
-            background: var(--search-results-active)!important;
+            background: var(--search-results-active) !important;
 
             span[class*="title_"] {
               color: var(--link-hover) !important;
@@ -4510,7 +4512,7 @@
       }
 
       div[class*="dropdown_"] button[class*="grey_"] {
-        color: var(--text-normal)  !important;
+        color: var(--text-normal) !important;
 
         svg[class*="icon_"] {
           margin-right: 5px;
@@ -4553,7 +4555,6 @@
       }
     }
 
-
     // Recommendations
     #release-recommendations {
       // Gradient overlays
@@ -4788,7 +4789,7 @@
 
       div[class*="item_"]:hover {
         span[class*="tick_"] {
-          border: 1px solid var(--text-normal)  !important;
+          border: 1px solid var(--text-normal) !important;
         }
       }
 
@@ -4818,7 +4819,7 @@
       background-color: var(--input-bg) !important;
 
       td[class*="cell_"] {
-        button[aria-checked=true] {
+        button[aria-checked="true"] {
           background-color: var(--black) !important;
         }
       }
@@ -4846,7 +4847,7 @@
       }
 
       // selected checkbox background in Master Release filter lists
-      div[class*="item_"] span[class*="tick_"][class*="selected_"]{
+      div[class*="item_"] span[class*="tick_"][class*="selected_"] {
         background: var(--filter-chip) !important;
         color: var(--text-bold) !important;
 
@@ -4858,12 +4859,10 @@
       button:hover {
         background: var(--black) !important;
       }
-
     }
 
     section[class*="section_"] {
       div[class*="content_"] {
-
         button[class*="chip_"] {
           background: var(--filter-chip) !important;
 
@@ -4982,7 +4981,6 @@
 
         div[class*="ui__Filters"] {
           div[class*="ui__Wrapper"] {
-
             div[class*="ui__Box"] {
               border: 1px solid var(--borders) !important;
               background: var(--input-bg) !important;
@@ -5019,10 +5017,9 @@
 
               div[class*="ui__Item-"] {
                 &:hover {
-                  background: var(--search-results-active)!important;
+                  background: var(--search-results-active) !important;
                 }
               }
-
             }
           }
         }

From b6976eaae11adb86f90e63036b63ebe9b5a90dac Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Wed, 26 Apr 2023 21:18:56 -0700
Subject: [PATCH 17/31] MR icon colors

---
 css/dark-theme.scss | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index de3dd716..9f715c6b 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -5,7 +5,7 @@
 */
 :root {
   /* Main Discogs Header */
-  --site-header-bg: #000000;
+  --site-header-bg: #171717;
   /* Main Page color */
   --main-bg-color: #323334;
   /* Text Colors */
@@ -99,7 +99,7 @@
   --modified-cart-bg: #f7eac5;
   --modified-cart-htag: #000000;
   --modified-cart-highlight: #e56000;
-  --modified-cart-text: #816612;
+  --modified-cart-text: #2653D9;
   /* Release Rating Stars */
   --star-rating: #f7d06c;
   --submission-form-error: #360d0d;
@@ -150,10 +150,10 @@
 }
 /*
 ////////////////////////////////////
-// Dimmed Theme Overrides
+// Gravity Theme Overrides
 ////////////////////////////////////
 */
-.theme-dimmed {
+.theme-gravity {
   --site-header-bg: #151515;
   --main-bg-color: #2b2e32;
   --headers: #383a3e;
@@ -2363,11 +2363,12 @@
       background: var(--alert-info-bg) !important;
       color: var(--headers) !important;
       line-height: 20px !important;
+      border-left: 4px solid var(--button-blue) !important;
       i,
       div,
       .alert-message-content div {
         background: var(--alert-info-bg) !important;
-        color: var(--headers) !important;
+        color: var(--button-blue) !important;
         line-height: 20px !important;
       }
     }
@@ -2399,10 +2400,10 @@
       background: var(--alert-error-bg) !important;
       font-size: 14px !important;
       color: var(--alert-error-text) !important;
+      border-left: 4px solid var(--button-red) !important;
       line-height: 20px !important;
       i {
         background: var(--alert-error-bg) !important;
-        font-size: 14px !important;
         color: var(--alert-error-text) !important;
         line-height: 20px !important;
       }
@@ -2410,6 +2411,7 @@
     &.alert-message-accept {
       background: var(--alert-accept-bg) !important;
       color: var(--button-green) !important;
+      border-left: 4px solid var(--button-green) !important;
       i,
       span {
         background: var(--alert-accept-bg) !important;
@@ -2523,7 +2525,7 @@
       }
       strong,
       em {
-        color: var(--text-placeholder) !important;
+        color: var(--headers) !important;
         a {
           color: var(--headers) !important;
           &:hover {
@@ -2853,6 +2855,7 @@
   input[type="checkbox"]:focus-within,
   input[type="number"]:focus-within,
   input#marketplace-search-input:focus-within,
+  .actions_with_tabs input[name="q"]:focus-within,
   .submission-form-section input[type="text"]:focus-within,
   .submission-form-section textarea:focus-within,
   .subform_tracklist input[type="text"]:focus-within,
@@ -4806,6 +4809,10 @@
 
         div {
           color: var(--text-bold) !important;
+
+          svg path {
+            fill: var(--text-bold) !important;
+          }
         }
       }
 
@@ -4868,6 +4875,11 @@
 
           div {
             color: var(--text-bold) !important;
+
+            /* X remove chip icon */
+            svg path {
+              fill: var(--text-bold) !important;
+            }
           }
         }
 

From be3493033e9ab314c9f79c107575bd20b981a216 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:49:31 -0700
Subject: [PATCH 18/31] Update dark-theme.scss

---
 css/dark-theme.scss | 52 ++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 8 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 9f715c6b..258ef738 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -87,6 +87,8 @@
   --button-green-border: #4ea332;
   --button-green: #60c43f;
   --button-red: #982e2c;
+  --button-primary: #eeeeee;
+  --button-primary-hover: #ffffff;
   /* Alert banners */
   --alert-accept-bg: #d1f7c5;
   --alert-error-bg: #f7cdc5;
@@ -429,6 +431,11 @@
     }
   }
 
+  /* Super annyoing to style More Images link */
+  a[class*="link_"]:hover > p {
+    color: var(--link-hover) !important;
+  }
+
   .footer a:hover i,
   .right li a:hover b,
   a:hover span.rating_count,
@@ -2854,6 +2861,7 @@
   input[type="password"]:focus-within,
   input[type="checkbox"]:focus-within,
   input[type="number"]:focus-within,
+  input#title:focus-within,
   input#marketplace-search-input:focus-within,
   .actions_with_tabs input[name="q"]:focus-within,
   .submission-form-section input[type="text"]:focus-within,
@@ -3181,6 +3189,11 @@
     }
   }
 
+  /* Comment Scanner Overlay */
+  .de-comment-overlay {
+    background: var(--main-bg-color) !important;
+  }
+
   /* Pay billing page */
 
   .form-block legend,
@@ -4026,11 +4039,6 @@
       }
     }
 
-    // global line height value
-    div[class*="content_"] {
-      line-height: 18px;
-    }
-
     // header nav line height for hover states
     header[class*="header_"] {
       div[class*="content_"] {
@@ -4241,8 +4249,12 @@
         }
       }
 
-      button[class*="wrapper_"]:hover {
+      button[class*="wrapper_"]:hover,
+      div[class*="wrapper_"]:hover,
+      div[class*="wrapper_"]:focus-within {
         background: var(--in-collection-hover) !important;
+        outline: 2px solid var(--input-focus-border) !important;
+        border-radius: 4px;
       }
 
       button[class*="remove_"] {
@@ -4586,6 +4598,10 @@
     button[type="submit"][class*="green_"] {
       color: var(--text-bold) !important;
       background-color: var(--button-green) !important;
+
+      &:hover {
+        color: var(--white) !important;
+      }
     }
 
     button[type="submit"][disabled] {
@@ -4663,7 +4679,7 @@
       color: var(--headers) !important;
 
       &:hover {
-        background-color: var(--text-bold) !important;
+        background-color: var(--white) !important;
         background-image: none !important;
         color: var(--headers);
       }
@@ -4718,9 +4734,17 @@
       color: var(--text-bold) !important;
       background-color: var(--button-green) !important;
 
+      svg path {
+        fill: var(--text-bold) !important;
+      }
+
       &:disabled {
         background: var(--button-disabled) !important;
         color: var(--button-disabled-text) !important;
+
+        svg path {
+          fill: var(--button-disabled-text) !important;
+        }
       }
     }
 
@@ -4756,7 +4780,19 @@
     }
 
     #wantlist-button button[class*="_primary"] {
-      background: var(--black) !important;
+      background: var(--button-primary) !important;
+
+      &:hover {
+        background: var(--button-primary-hover) !important;
+      }
+
+      span {
+        color: var(--black) !important;
+      }
+
+      svg path {
+        fill: var(--black) !important;
+      }
     }
 
     #wantlist-button--menu {

From dddb8eec91df95d4581bb95408da1c43e03fa654 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:49:46 -0700
Subject: [PATCH 19/31] Remove deprecated CSS fixes

---
 css/new-release-page-fixes.scss | 74 +++++++--------------------------
 1 file changed, 14 insertions(+), 60 deletions(-)

diff --git a/css/new-release-page-fixes.scss b/css/new-release-page-fixes.scss
index bb21c857..b46c76da 100644
--- a/css/new-release-page-fixes.scss
+++ b/css/new-release-page-fixes.scss
@@ -1,45 +1,4 @@
 #app {
-  // header nav line height for hover states
-  div[class*="header_"] {
-    div[class*="content_"] {
-      line-height: 12px !important;
-    }
-  }
-
-  div[class*="profile_"] {
-
-    // even out the spacing at the bottom of the profile menu
-    nav[class*="dropdown_"] {
-      padding-bottom: .3rem !important;
-    }
-
-    a[class*="headericon_"] {
-      font-size: 13px !important;
-      margin-right: 0 !important;
-      padding-right: .75rem !important;
-
-      svg {
-        vertical-align: middle !important;
-        padding-bottom: 4px !important;
-      }
-    }
-  }
-
-  // Credits
-  #Credits {
-    span[class*="fallback_"] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  #release-header {
-    h1 {
-      margin-bottom: .5rem !important;
-    }
-  }
-
   #release-stats {
     div[class*="items_"] h4 {
       width: auto !important;
@@ -50,7 +9,8 @@
   }
 
   // in Collection box
-  div[class*="collection_"] {
+  div[class*="collection_"],
+  div[class*="wantlist_"] {
     font-size: 14px !important;
     margin: 10px 5px;
 
@@ -75,11 +35,6 @@
     }
   }
 
-  // In Wantlist box
-  div[class*="wantlist_"] {
-    margin-top: 10px !important;
-  }
-
   // make an exception for the share button icon
   div[class*="ratings_"] + div[class*="wrapper_"] button svg {
     margin-right: 2px !important;
@@ -94,7 +49,7 @@
     button[class*="remove_"] {
       height: auto !important;
       margin-top: -2px !important;
-      margin-left: .3em !important;
+      margin-left: 0.3em !important;
       svg {
         height: 1.2em !important;
         top: 0 !important;
@@ -110,7 +65,7 @@
 
     div[class*="buttons_"] {
       button[class*="button_"] svg[class*="icon_"] {
-        margin-right: .5rem !important;
+        margin-right: 0.5rem !important;
       }
     }
   }
@@ -130,13 +85,12 @@
   // reviews
   #release-reviews {
     div[class*="review_"] {
-
       div[class*="header_"] {
         // margin-bottom: .2rem !important;
       }
 
       div[class*="content_"]:first-of-type {
-        margin-left: .4rem !important;
+        margin-left: 0.4rem !important;
       }
 
       div[class*="content_"] {
@@ -145,13 +99,13 @@
           padding: 0;
         }
         div[class*="content_"] {
-          margin: .3rem 0 !important;
+          margin: 0.3rem 0 !important;
         }
       }
 
       div[class*="edited_"] {
-        margin-top: .1rem !important;
-        margin-bottom: .2rem !important;
+        margin-top: 0.1rem !important;
+        margin-bottom: 0.2rem !important;
         font-size: 12px !important;
         text-transform: lowercase;
       }
@@ -159,7 +113,7 @@
       span[class*="content_"] {
         display: block !important;
         margin-top: 0 !important;
-        margin-bottom: .3rem !important;
+        margin-bottom: 0.3rem !important;
         line-height: 1.3rem !important;
         max-width: 645px !important;
       }
@@ -176,12 +130,12 @@
 
       // review text block
       div[class*="markup_"] {
-        margin-top: .25rem;
+        margin-top: 0.25rem;
       }
 
       // reply / helpful buttons
       div[class*="markup_"] + div {
-        margin-top: .5rem;
+        margin-top: 0.5rem;
 
         button {
           margin-right: 1rem;
@@ -190,8 +144,8 @@
 
       // Star ratings on release and reviews
       span[class*="rating_"] {
-        margin-top: .2rem !important;
-          svg {
+        margin-top: 0.2rem !important;
+        svg {
           margin: 0 2px 0 0 !important;
         }
       }
@@ -205,7 +159,7 @@
 
   #site_footer_wrap > div[class*="content_"] {
     ul li {
-      padding-top: .5rem !important;
+      padding-top: 0.5rem !important;
     }
   }
 }

From 02dbdb46e89d3d70167d12447d55d909859dfa74 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:50:49 -0700
Subject: [PATCH 20/31] Update Dark Theme description

---
 html/learn.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/html/learn.html b/html/learn.html
index b8b4a0a5..aa7b9828 100644
--- a/html/learn.html
+++ b/html/learn.html
@@ -270,7 +270,14 @@ <h2 id="currencyConverter">Currency Converter</h2>
 
     <div class="feature-block">
       <h2 id="darkTheme">Dark Theme</h2>
-      <p>This makes Discogs much easier on the eyes at night... or all the time. Completely re-themed from top to bottom! The Dark Theme does not work on Discogs subdomains (e.g.: blog.discogs.com, data.discogs.com, etc...)</p>
+      <p>This makes Discogs much easier on the eyes at night... or all the time. Completely re-themed from top to bottom! There are currently three differen themes to choose from: Meteor, Gravity, and Nebula.</p>
+      <ul class="themes">
+        <li><b>Meteor:</b> This is the original Dark Theme that Discogs Enhancer launched with.</li>
+        <li><b>Gravity:</b> A darker version of the original Dark Theme.</li>
+        <li><b>Nebula:</b> The darkest of the three themes.</li>
+      </ul>
+
+      <p><em>Note:</em> The Dark Theme does not work on Discogs subdomains (e.g.: blog.discogs.com, data.discogs.com, etc...)</p>
     </div>
 
     <!-- Demand Index -->

From 9c0d771a88212073883d0c75185b3f4455268158 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:51:03 -0700
Subject: [PATCH 21/31] Update dark theme names

---
 html/popup.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/html/popup.html b/html/popup.html
index e4496c90..afbe9186 100644
--- a/html/popup.html
+++ b/html/popup.html
@@ -207,8 +207,8 @@ <h2>&#x1F44B; Heads up!</h2>
       <p class="label">Dark theme</p>
       <div class="meta hide">Dark Theme Colors Skin</div>
       <select id="themeSelect">
-        <option value="" selected>Classic</option>
-        <option value="dimmed">Dimmed</option>
+        <option value="" selected>Meteor</option>
+        <option value="gravity">Gravity</option>
         <option value="nebula">Nebula</option>
       </select>
       <div class="onoffswitch">

From b1f4e72dbe08a9ba9b4977de17a9390b06ff4d8d Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:51:19 -0700
Subject: [PATCH 22/31] Remove dark theme css from injected styles

---
 js/extension/features/comment-scanner.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/js/extension/features/comment-scanner.js b/js/extension/features/comment-scanner.js
index 640d3d89..511902d5 100644
--- a/js/extension/features/comment-scanner.js
+++ b/js/extension/features/comment-scanner.js
@@ -144,11 +144,6 @@ rl.ready(() => {
       left: calc(50% - 160px);
     }
 
-    .de-dark-theme #dashboard_list_${existingId} .de-comment-overlay {
-      background: #333333f0 !important;
-      box-shadow: 0px 0px 0px 1px rgb(0 0 0 / 70%) inset;
-    }
-
     .loader {
       text-align: center;
       margin: 1rem auto;

From b3a5bbe33a5ea85f08be81dee029896ba715a5e9 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:51:24 -0700
Subject: [PATCH 23/31] Update learn.css

---
 css/popup/learn.css | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/css/popup/learn.css b/css/popup/learn.css
index e6c54d44..18117086 100644
--- a/css/popup/learn.css
+++ b/css/popup/learn.css
@@ -394,6 +394,15 @@ h2.highlight {
   font-weight: bold;
 }
 
+.themes li {
+  list-style: none;
+  margin-bottom: 1rem;
+}
+
+.themes li b {
+  font-style: normal;
+}
+
 
 .mint {
   color: #00B4DB !important;

From 2d9a7c35945cca9418d9516956f501f99fcfd2ba Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 08:51:32 -0700
Subject: [PATCH 24/31] Update readme.md

---
 readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/readme.md b/readme.md
index 95d9f869..6adc0da8 100644
--- a/readme.md
+++ b/readme.md
@@ -38,7 +38,7 @@ Discogs Enhancer adds extra features to both Discogs.com and Chrome. You can blo
 * Contextual menu searching
 * Ask for confirmation before removing items from your Collection
 * Quick currency conversion
-* Dark Theme (WCAG 2.0 AA compliant)
+* Multiple Dark Themes (WCAG 2.0 AA compliant)
 * Demand Index
 * Scan Artist/Label releases for comments
 * Scan your seller inventory for items priced below the median Marketplace value

From 2f034d9685909a0e39370875b53401aea1f28ef3 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 17:32:34 -0700
Subject: [PATCH 25/31] Update dark-theme.scss

---
 css/dark-theme.scss | 73 ++++++++++++++++++++++++++++++++++++---------
 1 file changed, 59 insertions(+), 14 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index 258ef738..ecd4ae52 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -1,6 +1,6 @@
 /*
 ////////////////////////////////////
-// Classic Theme
+// Meteor Theme
 ////////////////////////////////////
 */
 :root {
@@ -10,7 +10,7 @@
   --main-bg-color: #323334;
   /* Text Colors */
   --text-bold: #ffffff;
-  --text-muted: #858585;
+  --text-muted: #9B9B9B;
   --text-normal: #cccccc;
   --text-placeholder: #757575;
   /* Table Row alteration color */
@@ -44,9 +44,11 @@
   --in-collection-border: #60c43f;
   --in-collection-hover: #355235;
   --in-wantlist-bg: #561d1d;
-  --in-wantlist-border: #e7413f;
+  --in-wantlist-border: #E63749;
   /* Marketplace Selected Filters (Facets) */
   --facet-selected: #72a3d8;
+  /* Marketplace Price color */
+  --price: #ff4d4d;
   /* Marketplace have / want indicators */
   --want-low-bg: #f0d0d0;
   --want-high-bg: #e24242;
@@ -162,8 +164,10 @@
   --borders: #3d3f45;
   --row-even: #27292c;
   --input-bg: #25262a;
-  --in-collection-bg: #12311a;
-  --link: #7d9fcc;
+  --in-collection-bg: #1b3923;
+  --in-collection-border: #4e9b35;
+  --price: #FF4242;
+  --text-muted: #959595;
   --filter-chip: #2a4f96;
   --submission-form-error: #321d1f;
   --modified-cart-bg: #232428;
@@ -191,11 +195,14 @@
   --modified-cart-htag: #d9d9d9;
   --modified-cart-remove-icon: #c5def7;
   --in-collection-bg: #12311a;
+  --in-collection-border: #4e9b35;
+  --price: #f15959;
+  --in-wantlist-border: #b1413f;
   --filter-chip: #2a4f96;
   --history-highlight: #3a4260;
   --history-hover: #353345;
   --submission-form-error: #2e222b;
-  --text-muted: #768390;
+  --text-muted: #848F9A;
   --text-normal: #bdbdbd;
   --text-bold: #d9d9d9;
   --link-visited: #a78fd6;
@@ -910,6 +917,16 @@
     border: 5px dashed var(--borders) !important;
   }
 
+  .browse-files-button {
+    background: var(--button-primary) !important;
+    color: var(--black) !important;
+  }
+
+  span#article-borders-1,
+  span#article-borders-2 {
+    border-bottom: 1px solid var(--borders) !important;
+  }
+
   .has_files #uploader_messaging {
     background-color: var(--row-even) !important;
   }
@@ -1470,13 +1487,40 @@
   }
 
   .price {
-    color: var(--in-wantlist-border) !important;
+    color: var(--price) !important;
     span,
     td {
-      color: var(--in-wantlist-border) !important;
+      color: var(--price) !important;
+    }
+  }
+
+  .converted_price,
+  .converted_price span {
+    color: var(--text-muted) !important;
+
+    &.de-price,
+    &.de-price span {
+      color: var(--text-normal) !important;
+
+      &.red {
+        color: var(--price) !important;
+      }
+
+      &.green {
+        color: var(--skittle-collection) !important;
+      }
     }
   }
 
+  /* suggested price feature */
+  .red {
+    color: var(--price) !important;
+  }
+
+  .green {
+    color: var(--skittle-collection) !important;
+  }
+
   .cart_page .order_summary_errors {
     color: var(--in-wantlist-border) !important;
   }
@@ -3080,16 +3124,16 @@
   /* Edit Release page */
 
   .format .format_current_desc_list span {
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     background: var(--skittle-inventory) !important;
   }
 
   .facet-tag {
-    color: var(--text-bold) !important;
+    color: var(--white) !important;
     background: var(--skittle-inventory) !important;
     span,
     i {
-      color: var(--text-bold) !important;
+      color: var(--white) !important;
       background: var(--skittle-inventory) !important;
     }
   }
@@ -3712,6 +3756,7 @@
   // Disabled image tag in Release History page
   .text_label_red {
     background: var(--skittle-wantlist) !important;
+    color: var(--white) !important;
   }
 
   .image_preview {
@@ -3751,7 +3796,7 @@
 
   // demand-index
   .de-demand-negative {
-    color: var(--in-wantlist-border) !important;
+    color: var(--price) !important;
   }
   .de-demand-positive {
     color: var(--button-green) !important;
@@ -4687,7 +4732,7 @@
 
     // for sale count
     span[class*="forsale_"] span[class*="price_"] {
-      color: var(--in-wantlist-border) !important;
+      color: var(--price) !important;
     }
 
     #shortcuts {
@@ -5023,7 +5068,7 @@
           }
           // prices
           .cWLZCm {
-            color: var(--in-wantlist-border) !important;
+            color: var(--price) !important;
           }
         }
 

From 80caa53077c9e0f347abf602b8324e23aa6c4ae7 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 17:32:41 -0700
Subject: [PATCH 26/31] Update suggested-prices.css

---
 css/suggested-prices.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/css/suggested-prices.css b/css/suggested-prices.css
index 97db746a..013851ac 100644
--- a/css/suggested-prices.css
+++ b/css/suggested-prices.css
@@ -24,9 +24,7 @@
   display: block;
 }
 
-.red,
-.de-dark-theme .red {
-  color: #BF3A38 !important;
+.red {
   font-weight: bold;
 }
 

From badb623a7e80e5e970599847ef95c992001c0e09 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:26:32 -0700
Subject: [PATCH 27/31] Update dark-theme.scss

---
 css/dark-theme.scss | 54 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 52 insertions(+), 2 deletions(-)

diff --git a/css/dark-theme.scss b/css/dark-theme.scss
index ecd4ae52..5ab0c44d 100644
--- a/css/dark-theme.scss
+++ b/css/dark-theme.scss
@@ -166,7 +166,7 @@
   --input-bg: #25262a;
   --in-collection-bg: #1b3923;
   --in-collection-border: #4e9b35;
-  --price: #FF4242;
+  --price: #ff5c5c;
   --text-muted: #959595;
   --filter-chip: #2a4f96;
   --submission-form-error: #321d1f;
@@ -457,6 +457,13 @@
     color: var(--link-hover) !important;
   }
 
+  /* Super annyoing to style social icons in footer */
+  #site_footer_wrap a:hover {
+    svg path {
+      fill: var(--link-hover) !important;
+    }
+  }
+
   a:hover > {
     sup.de-discriminator,
     span.de-discriminator,
@@ -589,6 +596,12 @@
     }
   }
 
+  li.ui-menu-item a:hover {
+    span.with-sublabel {
+      color: var(--link-hover) !important;
+    }
+  }
+
   #site_footer_wrap {
     background: var(--site-header-bg) !important;
   }
@@ -653,6 +666,10 @@
     border-left: 4px solid var(--text-muted) !important;
   }
 
+  #merge_releases .merge_releases_column {
+    border-right: 1px solid var(--borders) !important;
+  }
+
   table {
     &.list tr.new td.status,
     &.cw_releases tr.new td.status,
@@ -1534,7 +1551,7 @@
 
   a.report_item.mplabel.hide_mobile,
   .required {
-    color: var(--in-wantlist-border) !important;
+    color: var(--price) !important;
   }
 
   // price_flags in Inventory
@@ -1630,6 +1647,8 @@
   #list_details .listitem,
   .order-item-row,
   .pagination.top,
+  div.heading-box,
+  #collection tr.collection-row,
   .review {
     border-bottom: 1px solid var(--borders) !important;
   }
@@ -1672,6 +1691,10 @@
     border-bottom: none !important;
   }
 
+  div.submission-form-section i.icon-info-circle {
+    color: var(--uploader-hover) !important;
+  }
+
   table.release_list_table.table_block thead tr,
   .order_total_row {
     background: var(--row-even) !important;
@@ -2275,6 +2298,7 @@
   .release_stats_group_list,
   #object_preview,
   ul.module_blocks > li,
+  #deleteForm,
   .tab_menu {
     border: 1px solid var(--borders) !important;
   }
@@ -2907,10 +2931,12 @@
   input[type="number"]:focus-within,
   input#title:focus-within,
   input#marketplace-search-input:focus-within,
+  #tax-edit-content input[name*="seller-"]:focus-within,
   .actions_with_tabs input[name="q"]:focus-within,
   .submission-form-section input[type="text"]:focus-within,
   .submission-form-section textarea:focus-within,
   .subform_tracklist input[type="text"]:focus-within,
+  input[name="release_id"]:focus-within,
   .submission-form-section input[type="checkbox"]:focus-within {
     outline: 2px solid var(--input-focus-border) !important;
   }
@@ -3480,6 +3506,30 @@
 
   /* Buyer/Seller Settings */
 
+  #tax-rules,
+  #seller-buyers-form,
+  #seller-shipping-policy,
+  #seller-currency-form,
+  #paypal-commerce-signup-form,
+  #seller-address-form {
+    i.icon-green {
+      color: var(--skittle-collection) !important;
+    }
+  }
+
+  #tax-edit-header {
+    border: 1px solid var(--borders) !important;
+    background: var(--headers) !important;
+  }
+
+  #tax-edit-content {
+    border-color: var(--borders) !important;
+
+    i.icon-red {
+      color: var(--price) !important;
+    }
+  }
+
   #seller-paypal-verification,
   #seller-address-form,
   #seller-payment-form,

From 2e2a04d918185bf4fbc989e84b7a2f764b5e8fad Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:26:57 -0700
Subject: [PATCH 28/31] Fix bug with incorrect POST params

---
 js/extension/features/everlasting-collection-notes.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/js/extension/features/everlasting-collection-notes.js b/js/extension/features/everlasting-collection-notes.js
index 8bc21da7..3703e9ee 100644
--- a/js/extension/features/everlasting-collection-notes.js
+++ b/js/extension/features/everlasting-collection-notes.js
@@ -107,7 +107,9 @@ function saveNotes(event) {
       folderId, // TODO: what is this value for?
       val = event.target.closest('.notes_field').querySelector('.notes_textarea').value,
       notes = event.target.closest('.notes_field').querySelector('.notes_textarea').value,
+      releaseId = event.target.closest('.notes_field').dataset.id,
       notesObj = {
+        release_id: releaseId,
         coll_id: colId,
         field_id: fieldId,
         folder_id: folderId || null,
@@ -130,7 +132,7 @@ rl.ready(() => {
       let target = event.target;
 
       // cancel button
-      if ( target.id === 'notes_edit_cancel' ) {
+      if ( target.className.includes('notes_edit_cancel') ) {
         return cancelNotes(event);
       }
       // edit/add notes
@@ -140,7 +142,7 @@ rl.ready(() => {
       // save notes
       if ( target.parentElement.previousElementSibling
            && target.parentElement.previousElementSibling.closest('.de-notes-show')
-           && target.id == 'notes_edit_save') {
+           && target.className.includes('notes_edit_save') ) {
         return saveNotes(event);
       }
     });

From 4c9e4017809a905c2b47716ecd1322a8d9abeaf8 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:27:07 -0700
Subject: [PATCH 29/31] Update title value

---
 js/extension/features/force-dashboard.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/js/extension/features/force-dashboard.js b/js/extension/features/force-dashboard.js
index 430424be..68e776e5 100644
--- a/js/extension/features/force-dashboard.js
+++ b/js/extension/features/force-dashboard.js
@@ -13,6 +13,7 @@ rl.ready(() => {
   if ( document.querySelector('#header_logo') ) {
     // normal release page
     document.querySelector('#header_logo').href = '/my';
+    document.querySelector('#header_logo').title = 'Go to Dashboard';
     // Hide Dashboard Icon
     let dashboardIcons = document.querySelectorAll('.icon-dashboard');
     dashboardIcons.forEach(icon => {
@@ -21,6 +22,7 @@ rl.ready(() => {
 
   } else if ( document.querySelector('header[class*="_header_"]') ) {
       document.querySelector('a[class*="_home_"]').href = '/my';
+      document.querySelector('a[class*="_home_"]').title = 'Go to Dashboard';
       // Hide Dashboard Icon
       let dashboardIcons = document.querySelectorAll('nav[class*="_user_"] a[href="/my"]');
       dashboardIcons.forEach(icon => {
@@ -32,6 +34,7 @@ rl.ready(() => {
 
       rl.waitForElement(selector).then(() => {
         document.querySelector(selector).href = '/my';
+        document.querySelector(selector).title = 'Go to Dashboard';
         // Hide Dashboard Icon
         let dashboardIcon = document.querySelector('nav[class*="profile_"] a[href^="/my"]');
         dashboardIcon.style.display = 'none';

From 9b318725807e181af814f7256d8a156a1a034045 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:27:22 -0700
Subject: [PATCH 30/31] Version bump to 3.2.0

---
 manifest.json     |  2 +-
 package-lock.json | 53 +++++++++++++++++++++++++----------------------
 package.json      |  4 ++--
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/manifest.json b/manifest.json
index af9982c1..1085e190 100644
--- a/manifest.json
+++ b/manifest.json
@@ -3,7 +3,7 @@
   "name": "Discogs Enhancer",
   "short_name": "Discogs Enhancer",
   "description": "Adds a dark theme, block sellers, price comparisons, currency converter, configurable quick search, & more to Discogs!",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "author": "Matthew Salcido",
   "homepage_url": "https://www.discogs-enhancer.com",
   "action": {
diff --git a/package-lock.json b/package-lock.json
index 93738cbc..3d9c4a91 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "discogs-enhancer",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "discogs-enhancer",
-      "version": "3.1.2",
+      "version": "3.1.3",
       "license": "GPL-3.0-or-later",
       "dependencies": {
         "clipboardy": "^3.0.0",
@@ -20,7 +20,7 @@
         "babel-preset-env": "^1.7.0",
         "copy-webpack-plugin": "^10.2.4",
         "css-loader": "^6.7.3",
-        "eslint": "^8.38.0",
+        "eslint": "^8.39.0",
         "eslint-plugin-import": "^2.24.2",
         "puppeteer": "^2.1.1",
         "sass": "^1.62.0",
@@ -572,9 +572,9 @@
       "dev": true
     },
     "node_modules/@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -2540,15 +2540,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -2558,7 +2558,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -2689,9 +2689,9 @@
       }
     },
     "node_modules/eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dev": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
@@ -2699,6 +2699,9 @@
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
       }
     },
     "node_modules/eslint-visitor-keys": {
@@ -6895,9 +6898,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
-      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.39.0.tgz",
+      "integrity": "sha512-kf9RB0Fg7NZfap83B3QOqOGg9QmD9yBudqQXzzOtn3i4y7ZUXe5ONeW34Gwi+TxhH4mvj72R1Zc300KUMa9Bng==",
       "dev": true
     },
     "@humanwhocodes/config-array": {
@@ -8532,15 +8535,15 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.38.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
-      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
+      "version": "8.39.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.39.0.tgz",
+      "integrity": "sha512-mwiok6cy7KTW7rBpo05k6+p4YVZByLNjAZ/ACB9DRCu4YDRwjXI01tWHp6KAUWelsBetTxKK/2sHB0vdS8Z2Og==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.38.0",
+        "@eslint/js": "8.39.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -8550,7 +8553,7 @@
         "debug": "^4.3.2",
         "doctrine": "^3.0.0",
         "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^7.1.1",
+        "eslint-scope": "^7.2.0",
         "eslint-visitor-keys": "^3.4.0",
         "espree": "^9.5.1",
         "esquery": "^1.4.2",
@@ -8811,9 +8814,9 @@
       }
     },
     "eslint-scope": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
-      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.0.tgz",
+      "integrity": "sha512-DYj5deGlHBfMt15J7rdtyKNq/Nqlv5KfU4iodrQ019XESsRnwXH9KAE0y3cwtUHDo2ob7CypAnCqefh6vioWRw==",
       "dev": true,
       "requires": {
         "esrecurse": "^4.3.0",
diff --git a/package.json b/package.json
index 15476e98..acef84e5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "discogs-enhancer",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "A Chrome extension that adds useful functionality to Discogs.com! https://www.discogs-enhancer.com",
   "main": "index.js",
   "scripts": {
@@ -30,7 +30,7 @@
     "babel-preset-env": "^1.7.0",
     "copy-webpack-plugin": "^10.2.4",
     "css-loader": "^6.7.3",
-    "eslint": "^8.38.0",
+    "eslint": "^8.39.0",
     "eslint-plugin-import": "^2.24.2",
     "puppeteer": "^2.1.1",
     "sass": "^1.62.0",

From 2afd756a0c300432afa932b4f3695b8052369884 Mon Sep 17 00:00:00 2001
From: Matthew Salcido <salcido@users.noreply.github.com>
Date: Thu, 27 Apr 2023 19:28:52 -0700
Subject: [PATCH 31/31] Update change-log.js

---
 js/popup/change-log.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/js/popup/change-log.js b/js/popup/change-log.js
index 99622b1b..30507686 100644
--- a/js/popup/change-log.js
+++ b/js/popup/change-log.js
@@ -1,5 +1,24 @@
 module.exports = {
   current: [
+    {
+      version: '3.2.0',
+      features: [
+        {
+          name: 'More Dark Themes',
+          description: 'Three dark themes are now available! Meteor, Gravity, and Nebula. Check them out and let me know what you think!',
+          link: '#darkTheme'
+        },
+      ],
+      updates: [
+        {
+          name: 'Bug Fix',
+          description: 'Fixed an issue where the "Has x more items I want" links in the Marketplace might not show up when using the Filter By Country feature.'
+        },
+      ],
+      thanks: [],
+    },
+  ],
+  previous: [
     {
       version: '3.1.1',
       features: [
@@ -17,8 +36,6 @@ module.exports = {
       ],
       thanks: ['Massive thank you to Jason F. for the donation! I really apprecaite it.'],
     },
-  ],
-  previous: [
     {
       version: '3.1.0',
       features: [