From 1c85ae4626a11c6c1a2bac8af7972092d1e097f5 Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Tue, 1 Apr 2025 20:01:29 -0500
Subject: [PATCH] UX: More accessible colors (#105)

---
 about.json                    |  8 ++++----
 common/color_definitions.scss | 23 ++++++++++++++---------
 scss/buttons.scss             | 15 ++++++++++++---
 scss/color-exploration.scss   |  1 +
 4 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/about.json b/about.json
index ddb601f..dbaf215 100644
--- a/about.json
+++ b/about.json
@@ -40,8 +40,8 @@
     "Royal": {
       "primary": "1A1A1A",
       "secondary": "ffffff",
-      "tertiary": "4169e1",
-      "tertiary-med-or-tertiary": "4169e1",
+      "tertiary": "288EDC",
+      "tertiary-med-or-tertiary": "288EDC",
       "selected": "c7e3ff",
       "header_background": "ffffff",
       "header_primary": "1A1A1A",
@@ -50,8 +50,8 @@
     "Royal Dark": {
       "primary": "ffffff",
       "secondary": "1A1A1A",
-      "tertiary": "4169e1",
-      "tertiary-med-or-tertiary": "4169e1",
+      "tertiary": "288EDC",
+      "tertiary-med-or-tertiary": "288EDC",
       "selected": "3a455f",
       "header_background": "1A1A1A",
       "header_primary": "ffffff",
diff --git a/common/color_definitions.scss b/common/color_definitions.scss
index bac0b09..b0c147e 100644
--- a/common/color_definitions.scss
+++ b/common/color_definitions.scss
@@ -1,9 +1,9 @@
 html {
   --accent-color: #{$tertiary} !important;
-  --accent-text-color: light-dark(#ffffff, #212121) !important;
+  --accent-text-color: #ffffff;
   // Background Colors
   --background-color: light-dark(
-    oklch(from #{$tertiary} 98% calc(c * 0.25) h),
+    oklch(from #{$tertiary} 96% calc(c * 0.125) h),
     oklch(from #{$tertiary} 10% 0.025 h)
   ) !important;
   --d-content-background: light-dark(
@@ -22,13 +22,14 @@ html {
 
   // Sidebar Colors
   --d-sidebar-border-color: light-dark(
-    oklch(from #{$tertiary} 90% c h),
+    oklch(from #{$tertiary} 88% calc(c * 0.25) h),
     oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
   ) !important;
   --d-sidebar-link-color: light-dark(
     oklch(from #{$tertiary} calc(l * 0.8) calc(c * 0.25) h),
     oklch(from #{$tertiary} calc(l * 1.5) calc(c * 0.25) h)
   ) !important;
+  --d-sidebar-active-color: #{$primary} !important;
   --d-sidebar-suffix-color: light-dark(
     oklch(from #{$tertiary} l calc(c * 0.9) h),
     oklch(from #{$tertiary} l calc(c * 0.9) h)
@@ -40,25 +41,29 @@ html {
     oklch(from #{$tertiary} calc(l * 0.7) calc(c * 0.25) h)
   ) !important;
 
-  --d-nav-color--active: #{$tertiary} !important;
+  --d-nav-color--active: light-dark(
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.2) c h)
+  ) !important;
+
   --link-color: light-dark(
-    #{$tertiary},
+    oklch(from #{$tertiary} l c h),
     oklch(from #{$tertiary} calc(l * 0.95) c h)
   ) !important;
   --link-color-hover: light-dark(
-    #{$tertiary},
+    oklch(from #{$tertiary} l c h),
     oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2.25) h)
   ) !important;
   --tertiary-hover: #{$tertiary} !important;
 
   // Search Colors
   --search-color: light-dark(
-    oklch(from #{$tertiary} calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from #{$tertiary} calc(l * 1.5) calc(c * 2) h)
+    oklch(from #{$tertiary} l c h),
+    oklch(from #{$tertiary} calc(l * 1.5) c h)
   ) !important;
   --search-banner-text-color: light-dark(
     oklch(from #{$tertiary} calc(l * 0.65) calc(c * 0.65) h),
-    oklch(from #{$tertiary} calc(l * 1.85) calc(c * 2) h)
+    oklch(from #{$tertiary} calc(l * 1.5) c h)
   ) !important;
 
   // Topic Card Colors
diff --git a/scss/buttons.scss b/scss/buttons.scss
index 4f2b0ee..e612624 100644
--- a/scss/buttons.scss
+++ b/scss/buttons.scss
@@ -66,7 +66,10 @@
   }
   &:hover {
     .discourse-no-touch & {
-      background: oklch(from var(--accent-color) 40% c h) !important;
+      background: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
       box-shadow: 0px 0px 6px 1px var(--button-box-shadow);
       color: var(--accent-text-color);
       .d-icon {
@@ -76,12 +79,18 @@
   }
   &:focus-visible {
     .discourse-no-touch & {
-      background: oklch(from var(--accent-color) 40% c h) !important;
+      background: light-dark(
+        oklch(from var(--accent-color) 40% c h),
+        oklch(from var(--accent-color) 50% c h)
+      );
       box-shadow: 0px 0px 0px 4px var(--button-box-shadow);
       color: var(--accent-text-color);
     }
   }
   &:active {
-    background: oklch(from var(--accent-color) 30% c h) !important;
+    background: light-dark(
+      oklch(from var(--accent-color) 40% c h),
+      oklch(from var(--accent-color) 50% c h)
+    );
   }
 }
diff --git a/scss/color-exploration.scss b/scss/color-exploration.scss
index 167f025..10c446d 100644
--- a/scss/color-exploration.scss
+++ b/scss/color-exploration.scss
@@ -22,4 +22,5 @@
   --d-sidebar-section-link-icon-size: 1em;
   --d-hover: oklch(from var(--d-selected) l c h / 0.75);
   --d-input-bg-color: var(--d-content-background);
+  --d-sidebar-active-color: var(--primary) !important;
 }