styling and edits

src/docs.json

@@ -1,25 +1,25 @@
 {
   "$schema": "https://mintlify.com/docs.json",
-  "theme": "maple",
+  "theme": "aspen",
   "name": "Docs by LangChain",
   "description": "Documentation for LangChain, LangGraph, LangGraph Platform, LangSmith, and more.",
   "colors": {
-    "primary": "#beb4fd",
-    "light": "#beb4fd",
-    "dark": "#1d3d3c"
+    "primary": "#2F6868",
+    "light": "#84C4C0",
+    "dark": "#84C4C0"
   },
   "logo": {
     "light": "/images/brand/langchain-docs-teal.svg",
     "dark": "/images/brand/langchain-docs-lilac.svg",
-    "href": "https://docs.langchain.com/langgraph-platform"
+    "href": "https://docs.langchain.com/oss/python"
   },
   "favicon": {
     "light": "/images/brand/favicon.svg",
     "dark": "/images/brand/favicon-dark-mode.svg"
   },
   "fonts": {
     "heading": {
-      "family": "Manrope"
+      "family": "Inter"
     }
   },
   "styling": {

src/hide-version-picker.js

@@ -28,6 +28,7 @@
                 button.classList.add('version-picker-button');
             }
         });
+
     }
 
     // Run immediately

src/index.mdx

@@ -8,7 +8,7 @@ mode: "wide"
 
 # Frameworks
 
-<CardGroup cols={3}>
+<CardGroup cols={2}>
   <Card
     title="LangChain - Python"
     href="https://python.langchain.com/docs/introduction/"
@@ -25,7 +25,7 @@ mode: "wide"
 
   <Card
     title="LangGraph"
-    href="/oss"
+    href="/oss/python"
   >
   Low-level orchestration framework for building, managing, and deploying long-running, stateful agents.
   </Card>

src/style.css

@@ -1,74 +1,65 @@
-/* Minimalistic Navigation Tab Styling - Using Lavender Theme */
-
-/* Target the main navbar container */
-#navbar-transition-maple {
-  background: rgba(229, 231, 235, 0.5) !important; /* gray-200/50 to match site palette */
-  border-bottom: 1px solid rgba(229, 231, 235, 0.7) !important; /* gray-200/70 to match existing border */
-}
-
-/* Target the navigation tabs container */
-.nav-tabs {
-  background: transparent !important;
-  padding: 4px 12px !important;
-  border-radius: 8px !important;
-}
-
-/* Target individual tab items - clean and minimal */
-a.nav-tabs-item {
-  position: relative !important;
-  font-weight: 500 !important;
-  font-size: 14px !important;
-  border-radius: 6px !important;
-  margin: 0 2px !important;
-  padding: 8px 12px !important;
-  transition: all 0.2s ease !important;
-  background: transparent !important;
-  border: none !important;
-  text-decoration: none !important;
-  color: #64748b !important;
-}
-
-/* Remove the default bottom border from Mintlify */
-a.nav-tabs-item .absolute.bottom-0 {
-  display: none !important;
-}
-
-/* Override any inline styles that might be applied by JavaScript - but not for active tabs */
-a.nav-tabs-item[style]:not([aria-selected="true"]):not(.active):not([aria-current="page"]):not(.font-semibold):not([class*="font-semibold"]) {
-  background: transparent !important;
-  border: none !important;
-}
-
-/* Tab hover states - match site's hover grey */
-a.nav-tabs-item:hover:not(.font-semibold):not([class*="font-semibold"]) {
-  background: rgba(229, 231, 235, 0.8) !important; /* gray-200/80 to match site hover */
-  color: #1f2937 !important; /* gray-800 to match site text */
-}
-
-/* Active/selected tab states - connected to content area */
-a.nav-tabs-item[aria-selected="true"],
-a.nav-tabs-item.active,
-a.nav-tabs-item[aria-current="page"],
-a.nav-tabs-item[data-active="true"],
-a.nav-tabs-item.selected,
-/* Target active tabs by their distinctive class pattern */
-a.nav-tabs-item.font-semibold,
-a.nav-tabs-item[class*="font-semibold"] {
-  background: white !important;
-  color: #beb4fd !important;
-  font-weight: 600 !important;
-  border-bottom: 1px solid white !important;
-  margin-bottom: -1px !important;
-  position: relative !important;
-  z-index: 1 !important;
-}
-
-/* Active tab indicator - removed, using only container highlight */
-
-/* Focus states for accessibility */
-a.nav-tabs-item:focus-visible {
-  outline: 2px solid #beb4fd !important;
-  outline-offset: 2px !important;
+/* Light mode CSS variables */
+:root {
+  /* Light Mode Colors - Figma Design Tokens */
+  --bg-primary: #ffffff;
+  --bg-tertiary: #f4f4f5;
+  --text-primary-900: #101828;
+  --text-secondary-700: #3f3f46;
+  --text-tertiary-600: #51525c;
+  --text-quaternary-500: #70707b;
+  --border-primary: #d1d1d6;
+  --border-secondary: #e4e4e7;
+  --border-tertiary: #f4f4f5;
+  --brand-600: #2f6868;
+  --brand-100: #d9eeec;
+  --fg-primary-900: #1a1a1e;
+
+  /* Typography - Figma Tokens */
+  --font-family: "Inter", system-ui, -apple-system, sans-serif;
+
+  /* Text Styles */
+  --text-sm-medium-size: 13px;
+  --text-sm-medium-weight: 500;
+  --text-sm-medium-line-height: 1.2;
+
+  --text-md-medium-size: 14px;
+  --text-md-medium-weight: 500;
+  --text-md-medium-line-height: 1.15;
+
+  --text-md-semibold-size: 14px;
+  --text-md-semibold-weight: 600;
+  --text-md-semibold-line-height: 1.15;
+
+  /* Spacing */
+  --spacing-xxs: 2px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 8px;
+}
+
+/* Dark Mode Colors */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-primary: #1a1a1e;
+    --bg-tertiary: #2a2a2e;
+    --text-primary-900: #ffffff;
+    --text-secondary-700: #d1d1d6;
+    --text-tertiary-600: #a1a1aa;
+    --text-quaternary-500: #8a8a95;
+    --border-primary: #3f3f46;
+    --border-secondary: #2a2a2e;
+    --border-tertiary: #1f1f23;
+    --brand-600: #2f6868;
+    --brand-100: #1a2c2a;
+    --fg-primary-900: #ffffff;
+  }
+}
+
+/* Base styles */
+body {
+  background-color: var(--bg-primary);
+  color: var(--text-secondary-700);
+  font-family: var(--font-family);
 }
 
 /* Wider content area for better code display (100-120 character lines) */
