@stainless-api/docs 0.1.0-beta.1 → 0.1.0-beta.100

package/styles/page.css

@@ -1,76 +1,117 @@
-/* Styles for supporting a max-width layout */
-@layer stainless {
-  .page {
-    position: relative;
-    max-width: var(--sl-page-max-width);
-    margin: 0 auto;
-
-    .sidebar-pane {
-      left: auto;
-    }
+.page,
+.page > header .header,
+.page > header .stl-secondary-nav-tabs {
+  max-width: var(--sl-page-max-width);
+  margin: 0 auto;
 
-    > header {
-      .stl-secondary-nav-tabs,
-      .header {
-        max-width: var(--sl-page-max-width);
-        margin: 0 auto;
-      }
-    }
+  @media (min-width: 50rem) {
+    padding-inline: var(--stl-ui-page-padding-inline);
+  }
+}
 
-    .right-sidebar {
-      border-inline-start: unset;
-    }
+.page {
+  position: relative;
+  max-width: var(--sl-page-max-width);
 
-    .mobile-preferences {
-      margin-top: 1rem;
-    }
+  .right-sidebar {
+    border-inline-start: unset;
   }
 
-  @media (min-width: 50rem) {
-    .page {
-      padding-left: var(--sl-sidebar-pad-x);
-      padding-right: var(--sl-sidebar-pad-x);
-
-      > header {
-        .header,
-        .stl-secondary-nav-tabs {
-          padding: 0 1.5rem;
-        }
-      }
-    }
+  .mobile-preferences {
+    margin-top: 1rem;
+    display: flex;
+    justify-content: flex-end;
+  }
+}
 
-    .header,
-    .header {
-      padding-inline-start: 0;
-      padding-inline-end: 0;
-    }
+:root {
+  --sl-mobile-toc-height: 4rem;
+}
 
-    mobile-starlight-toc nav {
-      inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
-    }
-    .sidebar-content {
-      padding-left: 0;
-    }
+@media (min-width: 50rem) {
+  .page .sidebar-pane {
+    left: unset;
+  }
+  /* on desktop, adjust sidebar so that its _text content_ aligns with the page left edge.
+   * padding (visible on hover) bleeds out beyond the page left edge, covered by --stl-ui-page-padding-inline */
+  .sidebar-pane {
+    /* 12px comes from --stl-sidebar-item-padding-inline (which is unfortunately defined deeper than
+    this component). Please keep in sync. */
+    margin-inline-start: calc(-1 * (var(--sl-sidebar-pad-x) + 12px));
   }
 
-  .stl-content-breadcrumbs {
-    .stldocs-breadcrumbs {
-      padding-left: 0;
-    }
+  .header,
+  .header {
+    padding-inline-start: 0;
+    padding-inline-end: 0;
   }
 
-  .stl-page-nav-container {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 1rem;
-    padding: 1rem 1rem 0;
-    flex-wrap: wrap;
+  mobile-starlight-toc nav {
+    inset-inline-start: calc(var(--sl-content-inline-start, 0) + var(--sl-sidebar-pad-x));
   }
 }
 
-@media (min-width: 50em) {
+.stl-content-breadcrumbs {
+  .stldocs-breadcrumbs {
+    padding-left: 0;
+  }
+}
+
+.stl-page-nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0 0 0;
+  flex-wrap: wrap;
+}
+
+.stl-page-nav-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 0 0 0;
+  flex-wrap: wrap;
+}
+
+.stldocs-root .stl-page-nav-container {
+  padding: 1rem 0 0 var(--stldocs-content-padding);
+}
+
+[data-has-sidebar]:not([data-has-toc]) .sl-container {
+  max-width: 1428px;
+}
+
+.stl-overview {
+  max-width: var(--sl-content-width);
+}
+
+@media (min-width: 50rem) {
   :root[data-has-sidebar] {
-    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 1rem);
+    --sl-content-inline-start: calc(var(--sl-sidebar-width) + 2rem);
+  }
+
+  .stldocs-root .stl-page-nav-container {
+    padding: 1rem 0 0 0;
+  }
+}
+
+@media (min-width: 72rem) {
+  :root {
+    --sl-mobile-toc-height: 0rem;
+  }
+}
+
+.content-panel footer {
+  /* Don’t render empty footer meta, which results in extra margin getting applied on behalf of the flex gap.
+   * Instead, move its margin to its parent. */
+  margin-top: 3rem;
+  .meta {
+    margin-top: 0;
+    &:empty,
+    &:not(:has(> *)) {
+      display: none;
+    }
   }
 }

package/styles/sdk_select.css

@@ -1,11 +1,13 @@
-@layer stainless {
-  .stl-sdk-select-dropdown-menu {
-    min-width: 200px;
-  }
+.stl-sdk-select {
+  .stl-ui-dropdown {
+    width: 100%;
 
-  .stl-sdk-select {
-    .stldocs-icon.http path {
-      fill: var(--stldocs-color-text);
+    .stl-ui-dropdown__button {
+      width: 100%;
+      justify-content: space-between;
     }
   }
+  .stldocs-icon.http path {
+    fill: var(--stl-color-foreground);
+  }
 }

package/styles/search.css

@@ -1,84 +1,72 @@
-@layer stainless {
-  /* Search input styles for Astro and Algolia */
-  site-search {
-    display: contents;
-
-    > astro-island > div {
-      position: absolute;
-    }
-
-    > button {
-      padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
-      min-width: unset;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0;
-      width: var(--sl-button-size);
-      justify-content: center;
-      background-color: var(--sl-color-bg-ui);
-      border: 1px solid var(--sl-color-hairline);
-      border-radius: var(--sl-button-border-radius);
-      height: var(--sl-button-size);
-
-      &:hover {
-        border-color: var(--sl-color-hairline-shade);
-      }
+/* Search input styles for Astro and Algolia */
+site-search {
+  display: contents;
 
-      span {
-        font-size: var(--sl-text-sm);
-        color: var(--sl-color-text-secondary);
-        line-height: 150%;
-        padding-left: var(--sl-button-icon-offset);
-        padding-right: var(--sl-button-icon-offset);
-      }
+  > astro-island > div {
+    position: absolute;
+  }
 
-      > svg {
-        width: var(--sl-text-sm);
-        height: var(--sl-text-sm);
-      }
+  > button {
+    padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
+    min-width: unset;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0;
+    width: var(--sl-button-size);
+    justify-content: center;
+    background-color: var(--stl-color-ui-background);
+    border: 1px solid var(--stl-color-border);
+    border-radius: var(--sl-button-border-radius);
+    height: var(--sl-button-size);
 
-      &.stldocs-button {
-        padding: 0;
-      }
+    &:hover {
+      background: var(--stl-color-ui-background-hover);
     }
 
-    button > kbd {
-      border-radius: 0.25rem;
-      font-size: var(--sl-text-2xs);
-      gap: 0.25em;
-      padding-inline: 0.375rem;
-      background-color: var(--sl-color-gray-6);
-      margin-right: -0.3rem;
+    span {
+      font-size: var(--stl-typography-scale-sm);
+      color: var(--stl-color-foreground-reduced);
+      line-height: 150%;
+      padding-left: var(--sl-button-icon-offset);
+      padding-right: var(--sl-button-icon-offset);
     }
 
-    kbd {
-      font-family: var(--__sl-font);
-      color: var(--sl-color-text);
+    > svg {
+      width: var(--stl-typography-scale-sm);
+      height: var(--stl-typography-scale-sm);
     }
   }
 
-  @media (min-width: 50rem) {
-    site-search {
-      > button {
-        border-radius: var(--sl-button-border-radius);
-        padding-inline-start: var(--sl-button-padding-x);
-        padding-inline-end: var(--sl-button-padding-x);
-        width: 100%;
-        max-width: 30rem;
-        justify-content: start;
+  button > kbd {
+    border-radius: 0.25rem;
+    font-size: var(--stl-typography-scale-xs);
+    gap: 0.25em;
+    padding-inline: 0.375rem;
+    background-color: var(--stl-color-muted-background);
+    margin-right: -0.3rem;
+  }
+
+  kbd {
+    font-family: var(--__sl-font);
+    color: var(--stl-color-foreground-reduced);
+  }
+}
 
-        &.stldocs-button {
-          padding-inline-start: var(--sl-button-padding-x);
-          padding-inline-end: var(--sl-button-padding-x);
-        }
+@media (min-width: 50rem) {
+  site-search {
+    > button {
+      border-radius: var(--sl-button-border-radius);
+      width: 100%;
+      max-width: 30rem;
+      justify-content: start;
+      padding: var(--sl-button-padding-y) var(--sl-button-padding-x);
 
-        > :last-child {
-          margin-inline-start: auto;
-        }
-        > svg {
-          margin-left: calc(-1 * var(--sl-button-icon-offset));
-        }
+      > :last-child {
+        margin-inline-start: auto;
+      }
+      > svg {
+        margin-left: calc(-1 * var(--sl-button-icon-offset));
       }
     }
   }

package/styles/sidebar.css

@@ -1,168 +1,38 @@
-@layer stainless {
-  .sidebar-pane {
-    border-inline-end: 1px solid var(--sl-color-hairline-light);
-    background-color: var(--sl-color-bg);
-  }
-
-  .sidebar-content {
-    li a[aria-current='page'] {
-      background-color: unset;
-      color: var(--sl-color-text-accent);
-
-      span {
-        font-weight: normal;
-      }
-    }
-
-    li {
-      margin-top: 0;
-    }
-
-    .group-label span,
-    li a span {
-      font-size: var(--sl-text-sm);
-      line-height: 150%;
-    }
-
-    summary {
-      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
-      padding-right: 4px;
-    }
-
-    .top-level > li:first-child > a,
-    .top-level li:first-child details > summary {
-      padding-top: 0;
-    }
-
-    li a {
-      position: relative;
-      padding: 0.435rem var(--sl-sidebar-item-padding-inline);
-    }
-
-    details > summary > svg {
-      opacity: 0.5;
-    }
-
-    details[open] > summary > svg {
-      opacity: 1;
-    }
-
-    a.large span {
-      font-weight: 400;
-      color: var(--sl-color-gray-2);
-
-      &:hover {
-        color: var(--sl-color-white);
+/* reset starlight styles */
+@layer starlight.core {
+  .sidebar .sidebar-pane .sidebar-content {
+    * {
+      all: revert-layer;
+      &::before,
+      &::after {
+        all: revert-layer;
       }
     }
-
-    a.large[aria-current='page'] span {
-      color: var(--sl-color-text-accent);
-    }
-
-    .stl-mobile-only-sidebar-item-last {
-      border-bottom: 1px solid var(--sl-color-hairline-light);
-      padding-bottom: 1rem;
-      margin-bottom: 0.5rem;
-    }
-  }
-
-  .stl-sdk-select {
-    .dropdown-toggle {
-      width: 100%;
-    }
-  }
-
-  [data-stldocs-method] {
-    display: flex;
-    gap: 0.6rem;
-  }
-
-  [data-stldocs-method]::before {
-    content: '';
-    min-width: 20px;
-    height: 20px;
-    border-radius: 4px;
-    text-align: center;
-    margin-top: 1px;
-  }
-
-  [aria-current='page']::after {
-    content: '';
-    position: absolute;
-    /* Shift left accounting for sidebar item padding - current item width. Sidebar border width is not a variable, it's always set to 1px */
-    left: calc(-1 * var(--sl-sidebar-item-padding-inline) - 1px);
-    top: 10%;
-    height: 80%;
-    width: 2px;
-    background-color: var(--sl-color-text-accent);
-  }
-
-  .stl-mobile-only-sidebar-item[aria-current='page']::after {
-    background-color: transparent;
-  }
-
-  /* CSS is the only way to customize the Starlight sidebar, so the SVGs have to be here. */
-
-  :root[data-theme='dark'] {
-    [data-stldocs-method='get']::before {
-      background-color: var(--sl-color-green-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(74, 194, 107)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
-    }
-
-    [data-stldocs-method='post']::before {
-      background-color: var(--sl-color-blue-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(84, 174, 255)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
-    }
-
-    [data-stldocs-method='patch']::before,
-    [data-stldocs-method='put']::before {
-      background-color: var(--sl-color-orange-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(251, 143, 68)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
-    }
-
-    [data-stldocs-method='delete']::before {
-      background-color: var(--sl-color-red-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(248, 89, 92)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-    }
   }
+}
 
-  :root[data-theme='light'] {
-    [data-stldocs-method='get']::before {
-      background-color: var(--sl-color-green-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(31, 124, 58)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-down-left-icon lucide-arrow-down-left"><path d="M17 7 7 17"/><path d="M17 17H7V7"/></svg>');
-    }
+.sidebar-pane {
+  border-inline-end: 1px solid var(--stl-color-border-faint);
+}
 
-    [data-stldocs-method='post']::before {
-      background-color: var(--sl-color-blue-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(9, 105, 218)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
-    }
+.sidebar-content .stl-mobile-only-sidebar-item-last {
+  margin-bottom: 2rem;
+  position: relative;
+}
 
-    [data-stldocs-method='patch']::before,
-    [data-stldocs-method='put']::before {
-      background-color: var(--sl-color-orange-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(210, 86, 1)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-up-right-icon lucide-arrow-up-right"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>');
-    }
+.stl-sidebar-header-links {
+  display: flex;
+  gap: 1rem;
+  flex-direction: column-reverse;
+}
 
-    [data-stldocs-method='delete']::before {
-      background-color: var(--sl-color-red-low);
-      content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 -2 24 24" fill="none" stroke="rgba(207, 34, 46)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>');
-    }
+@media (min-width: 50rem) {
+  .stl-mobile-only-sidebar-item,
+  li:has(> .stl-mobile-only-sidebar-item) {
+    display: none;
   }
 
   .stl-sidebar-header-links {
-    display: flex;
-    gap: 1rem;
-    flex-direction: column-reverse;
-  }
-
-  @media (min-width: 50rem) {
-    .stl-mobile-only-sidebar-item {
-      display: none;
-    }
-
-    .stl-sidebar-header-links {
-      display: none;
-    }
+    display: none;
   }
 }

package/styles/{variables.css → sl-variables.css}

@@ -1,7 +1,6 @@
 :root {
   --sl-color-bg-table-row: #ffffff0a;
   --sl-button-border-radius: 8px;
-  --sl-text-body-sm: 0.86rem;
   --sl-content-width: 52rem;
   --sl-nav-pad-y: 0.5rem;
   --sl-nav-height: 56px;
@@ -13,6 +12,8 @@
   --sl-menu-button-size: var(--sl-button-size);
 
   --sl-nav-gap: 0.5rem;
-  --sl-icon-color: var(--sl-color-text);
+  --sl-icon-color: var(--stl-color-foreground);
   --sl-page-max-width: unset;
+
+  --sl-content-pad-x: 1rem;
 }

package/styles/stldocs-variables.css

@@ -0,0 +1,6 @@
+@import '@stainless-api/docs-ui/styles/variables.css';
+
+:root {
+  --stldocs-content-width: var(--sl-content-width);
+  --stldocs-content-padding: var(--sl-content-pad-x);
+}

package/styles/toc.css

@@ -1,42 +1,49 @@
-@layer stainless {
-  .right-sidebar-panel {
-    nav > ul {
-      padding-top: 0;
-      border-left: 1px solid var(--sl-color-hairline-light);
-    }
-    ul ul {
-      padding-top: 0;
-    }
+.right-sidebar-panel {
+  font-size: var(--stl-typography-scale-sm);
 
-    ul > li > a {
-      --pad-inline: 1rem;
-      font-weight: 400;
-      color: var(--sl-color-text);
-      padding-block: 0.32rem;
-      color: var(--sl-color-text-secondary);
-      position: relative;
+  nav > ul {
+    padding-top: 0;
+    border-left: 1px solid var(--stl-color-border);
+  }
 
-      &[aria-current='true'] {
-        color: var(--sl-color-text-accent);
+  ul ul {
+    padding-top: 0;
+  }
 
-        &::after {
-          content: '';
-          position: absolute;
-          height: 100%;
-          width: 2px;
-          background-color: var(--sl-color-text-accent);
-          left: -1px;
-          top: 0;
-        }
-      }
+  ul > li > a {
+    --pad-inline: 1rem;
+    font-weight: 400;
+    padding-block: 0.32rem;
+    color: var(--stl-color-foreground-reduced);
+    position: relative;
+    font-size: inherit;
+
+    &:hover {
+      text-decoration: underline;
+      color: var(--stl-color-foreground);
+      text-decoration-color: var(--stl-color-foreground-reduced);
     }
 
-    h2 {
-      color: var(--stldocs-color-text-secondary);
-      font-size: var(--stldocs-font-size-small);
-      line-height: 150%;
-      text-decoration: none;
-      font-weight: 400;
+    &[aria-current='true'] {
+      color: var(--stl-color-accent-foreground);
+
+      &::after {
+        content: '';
+        position: absolute;
+        height: 100%;
+        width: 2px;
+        background-color: var(--stl-color-accent-border-strong);
+        left: -1px;
+        top: 0;
+      }
     }
   }
+
+  h2 {
+    color: var(--stl-color-foreground-reduced);
+    font-size: inherit;
+    line-height: 150%;
+    text-decoration: none;
+    font-weight: 400;
+  }
 }

package/theme.css

@@ -1,8 +1,6 @@
 @layer starlight.base, starlight.reset, starlight.core, starlight.content, starlight.components, starlight.utils;
-@layer starlight, docs-ui, stl-ui, stainless;
+@layer starlight;
 
-@import './styles/fonts.css';
-@import './styles/variables.css';
 @import './styles/links.css';
 @import './styles/sidebar.css';
 @import './styles/search.css';
@@ -11,5 +9,17 @@
 @import './styles/overrides.css';
 @import './styles/code.css';
 @import './styles/sdk_select.css';
+@import './styles/method-descriptions.css';
+
 @import '@stainless-api/ui-primitives/styles.css';
+
+@import './styles/sl-variables.css';
+@import '@stainless-api/ui-primitives/styles/starlight-compat.css';
 @import './styles/mintlify-compat.css';
+
+@import './styles/stldocs-variables.css';
+@import '@stainless-api/docs-ui/styles/resets.css';
+@import '@stainless-api/docs-ui/styles/primitives.css';
+@import '@stainless-api/docs-ui/styles/main.css';
+@import '@stainless-api/docs-ui/styles/search.css';
+@import '@stainless-api/docs-ui/styles/sidebar.css';