From 9381e56c471a0b72ce80039166d804a1a041a573 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Thu, 6 Mar 2025 20:30:07 -0600
Subject: [PATCH] UX: Dark mode changes to move toward a base of accent-color
 (#23)

---
 common/color_definitions.scss |  6 ------
 scss/box-view.scss            | 12 +++++-------
 scss/buttons.scss             | 18 ++++++++++--------
 scss/chat.scss                |  9 +--------
 scss/nav-pills.scss           |  3 +--
 scss/search-banner.scss       |  3 +--
 scss/topic-cards.scss         |  4 +---
 scss/variables.scss           | 31 ++++++++++++++++++++++++++++---
 8 files changed, 47 insertions(+), 39 deletions(-)
 delete mode 100644 common/color_definitions.scss

diff --git a/common/color_definitions.scss b/common/color_definitions.scss
deleted file mode 100644
index bc990b4..0000000
--- a/common/color_definitions.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
-
-:root {
-  --accent-color: #{$accent-color};
-  --background-color: #f5f8ff;
-}
diff --git a/scss/box-view.scss b/scss/box-view.scss
index 49bd2a1..916f6ea 100644
--- a/scss/box-view.scss
+++ b/scss/box-view.scss
@@ -50,7 +50,7 @@
     position: fixed;
     width: var(--d-border-radius-large);
     height: var(--d-border-radius-large);
-    background-color: var(--tertiary-50);
+    background-color: var(--background-color);
     z-index: 399;
     -webkit-mask: radial-gradient(
       circle at var(--d-border-radius-large) var(--d-border-radius-large),
@@ -79,18 +79,16 @@
   &__bottom-right {
     transform: rotate(180deg);
     bottom: var(--d-border-radius-large);
-    @container content-width (width > 1px) {
-      left: calc(var(--right-distance) - var(--d-border-radius-large));
-      @media screen and (max-width: 768px) {
-        bottom: calc(var(--d-border-radius-large) * 2);
-      }
+    left: calc(var(--right-distance) - var(--d-border-radius-large));
+    @media screen and (max-width: 768px) {
+      bottom: calc(var(--d-border-radius-large) * 2);
     }
   }
   &__bottom-bar {
     position: fixed;
     width: 100%;
     z-index: 399;
-    background-color: var(--tertiary-50);
+    background-color: var(--background-color);
     bottom: 0;
     left: var(--left-distance);
     height: var(--d-border-radius-large);
diff --git a/scss/buttons.scss b/scss/buttons.scss
index dcc931d..415cfff 100644
--- a/scss/buttons.scss
+++ b/scss/buttons.scss
@@ -30,14 +30,16 @@
       var(--accent-color);
   }
   svg {
-    color: var(--secondary);
+    color: var(--accent-text-color);
   }
 }
 
-.discourse-no-touch .btn-default.sidebar-new-topic-button {
+.discourse-no-touch .btn-default.sidebar-new-topic-button,
+.discourse-no-touch .interface-color-selector-content .btn-default {
   border: none;
   &:hover {
     border: none;
+    box-shadow: none;
   }
 }
 
@@ -57,13 +59,13 @@
   .d-icon {
     color: var(--accent-color);
   }
+
   &:hover {
     .discourse-no-touch & {
       border: 1px solid var(--accent-color);
-      box-shadow: 0px 0px 8px 2px
-        oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
+      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
       background: var(--secondary);
-      color: var(--accent-color);
+      color: var(--primary);
       .d-icon {
         color: var(--accent-color);
       }
@@ -74,7 +76,7 @@
       background: var(--secondary);
       color: var(--accent-color);
       box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
+        0px 0px 0px 4px var(--button-box-shadow);
       .d-icon {
         color: var(--accent-color);
       }
@@ -108,7 +110,7 @@
           rgba(255, 255, 255, 0) 100%
         ),
         var(--accent-color);
-      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.15);
+      box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
     }
   }
   &:focus-visible {
@@ -120,7 +122,7 @@
         ),
         var(--accent-color);
       box-shadow: 0px 0px 0px 2px var(--secondary),
-        0px 0px 0px 4px var(--accent-color);
+        0px 0px 0px 4px var(--button-box-shadow);
     }
   }
   &:active {
diff --git a/scss/chat.scss b/scss/chat.scss
index 2e78e0f..8c3a0b1 100644
--- a/scss/chat.scss
+++ b/scss/chat.scss
@@ -1,10 +1,6 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
   border-top-left-radius: var(--d-border-radius-large);
   border-top-right-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 0px 2px
-      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
-    0px 0px 8px 2px
-      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
   border: none;
 }
 
