@stainless-api/docs 0.1.0-beta.9 → 0.1.0-beta.90

package/styles/code.css

@@ -1,72 +1,103 @@
-@layer stainless {
-  .expressive-code {
-    .frame {
-      --code-background: var(--sl-color-bg-inline-code);
-    }
+.expressive-code {
+  .frame {
+    --code-background: var(--stl-color-faint-background);
+  }
+
+  figure.frame {
+    box-shadow: none;
+  }
 
-    figure.frame {
-      box-shadow: none;
+  figure,
+  pre {
+    border-radius: var(--sl-button-border-radius);
+    border-color: var(--stl-color-border);
+  }
+
+  .frame.has-title:not(.is-terminal),
+  .frame.is-terminal {
+    figcaption {
+      border-radius: var(--sl-button-border-radius) var(--sl-button-border-radius) 0 0;
+      border-color: var(--stl-color-border);
     }
 
-    figure,
     pre {
-      border-radius: var(--sl-button-border-radius);
-      border-color: var(--sl-color-hairline);
+      border-radius: 0 0 var(--sl-button-border-radius) var(--sl-button-border-radius);
+      border-color: var(--stl-color-border);
     }
+  }
 
-    .frame.has-title:not(.is-terminal),
-    .frame.is-terminal {
-      figcaption {
-        border-radius: var(--sl-button-border-radius) var(--sl-button-border-radius) 0 0;
-        border-color: var(--sl-color-hairline);
-      }
+  .frame.has-title:not(.is-terminal) {
+    figcaption span:first-child {
+      border-top-left-radius: var(--sl-button-border-radius);
+    }
 
-      pre {
-        border-radius: 0 0 var(--sl-button-border-radius) var(--sl-button-border-radius);
-        border-color: var(--sl-color-hairline);
-      }
+    .header::before {
+      border-color: var(--stl-color-border);
     }
 
-    .frame.has-title:not(.is-terminal) {
-      figcaption span:first-child {
-        border-top-left-radius: var(--sl-button-border-radius);
-      }
+    .title::after {
+      bottom: -1px;
+      top: unset;
+    }
+  }
+}
 
-      .header::before {
-        border-color: var(--sl-color-hairline);
-      }
+.astro-code {
+  border-radius: var(--sl-button-border-radius);
+  border-color: var(--stl-color-border);
+}
 
-      .title::after {
-        bottom: -1px;
-        top: unset;
-      }
-    }
+.stl-snippet-request-container {
+  position: relative;
+}
+
+.stl-snippet-expand-button {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  cursor: pointer;
+  height: auto;
+  z-index: 100;
+
+  &:not(.stl-snippet-collapsible .stl-snippet-expand-button) {
+    display: none;
   }
 
-  .astro-code {
-    border-radius: var(--sl-button-border-radius);
-    border-color: var(--sl-color-hairline);
+  &.stl-ui-button {
+    background-color: var(--stl-color-background);
+    background-image: linear-gradient(
+      to right,
+      var(--stl-color-ui-background),
+      var(--stl-color-ui-background)
+    );
   }
 
-  .stl-snippet-request-container {
-    position: relative;
+  &.stl-ui-button:hover {
+    background-color: var(--stl-color-background);
+    background-image: linear-gradient(
+      to right,
+      var(--stl-color-ui-background-hover),
+      var(--stl-color-ui-background-hover)
+    );
   }
+}
 
-  .stl-snippet-expand-button {
+.stl-snippet-code-is-expanded {
+  .ellipsis {
     display: none;
+  }
+}
+
+.stl-snippet-collapsible {
+  .stl-snippet-code-is-collapsed {
+    .hidden {
+      display: none;
+      opacity: 0;
+    }
 
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 12px;
-    background-color: var(--stldocs-color-bg-inline-code);
-    cursor: pointer;
-    font-weight: 500;
-    line-height: 100%;
-    font-size: var(--stldocs-font-size-body-sm);
-    font-family: var(--stldocs-font);
-    padding: 4px 7px 4px 7px;
-    height: auto;
+    .leading-ws {
+      display: none;
+    }
   }
 
   .stl-snippet-code-is-expanded {
@@ -74,116 +105,77 @@
       display: none;
     }
   }
+}
 
-  .stl-snippet-collapsible {
-    .stl-snippet-expand-button {
-      display: block;
-      margin-bottom: -23px;
-      /* Prevent clipping of the button with the container below */
-      z-index: 100;
+.stldocs-root {
+  .stl-snippets-non-collapsible {
+    .shiki {
+      counter-reset: codeblock-line 0 !important;
     }
 
-    .stl-snippet-code-is-collapsed {
+    .stldocs-snippet {
       .hidden {
-        display: none;
-        opacity: 0;
+        display: inline;
+        opacity: 1;
       }
 
       .leading-ws {
-        display: none;
+        display: inline;
       }
-    }
 
-    .stl-snippet-code-is-expanded {
       .ellipsis {
         display: none;
       }
     }
   }
+}
 
-  .stldocs-root {
-    .stl-snippets-non-collapsible {
-      .shiki {
-        counter-reset: codeblock-line 0 !important;
-      }
-
-      .stldocs-snippet {
-        .hidden {
-          display: inline;
-          opacity: 1;
-        }
-
-        .leading-ws {
-          display: inline;
-        }
-
-        .ellipsis {
-          display: none;
-        }
-      }
-    }
-  }
-
-  .stl-snippet-dropdown-button-text {
-    font-weight: 500;
-    font-style: normal;
-    font-family: var(--stldocs-font);
-    line-height: 100%;
-    font-size: var(--sl-text-body-sm);
-    color: var(--sl-color-text);
-    text-transform: capitalize;
-
-    &.http {
-      text-transform: uppercase;
-    }
-  }
-
-  :root[data-theme='light'] {
-    .astro-code,
-    .astro-code span {
-      background-color: var(--sl-color-bg-inline-code) !important;
-    }
+.stldocs-root .stl-snippet-dropdown-button-text,
+.stl-snippet-dropdown-button-text {
+  font-weight: 500;
+  font-style: normal;
+  font-family: var(--stl-typography-font);
+  line-height: 100%;
+  font-size: var(--stl-typography-scale-sm);
+  color: var(--stl-color-foreground);
+}
 
-    .stldocs-snippet-response-pane {
-      .shiki,
-      .shiki span,
-      .astro-code,
-      .astro-code span {
-        background-color: var(--sl-color-bg-inline-code) !important;
-      }
-    }
+.shiki,
+.astro-code,
+.stldocs-snippet-response-pane {
+  background-color: var(--shiki-background, var(--stl-color-faint-background)) !important;
+  .shiki,
+  .astro-code,
+  .stldocs-snippet-response-pane {
+    background-color: transparent !important;
   }
+}
 
-  :root[data-theme='dark'] {
-    /* 
+:root[data-theme='dark'] {
+  /*
     Need to use important to override inline variables. This is the
     recommended pattern in the shiki docs.
 
     https://shiki.style/guide/dual-themes#query-based-dark-mode
    */
-    .shiki,
-    .shiki span,
-    .astro-code,
-    .astro-code span {
-      color: var(--shiki-dark) !important;
-      background-color: var(--sl-color-bg) !important;
-      font-style: var(--shiki-dark-font-style) !important;
-      font-weight: var(--shiki-dark-font-weight) !important;
-      text-decoration: var(--shiki-dark-text-decoration) !important;
-    }
+  .shiki,
+  .shiki span,
+  .astro-code,
+  .astro-code span {
+    color: var(--shiki-dark) !important;
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+  }
+}
 
-    .astro-code,
-    .astro-code span {
-      background-color: var(--sl-color-bg-inline-code) !important;
-    }
+.stldocs-snippet .stldocs-snippet-footer.try-it-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
 
-    .stldocs-snippet-response-pane {
-      .shiki,
-      .shiki span,
-      .astro-code,
-      .astro-code span {
-        background-color: var(--sl-color-bg-inline-code) !important;
-      }
-    }
+  .try-it-button,
+  .send-button {
+    width: 7rem;
   }
 }

package/styles/links.css

@@ -1,51 +1,14 @@
-@layer stainless {
-  .sl-link-card {
-    box-shadow: none;
-    border-radius: var(--sl-button-border-radius);
-    padding: 1.5rem;
-    margin-top: 16px;
-  }
+/* TODO: remove for real card component */
 
-  .sl-link-card:hover {
-    transition: 0.3s;
-    border: 1px solid var(--sl-color-accent-high);
-    background-color: var(--sl-color-accent-low);
-  }
-
-  .pagination-links {
-    margin-bottom: 2rem;
-
-    > a {
-      border-radius: var(--sl-button-border-radius);
-      border: 1px solid transparent;
-      box-shadow: none;
-      max-width: 90%;
-      text-decoration: none;
-
-      svg {
-        margin-top: 0;
-        transform: translateY(6px);
-      }
-    }
-
-    > a:hover {
-      transition: 0.3s;
-      border: 1px solid var(--sl-color-accent-high);
-      background-color: var(--sl-color-accent-low);
-      box-shadow: none;
-    }
-
-    /* if only one pagination direction */
-    > a:first-child:nth-last-child(1) {
-      max-width: 45%;
-    }
-
-    > a[rel='next'] {
-      margin-left: auto;
-    }
+.sl-link-card {
+  box-shadow: none;
+  border-radius: var(--sl-button-border-radius);
+  padding: 1.5rem;
+  margin-top: 16px;
+}
 
-    > a[rel='prev'] {
-      margin-right: auto;
-    }
-  }
+.sl-link-card:hover {
+  transition: 0.3s;
+  border: 1px solid var(--sl-color-accent-high);
+  background-color: var(--sl-color-accent-low);
 }

package/styles/method-descriptions.css

@@ -0,0 +1,36 @@
+.stldocs-root {
+  .stl-method-description-overflow-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* Minimum height to minimize layout shift */
+    min-height: 24px;
+  }
+  .stl-method-description {
+    .stldocs-method-description {
+      overflow: hidden;
+      max-height: 170px;
+      transition: max-height 0.3s ease;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 3rem;
+        background: linear-gradient(to bottom, transparent, var(--stl-color-background));
+        pointer-events: none;
+      }
+
+      &[data-collapsed='false'] {
+        max-height: none;
+      }
+
+      &[data-collapsed='false']::after {
+        display: none;
+      }
+    }
+  }
+}

package/styles/overrides.css

@@ -1,79 +1,71 @@
-@layer stainless {
-  html {
-    font-size: 16px;
-  }
+html {
+  font-size: 16px;
+}
 
-  .site-title {
-    color: var(--sl-color-white);
-    max-width: 144px;
+.site-title {
+  color: var(--stl-color-foreground);
 
-    img {
-      height: 32px;
-      width: auto;
-    }
+  img {
+    height: 32px;
+    width: auto;
   }
+}
 
-  /* Hide the text in the theme select dropdown */
-  starlight-theme-select select {
-    width: 0;
-    overflow: hidden;
-  }
+/* TODO: apply real button classes here */
+starlight-menu-button button {
+  box-shadow: none;
+  background-color: var(--stl-color-ui-background);
+  border: 1px solid var(--stl-color-border);
+  border-radius: var(--stl-ui-layout-border-radius-sml);
+  height: 32px;
+  width: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  .custom-select-wrapper select,
-  .stldocs-button-secondary {
-    background-color: var(--sl-color-bg-ui);
-    border: 1px solid var(--sl-color-hairline);
-    border-radius: var(--sl-button-border-radius);
+  &:hover {
+    background-color: var(--stl-color-ui-background-hover);
+  }
+}
 
+mobile-starlight-toc {
+  nav {
+    background-color: var(--stl-color-background);
+  }
+  .toggle {
+    background-color: var(--stl-color-ui-background);
+    border: 1px solid var(--stl-color-border);
+    border-radius: var(--stl-ui-layout-border-radius-sml);
     &:hover {
-      border-color: var(--sl-color-hairline-shade);
+      background-color: var(--stl-color-ui-background-hover);
+      border-color: var(--stl-color-border); /* unchanged */
     }
   }
-
-  .content-panel {
-    border-top: 0;
+  .dropdown {
+    background-color: var(--stl-color-background);
+    border-color: var(--stl-color-border-faint);
+  }
+  summary {
+    padding: 2rem 1rem;
+    border-color: var(--stl-color-border-faint);
+  }
+  a {
+    border-color: var(--stl-color-border-faint);
   }
+}
 
+@media (min-width: 50rem) {
   starlight-menu-button button {
-    box-shadow: none;
-    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);
-    width: var(--sl-button-size);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-      border-color: var(--sl-color-hairline-shade);
-    }
+    display: none;
   }
 
   mobile-starlight-toc {
     nav {
-      background-color: var(--sl-color-bg);
+      inset-inline-start: calc(var(--sl-content-inline-start, 0));
     }
 
     summary {
-      padding: 2rem 1rem;
-      border-bottom-color: var(--sl-color-hairline-light);
-    }
-  }
-
-  @media (min-width: 50rem) {
-    starlight-menu-button button {
-      display: none;
-    }
-
-    mobile-starlight-toc {
-      nav {
-        inset-inline-start: calc(var(--sl-content-inline-start, 0));
-      }
-
-      summary {
-        padding: 2rem 2rem;
-      }
+      padding: 2rem 2rem;
     }
   }
 }