@stainless-api/docs-ui 0.1.0-beta.8 → 0.1.0-beta.80

package/dist/styles/sidebar.css

@@ -1,87 +1,200 @@
-@layer docs-ui {
-  .stldocs-sidebar {
-    font-family: var(--stldocs-font);
-    font-size: var(--stldocs-font-size-body);
-
-    a {
-      text-decoration: none;
-      color: var(--stldocs-color-text-secondary);
+:root {
+  --stldocs-sidebar-item-padding-inline: 0.75rem;
+  --stldocs-sidebar-item-padding-block: 0.375rem;
+  --stldocs-sidebar-indent: 0.75rem;
+}
+
+.stldocs-sidebar {
+  font-family: var(--stl-typography-font);
+  font-size: var(--stl-typography-scale-sm);
+  /* Remove background color from stldocs-root reset. */
+  background-color: transparent;
+
+  ul,
+  summary {
+    list-style-type: none;
+  }
+
+  .stldocs-expander-summary,
+  .stldocs-sidebar-entry-group > a {
+    font-weight: 500;
+  }
+
+  .stldocs-expander-summary {
+    display: flex;
+    align-items: center;
+    user-select: none;
+
+    .stldocs-expander-summary-icon {
+      margin-left: 4px;
+      opacity: 0.65;
+      transition:
+        opacity 0.1s ease-out,
+        transform 0.1s ease-out;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: var(--stl-color-background-hover);
+      }
     }
 
-    .stldocs-sidebar-resource-title {
-      padding-bottom: 6px;
+    span[aria-hidden='true'] {
+      opacity: 0;
     }
+  }
 
-    .stldocs-sidebar-resource,
-    .stldocs-sidebar-method {
-      padding: 6px;
-      display: flex;
-      gap: 0.5rem;
+  .stldocs-sidebar-entry-group {
+    position: relative;
 
-      .stldocs-method-route-httpmethod {
-        margin-bottom: auto;
-      }
+    /* Anchor is positioned over the <details>. */
+    > a {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      padding-block: var(--stldocs-sidebar-item-padding-block);
+      padding-inline: var(--stldocs-sidebar-item-padding-inline);
+    }
+  }
 
-      &[data-selected='true'] {
-        & > a,
-        & > details > summary > a {
-          color: var(--stldocs-color-text);
-        }
-      }
+  .stldocs-sidebar-expander[open] > .stldocs-expander-summary .stldocs-expander-summary-icon {
+    opacity: 1;
+    transform: rotate(90deg);
+  }
+
+  /* Explicitly prevent collapsed groups from painting.
+     Browsers should not be computing styles/layout on collapsed <details> non-summary children, but Safari still seems to.
+     Applying display: none lowers rendering cost for trees with many items (eg. the CF API which has ~2k+ items)
+     In Arena's testing using dev server, Safari paint time for a CF page went from 10-14 seconds to ~3 seconds.
+  */
+  .stldocs-sidebar-expander:not([open]) > .stldocs-sidebar-list {
+    display: none;
+  }
+
+  /* List items. */
+  .stldocs-sidebar-entry,
+  .stldocs-expander-summary {
+    margin: 0;
+    border-radius: 8px;
+  }
+
+  .stldocs-expander-summary,
+  .stldocs-sidebar-entry-link a {
+    padding: var(--stldocs-sidebar-item-padding-block) var(--stldocs-sidebar-item-padding-inline);
+  }
+
+  summary.stldocs-expander-summary,
+  .stldocs-sidebar-entry-link a {
+    cursor: pointer;
+  }
+
+  .stldocs-sidebar-entry-link a:hover {
+    color: var(--stl-color-foreground);
+  }
+
+  .stldocs-sidebar-entry-link a {
+    color: var(--stl-color-foreground-reduced);
+    font-weight: 400;
+    display: flex;
+    text-decoration: none;
+    span {
+      font-weight: inherit;
     }
 
-    .stldocs-sidebar-resource-title {
-      display: block;
+    &:hover {
+      text-decoration: underline;
+      text-decoration-color: var(--stl-color-foreground-reduced);
+    }
+    &[aria-current='page'] {
+      font-weight: 500;
+      color: var(--stl-color-foreground);
+    }
+  }
 
-      a {
-        color: var(--stldocs-color-text);
-        font-weight: 500;
-      }
+  /* When the sidebar entry has a link, disable pointer events on the <details> text
+  so that they pass through to the <a>. */
+  .stldocs-sidebar-entry-group:has(> a) .stldocs-expander-summary > span {
+    pointer-events: none;
+  }
+
+  .stldocs-sidebar-entry-link:has(> a:is(:hover, [aria-current='page'])),
+  .stldocs-sidebar-entry-group:has(> a:is(:hover, [aria-current='page']))
+    > .stldocs-sidebar-expander
+    > .stldocs-expander-summary,
+  summary.stldocs-expander-summary:hover {
+    background-color: var(--stl-color-background-hover);
+  }
+
+  /* Nested list items have flat left edge. */
+  .stldocs-sidebar-list .stldocs-sidebar-list :is(.stldocs-expander-summary, .stldocs-sidebar-entry) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .stldocs-sidebar-list {
+    padding: 0;
+  }
+
+  .stldocs-sidebar-list .stldocs-sidebar-list .stldocs-sidebar-entry {
+    border-inline-start: 1px solid var(--stl-color-border-faint);
+    margin-inline-start: var(--stldocs-sidebar-indent);
+
+    > a[aria-current='page'] {
+      border-inline-start: 2px solid var(--stl-color-accent-border-strong);
+      margin-left: -1px;
+    }
+  }
+
+  /* Icon positioning within links/groups. */
+  .stldocs-sidebar-entry-link > a,
+  .stldocs-sidebar-entry-group > a,
+  .stldocs-sidebar-entry-group .stldocs-expander-summary > span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /* Hover/active states for HTTP badges. */
+  a[aria-current='page'] .stl-ui-badge--http {
+    &.stl-ui-badge--http-get {
+      background-color: var(--stl-color-green-inverse-background);
+      color: var(--stl-color-green-inverse-foreground);
     }
 
-    .stldocs-sidebar-expander {
-      .stldocs-expander-summary {
-        cursor: pointer;
-        display: flex;
+    &.stl-ui-badge--http-post {
+      background-color: var(--stl-color-blue-inverse-background);
+      color: var(--stl-color-blue-inverse-foreground);
+    }
 
-        & > .stldocs-expander-summary-icon {
-          transform: translateX(-0.5px) translateY(-0.5px);
-          margin-left: 8px;
+    &.stl-ui-badge--http-patch,
+    &.stl-ui-badge--http-put {
+      background-color: var(--stl-color-orange-inverse-background);
+      color: var(--stl-color-orange-inverse-foreground);
+    }
 
-          & > .stldocs-icon {
-            vertical-align: middle;
-            color: var(--stldocs-color-text-tertiary);
-          }
+    &.stl-ui-badge--http-delete {
+      background-color: var(--stl-color-red-inverse-background);
+      color: var(--stl-color-red-inverse-foreground);
+    }
+  }
 
-          & > :last-child {
-            display: none;
-          }
-        }
-      }
+  a:hover:not([aria-current='page']) .stl-ui-badge--http {
+    &.stl-ui-badge--http-get {
+      background-color: var(--stl-color-green-muted-background-hover);
+    }
 
-      &[open],
-      &[data-open='true'] {
-        & > .stldocs-expander-summary {
-          .stldocs-type-preview-content {
-            display: none;
-          }
-
-          & > .stldocs-expander-summary-icon {
-            & > :first-child {
-              display: none;
-            }
-
-            & > :last-child {
-              display: inline;
-            }
-          }
-        }
-
-        & > .stldocs-expander-content {
-          margin-left: 10px;
-          line-height: 150%;
-        }
-      }
+    &.stl-ui-badge--http-post {
+      background-color: var(--stl-color-blue-muted-background-hover);
+    }
+
+    &.stl-ui-badge--http-patch,
+    &.stl-ui-badge--http-put {
+      background-color: var(--stl-color-orange-muted-background-hover);
+    }
+
+    &.stl-ui-badge--http-delete {
+      background-color: var(--stl-color-red-muted-background-hover);
     }
   }
 }
+

package/dist/styles/variables.css

@@ -1,90 +1,29 @@
-@layer docs-ui {
-  :root {
-    color-scheme: dark;
-
-    --stldocs-font: 'Geist', system-ui, sans-serif;
-    --stldocs-font-mono: 'Geist Mono', ui-monospace, monospace;
-
-    --stldocs-color-white: #ffffff;
-    --stldocs-color-gray-1: #eeeeee;
-    --stldocs-color-gray-2: #c2c2c2;
-    --stldocs-color-gray-3: #8b8b8b;
-    --stldocs-color-gray-4: #52525c;
-    --stldocs-color-gray-5: #303030;
-    --stldocs-color-gray-6: #272727;
-    --stldocs-color-gray-7: #181818;
-    --stldocs-color-gray-8: #161616;
-
-    --stldocs-color-accent-low: #974703;
-    --stldocs-color-accent-high: #fdc99c;
-    --stldocs-color-accent: #f6821e;
-    --stldocs-color-red: #cf222e;
-    --stldocs-color-red-low: #351313;
-
-    --stldocs-color-text: var(--stldocs-color-gray-1);
-    --stldocs-color-text-muted: #6d6d6d;
-    --stldocs-color-text-mid: var(--stldocs-color-gray-3);
-    --stldocs-color-text-bright: var(--stldocs-color-gray-1);
-    --stldocs-color-text-accent: var(--stldocs-color-accent);
-    --stldocs-color-text-invert: var(--stldocs-color-white);
-    --stldocs-color-text-secondary: #acacac;
-    --stldocs-color-text-tertiary: #a3a3a3;
-
-    --stldocs-color-bg: var(--stldocs-color-gray-7);
-    --stldocs-color-bg-nav: var(--stldocs-color-gray-6);
-    --stldocs-color-selected: var(--stldocs-color-gray-6);
-
-    --stldocs-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66);
-
-    --stldocs-color-bg-inline-code: #1f1f1f;
-    --stldocs-color-bg-accent: var(--stldocs-color-accent-high);
-    --stldocs-color-hairline: var(--stldocs-color-gray-5);
-    --stldocs-color-hairline-shade: var(--stldocs-color-white);
-    --stldocs-color-hairline-light: var(--stldocs-color-gray-5);
-
-    --stldocs-color-http-get-bg: #102916;
-    --stldocs-color-http-get: #4ac26b;
-
-    --stldocs-color-http-put-bg: #341e0e;
-    --stldocs-color-http-put: #fb8f44;
-
-    --stldocs-color-http-post-bg: #142a3d;
-    --stldocs-color-http-post: #54aeff;
-
-    --stldocs-color-http-delete-bg: #351313;
-    --stldocs-color-http-delete: #f8595c;
-
-    --stldocs-font-size-h1: 42px;
-    --stldocs-font-size-h2: 35px;
-    --stldocs-font-size-h3: 29px;
-    --stldocs-font-size-h4: 25px;
-    --stldocs-font-size-h5: 18px;
-
-    --stldocs-font-size-body: 14px;
-    --stldocs-font-size-body-xs: 12px;
-    --stldocs-font-size-small: 13px;
-    --stldocs-font-size-code: 14px;
-
-    --stldocs-content-width: 720px;
-    --stldocs-content-padding: 16px;
-
-    --stldocs-syntax-color-red: hsl(356 90.8% 66%);
-    --stldocs-syntax-color-green: hsl(136.5 49.6% 52.5%);
-    --stldocs-syntax-color-blue: hsl(208.4 100% 66.5%);
-    --stldocs-syntax-color-orange: hsl(24.6 96% 62.5%);
-    --stldocs-syntax-color-teal: hsl(203 100% 85.7%);
-    --stldocs-syntax-color-magenta: hsl(324 75.5% 63.1%);
-    --stldocs-syntax-color-purple: hsl(261 92.2% 74.7%);
-
-    --stldocs-color-snippet-box-bg: var(--stldocs-color-gray-6);
-    --stldocs-color-snippet-title-bg: var(--stldocs-color-gray-8);
-    --stldocs-color-snippet-title-muted: var(--stldocs-color-gray-3);
-    --stldocs-color-snippet-title-bright: var(--stldocs-color-white);
-    --stldocs-color-snippet-code-bg: var(--stldocs-color-gray-7);
-
-    --stldocs-color-backdrop-overlay: var(--stldocs-color-gray-8);
-    --stldocs-expander-margin-shift: 24px;
-    --stldocs-expander-right-margin: 8px;
-    --stldocs-title-padding-y: 2.5rem;
-  }
+:root {
+  --stldocs-color-selected: var(--stl-color-muted-background);
+  --stldocs-color-bg-inline-code: var(--stl-color-muted-background);
+
+  --stldocs-content-width: 720px;
+  --stldocs-content-padding: 16px;
+  --stldocs-content-padding-inline: var(--stldocs-content-padding);
+  --stldocs-content-padding-block: var(--stldocs-content-padding);
+
+  --stldocs-color-http-get-bg: var(--stl-color-green-muted-background);
+  --stldocs-color-http-get: var(--stl-color-green-foreground);
+  --stldocs-color-http-put-bg: var(--stl-color-orange-muted-background);
+  --stldocs-color-http-put: var(--stl-color-orange-foreground);
+  --stldocs-color-http-post-bg: var(--stl-color-blue-muted-background);
+  --stldocs-color-http-post: var(--stl-color-blue-foreground);
+  --stldocs-color-http-delete-bg: var(--stl-color-red-muted-background);
+  --stldocs-color-http-delete: var(--stl-color-red-foreground);
+
+  --stldocs-syntax-color-green: var(--stl-color-green-foreground);
+  --stldocs-syntax-color-orange: var(--stl-color-orange-foreground);
+  --stldocs-syntax-color-purple: var(--stl-color-purple-foreground);
+  --stldocs-syntax-color-blue: var(--stl-color-blue-foreground);
+
+  --stldocs-expander-margin-shift: 24px;
+  --stldocs-expander-right-margin: 8px;
+  --stldocs-title-padding-y: 2.5rem;
+  --stldocs-color-backdrop-overlay: var(--stl-color-muted-background);
 }
+