@stainless-api/docs 0.1.0-beta.10 → 0.1.0-beta.12

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.12
+
+### Patch Changes
+
+- Updated dependencies [3e44a9c]
+  - @stainless-api/ui-primitives@0.1.0-beta.10
+  - @stainless-api/docs-ui@0.1.0-beta.9
+
+## 0.1.0-beta.11
+
+### Patch Changes
+
+- c96f895: Remove css layers, update sidebar styles, add new prose elements
+- Updated dependencies [c96f895]
+  - @stainless-api/docs-ui@0.1.0-beta.8
+  - @stainless-api/ui-primitives@0.1.0-beta.9
+
 ## 0.1.0-beta.10
 
 ### Patch Changes

package/components/variables.css

@@ -71,29 +71,6 @@
   --stldocs-expander-right-margin: 8px;
   --stldocs-font-size-body: 14px;
   --stldocs-font-size-body-xs: 12px;
-
-  /* UI Overrides */
-  --stl-ui-button-border-radius: var(--sl-button-border-radius);
-  --stl-ui-text-body: var(--sl-text-sm);
-  --stl-ui-button-size: var(--sl-button-size);
-
-  --stl-ui-color-accent-low: var(--sl-color-accent-low);
-  --stl-ui-color-accent: var(--sl-color-accent);
-  --stl-ui-color-accent-high: var(--sl-color-accent-high);
-
-  --stl-ui-color-text: var(--sl-color-text);
-  --stl-ui-color-text-secondary: var(--sl-color-text-secondary);
-  --stl-ui-color-text-tertiary: var(--sl-color-text-tertiary);
-  --stl-ui-color-text-invert: var(--sl-color-text-invert);
-  --stl-ui-color-text-accent: var(--sl-color-text-accent);
-
-  --stl-ui-color-bg: var(--sl-color-bg);
-  --stl-ui-color-bg-ui: var(--sl-color-bg-ui);
-  --stl-ui-color-bg-inline-code: var(--sl-color-bg-inline-code);
-
-  --stl-ui-color-hairline-light: var(--sl-color-hairline-light);
-  --stl-ui-color-hairline: var(--sl-color-hairline);
-  --stl-ui-color-hairline-shade: var(--sl-color-hairline-shade);
 }
 
 /* These are the theme overrides - we need to come up with a good way to do this in starlight */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.12",
   "publishConfig": {
     "access": "public"
   },
@@ -55,8 +55,8 @@
     "shiki": "^3.9.2",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.0",
