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

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

@@ -54,11 +54,11 @@ 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-ui-muted-background);
-    border: 1px solid var(--stl-ui-border);
+    background-color: var(--stl-color-muted-background);
+    border: 1px solid var(--stl-color-border);
     border-radius: calc(var(--stl-ui-pagination-border-radius-inner) + var(--stl-ui-pagination-padding));
 
-    font-size: var(--stl-ui-type-scale-text-sm);
+    font-size: var(--stl-typography-scale-sm);
     letter-spacing: normal;
 
     display: flex;
@@ -78,11 +78,12 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
     display: flex;
     text-decoration: none;
     align-items: center;
+    color: inherit;
   }
 
   .pagination-links__link--emphasized {
-    background-color: var(--stl-ui-background);
-    border: 1px solid var(--stl-ui-border);
+    background-color: var(--stl-color-background);
+    border: 1px solid var(--stl-color-border);
     flex: 1 1 50%;
     gap: 12px;
   }
@@ -113,7 +114,7 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
 
   .pagination-links__link__divider {
     border: 0;
-    border-inline-start: 1px solid var(--stl-ui-border);
+    border-inline-start: 1px solid var(--stl-color-border);
     align-self: stretch;
   }
 
@@ -136,18 +137,18 @@ const { prev, next } = (await getPrevNextPage(Astro.locals.starlightRoute, confi
       font-weight: 500;
     }
     p {
-      font-size: var(--stl-ui-type-scale-text-xs);
-      color: var(--stl-ui-foreground-muted);
+      font-size: var(--stl-typography-scale-xs);
+      color: var(--stl-color-foreground-muted);
     }
   }
-
   .pagination-links__link--quiet:hover {
-    background-color: rgb(from var(--stl-ui-foreground) r g b / 0.05);
+    background-color: var(--stl-color-background-hover);
   }
   .pagination-links__link--emphasized:hover {
-    border-color: var(--stl-ui-border-emphasis);
+    border-color: var(--stl-color-border-strong);
     .pagination-links__page-description h2 {
       text-decoration: underline;
+      text-decoration-color: var(--stl-color-foreground-reduced);
     }
   }
 

package/stl-docs/index.ts

@@ -83,6 +83,8 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
   //   // logger.info(`Client router is disabled`);
   // }
 
+  const userExpressiveCode = typeof config.expressiveCode === 'object' ? config.expressiveCode : {};
+
   return starlight({
     ...config.starlightPassThrough,
     sidebar,
@@ -112,6 +114,24 @@ function stainlessDocsStarlightIntegration(config: NormalizedStainlessDocsConfig
       resolveSrcFile('/stl-docs/tabsMiddleware.ts'),
     ],
     customCss: [resolveSrcFile('/theme.css'), ...config.customCss],
+
+    expressiveCode: {
+      ...userExpressiveCode,
+      themes: userExpressiveCode.themes ?? ['github-light', 'github-dark'],
+      styleOverrides: {
+        ...userExpressiveCode.styleOverrides,
+        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))',
+          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))',
+          ...userExpressiveCode.styleOverrides?.textMarkers,
+        },
+      },
+    },
     plugins,
   });
 }

package/stl-docs/loadStlDocsConfig.ts

@@ -32,6 +32,7 @@ type PassThroughStarlightConfigOptions = Pick<
   | 'lastUpdated'
   | 'pagination'
   | 'sidebar'
+  | 'expressiveCode'
 >;
 
 type ExperimentalStarlightCompatibilityConfig = Pick<
@@ -157,6 +158,7 @@ function normalizeConfig(userConfig: StainlessDocsUserConfig) {
     enableProseMarkdownRendering:
       userConfig.experimental?.disableProseMarkdownRendering === true ? false : true,
     contextMenu: userConfig.contextMenu ?? true,
+    expressiveCode: userConfig.expressiveCode,
     renderPageDescriptions: userConfig.renderPageDescriptions ?? true,
   };
 

package/styles/code.css

@@ -1,6 +1,6 @@
 .expressive-code {
   .frame {
-    --code-background: var(--sl-color-bg-inline-code);
+    --code-background: var(--stl-color-faint-background);
   }
 
   figure.frame {
@@ -10,19 +10,19 @@
   figure,
   pre {
     border-radius: var(--sl-button-border-radius);
-    border-color: var(--sl-color-hairline);
+    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);
+      border-color: var(--stl-color-border);
     }
 
     pre {
       border-radius: 0 0 var(--sl-button-border-radius) var(--sl-button-border-radius);
-      border-color: var(--sl-color-hairline);
+      border-color: var(--stl-color-border);
     }
   }
 