@@ -20,10 +16,7 @@ body.has-full-page-chat {
 }
 
 .chat-drawer .chat-drawer-container {
-  box-shadow: 0px 0px 0px 2px
-      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
-    0px 0px 8px 2px
-      oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h);
+  box-shadow: 0px 0px 0px 2px var(--d-chat-border);
   border: none;
 }
 
diff --git a/scss/nav-pills.scss b/scss/nav-pills.scss
index e024263..525244b 100644
--- a/scss/nav-pills.scss
+++ b/scss/nav-pills.scss
@@ -20,8 +20,7 @@
     // font-size: var(--font-up-1-rem);
     &:hover {
       border: 1px solid var(--accent-color);
-      box-shadow: 0px 0px 8px 2px
-        oklch(from (var(--accent-color)) calc(l * 2) calc(c * 0.125) h);
+      box-shadow: 0px 0px 8px 2px var(--button-box-shadow);
     }
   }
   .select-kit.combo-box.category-drop.has-selection
diff --git a/scss/search-banner.scss b/scss/search-banner.scss
index b078803..555bf22 100644
--- a/scss/search-banner.scss
+++ b/scss/search-banner.scss
@@ -7,7 +7,6 @@
   border-bottom: 1px solid var(--primary-300);
   padding: 1.5em 0 2.5em;
   margin-bottom: 0;
-  --search-color: var(--tertiary-medium);
   @media screen and (max-width: 900px) {
     padding-bottom: 1em;
   }
@@ -19,7 +18,7 @@
     align-self: center;
     margin: 0;
     font-weight: 400;
-    color: var(--tertiary);
+    color: var(--search-banner-text-color);
     @media screen and (max-width: 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
diff --git a/scss/topic-cards.scss b/scss/topic-cards.scss
index a518443..0727b33 100644
--- a/scss/topic-cards.scss
+++ b/scss/topic-cards.scss
@@ -103,7 +103,6 @@ body.user-messages-page .topic-list-item {
   border: 1px solid var(--primary-300);
   display: grid;
   grid-template-columns: 44px min-content min-content auto min-content min-content min-content;
-
   grid-template-rows: 22px minmax(22px, auto);
   grid-template-areas:
     "avatar author status status . . activity"
@@ -360,8 +359,7 @@ body.user-messages-page .topic-list-item {
 
 .topic-list-item {
   background: var(--d-content-background);
-  box-shadow: 0px 0px 26px 1px
-    light-dark(hsl(224 61% 96% / 1), hsl(224 61% 96% / 0.1));
+  box-shadow: 0px 0px 26px 1px var(--topic-card-shadow);
   &:hover {
     border: 1px solid var(--accent-color);
     background: var(--d-content-background);
diff --git a/scss/variables.scss b/scss/variables.scss
index e268b0d..183858d 100644
--- a/scss/variables.scss
+++ b/scss/variables.scss
@@ -1,13 +1,38 @@
 :root {
-  color-scheme: light dark;
+  --accent-color: #393edb;
+  --background-color: light-dark(#f5f8ff, #1b1c1e);
+  --search-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 2) h)
+  );
+  --search-banner-text-color: light-dark(
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h),
+    oklch(from var(--accent-color) calc(l * 1.85) calc(c * 2) h)
+  );
+  --topic-card-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.1) h / 0.5),
+    oklch(from var(--accent-color) calc(l * 0.2) calc(c * 0.01) h / 0.25)
+  );
+  --button-box-shadow: light-dark(
+    oklch(from var(--accent-color) calc(l * 2) calc(c * 0.125) h),
+    oklch(from var(--accent-color) calc(l * 0.75) calc(c * 0.5) h)
+  );
+  --d-selected: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.9) calc(c * 2) h / 0.3),
+    oklch(from var(--accent-color) calc(l * 0.65) calc(c * 0.65) h / 0.75)
+  );
+  --d-chat-border: light-dark(
+    oklch(from var(--accent-color) calc(l * 1.5) calc(c * 0.25) h),
+    oklch(from var(--accent-color) calc(l * 0.25) calc(c * 0.25) h)
+  );
   --d-max-width: 1000px;
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-text-color: var(--secondary);
+  --accent-text-color: light-dark(#ffffff, #0f1024);
   --d-content-background: var(--secondary);
   --d-nav-color--active: var(--accent-color);
-  --d-sidebar-background: var(--tertiary-50);
+  --d-sidebar-background: var(--background-color);
   --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
   --d-sidebar-link-color: var(--primary);
   --d-sidebar-highlight-color: var(--primary);