From 6c1ade6b3b906de18938cdd93b53f4bf3cc0c8f4 Mon Sep 17 00:00:00 2001
From: Jack Hickey <133868041+nginx-jack@users.noreply.github.com>
Date: Tue, 12 Aug 2025 14:22:21 +0100
Subject: [PATCH] Sidebar: Add left border to TOC

Fix usages of color-foreground. It's oklch based,
but had usages directly on color without oklch
wrapper.

Widen sidebar to 24rem
---
 assets/css/v2/style.css | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css
index f58b77f4..7aec9693 100644
--- a/assets/css/v2/style.css
+++ b/assets/css/v2/style.css
@@ -217,8 +217,6 @@ textarea:not([rows]) {
   --overflow-gutter-extension: 1rem;
 
   /* vars for the primary grid setup */
-  --grid-sidebar: 24rem;
-  --grid-sidebar-gutter: 3rem;
   --grid-content: minmax(34rem, 50rem);
   --grid-content-mobile: minmax(20rem, 50rem);
   --grid-side-callout: minmax(18rem, 26rem);
@@ -281,7 +279,7 @@ textarea:not([rows]) {
 
   --header-height: 4rem;
 
-  --sidebar-width: 22rem;
+  --sidebar-width: 24rem;
   --sidebar-item-padding-lr: 0.75rem;
   --sidebar-item-padding-tb: 0.25rem;
   --content-max-width: 88rem;
@@ -602,7 +600,7 @@ ol li:last-child {
 .header__sidebar__panel,
 .sidebar__panel {
   cursor: pointer;
-  color: var(--color-foreground);
+  color: oklch(var(--color-foreground));
   label {
     cursor: pointer;
   }
@@ -1188,7 +1186,7 @@ nav.sidebar.sidebar__mobile-open {
 
 .sidebar {
   grid-area: sidebar;
-  --color-foreground: oklch(0 0 0 / 0.75);
+  color: oklch(var(--color-foreground) / 0.75);
 
   display: flex;
   flex-direction: column;
@@ -1238,7 +1236,7 @@ nav.sidebar.sidebar__mobile-open {
     padding: 0.25rem 0.5rem;
     border-radius: 5px 0 0 5px;
     font-weight: 500;
-    color: var(--color-foreground);
+    color: oklch(var(--color-foreground));
 
     &:hover {
       background-color: oklch(var(--color-brand) / 0.06);
@@ -1298,15 +1296,16 @@ nav.sidebar.sidebar__mobile-open {
   .sidebar__toc {
     #TableOfContents {
       padding: 0 0.75rem 0 0;
-      margin: 0.5rem 0.25rem 0.5rem 0.8rem;
-      border-left: 1px solid var(--color-divider);
-      color: oklch(0 0 0 / 0.75);
+      margin: 0.5rem 0.25rem 0.5rem 0.875rem;
+      border-left: 1px solid oklch(var(--color-divider));
+      color: oklch(var(--color-foreground) / 0.75);
 
       &[hidden] {
         display: none;
       }
 
       a {
+        color: oklch(var(--color-foreground));
         text-decoration: none;
       }