-    "@stainless-api/docs-ui": "0.1.0-beta.7",
-    "@stainless-api/ui-primitives": "0.1.0-beta.8"
+    "@stainless-api/ui-primitives": "0.1.0-beta.10",
+    "@stainless-api/docs-ui": "0.1.0-beta.9"
   },
   "devDependencies": {
     "@markdoc/markdoc": "^0.5.2",

package/plugin/components/SnippetCode.tsx

@@ -8,6 +8,7 @@ import style from '@stainless-api/docs-ui/src/style';
 import * as cheerio from 'cheerio/slim';
 import { EXPERIMENTAL_COLLAPSIBLE_SNIPPETS } from 'virtual:stl-starlight-virtual-module';
 import clsx from 'clsx';
+import { Button } from '@stainless-api/ui-primitives';
 /*
  * This may be replaced by additional data from the sdk.
  * Without information from the sdk, we use simple heuristics per language.
@@ -130,12 +131,14 @@ export function SnippetRequestContainer({ children, signature }: SnippetRequestC
     <div className="stl-snippet-request-container">
       {children}
       {signature && isCollapsible && (
-        <button
-          className={clsx(style.Button, style.ButtonSecondary, 'stl-snippet-expand-button')}
+        <Button
+          className={'stl-snippet-expand-button'}
           id="stl-snippet-expand-button"
+          size="sm"
+          variant="outline"
         >
           Show more
-        </button>
+        </Button>
       )}
     </div>
   );

package/plugin/index.ts

@@ -165,6 +165,24 @@ async function stlStarlightAstroIntegration(
           prerender: command === 'build',
         });
 
+        // Remove starlight callout syntax in favor of our own callout component
+        // updateConfig always deeply merges arrays so we need to mutate remarkPlugins directly
+        // in order to remove plugins that starlight added
+        astroConfig.markdown.remarkPlugins = astroConfig.markdown.remarkPlugins.filter((plugin, i, arr) => {
+          if (typeof plugin !== 'function') return true;
+          // remove:
+          // 1. remarkDirective plugin
+          if (plugin.name === 'remarkDirective') return false;
+          // 2. directly followed by remarkAsides plugin (inner function named 'attacher')
+          if (plugin.name === 'attacher') {
+            const prev = arr[i - 1];
+            if (typeof prev === 'function' && prev.name === 'remarkDirective') return false;
+          }
+          // 3. remarkDirectivesRestoration plugin
+          if (plugin.name === 'remarkDirectivesRestoration') return false;
+          return true;
+        });
+
         updateConfig({
           vite: {
             ssr: {

package/plugin/react/Routing.tsx

@@ -180,7 +180,7 @@ export function SDKSelectReactComponent({
   return (
     <Dropdown id={id} data-current-value={selected} className={className}>
       <DropdownTrigger
-        className="dropdown-toggle stldocs-button-tertiary"
+        className="dropdown-toggle"
         type="button"
         id="stldocs-snippet-title-button"
         aria-expanded="false"

package/plugin/routes/Docs.astro

@@ -1,14 +1,6 @@
 ---
 import StarlightPage from "@astrojs/starlight/components/StarlightPage.astro";
 import { cmsClient } from "../cms/client";
-
-import "@stainless-api/docs-ui/src/styles/resets.css";
-import "@stainless-api/docs-ui/src/styles/primitives.css";
-import "@stainless-api/docs-ui/src/styles/main.css";
-import "@stainless-api/docs-ui/src/styles/snippets.css";
-// TODO: fix variables.css import
-// import "./variables.css";
-
 import {
   getReadmeContent,
   generateDocsRoutes,

package/plugin/routes/Overview.astro

@@ -3,13 +3,6 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
 import { BASE_PATH, EXCLUDE_LANGUAGES } from 'virtual:stl-starlight-virtual-module';
 import { cmsClient } from '../cms/client';
 import type { DocsLanguage } from '@stainless-api/docs-ui/src/routing';
-
-import '@stainless-api/docs-ui/src/styles/resets.css';
-import '@stainless-api/docs-ui/src/styles/primitives.css';
-import '@stainless-api/docs-ui/src/styles/main.css';
-import '@stainless-api/docs-ui/src/styles/snippets.css';
-// TODO: fix variables.css import
-// import '../components/variables.css';
 import { RenderLibraries, RenderSpecOverview, type SpecMetadata } from '../react/Routing';
 
 const spec = await cmsClient.getSpec();
@@ -34,7 +27,7 @@ const metadata = languages
 >
   <h3>Libraries</h3>
 
-  <div class="stldocs-root language-blocks stl-ui-not-prose">
+  <div class="stldocs-root language-blocks stl-ui-not-prose not-content">
     <RenderLibraries metadata={metadata} />
   </div>
 

package/stl-docs/components/ThemeSelect.astro

@@ -1,5 +1,10 @@
 ---
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@stainless-api/docs-ui/src/components/dropdown';
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from '@stainless-api/docs-ui/src/components/dropdown';
 
 const options = [
   {
@@ -204,6 +209,7 @@ const options = [
       display: flex;
     }
   }
+  .stldocs-root .stl-dropdown-icon,
   .stl-dropdown-icon {
     display: flex;
     align-items: center;
@@ -212,6 +218,7 @@ const options = [
     height: 16px;
   }
 
+  .stldocs-root span.stl-dropdown-icon,
   span.stl-dropdown-icon,
   span.stl-dropdown-chevron {
     padding-left: 0;

package/stl-docs/components/content-panel/ContentPanel.astro

@@ -37,15 +37,12 @@ const currentPath = Astro.url.pathname;
       }
     }
   }
-  /* Overrides */
-  @layer stainless {
-    .content-panel {
-      padding: 0 0.5rem 0 var(--sl-content-pad-x);
-    }
+  .content-panel {
+    padding: 0 0.5rem 0 var(--sl-content-pad-x);
+  }
 
-    .stl-prose-page-nav-container {
-      padding: 1rem 0 0;
-    }
+  .stl-prose-page-nav-container {
+    padding: 1rem 0 0;
   }
 </style>
 

package/stl-docs/components/headers/StackedHeader.astro

@@ -48,7 +48,7 @@ const { hasSidebar } = Astro.locals.starlightRoute;
     }
   @media (min-width: 50rem) {
     :root {
-      --sl-nav-height: 88px;
+      --sl-nav-height: 80px;
     }
 
     header.header {

package/stl-docs/components/mintlify-compat/Accordion.astro

@@ -5,9 +5,11 @@ export interface Props {
 }
 
 const { title } = Astro.props;
+
+import { Accordion as StainlessAccordion } from '@stainless-api/ui-primitives';
 ---
 
-<details>
-  <summary>{title}</summary>
+<StainlessAccordion>
+  <StainlessAccordion.Summary>{title}</StainlessAccordion.Summary>
   <slot />
-</details>
+</StainlessAccordion>

package/stl-docs/components/mintlify-compat/AccordionGroup.astro

@@ -1,11 +1,11 @@
 ---
-import { DetailsGroup } from '@stainless-api/ui-primitives';
+import { Accordion as StainlessAccordion } from '@stainless-api/ui-primitives';
 
 export interface Props {
   children: astroHTML.JSX.Children;
 }
 ---
 
-<DetailsGroup>
+<StainlessAccordion.Group>
   <slot />
-</DetailsGroup>
+</StainlessAccordion.Group>

package/stl-docs/components/mintlify-compat/Columns.astro

@@ -16,51 +16,49 @@ const { cols } = Astro.props;
 </div>
 
 <style>
-  @layer stl-ui-mintlify-compat {
-    .stl-ui-mintlify-compat-columns {
-      display: grid;
-      gap: 1rem;
-      grid-template-columns: 1fr;
+  .stl-ui-mintlify-compat-columns {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: 1fr;
 
-      > [data-stl-ui-element] {
-        margin: 0;
-      }
+    > [data-stl-ui-element] {
+      margin: 0;
     }
+  }
 
-    @media (min-width: 50rem) {
-      .stl-ui-mintlify-compat-columns--2 {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--3 {
-        grid-template-columns: repeat(3, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--4 {
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--5 {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--6 {
-        grid-template-columns: repeat(6, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--7 {
-        grid-template-columns: repeat(7, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--8 {
-        grid-template-columns: repeat(8, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--9 {
-        grid-template-columns: repeat(9, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--10 {
-        grid-template-columns: repeat(10, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--11 {
-        grid-template-columns: repeat(11, minmax(0, 1fr));
-      }
-      .stl-ui-mintlify-compat-columns--12 {
-        grid-template-columns: repeat(12, minmax(0, 1fr));
-      }
+  @media (min-width: 50rem) {
+    .stl-ui-mintlify-compat-columns--2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--7 {
+      grid-template-columns: repeat(7, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--8 {
+      grid-template-columns: repeat(8, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--9 {
+      grid-template-columns: repeat(9, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--10 {
+      grid-template-columns: repeat(10, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--11 {
+      grid-template-columns: repeat(11, minmax(0, 1fr));
+    }
+    .stl-ui-mintlify-compat-columns--12 {
+      grid-template-columns: repeat(12, minmax(0, 1fr));
     }
   }
 </style>

package/stl-docs/components/mintlify-compat/Frame.astro

@@ -12,26 +12,24 @@ const { caption } = Astro.props;
 </div>
 
 <style>
-  @layer stl-ui-mintlify-compat {
-    .stl-ui-mintlify-compat-frame {
-      padding: 6px;
-      border-radius: 10px;
-      background-color: var(--sl-color-gray-7);
-      border: 1px solid var(--sl-color-gray-6);
+  .stl-ui-mintlify-compat-frame {
+    padding: 6px;
+    border-radius: 10px;
+    background-color: var(--sl-color-gray-7);
+    border: 1px solid var(--sl-color-gray-6);
 
-      .stl-ui-mintlify-compat-frame-content {
-        border-radius: 8px;
-        overflow: hidden;
-      }
+    .stl-ui-mintlify-compat-frame-content {
+      border-radius: 8px;
+      overflow: hidden;
+    }
 
-      .stl-ui-mintlify-compat-frame-caption {
-        text-align: center;
-        padding-top: 12px;
-        padding-bottom: 6px;
-        font-size: var(--sl-text-body);
-        color: var(--sl-color-gray-3);
-        line-height: 100%;
-      }
+    .stl-ui-mintlify-compat-frame-caption {
+      text-align: center;
+      padding-top: 12px;
+      padding-bottom: 6px;
+      font-size: var(--sl-text-body);
+      color: var(--sl-color-gray-3);
+      line-height: 100%;
     }
   }
 </style>

package/stl-docs/components/mintlify-compat/Step.astro

@@ -15,44 +15,42 @@ const { title } = Astro.props;
 </li>
 
 <style>
-  @layer stl-ui-mintlify-compat {
-    .stl-ui-mintlify-compat-step {
-      display: flex;
+  .stl-ui-mintlify-compat-step {
+    display: flex;
 
-      &:not(:first-child) {
-        margin-top: 1rem;
-      }
+    &:not(:first-child) {
+      margin-top: 1rem;
     }
+  }
+
+  .stl-ui-mintlify-compat-step-step-number {
+    margin-right: 1rem;
+    display: flex;
+    align-items: top;
+    justify-content: center;
+    margin-top: 4px;
 
-    .stl-ui-mintlify-compat-step-step-number {
-      margin-right: 1rem;
+    &::before {
+      counter-increment: ui-steps;
+      content: counter(ui-steps);
+      border-radius: 50%;
+      height: 1.5rem;
+      width: 1.5rem;
+      font-size: 0.8rem;
+      color: var(--sl-color-text);
+      font-weight: 600;
+      background-color: var(--sl-color-gray-5);
       display: flex;
-      align-items: top;
+      align-items: center;
       justify-content: center;
-      margin-top: 4px;
-
-      &::before {
-        counter-increment: ui-steps;
-        content: counter(ui-steps);
-        border-radius: 50%;
-        height: 1.5rem;
-        width: 1.5rem;
-        font-size: 0.8rem;
-        color: var(--sl-color-text);
-        font-weight: 600;
-        background-color: var(--sl-color-gray-5);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
     }
+  }
 
-    .stl-ui-mintlify-compat-step-title {
-      font-weight: 600;
-      color: var(--sl-color-text);
-    }
-    .stl-ui-mintlify-compat-step-content {
-      margin-top: 0.5rem;
-    }
+  .stl-ui-mintlify-compat-step-title {
+    font-weight: 600;
+    color: var(--sl-color-text);
+  }
+  .stl-ui-mintlify-compat-step-content {
+    margin-top: 0.5rem;
   }
 </style>

package/stl-docs/components/mintlify-compat/Steps.astro

@@ -1,17 +1,15 @@
 <ol class="stl-ui-mintlify-compat-steps"><slot /></ol>
 
 <style>
-  @layer stl-ui-mintlify-compat {
-    .stl-ui-mintlify-compat-steps {
-      counter-reset: ui-steps;
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      margin-top: 1rem;
+  .stl-ui-mintlify-compat-steps {
+    counter-reset: ui-steps;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    margin-top: 1rem;
 
-      * {
-        margin: 0;
-      }
+    * {
+      margin: 0;
     }
   }
 </style>

package/stl-docs/components/mintlify-compat/card.css

@@ -1,44 +1,42 @@
-@layer stl-ui-mintlify-compat {
-  .stl-ui-mintlify-compat-card {
-    border-radius: 12px;
-    padding: 16px;
-    font-size: var(--sl-text-body);
-    display: flex;
-    gap: 8px;
-    border: 1px solid var(--sl-color-hairline);
-    flex-direction: column;
-
-    .stl-ui-mintlify-compat-card-icon svg {
-      color: var(--sl-color-accent);
-    }
+.stl-ui-mintlify-compat-card {
+  border-radius: 12px;
+  padding: 16px;
+  font-size: var(--sl-text-body);
+  display: flex;
+  gap: 8px;
+  border: 1px solid var(--sl-color-hairline);
+  flex-direction: column;
 
-    .stl-ui-mintlify-compat-card-title {
-      font-weight: 600;
-      font-size: 1.125rem;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      margin-top: 8px;
-    }
+  .stl-ui-mintlify-compat-card-icon svg {
+    color: var(--sl-color-accent);
+  }
 
-    .stl-ui-mintlify-compat-card-content {
-      margin-top: 0;
-      color: var(--sl-color-text-secondary);
-    }
+  .stl-ui-mintlify-compat-card-title {
+    font-weight: 600;
+    font-size: 1.125rem;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 8px;
   }
 
-  a.stl-ui-mintlify-compat-card {
-    text-decoration: none;
+  .stl-ui-mintlify-compat-card-content {
+    margin-top: 0;
     color: var(--sl-color-text-secondary);
-
-    &:hover {
-      border-color: var(--sl-color-accent);
-    }
   }
+}
+
+a.stl-ui-mintlify-compat-card {
+  text-decoration: none;
+  color: var(--sl-color-text-secondary);
 
-  .stl-ui-mintlify-compat-card-group {
-    display: grid;
-    gap: 1rem;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+  &:hover {
+    border-color: var(--sl-color-accent);
   }
 }
+
+.stl-ui-mintlify-compat-card-group {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}

package/stl-docs/components/nav-tabs/NavDropdown.astro

@@ -1,5 +1,10 @@
 ---
-import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem } from '@stainless-api/docs-ui/src/components/dropdown';
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from '@stainless-api/docs-ui/src/components/dropdown';
 import { Icon } from '@astrojs/starlight/components';
 import { buildNavLinks } from './buildNavLinks';
 

package/stl-docs/components/nav-tabs/SecondaryNavTabs.astro

@@ -56,7 +56,6 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
   @media (min-width: 50rem) {
     .stl-secondary-nav-tabs {
       display: block;
-      padding-left: 0.55rem;
     }
   }
 </style>