UX: more dark mode adjustments (#13)

about.json

@@ -11,7 +11,8 @@
   "modifiers": {},
   "components": [
     "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
-    "https://github.com/discourse/discourse-search-banner.git"
+    "https://github.com/discourse/discourse-search-banner.git",
+    "https://github.com/discourse/discourse-full-width-component.git"
   ],
   "color_schemes": {
     "next_gen": {
@@ -20,19 +21,21 @@
       "primary-500": "8591ad",
       "secondary": "ffffff",
       "header_background": "f5f8ff",
-      "tertiary": "595bca",
+      "tertiary": "313270",
       "tertiary-low": "d8d9f3",
+      "tertiary-50": "f5f8ff",
       "selected": "d8d9f3",
       "hover": "ebebf9"
     },
     "next_gen_dark": {
-      "primary": "f8f5ff",
+      "primary": "F1EFF9",
-      "secondary": "1d0058",
+      "secondary": "1e1a36",
       "header_background": "00091d",
       "header_primary": "F5F8FF",
-      "tertiary": "595bca",
+      "tertiary": "6465ab",
-      "selected": "292f90",
+      "tertiary-50": "131124",
-      "hover": "0f0031"
+      "selected": "1e1a36",
+      "hover": "131124"
     }
   }
 }

common/color_definitions.scss

@@ -0,0 +1,5 @@
+$accent-color: dark-light-choose(#3c41c3, #6e4bbc);
+
+:root {
+  --accent-color: #{$accent-color};
+}

scss/box-view.scss

@@ -30,7 +30,7 @@
     position: fixed;
     width: var(--d-border-radius-large);
     height: var(--d-border-radius-large);
-    background-color: var(--secondary);
+    background-color: var(--tertiary-50);
     z-index: 999;
     -webkit-mask: radial-gradient(
       circle at var(--d-border-radius-large) var(--d-border-radius-large),
@@ -90,7 +90,7 @@
     position: fixed;
     width: 100%;
     z-index: 999;
-    background-color: var(--secondary);
+    background-color: var(--tertiary-50);
     bottom: 0;
     left: calc(var(--main-grid-gap) + var(--d-sidebar-width));
     @media screen and (max-width: 768px) {

scss/header.scss

@@ -2,3 +2,24 @@
   box-shadow: none;
   background: var(--tertiary-50);
 }
+
+.user-menu .quick-access-panel,
+.user-notifications-list {
+  li {
+    &.pending,
+    &.unread {
+      background: var(--d-hover);
+
+      .discourse-no-touch & {
+        &:hover,
+        &:focus {
+          background: var(--d-selected);
+        }
+      }
+    }
+  }
+}
+
+.user-menu.revamped .tabs-list .btn.active {
+  background: var(--d-hover);
+}

scss/variables.scss

@@ -2,17 +2,14 @@
   --d-border-radius-large: 20px;
   --d-border-radius: 8px;
   --d-input-border-radius: 6px;
-  --accent-color: #3c41c3;
+  --accent-text-color: var(--secondary);
-  --accent-text-color: #ffffff;
   --d-content-background: var(--secondary);
   --d-nav-color--active: var(--accent-color);
-  --d-post-control-background--hover: #ebecf9;
-  --d-post-control-text-color--hover: #242775;
   --d-sidebar-background: var(--tertiary-50);
   --d-sidebar-footer-fade: rgba(var(--tertiary-50-rgb), 1);
   --d-sidebar-link-color: var(--primary);
   --d-sidebar-highlight-color: var(--primary);
-  --d-sidebar-highlight-background: var(--tertiary-300);
+  --d-sidebar-highlight-background: var(--d-selected);
   --d-sidebar-section-link-icon-size: 1em;
   --d-input-bg-color: var(--d-content-background);
   // --d-sidebar-row-height: 2.8em;