Incremental improvement to sidenav. Improve brand color contrast

ghostty-org · Dec 18, 2024 · 75191fa · 75191fa
1 parent 6933359
commit 75191fa
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 11 deletions.
diff --git a/src/components/nav-tree/NavTree.module.css b/src/components/nav-tree/NavTree.module.css
@@ -5,7 +5,7 @@
 
 ul.nodesList {
   --node-font-size: 16px;
-  --node-padding: 12px 8px;
+  --node-padding: 12px 6px;
   --node-border-radius: 5px;
 
   display: flex;
@@ -23,7 +23,7 @@ ul.nodesList {
         width: 100%;
         text-align: left;
         font-weight: 500;
-        color: var(--gray-4);
+        color: var(--gray-5);
         font-size: var(--node-font-size);
         line-height: var(--node-font-size);
         padding: var(--node-padding);
@@ -34,7 +34,7 @@ ul.nodesList {
         align-items: center;
         &:hover {
           color: var(--gray-9);
-          background: var(--brand-color);
+          background: var(--gray-2);
         }
       }
       & svg {
@@ -59,14 +59,11 @@ ul.nodesList {
       padding: var(--node-padding);
       border-radius: var(--node-border-radius);
       text-decoration: none;
-      &.active {
-        background: var(--brand-color);
+      &:hover {
+        background: var(--gray-2);
         color: var(--gray-9);
       }
-      &:hover {
-        /* TODO: this should be slightly different than the 'active' color
-        so there is a visual distinction between the hover state on an
-        active element. */
+      &.active {
         background: var(--brand-color);
         color: var(--gray-9);
       }

diff --git a/src/pages/docs/[...path]/DocsPage.module.css b/src/pages/docs/[...path]/DocsPage.module.css
@@ -16,6 +16,10 @@
       height: calc(100vh - var(--header-height));
       border-right: 1px solid var(--gray-6);
       padding: 24px 14px 48px;
+      & .documentationTitle {
+        margin-left: 12px;
+        margin-bottom: 4px;
+      }
       & > .sidebarNavTree {
         padding: 2px; /* guarantee space for focus border */
         height: 100%;

diff --git a/src/pages/docs/[...path]/index.tsx b/src/pages/docs/[...path]/index.tsx
@@ -1,7 +1,7 @@
 import Breadcrumbs, { Breadcrumb } from "@/components/breadcrumbs";
 import CustomMDX from "@/components/custom-mdx";
 import NavTree, { NavTreeNode } from "@/components/nav-tree";
-import { H1, P } from "@/components/text";
+import { H1, H5, P } from "@/components/text";
 import NavFooterLayout from "@/layouts/nav-footer-layout";
 import {
   DocsPageData,
@@ -74,6 +74,9 @@ export default function DocsPage({
       <div className={s.docsPage}>
         <div className={s.sidebar}>
           <div className={s.sidebarContentWrapper}>
+            <H5 className={s.documentationTitle} weight="medium">
+              Documentation
+            </H5>
             <NavTree
               rootPath={DOCS_PAGES_ROOT_PATH}
               className={s.sidebarNavTree}

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -18,7 +18,7 @@ body {
   --header-height: 72px;
 
   max-width: 100vw;
-  --brand-color: #0000E6;
+  --brand-color: #3551F3;
   --brand-color-hsl: 240 100% 45%;
   --gray-0: #0F0F11; /* Background color */
   --gray-1: #16161A; /* Blocks */