@stainless-api/docs 0.1.0-beta.47 → 0.1.0-beta.49

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @stainless-api/docs
 
+## 0.1.0-beta.49
+
+### Patch Changes
+
+- Updated dependencies [b9e4b82]
+- Updated dependencies [6d12e06]
+- Updated dependencies [5051795]
+  - @stainless-api/ui-primitives@0.1.0-beta.30
+  - @stainless-api/docs-ui@0.1.0-beta.41
+
+## 0.1.0-beta.48
+
+### Patch Changes
+
+- Updated dependencies [81b5b21]
+- Updated dependencies [ba269f9]
+- Updated dependencies [e2a7098]
+- Updated dependencies [589b13d]
+  - @stainless-api/ui-primitives@0.1.0-beta.29
+  - @stainless-api/docs-ui@0.1.0-beta.40
+
 ## 0.1.0-beta.47
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stainless-api/docs",
-  "version": "0.1.0-beta.47",
+  "version": "0.1.0-beta.49",
   "publishConfig": {
     "access": "public"
   },
@@ -51,8 +51,8 @@
     "unified": "^11.0.5",
     "web-worker": "^1.5.0",
     "yaml": "^2.8.1",
-    "@stainless-api/docs-ui": "0.1.0-beta.39",
-    "@stainless-api/ui-primitives": "0.1.0-beta.28"
+    "@stainless-api/ui-primitives": "0.1.0-beta.30",
+    "@stainless-api/docs-ui": "0.1.0-beta.41"
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.5",
@@ -66,8 +66,8 @@
     "typescript": "5.9.3",
     "vite": "^6.4.1",
     "zod": "^4.1.13",
-    "@stainless/eslint-config": "0.1.0-beta.0",
-    "@stainless/sdk-json": "^0.1.0-beta.0"
+    "@stainless/sdk-json": "^0.1.0-beta.0",
+    "@stainless/eslint-config": "0.1.0-beta.0"
   },
   "scripts": {
     "vendor-deps": "pnpm tsx scripts/vendor_deps.ts",

package/plugin/react/Routing.tsx

@@ -466,12 +466,12 @@ async function astroHighlight() {
           // numbers, booleans, null
           {
             scope: ['constant.numeric', 'constant.language'],
-            settings: { foreground: 'var(--stl-color-foreground-orange)' },
+            settings: { foreground: 'var(--stl-color-orange-foreground)' },
           },
           // strings
           {
             scope: ['string', 'string.quoted', 'string.template'],
-            settings: { foreground: 'var(--stl-color-foreground-green)' },
+            settings: { foreground: 'var(--stl-color-green-foreground)' },
           },
           // Keys, brackets
           {
@@ -486,7 +486,7 @@ async function astroHighlight() {
           // built-in types
           {
             scope: ['support.type.builtin'],
-            settings: { foreground: 'var(--stl-color-foreground-purple)' },
+            settings: { foreground: 'var(--stl-color-purple-foreground)' },
           },
         ],
       },

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

@@ -2,10 +2,8 @@
 
 ---
 
-<div class="content-panel">
-  <div class="sl-container stl-ui-prose">
-    <slot />
-  </div>
+<div class="content-panel sl-container stl-ui-prose">
+  <slot />
 </div>
 
 <style>
@@ -23,10 +21,15 @@
       }
     }
   }
+
   .content-panel {
     padding: 0 var(--sl-content-pad-x) 0 var(--sl-content-pad-x);
   }
 
