docs: cp ls docs theme

docs/package.json

@@ -26,7 +26,11 @@
     "@docusaurus/preset-classic": "2.4.3",
     "@docusaurus/remark-plugin-npm2yarn": "^2.4.3",
     "@docusaurus/theme-mermaid": "2.4.3",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^1.6.22",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/joy": "^5.0.0-alpha.81",
     "@supabase/supabase-js": "^2.39.7",
     "clsx": "^1.2.1",
     "cookie": "^0.6.0",

docs/src/css/custom.css

@@ -12,7 +12,7 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
- 
+
  @font-face {
   font-family: 'Manrope';
   src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
@@ -25,34 +25,49 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
-  --ifm-color-primary-dark: #29784c;
-  --ifm-color-primary-darker: #277148;
-  --ifm-color-primary-darkest: #205d3b;
-  --ifm-color-primary-light: #33925d;
-  --ifm-color-primary-lighter: #359962;
-  --ifm-color-primary-lightest: #3cad6e;
-  --ifm-font-weight-bold: 600;
+  --ifm-color-primary: var(--joy-palette-primary-600);
+  --ifm-color-primary-dark: var(--joy-palette-primary-600);
+  --ifm-color-primary-darker: var(--joy-palette-primary-700);
+  --ifm-color-primary-darkest: var(--joy-palette-primary-800);
+  --ifm-color-primary-light: var(--joy-palette-primary-400);
+  --ifm-color-primary-lighter: var(--joy-palette-primary-200);
+  --ifm-color-primary-lightest: var(--joy-palette-primary-100);
   --ifm-code-font-size: 95%;
-  --ifm-font-family-base: 'Public Sans';
-  --ifm-menu-link-padding-horizontal: 0.5rem;
-  --ifm-menu-link-padding-vertical: 0.5rem;
-  --doc-sidebar-width: 275px !important;
+  --ifm-font-family-base: "Public Sans", sans-serif;
+  --docusaurus-highlighted-code-line-bg: var(--joy-palette-primary-100);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: var(--joy-palette-primary-400);
+  --ifm-color-primary-dark: var(--joy-palette-primary-500);
+  --ifm-color-primary-darker: var(--joy-palette-primary-600);
+  --ifm-color-primary-darkest: var(--joy-palette-primary-700);
+  --ifm-color-primary-light: var(--joy-palette-primary-300);
+  --ifm-color-primary-lighter: var(--joy-palette-primary-100);
+  --ifm-color-primary-lightest: var(--joy-palette-primary-50);
+  --docusaurus-highlighted-code-line-bg: var(--joy-palette-primary-800);
 }
 