@@ -102,28 +93,104 @@ code,
   padding-right: 2rem !important;
 }
 
-/* Dark mode support */
-.dark #navbar-transition-maple {
-  background: rgba(55, 65, 81, 0.5) !important; /* gray-700/50 to match site dark palette */
-  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; /* white/7% to match existing dark border */
-}
-
-.dark .nav-tabs {
-  background: transparent !important;
-}
 
-.dark a.nav-tabs-item {
-  background: transparent !important;
-  color: #9ca3af !important;
+/* Style "breadcrumbs" link element */
+.inline-flex.items-center.gap-1\.5.text-sm.text-gray-500 {
+  color: var(--colours-text-text-quaternary-500, #70707B) !important;
+  font-family: Inter !important;
+  font-size: 12px !important;
+  font-style: normal !important;
+  font-weight: 500 !important;
+  line-height: 100% !important;
+  letter-spacing: 0.48px !important;
+  text-transform: uppercase !important;
+}
+
+#page-title {
+  font-family: var(--font-family);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 120%;
+  letter-spacing: -0.72px;
+}
+
+#mdx-content {
+  color: var(--text-secondary-700);
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+/* Reset browser default heading styles */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: normal;
+  margin: 0;
+}
+
+/* Heading hierarchy styles */
+h1, #mdx-content h1, .prose h1, article h1, main h1 {
+  font-family: var(--font-family);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400 !important;
+  line-height: 120%; /* 28.8px */
+  letter-spacing: -0.72px;
+}
+
+h2, #mdx-content h2 {
+  color: var(--text-primary-900);
+  font-family: var(--font-family);
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400 !important;
+  line-height: 120%;
+  letter-spacing: -0.72px;
+}
+
+h3, #mdx-content h3 {
+  color: var(--text-primary-900);
+  font-family: var(--font-family);
+  font-size: 16px;
+  font-weight: 400 !important;
+  line-height: 130%;
+  letter-spacing: -0.36px;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+h4, #mdx-content h4 {
+  color: var(--text-primary-900);
+  font-family: var(--font-family);
+  font-size: 14px;
+  font-weight: 400 !important;
+  line-height: 135%;
+  letter-spacing: -0.32px;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+h5, #mdx-content h5 {
+  color: var(--text-quaternary-500);
+  font-family: var(--font-family);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500 !important;
+  line-height: 100%;
+  letter-spacing: 0.48px;
+  text-transform: uppercase;
 }
 
-.dark a.nav-tabs-item[style]:not([aria-selected="true"]):not(.active):not([aria-current="page"]):not(.font-semibold):not([class*="font-semibold"]) {
-  background: transparent !important;
+/* Hide nav dropdown descriptions by default */
+.nav-dropdown-item-description {
+  display: none !important;
 }
 
-.dark a.nav-tabs-item:hover:not(.font-semibold):not([class*="font-semibold"]) {
-  background: rgba(55, 65, 81, 0.8) !important; /* gray-700/80 to match site dark hover */
-  color: #f9fafb !important; /* gray-50 for better contrast */
+/* Show nav dropdown descriptions when dropdown is open */
+[data-state="open"] .nav-dropdown-item-description {
+  display: block !important;
 }
 
 .dark a.nav-tabs-item[aria-selected="true"],
@@ -141,4 +208,4 @@ code,
 
 #banner {
   max-width: 100% !important;
-}
+}