+  .content-panel + .content-panel {
+    margin-top: 24px;
+  }
+
   @media (min-width: 50rem) {
     .content-panel {
       padding: 0 0 0 var(--sl-content-pad-x);

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

@@ -42,7 +42,7 @@ const navLinks = buildNavLinks(Astro.locals.starlightRoute);
       border-bottom: 2px solid transparent;
 
       &.active {
-        border-color: var(--stl-color-accent-background);
+        border-color: var(--stl-color-accent-inverse-background);
       }
 
       .stl-ui-button {

package/stl-docs/components/pagination/Pagination.astro

@@ -54,7 +54,7 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
     --stl-ui-pagination-border-radius-inner: var(--stl-ui-layout-border-radius-sml);
 
     padding: var(--stl-ui-pagination-padding);
-    background-color: var(--stl-color-muted-background);
+    background-color: var(--stl-color-faint-background);
     border: 1px solid var(--stl-color-border);
     border-radius: calc(var(--stl-ui-pagination-border-radius-inner) + var(--stl-ui-pagination-padding));
 

package/stl-docs/index.ts

@@ -123,11 +123,14 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
         textMarkers: {
           insBackground: 'var(--stl-color-green-muted-background)',
           insBorderColor: 'var(--stl-color-green-border)',
-          insDiffIndicatorColor:
-            'rgb(from var(--stl-color-green-muted-foreground) r g b / calc(alpha * 0.6))',
+          insDiffIndicatorColor: 'var(--stl-color-green-foreground-reduced)',
+
           delBackground: 'var(--stl-color-red-muted-background)',
           delBorderColor: 'var(--stl-color-red-border)',
-          delDiffIndicatorColor: 'rgb(from var(--stl-color-red-muted-foreground) r g b / calc(alpha * 0.6))',
+          delDiffIndicatorColor: 'var(--stl-color-red-foreground-reduced)',
+
+          markBackground: 'var(--stl-color-blue-muted-background)',
+          markBorderColor: 'var(--stl-color-blue-border)',
           ...userExpressiveCode.styleOverrides?.textMarkers,
         },
       },

package/styles/sidebar.css

@@ -98,7 +98,7 @@
     border-inline-start: 1px solid var(--stl-color-border-faint);
     margin-inline-start: var(--stl-sidebar-indent);
     &:has(> a[aria-current='page']) {
-      border-inline-start: 2px solid var(--stl-color-foreground-accent);
+      border-inline-start: 2px solid var(--stl-color-accent-foreground);
       & > a {
         margin-left: -1px;
       }
@@ -117,33 +117,37 @@
     --stl-ui-sidebar-icon-color-inverse-background: var(--stl-ui-sidebar-icon-color);
 
     &[data-stldocs-method='get'] {
-      --stl-ui-sidebar-icon-color: var(--stl-color-green);
+      --stl-ui-sidebar-icon-color: var(--stl-color-green-foreground);
       --stl-ui-sidebar-icon-color-border: var(--stl-color-green-border);
       --stl-ui-sidebar-icon-color-background: var(--stl-color-green-muted-background);
       --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-green-muted-background-hover);
-      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-green-foreground);
+      --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-green-inverse-background);
+      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-green-inverse-foreground);
     }
     &[data-stldocs-method='post'] {
-      --stl-ui-sidebar-icon-color: var(--stl-color-blue);
+      --stl-ui-sidebar-icon-color: var(--stl-color-blue-foreground);
       --stl-ui-sidebar-icon-color-border: var(--stl-color-blue-border);
       --stl-ui-sidebar-icon-color-background: var(--stl-color-blue-muted-background);
       --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-blue-muted-background-hover);
-      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-blue-foreground);
+      --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-blue-inverse-background);
+      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-blue-inverse-foreground);
     }
     &[data-stldocs-method='patch'],
     &[data-stldocs-method='put'] {
-      --stl-ui-sidebar-icon-color: var(--stl-color-orange);
+      --stl-ui-sidebar-icon-color: var(--stl-color-orange-foreground);
       --stl-ui-sidebar-icon-color-border: var(--stl-color-orange-border);
       --stl-ui-sidebar-icon-color-background: var(--stl-color-orange-muted-background);
       --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-orange-muted-background-hover);
-      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-orange-foreground);
+      --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-orange-inverse-background);
+      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-orange-inverse-foreground);
     }
     &[data-stldocs-method='delete'] {
-      --stl-ui-sidebar-icon-color: var(--stl-color-red);
+      --stl-ui-sidebar-icon-color: var(--stl-color-red-foreground);
       --stl-ui-sidebar-icon-color-border: var(--stl-color-red-border);
       --stl-ui-sidebar-icon-color-background: var(--stl-color-red-muted-background);
       --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-red-muted-background-hover);
-      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-red-foreground);
+      --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-red-inverse-background);
+      --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-red-inverse-foreground);
     }
 
     &[data-stldocs-method='get'] {
@@ -163,8 +167,8 @@
     /* not yet implemented in markup */
     --stl-ui-sidebar-icon-color: var(--stl-color-foreground-muted);
     --stl-ui-sidebar-icon-color-border: var(--stl-color-border);
-    --stl-ui-sidebar-icon-color-background: var(--stl-color-muted-background);
-    --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-muted-background-hover);
+    --stl-ui-sidebar-icon-color-background: var(--stl-color-faint-background);
+    --stl-ui-sidebar-icon-color-background-hover: var(--stl-color-faint-background-hover);
     --stl-ui-sidebar-icon-color-inverse-background: var(--stl-color-inverse-background);
     --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-inverse-foreground);
 

package/styles/toc.css

@@ -25,14 +25,14 @@
     }
 
     &[aria-current='true'] {
-      color: var(--stl-color-foreground-accent);
+      color: var(--stl-color-accent-foreground);
 
       &::after {
         content: '';
         position: absolute;
         height: 100%;
         width: 2px;
-        background-color: var(--stl-color-foreground-accent);
+        background-color: var(--stl-color-accent-foreground);
         left: -1px;
         top: 0;
       }