-nav, h1, h2, h3, h4 {
-  font-family: 'Manrope';
+nav,
+h1,
+h2,
+h3,
+h4 {
+  font-family: "Manrope";
+}
+
+html[data-theme="dark"] {
+  --ifm-background-color: var(--joy-palette-background-body);
+}
+
+.navbar {
+  outline: 1px solid var(--ifm-color-gray-200);
+}
+
+[data-theme="dark"] .navbar {
+  background-color: var(--joy-palette-common-black);
+  outline: 1px solid var(--ifm-color-gray-800);
 }
 
 .footer__links {
@@ -102,27 +117,13 @@ nav, h1, h2, h3, h4 {
   font-size: 0.85rem;
 }
 
-/* .theme-code-block.language-python::before {
-  content: "";
-  padding: 2px 12px;
-  background-color: var(--ifm-color-primary-light);
-  color: #ffffff;
-  font-weight: bold;
-  border-top-right-radius: 4px;
-  border-top-left-radius: 4px;
-  display: block;
-  margin-bottom: 12px;
-  font-size: 0.6em;
-  width: 100%;
-  box-sizing: border-box;
-  position: relative;
-} */
-
 .theme-code-block.language-python,
 .theme-code-block.language-javascript,
 .theme-code-block.language-js,
 .theme-code-block.language-typescript,
-.theme-code-block.language-ts {
+.theme-code-block.language-ts,
+.theme-code-block.language-shell,
+.theme-code-block.language-bash {
   position: relative; /* Ensure this is set so the ::before pseudo-element is positioned relative to this element */
   padding-left: 4px;
   border: 1px solid var(--ifm-color-primary-darkest);
@@ -132,7 +133,9 @@ nav, h1, h2, h3, h4 {
 .theme-code-block.language-javascript::before,
 .theme-code-block.language-js::before,
 .theme-code-block.language-typescript::before,
-.theme-code-block.language-ts::before {
+.theme-code-block.language-ts::before,
+.theme-code-block.language-shell::before,
+.theme-code-block.language-bash::before {
   content: "";
   position: absolute;
   top: 0;
@@ -145,10 +148,45 @@ nav, h1, h2, h3, h4 {
   z-index: 1;
 }
 
+.menu__list {
+  display: flex !important;
+  flex-direction: column;
+  gap: 0.125rem;
+
+  position: relative;
+}
+
+.menu__list:not(.theme-doc-sidebar-menu) {
+  padding-left: 1.125rem !important;
+}
+
+.menu__list::before {
+  content: "";
+  width: 1px;
+  left: 0.75rem;
+  top: 0.125rem;
+  bottom: 0.125rem;
+
+  position: absolute;
+
+  background-color: var(--joy-palette-background-level2);
+}
+
+.theme-doc-sidebar-menu.menu__list::before {
+  display: none;
+}
+
+.menu__link {
+  padding-left: 0.5rem;
+}
+
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-category:not(:first-of-type),
 .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link,
-.theme-doc-sidebar-menu > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1:not(:first-of-type) {
-  margin-top: 1rem;
+.theme-doc-sidebar-menu
+  > .theme-doc-sidebar-item-link.theme-doc-sidebar-item-link-level-1:not(
+    :first-of-type
+  ) {
+  margin-top: 0.125rem;
 }
 
 .theme-doc-sidebar-menu .theme-doc-sidebar-item-link,
@@ -167,9 +205,10 @@ nav, h1, h2, h3, h4 {
   margin-top: 0;
 }
 
-.theme-doc-sidebar-item-category, .theme-doc-sidebar-menu > .theme-doc-sidebar-item-link {
-  font-size: 1rem;
-  font-weight: 700;
+.theme-doc-sidebar-item-category,
+.theme-doc-sidebar-item-link {
+  font-size: 0.9rem !important;
+  font-weight: 500;
 }
 
 .theme-doc-sidebar-item-category button:before {
@@ -177,8 +216,9 @@ nav, h1, h2, h3, h4 {
   width: 1.25rem;
 }
 
-.theme-doc-sidebar-item-link, .theme-doc-sidebar-item-category .theme-doc-sidebar-item-category {
-  font-size: .9rem;
+.theme-doc-sidebar-item-link,
+.theme-doc-sidebar-item-category .theme-doc-sidebar-item-category {
+  font-size: 0.9rem;
   font-weight: 500;
 }
 
@@ -191,29 +231,30 @@ nav, h1, h2, h3, h4 {
 .theme-doc-sidebar-item-category > div > button {
   opacity: 0.5;
 }
-
 /* Hack for "More" style caret buttons */
 .theme-doc-sidebar-item-category > div > a::after {
   opacity: 0.5;
 }
 
-.markdown {
-  line-height: 2em;
+.markdown > h1 {
+  margin-top: 1rem;
+  margin-bottom: 1rem !important;
+  font-size: 2.5rem !important;
 }
 
 .markdown > h2 {
-  margin-top: 2rem;
+  margin-top: 2.5rem;
   border-bottom-color: var(--ifm-color-primary);
   border-bottom-width: 2px;
-  padding-bottom: 1rem;
+  font-size: 1.8rem !important;
 }
 
-.markdown > :not(h2) +  h3 {
-  margin-top: 1rem;
+.markdown > :not(h2) + h3 {
+  margin-top: 2.5rem;
 }
 
 .markdown > h4 {
-  margin-bottom: 0.2rem;
+  margin-bottom: 1rem;
   font-weight: 600;
 }
 
@@ -230,6 +271,25 @@ nav, h1, h2, h3, h4 {
   display: none !important;
 }
 
+/* Config search */
+
+.card {
+  padding: 1.5rem !important;
+  box-shadow: none !important;
+}
+
+.tabs-container > .code-tabs + div {
+  margin-top: 0 !important;
+  box-shadow: none !important;
+}
+
+.tabs-container > .code-tabs {
+  border: 1px solid var(--joy-palette-divider);
+  border-bottom: none;
+  border-top-left-radius: var(--ifm-code-border-radius);
+  border-top-right-radius: var(--ifm-code-border-radius);
+}
+
 .header-github-link:hover {
   opacity: 0.6;
 }
@@ -248,6 +308,71 @@ nav, h1, h2, h3, h4 {
     no-repeat;
 }
 
+/* media dark mode */
+@media (prefers-color-scheme: dark) {
+  .tabs-container > .code-tabs {
+    background: #1e1e1e;
+  }
+  
+  .tabs-container .code-caption {
+    background: #1e1e1e;
+  }
+}
+
+.tabs-container > .code-tabs > [role="tab"] {
+  padding: 0.5rem 1rem !important;
+  border-radius: 0;
+}
+
+.tabs-container > .code-tabs + div .theme-code-block {
+  box-shadow: none !important;
+  border-top-left-radius: 0px !important;
+  border-top-right-radius: 0px !important;
+}
+
+.tabs-container > .code-tabs + div .code-caption {
+  border: 1px solid var(--joy-palette-divider);
+  border-bottom: none;
+  padding: 1rem;
+}
+
+.tabs-container > .code-tabs + div .code-caption p:last-child,
+.tabs-container > .code-tabs + div .code-footnote p:last-child {
+  margin-bottom: 0;
+}
+
+.tabs-container:has(> .code-tabs) {
+  box-shadow: var(--ifm-global-shadow-lw);
+  border-radius: var(--ifm-code-border-radius);
+}
+
+.menu__list-item > .menu__list {
+  transition: all 0.2s ease-in-out !important;
+}
+
+.menu__list-item:not(.menu__list-item--collapsed) > .menu__list {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.menu__list-item.menu__list-item--collapsed > .menu__list {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* prefers reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .menu__list-item > .menu__list {
+    transition: none !important;
+    opacity: 1 !important;
+  }
+}
+
+hr {
+  background-color: var(--joy-palette-background-level2) !important;
+}
+
+
 div[class^=announcementBar_] {
   height:40px !important;
   font-size: 20px !important;

docs/src/hooks/useColorScheme.js

@@ -0,0 +1,14 @@
+import { useColorScheme as useColorSchemeMui } from "@mui/joy/styles";
+
+// Same theme logic as in smith-frontend
+export function useColorScheme() {
+  const { systemMode, setMode } = useColorSchemeMui();
+  const isDarkMode = systemMode === "dark";
+
+  return {
+    mode: systemMode,
+    isDarkMode,
+    isLightMode: !isDarkMode,
+    setMode,
+  };
+}

docs/src/theme/ColorModeToggle/index.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import ColorModeToggle from "@theme-original/ColorModeToggle";
+import { useColorScheme } from "../../hooks/useColorScheme";
+
+export default function ColorModeToggleWrapper(props) {
+  const { setMode } = useColorScheme();
+
+  // "value" holds the color theme. Either "light" or "dark"
+  const { value } = props;
+
+  // change mode based on "value" prop
+  // "dark" or "light" are also used for MUI
+  useEffect(() => {
+    setMode(value);
+  }, [value]);
+
+  return <ColorModeToggle {...props} />;
+}

docs/src/theme/Root.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { CssVarsProvider, getInitColorSchemeScript } from "@mui/joy/styles";
+import CssBaseline from "@mui/joy/CssBaseline";
+
+export default function Root({ children }) {
+  return (
+    <>
+      {getInitColorSchemeScript()}
+      <CssBaseline />
+      <CssVarsProvider
+        defaultMode="system"
+        modeStorageKey="langsmith-docs-joy-mode"
+      >
+        {children}
+      </CssVarsProvider>
+    </>
+  );
+}