chore: misc styling touch-ups (#604)

* refactor: use OKLCH notation for arbitrary color alpha

* fix: improve legibility of light mode content

* fix: make config node highlight full width to not mess up indentation

* refactor: try moving the sidebar scrolling area

* fix: sidebar not scrolling on Chrome

* fix: bump black tone to #000000 for light mode

* fix: shift light mode grays, use accent color to highlight sidebar items

* fix: TOC links should have a different hover color

* chore: make sidebar badge background lighter on light mode

Author: zlataovce

src/components/ConfigNode.astro

@@ -59,7 +59,7 @@ const formatDefault = (value?: string): Default => {
           {"message" in rawValue ? (
             <div
               class:list={["block", "message", rawValue.inline && "message-inline"]}
-              style={rawValue.color ? `border-color: ${rawValue.color}` : undefined}
+              style={rawValue.color ? `border-left-color: ${rawValue.color}` : undefined}
               set:html={render(rawValue.message)}
             />
           ) : "description" in rawValue ? (
@@ -86,17 +86,8 @@ const formatDefault = (value?: string): Default => {
 
 <style>
   details:target {
-    border-radius: 0.5rem;
-    padding-block: 0.3rem;
-    padding-inline: 0.5rem;
-  }
-
-  html[data-theme="dark"] details:target {
-    background-color: rgba(255, 255, 255, 0.1);
-  }
-
-  html[data-theme="light"] details:target {
-    background-color: rgba(0, 0, 0, 0.1);
+    padding: 0.25rem 0;
+    border-image: conic-gradient(oklch(from var(--sl-color-accent) l c h / 0.1) 0, oklch(from var(--sl-color-accent) l c h / 0.1) 0) fill 0/0/0 100vw;
   }
 
   .node {
@@ -117,6 +108,7 @@ const formatDefault = (value?: string): Default => {
     padding: 1rem;
     border: 1px solid var(--sl-color-gray-5);
     background-color: var(--sl-color-gray-6);
+    contain: paint;
   }
 
   .line {
@@ -140,13 +132,12 @@ const formatDefault = (value?: string): Default => {
   }
 
   .block {
-    margin-top: 0.5rem;
-    margin-bottom: 0.25rem;
-    margin-left: 1.25rem;
+    margin: 0.5rem 0 0.5rem 1.25rem;
     padding: 0.75rem;
     line-height: 1.5;
     color: var(--sl-color-white);
     background-color: var(--sl-color-gray-5);
+    border: 1px solid var(--sl-color-gray-4);
     border-left: 5px solid var(--sl-color-bg-accent);
   }
 
@@ -159,7 +150,7 @@ const formatDefault = (value?: string): Default => {
     padding: 0;
     color: var(--sl-color-gray-3);
     background-color: unset;
-    border-left: none;
+    border: none;
   }
 
   .muted {

src/components/Version.astro

@@ -30,7 +30,7 @@ const { version, inline } = Astro.props;
     font-size: var(--sl-text-xs);
     padding: 1rem 1.25rem;
     border-radius: 0.5rem;
-    background-color: rgba(var(--sl-color-accent-raw), 0.125);
+    background-color: oklch(from var(--sl-color-accent) l c h / 0.125);
     margin-bottom: 1rem;
   }
 

src/components/overrides/PageFrame.astro

@@ -72,29 +72,44 @@ const { hasSidebar } = Astro.locals.starlightRoute;
     inset-inline-start: 0;
     width: 100%;
     background-color: var(--sl-color-black);
-    overflow-y: auto;
-    scroll-padding-top: 5.5rem;
   }
 
   :global([aria-expanded="true"]) ~ .sidebar-pane {
     --sl-sidebar-visibility: visible;
   }
 
   .dropdown-wrapper {
-    position: sticky;
-    top: 0;
-    z-index: 20;
-    padding: 1rem var(--sl-sidebar-pad-x);
+    --sl-color-gray-6: oklch(from var(--sl-color-gray-5) calc(l - 0.05) c h);
+
+    padding: var(--sl-sidebar-pad-x);
     background-color: var(--sl-color-black);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+    border-bottom: 1px solid var(--sl-color-hairline-light);
+  }
+
+  :root[data-theme="light"] .dropdown-wrapper {
+    --sl-color-gray-6: oklch(from var(--sl-color-gray-5) calc(l + 0.025) c h);
+  }
+
+  /* remove odd margins from dropdown */
+  .dropdown-wrapper :global(.starlight-sidebar-topics-dropdown-dropdown) {
+    width: 100%;
+    margin: 0;
   }
 
   .sidebar-content {
     height: 100%;
-    min-height: max-content;
     padding: 1rem var(--sl-sidebar-pad-x) 0;
     flex-direction: column;
     gap: 1rem;
+    overflow-y: auto;
+  }
+
+  /* highlight sidebar items with accent color */
+  .sidebar-content :global(a:not([aria-current="page"]):hover) {
+    color: var(--sl-color-accent-high);
+  }
+  .main-frame :global(.right-sidebar a:hover) {
+    color: var(--sl-color-accent-high);
   }
 
   @media (min-width: 50rem) {

src/styles/custom.css

@@ -61,11 +61,8 @@
 
 /* Dark mode colors. */
 :root {
-  /* raw values for setting opacity */
-  --sl-color-accent-raw: 37, 99, 235;
-
   --sl-color-accent-low: #1e3a8a;
-  --sl-color-accent: rgb(var(--sl-color-accent-raw));
+  --sl-color-accent: #2563eb;
   --sl-color-accent-high: #60a5fa;
   --sl-color-white: #ffffff;
   --sl-color-gray-1: #e2e5e9;
@@ -82,22 +79,26 @@
 
 /* Light mode colors. */
 :root[data-theme="light"] {
-  /* raw values for setting opacity */
-  --sl-color-accent-raw: 37, 99, 235;
-
   --sl-color-accent-low: #60a5fa;
-  --sl-color-accent: rgb(var(--sl-color-accent-raw));
   --sl-color-accent-high: #1e3a8a;
-  --sl-color-white: #111111;
-  --sl-color-gray-1: #181a1b;
-  --sl-color-gray-2: #2a2c2e;
-  --sl-color-gray-3: #3f4347;
+  --sl-color-white: #000000;
+  --sl-color-gray-1: #111111;
+  --sl-color-gray-2: #181a1b;
+  --sl-color-gray-3: #2a2c2e;
   --sl-color-gray-4: #9fa5af;
-  --sl-color-gray-5: #d1d5db;
-  --sl-color-gray-6: #e2e5e9;
-  --sl-color-gray-7: #f3f4f6;
+  --sl-color-gray-5: #e5e7eb;
+  --sl-color-gray-6: #f3f4f6;
+  --sl-color-gray-7: #f9fafb;
   --sl-color-black: #ffffff;
 
+  /* make separators easier to see */
+  --sl-color-hairline: var(--sl-color-gray-5);
+  --sl-color-hairline-light: var(--sl-color-gray-5);
+  --sl-color-hairline-shade: var(--sl-color-gray-5);
+
+  /* make sidebar badge background less pronounced */
+  --sl-badge-danger-bg: oklch(from var(--sl-color-red-high) calc(l + 0.1) c h);
+
   /* return to Starlight default */
   --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%);
 }