UX: start removing hardcoded colors for dark mode support (#12)

about.json

@@ -9,18 +9,30 @@
   "maximum_discourse_version": null,
   "assets": {},
   "modifiers": {},
+  "components": [
+    "https://github.com/discourse/discourse-sidebar-new-topic-button.git",
+    "https://github.com/discourse/discourse-search-banner.git"
+  ],
   "color_schemes": {
     "next_gen": {
       "primary": "1A1A1A",
-      "secondary": "F5F8FF",
+      "primary-low": "ebecf9",
-      "header_background": "F5F8FF",
+      "primary-500": "8591ad",
-      "tertiary": "595bca"
+      "secondary": "ffffff",
+      "header_background": "f5f8ff",
+      "tertiary": "595bca",
+      "tertiary-low": "d8d9f3",
+      "selected": "d8d9f3",
+      "hover": "ebebf9"
     },
     "next_gen_dark": {
-      "primary": "F5F8FF",
+      "primary": "f8f5ff",
-      "secondary": "1A1A1A",
+      "secondary": "1d0058",
-      "header_background": "1A1A1A",
+      "header_background": "00091d",
-      "tertiary": "595bca"
+      "header_primary": "F5F8FF",
+      "tertiary": "595bca",
+      "selected": "292f90",
+      "hover": "0f0031"
     }
   }
 }

locales/en.yml

@@ -1,5 +1,5 @@
 en:
   theme_metadata:
-    description: ''
+    description: ""
     settings:
       example_setting: A description of a setting.

scss/chat.scss

@@ -1,6 +1,7 @@
 .full-page-chat.full-page-chat-sidebar-enabled {
   border-top-left-radius: var(--d-border-radius-large);
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+    0px 0px 24px 4px var(--tertiary-50);
   border: none;
 }
 

scss/header.scss

@@ -1,3 +1,4 @@
 .d-header {
   box-shadow: none;
+  background: var(--tertiary-50);
 }

scss/main.scss

@@ -1,5 +1,5 @@
 html:not(:has(.has-full-page-chat)) {
-  background-color: #f5f8ff;
+  background-color: var(--tertiary-50);
 }
 
 :root {
@@ -7,7 +7,7 @@ html:not(:has(.has-full-page-chat)) {
 }
 
 body:not(.has-full-page-chat) {
-  background-color: #f5f8ff;
+  background-color: var(--tertiary-50);
   #main-outlet-wrapper {
     // margin-top: 1.5rem;
     @media screen and (max-width: 485px) {
@@ -68,7 +68,8 @@ aside.onebox {
 }
 
 .d-editor-preview-wrapper {
-  box-shadow: 0px 0px 1px 2px #e2e8f8, 0px 0px 24px 4px #e2e8f8;
+  box-shadow: 0px 0px 1px 2px var(--tertiary-50),
+    0px 0px 24px 4px var(--tertiary-50);
   border-radius: var(--d-border-radius-large);
   padding: 1em;
   background-color: var(--d-content-background);

scss/search-banner.scss

@@ -7,7 +7,7 @@
   border-bottom: 1px solid var(--primary-300);
   padding: 1.5em 0 2.5em;
   margin-bottom: 0;
-  --search-color: #595bca;
+  --search-color: var(--tertiary-medium);
   @media screen and (max-width: 900px) {
     padding-bottom: 1em;
   }
@@ -19,7 +19,7 @@
     align-self: center;
     margin: 0;
     font-weight: 400;
-    color: #350c73;
+    color: var(--tertiary);
     @media screen and (max-width: 1028px) {
       font-size: var(--font-up-4);
       grid-column: 1/-1;
@@ -63,7 +63,7 @@
   }
   .search-input {
     background: var(--d-content-background);
-    border: 1px solid oklch(from var(--search-color) 80% calc(c * 2.5) h);
+    border: 1px solid var(--search-color);
     box-shadow: 0 4px 10px rgba(52, 6, 121, 15%);
   }
   .search-menu .search-input:focus-within,

scss/topic-cards.scss

@@ -1,7 +1,6 @@
 .topic-list-item {
   background: var(--d-content-background);
   &:hover {
-    background: oklch(from var(--d-content-background) 97% c h);
+    background: var(--primary-very-low);
   }
-  border: 1px solid #cedde3;
 }

scss/topic.scss

@@ -62,7 +62,7 @@
   .more-topics__list
   .topic-list-body
   .topic-list-item:last-of-type {
-  border-bottom: 1px solid #cedde3;
+  border-bottom: 1px solid var(--primary-300);
 }
 
 .discourse-post-event .discourse-post-event-widget {

scss/variables.scss

@@ -4,18 +4,16 @@
   --d-input-border-radius: 6px;
   --accent-color: #3c41c3;
   --accent-text-color: #ffffff;
-  --d-content-background: #fff;
+  --d-content-background: var(--secondary);
   --d-nav-color--active: var(--accent-color);
-  --primary: #14171f;
-  --header-background: #f5f8ff;
   --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-link-icon-color: #8591ad;
+  --d-sidebar-highlight-background: var(--tertiary-300);
   --d-sidebar-section-link-icon-size: 1em;
-  --d-sidebar-highlight-background: #ebecf9;
-  --d-sidebar-active-background: #d8d9f3;
   --d-input-bg-color: var(--d-content-background);
   // --d-sidebar-row-height: 2.8em;
   //the idea is: block spacing can grow with font-size, but inline spacing should not to maintain horizontal (text) alignment