@@ -32,7 +32,7 @@
     }
 
     .header::before {
-      border-color: var(--sl-color-hairline);
+      border-color: var(--stl-color-border);
     }
 
     .title::after {
@@ -44,7 +44,7 @@
 
 .astro-code {
   border-radius: var(--sl-button-border-radius);
-  border-color: var(--sl-color-hairline);
+  border-color: var(--stl-color-border);
 }
 
 .stl-snippet-request-container {
@@ -121,30 +121,20 @@
 .stl-snippet-dropdown-button-text {
   font-weight: 500;
   font-style: normal;
-  font-family: var(--stldocs-font);
+  font-family: var(--stl-typography-font);
   line-height: 100%;
-  font-size: var(--sl-text-body-sm);
-  color: var(--sl-color-text);
+  font-size: var(--stl-typography-scale-sm);
+  color: var(--stl-color-foreground);
 }
 
-:root[data-theme='light'] {
-  .astro-code,
-  .astro-code span {
-    background-color: var(--sl-color-bg-inline-code) !important;
-  }
-
-  .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;
 }
 
 :root[data-theme='dark'] {
-  /* 
+  /*
     Need to use important to override inline variables. This is the
     recommended pattern in the shiki docs.
 
@@ -155,23 +145,8 @@
   .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;
   }
-
-  .astro-code,
-  .astro-code span {
-    background-color: var(--sl-color-bg-inline-code) !important;
-  }
-
-  .stldocs-snippet-response-pane {
-    .shiki,
-    .shiki span,
-    .astro-code,
-    .astro-code span {
-      background-color: var(--sl-color-bg-inline-code) !important;
-    }
-  }
 }

package/styles/links.css

@@ -1,3 +1,5 @@
+/* TODO: remove for real card component */
+
 .sl-link-card {
   box-shadow: none;
   border-radius: var(--sl-button-border-radius);

package/styles/method-descriptions.css

@@ -20,7 +20,7 @@
         right: 0;
         bottom: 0;
         height: 3rem;
-        background: linear-gradient(to bottom, transparent, var(--stldocs-color-bg));
+        background: linear-gradient(to bottom, transparent, var(--stl-color-background));
         pointer-events: none;
       }
 

package/styles/overrides.css

@@ -3,7 +3,7 @@ html {
 }
 
 .site-title {
-  color: var(--sl-color-white);
+  color: var(--stl-color-foreground);
 
   img {
     height: 32px;
@@ -11,50 +11,46 @@ html {
   }
 }
 
-/* Hide the text in the theme select dropdown */
-starlight-theme-select select {
-  width: 0;
-  overflow: hidden;
-}
-
-.custom-select-wrapper select {
-  background-color: var(--sl-color-bg-ui);
-  border: 1px solid var(--sl-color-hairline);
-  border-radius: var(--sl-button-border-radius);
-
-  &:hover {
-    border-color: var(--sl-color-hairline-shade);
-  }
-}
-
-.content-panel {
-  border-top: 0;
-}
-
+/* TODO: apply real button classes here */
 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);
+  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;
 
   &:hover {
-    border-color: var(--sl-color-hairline-shade);
+    background-color: var(--stl-color-ui-background-hover);
   }
 }
 
 mobile-starlight-toc {
   nav {
-    background-color: var(--sl-color-bg);
+    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 {
+      background-color: var(--stl-color-ui-background-hover);
+      border-color: var(--stl-color-border); /* unchanged */
+    }
+  }
+  .dropdown {
+    background-color: var(--stl-color-background);
+    border-color: var(--stl-color-border-faint);
   }
-
   summary {
     padding: 2rem 1rem;
-    border-bottom-color: var(--sl-color-hairline-light);
+    border-color: var(--stl-color-border-faint);
+  }
+  a {
+    border-color: var(--stl-color-border-faint);
   }
 }
 

package/styles/sdk_select.css

@@ -8,6 +8,6 @@
     }
   }
   .stldocs-icon.http path {
-    fill: var(--stldocs-color-text);
+    fill: var(--stl-color-foreground);
   }
 }

