From 5576240a727ec1d1889a1610fe7d37c2ec0fa678 Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Wed, 13 May 2026 15:58:33 +0000
Subject: [PATCH] docs: make it MORE vaporwave

Signed-off-by: Trezy <tre@trezy.com>

Signed-off-by: Trezy <tre@trezy.com>
---
 packages/design-system/src/vaporwave.css | 2 +-
 packages/docs/src/app/global.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
 packages/docs/src/lib/reduced-motion.tsx | 4 ++++
 3 file(s) changed, 70 insertion(s)(+), 19 deletion(s)(-)

diff --git a/packages/design-system/src/vaporwave.css b/packages/design-system/src/vaporwave.css
--- a/packages/design-system/src/vaporwave.css
+++ b/packages/design-system/src/vaporwave.css
@@ -27,7 +27,7 @@
 /* --- Headings --- */
 
 h2 {
-  color: rgb(var(--color-aqua));
+  color: rgb(var(--color-magenta));
 }
 
 /* --- Inline Code --- */
diff --git a/packages/docs/src/app/global.css b/packages/docs/src/app/global.css
--- a/packages/docs/src/app/global.css
+++ b/packages/docs/src/app/global.css
@@ -23,17 +23,12 @@ #nd-page > .prose {
   isolation: isolate;
 }
 
-/* --- Sidebar --- */
-
-#nd-sidebar a {
-  white-space: nowrap;
+#nd-page > .prose :is(h2, h3, h4),
+#nd-page > .prose :is(h2, h3, h4) > a {
+  color: rgb(var(--color-magenta)) !important;
 }
 
-#nd-sidebar [data-active="true"] {
-  border-left: 2px solid rgb(var(--color-aqua));
-  background: rgb(var(--color-aqua) / 0.08) !important;
-  box-shadow: inset 0 0 16px rgb(var(--color-aqua) / 0.04);
-}
+/* --- Sidebar --- */
 
 @media (min-width: 768px) {
   #nd-sidebar > :first-child button[aria-label="Collapse Sidebar"] {
@@ -43,25 +38,77 @@ }
 
 /* --- Sidebar section labels --- */
 
-#nd-sidebar [role="separator"] {
+#nd-sidebar p {
   color: rgb(var(--color-magenta));
-  font-weight: 600;
-  letter-spacing: 0.5px;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
 }
 
-/* --- Sidebar links — muted by default, aqua on hover --- */
+/* --- Sidebar links --- */
+
+@keyframes sidebar-gradient {
+  to { background-position: 200% center; }
+}
 
 #nd-sidebar a {
+  white-space: nowrap;
   color: rgb(var(--color-fg-muted));
-  transition: color 0.2s;
+  transition: color 0.2s, text-shadow 0.2s, transform 0.2s, box-shadow 0.2s, border-radius 0.2s;
+}
+
+/* Open folder sections */
+#nd-sidebar div[data-state="open"]:not([class]) {
+  background: rgb(var(--color-bg));
+  border-radius: 12px;
+  padding: 4px;
+  margin: 2px 0;
+}
+
+/* Active — animated gradient pill */
+#nd-sidebar [data-active="true"] {
+  color: rgb(var(--color-bg)) !important;
+  border-radius: 9999px !important;
+  background-image: linear-gradient(90deg, rgb(var(--color-aqua)), rgb(var(--color-magenta)), rgb(var(--color-aqua))) !important;
+  background-size: 200% 100% !important;
+  background-color: transparent !important;
+  animation: sidebar-gradient 6s linear infinite;
+  text-shadow: none;
+}
+
+/* Active inside expandable sections — partial radius */
+#nd-sidebar div[data-state="open"]:not([class]) [data-active="true"] {
+  border-radius: 8px !important;
+}
+
+#nd-sidebar [data-active="true"]::before {
+  display: none !important;
+}
+
+/* Hover */
+#nd-sidebar a:not([data-active="true"]):hover,
+#nd-sidebar button:not([aria-label]):hover {
+  color: rgb(var(--color-aqua)) !important;
+  border-radius: 9999px !important;
+  background-color: rgb(var(--color-bg)) !important;
+  text-shadow: none;
 }
 
-#nd-sidebar a:hover {
-  color: rgb(var(--color-aqua));
+#nd-sidebar div[data-state="open"]:not([class]) a:not([data-active="true"]):hover,
+#nd-sidebar div[data-state="open"]:not([class]) button:not([aria-label]):hover {
+  background-color: rgb(var(--color-surface)) !important;
+  border-radius: 8px !important;
 }
 
-#nd-sidebar [data-active="true"] a {
-  color: rgb(var(--color-aqua));
+/* Reduced motion */
+html[data-reduced-motion="true"] #nd-sidebar [data-active="true"] {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  #nd-sidebar [data-active="true"] {
+    animation: none;
+  }
 }
 
 /* --- Prev/Next navigation cards --- */
diff --git a/packages/docs/src/lib/reduced-motion.tsx b/packages/docs/src/lib/reduced-motion.tsx
--- a/packages/docs/src/lib/reduced-motion.tsx
+++ b/packages/docs/src/lib/reduced-motion.tsx
@@ -44,6 +44,10 @@ }
 
   const reducedMotion = override ?? systemPreference;
 
+  useEffect(() => {
+    document.documentElement.dataset.reducedMotion = String(reducedMotion);
+  }, [reducedMotion]);
+
   return (
     <ReducedMotionContext value={{ reducedMotion, override, setOverride }}>
       {children}

--
tangled.sh