package/styles/search.css

@@ -15,42 +15,41 @@ site-search {
     padding: 0;
     width: var(--sl-button-size);
     justify-content: center;
-    background-color: var(--sl-color-bg-ui);
-    border: 1px solid var(--sl-color-hairline);
+    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);
 
     &:hover {
-      border-color: var(--sl-color-hairline-shade);
-      background: color-mix(in oklch, var(--stl-ui-foreground) 5%, var(--stl-ui-inverse-foreground));
+      background: var(--stl-color-ui-background-hover);
     }
 
     span {
-      font-size: var(--sl-text-sm);
-      color: var(--sl-color-text-secondary);
+      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);
     }
 
     > svg {
-      width: var(--sl-text-sm);
-      height: var(--sl-text-sm);
+      width: var(--stl-typography-scale-sm);
+      height: var(--stl-typography-scale-sm);
     }
   }
 
   button > kbd {
     border-radius: 0.25rem;
-    font-size: var(--sl-text-2xs);
+    font-size: var(--stl-typography-scale-xs);
     gap: 0.25em;
     padding-inline: 0.375rem;
-    background-color: var(--sl-color-gray-6);
+    background-color: var(--stl-color-muted-background);
     margin-right: -0.3rem;
   }
 
   kbd {
     font-family: var(--__sl-font);
-    color: var(--sl-color-text);
+    color: var(--stl-color-foreground-reduced);
   }
 }
 

package/styles/sidebar.css

@@ -15,11 +15,11 @@
   --stl-sidebar-item-padding-inline: 12px;
   --stl-sidebar-item-padding-block: 6px;
   --stl-sidebar-indent: 12px;
-  font-size: var(--stl-ui-type-scale-text-sm);
+  font-size: var(--stl-typography-scale-sm);
 }
 
 .sidebar-pane {
-  border-inline-end: 1px solid var(--sl-color-hairline-light);
+  border-inline-end: 1px solid var(--stl-color-border-faint);
 }
 
 .sidebar-content {
@@ -60,12 +60,12 @@
     padding: var(--stl-sidebar-item-padding-block) var(--stl-sidebar-item-padding-inline);
     &:hover,
     &[aria-current='page'] {
-      color: var(--stl-ui-foreground);
+      color: var(--stl-color-foreground);
     }
   }
 
   li a {
-    color: var(--stl-ui-foreground-secondary);
+    color: var(--stl-color-foreground-reduced);
     font-weight: 400;
     display: flex;
     text-decoration: none;
@@ -75,7 +75,7 @@
 
     &:hover {
       text-decoration: underline;
-      text-decoration-color: var(--stl-ui-foreground-secondary);
+      text-decoration-color: var(--stl-color-foreground-reduced);
     }
     &[aria-current='page'] {
       font-weight: 500;
@@ -83,7 +83,7 @@
   }
   li:has(> a:is(:hover, [aria-current='page'])),
   summary:hover {
-    background-color: var(--stl-ui-muted-background);
+    background-color: var(--stl-color-background-hover);
   }
 
   /* nested list items have flat left edge */
@@ -95,10 +95,10 @@
     padding: 0;
   }
   ul ul li {
-    border-inline-start: 1px solid var(--stl-ui-border-muted);
+    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-ui-foreground-accent);
+      border-inline-start: 2px solid var(--stl-color-foreground-accent);
       & > a {
         margin-left: -1px;
       }
@@ -114,28 +114,36 @@
   }
   a[data-stldocs-method] {
     --stl-ui-sidebar-icon-size-inner: 16px;
-    --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-swatch-gray-white);
+    --stl-ui-sidebar-icon-color-inverse-background: var(--stl-ui-sidebar-icon-color);
 
     &[data-stldocs-method='get'] {
-      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-green-base);
-      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-green-faint);
-      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-green-muted);
+      --stl-ui-sidebar-icon-color: var(--stl-color-green);
+      --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);
     }
     &[data-stldocs-method='post'] {
-      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-blue-base);
-      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-blue-faint);
-      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-blue-muted);
+      --stl-ui-sidebar-icon-color: var(--stl-color-blue);
+      --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);
     }
     &[data-stldocs-method='patch'],
     &[data-stldocs-method='put'] {
-      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-orange-base);
-      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-orange-faint);
-      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-orange-muted);
+      --stl-ui-sidebar-icon-color: var(--stl-color-orange);
+      --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);
     }
     &[data-stldocs-method='delete'] {
-      --stl-ui-sidebar-icon-color: var(--stl-ui-swatch-red-base);
-      --stl-ui-sidebar-icon-color-faint: var(--stl-ui-swatch-red-faint);
-      --stl-ui-sidebar-icon-color-muted: var(--stl-ui-swatch-red-muted);
+      --stl-ui-sidebar-icon-color: var(--stl-color-red);
+      --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);
     }
 
     &[data-stldocs-method='get'] {
@@ -153,9 +161,13 @@
 
   a[data-stldocs-resource] {
     /* not yet implemented in markup */
-    --stl-ui-sidebar-icon-color: var(--stl-ui-foreground-muted);
-    --stl-ui-sidebar-icon-color-faint: var(--stl-ui-muted-background);
-    --stl-ui-sidebar-icon-color-inverse: var(--stl-ui-inverse-foreground);
+    --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-inverse-background: var(--stl-color-inverse-background);
+    --stl-ui-sidebar-icon-color-inverse-foreground: var(--stl-color-inverse-foreground);
+
     --stl-ui-sidebar-icon-size-inner: 14px;
     --stl-ui-sidebar-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"/><path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"/></svg>');
   }
@@ -176,8 +188,9 @@
     }
     &::before {
       border-radius: 4px;
-      background-color: var(--stl-ui-sidebar-icon-color-faint);
+      background-color: var(--stl-ui-sidebar-icon-color-background);
       flex: 0 0 auto;
+      border: 1px solid var(--stl-ui-sidebar-icon-color-border, transparent);
     }
     /* yuck (we can clean this up once we are changing sidebar markup) */
     &::after {
@@ -194,15 +207,15 @@
 
     &:hover {
       &::before {
-        background-color: var(--stl-ui-sidebar-icon-color-muted);
+        background-color: var(--stl-ui-sidebar-icon-color-background-hover);
       }
     }
     &[aria-current='page'] {
       &::before {
-        background-color: var(--stl-ui-sidebar-icon-color);
+        background-color: var(--stl-ui-sidebar-icon-color-inverse-background);
       }
       &::after {
-        background-color: var(--stl-ui-sidebar-icon-color-inverse);
+        background-color: var(--stl-ui-sidebar-icon-color-inverse-foreground);
       }
     }
   }

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,7 +1,9 @@
 .right-sidebar-panel {
+  font-size: var(--stl-typography-scale-sm);
+
   nav > ul {
     padding-top: 0;
-    border-left: 1px solid var(--sl-color-hairline-light);
+    border-left: 1px solid var(--stl-color-border);
   }
 
   ul ul {
@@ -12,24 +14,25 @@
     --pad-inline: 1rem;
     font-weight: 400;
     padding-block: 0.32rem;
-    color: var(--sl-color-text-secondary);
+    color: var(--stl-color-foreground-reduced);
     position: relative;
+    font-size: inherit;
 
     &:hover {
       text-decoration: underline;
-      color: var(--sl-color-text);
-      text-decoration-color: var(--sl-color-text-tertiary);
+      color: var(--stl-color-foreground);
+      text-decoration-color: var(--stl-color-foreground-reduced);
     }
 
     &[aria-current='true'] {
-      color: var(--sl-color-text-accent);
+      color: var(--stl-color-foreground-accent);
 
       &::after {
         content: '';
         position: absolute;
         height: 100%;
         width: 2px;
-        background-color: var(--sl-color-text-accent);
+        background-color: var(--stl-color-foreground-accent);
         left: -1px;
         top: 0;
       }
@@ -37,8 +40,8 @@
   }
 
   h2 {
-    color: var(--stldocs-color-text-secondary);
-    font-size: var(--stldocs-font-size-small);
+    color: var(--stl-color-foreground-reduced);
+    font-size: inherit;
     line-height: 150%;
     text-decoration: none;
     font-weight: 400;

package/theme.css

@@ -2,7 +2,6 @@
 @layer starlight;
 
 @import './styles/fonts.css';
-@import './styles/variables.css';
 @import './styles/links.css';
 @import './styles/sidebar.css';
 @import './styles/search.css';
@@ -12,12 +11,15 @@
 @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 './components/variables.css';