@stainless-api/docs-ui 0.1.0-beta.37 → 0.1.0-beta.39

package/dist/styles/primitives.css

@@ -1,32 +1,32 @@
 /* Design System Defaults */
 .stldocs-root {
-  font-family: var(--stldocs-font);
-  background-color: var(--stldocs-color-bg);
-  color: var(--stldocs-color-text);
+  font-family: var(--stl-typography-font);
+  background-color: var(--stl-color-background);
+  color: var(--stl-color-foreground);
   letter-spacing: -0.01em;
 
-  h1 {
-    font-size: var(--stldocs-font-size-h1);
+  :where(h1) {
+    font-size: var(--stl-typography-text-h1);
     letter-spacing: -0.03em;
   }
 
-  h2 {
-    font-size: var(--stldocs-font-size-h2);
+  :where(h2) {
+    font-size: var(--stl-typography-text-h2);
     letter-spacing: -0.03em;
   }
 
-  h3 {
-    font-size: var(--stldocs-font-size-h3);
+  :where(h3) {
+    font-size: var(--stl-typography-text-h3);
     letter-spacing: -0.02em;
   }
 
-  h4 {
-    font-size: var(--stldocs-font-size-h4);
+  :where(h4) {
+    font-size: var(--stl-typography-text-h4);
     letter-spacing: -0.02em;
   }
 
-  h5 {
-    font-size: var(--stldocs-font-size-h5);
+  :where(h5) {
+    font-size: var(--stl-typography-text-h5);
     letter-spacing: -0.02em;
   }
 }
@@ -34,13 +34,13 @@
 /* Color mapping for types */
 .stldocs-root {
   .stldocs-text-keyword {
-    color: var(--stldocs-color-text-muted);
+    color: var(--stl-color-foreground-muted);
   }
 
   .stldocs-property-type,
   .stldocs-property-declaration,
   .stldocs-type:not(.stldocs-property-typename .stldocs-type) {
-    font-family: var(--stldocs-font-mono);
+    font-family: var(--stl-typography-font-mono);
 
     .stldocs-type-keyword {
       color: var(--stldocs-syntax-color-orange);
@@ -57,11 +57,11 @@
     .stldocs-text-punctuation,
     .stldocs-truncation,
     .stldocs-type-array {
-      color: var(--stldocs-color-text-tertiary);
+      color: var(--stl-color-foreground-reduced);
     }
 
     .stldocs-type-plain {
-      font-family: var(--stldocs-font);
+      font-family: var(--stl-typography-font);
     }
 
     .stldocs-type-reference {
@@ -81,12 +81,12 @@
     }
 
     .stldocs-text-identifier {
-      font-family: var(--stldocs-font-mono);
-      color: var(--stldocs-color-text);
+      font-family: var(--stl-typography-font-mono);
+      color: var(--stl-color-foreground);
     }
 
     .stldocs-type-propertyname .stldocs-text-identifier {
-      font-family: var(--stldocs-font);
+      font-family: var(--stl-typography-font);
       font-weight: 600;
     }
   }
@@ -97,7 +97,7 @@
       .stldocs-truncation,
       .stldocs-type-array,
       .stldocs-text-punctuation {
-        font-family: var(--stldocs-font);
+        font-family: var(--stl-typography-font);
       }
     }
   }
@@ -157,8 +157,8 @@
 
       & > .stldocs-icon {
         vertical-align: middle;
-        color: var(--stldocs-color-text-tertiary);
-        background-color: var(--stldocs-color-bg);
+        color: var(--stl-color-foreground-muted);
+        background-color: var(--stl-color-background);
       }
 
       & > :last-child {
@@ -190,7 +190,7 @@
       line-height: 150%;
 
       & > .stldocs-property-children {
-        border-left: 1px solid var(--stldocs-color-hairline-light);
+        border-left: 1px solid var(--stl-color-border);
         padding-left: 16px;
 
         .stldocs-expander {
@@ -205,11 +205,11 @@
 /* Markdown content */
 .stldocs-root .stldocs-content {
   a {
-    color: var(--stldocs-color-text-accent);
+    color: var(--stl-color-foreground-accent);
   }
 
   code:not(pre code) {
-    font-family: var(--stldocs-font-mono);
+    font-family: var(--stl-typography-font-mono);
     border-radius: 4px;
     padding: 0 4px;
     background-color: var(--stldocs-color-bg-inline-code);
@@ -253,7 +253,7 @@
 }
 
 .stldocs-root .stldocs-input {
-  border: 1px solid var(--stldocs-color-hairline);
+  border: 1px solid var(--stl-color-border);
   border-radius: 0.3rem;
   padding: 0.5rem;
   display: flex;
@@ -279,7 +279,7 @@
   overflow-y: scroll;
 
   .stldocs-listview-item:not(:last-child) {
-    border-bottom: 1px solid var(--stldocs-color-hairline);
+    border-bottom: 1px solid var(--stl-color-border);
   }
 
   [data-stldocs-listview-selected='true'] > :first-child {
@@ -294,8 +294,8 @@
   }
 
   .stldocs-tooltip-content {
-    border: 1px solid var(--stldocs-color-hairline);
-    background: var(--stldocs-color-bg);
+    border: 1px solid var(--stl-color-border);
+    background: var(--stl-color-background);
     border-radius: 8px;
     padding: 0.2rem 0.4rem;
 
@@ -336,22 +336,22 @@
     svg {
       width: 1rem;
       min-width: 1rem;
-      stroke: var(--stldocs-color-text-secondary);
+      stroke: var(--stl-color-foreground-reduced);
       opacity: 0.25;
       margin: 0;
     }
 
     .stldocs-breadcrumbs-non-link,
     .stldocs-breadcrumbs-link {
-      color: var(--stldocs-color-text-secondary);
-      font-size: var(--stldocs-font-size-small);
+      color: var(--stl-color-foreground-reduced);
+      font-size: var(--stl-typography-scale-sm);
       line-height: 150%;
       text-decoration: none;
     }
 
     .stldocs-breadcrumbs-link:hover {
       text-decoration: underline;
-      color: var(--stldocs-color-text);
+      color: var(--stl-color-foreground);
     }
 
     .stldocs-breadcrumbs-item {
@@ -364,7 +364,7 @@
 }
 
 .stldocs-root .stldocs-expand-toggle {
-  font-size: var(--stldocs-font-size-body);
+  font-size: var(--stl-typography-scale-sm);
   display: flex;
   flex-grow: 1;
   justify-content: flex-end;

package/dist/styles/resets.css

@@ -18,9 +18,9 @@
   /* Markdown content should get prose styling */
   :where(h1, h2, h3, h4, h5):not(.stldocs-markdown, .stldocs-markdown *) {
     display: block;
-    color: var(--stl-ui-foreground);
+    color: var(--stl-color-foreground);
     font-weight: 500;
-    line-height: var(--stl-ui-typography-line-height-headings);
+    line-height: var(--stl-typography-line-height-headings);
   }
 
   display: block;

package/dist/styles/search.css

@@ -18,15 +18,15 @@
       font-size: 0.9rem;
       cursor: pointer;
       background-color: transparent;
-      border: 1px solid var(--stldocs-color-hairline);
+      border: 1px solid var(--stl-color-border);
 
       &:hover,
       &[data-stldocs-toggle-selected='true'] {
         background-color: var(--stldocs-color-selected);
 
         .stldocs-search-filter-count {
-          color: var(--stldocs-color-text-invert);
-          background-color: var(--stldocs-color-text);
+          color: var(--stl-color-inverse-foreground);
+          background-color: var(--stl-color-foreground);
         }
       }
 
@@ -54,9 +54,9 @@
     padding: 0.5rem 0.8rem;
 
     mark {
-      color: var(--stldocs-color-text);
-      background-color: var(--stldocs-color-hairline);
-      border-bottom: 1px dotted var(--stldocs-color-text);
+      color: var(--stl-color-foreground);
+      background-color: var(--stl-color-border);
+      border-bottom: 1px dotted var(--stl-color-foreground);
     }
 
     &[data-stldocs-search-result='resource'] {
@@ -69,8 +69,8 @@
         }
 
         .stldocs-search-result-resource-path {
-          font-family: var(--stldocs-font-mono);
-          color: var(--stldocs-color-text);
+          font-family: var(--stl-typography-font-mono);
+          color: var(--stl-color-foreground);
         }
       }
     }
@@ -86,13 +86,13 @@
         gap: 0.5rem;
 
         .stldocs-method-signature {
-          font-family: var(--stldocs-font-mono);
-          color: var(--stldocs-color-text);
+          font-family: var(--stl-typography-font-mono);
+          color: var(--stl-color-foreground);
           white-space: pre-wrap;
           word-break: break-word;
 
           .stldocs-text-identifier {
-            color: var(--stldocs-color-text);
+            color: var(--stl-color-foreground);
           }
         }
 
@@ -109,14 +109,14 @@
           }
 
           .stldocs-method-route-endpoint {
-            font-family: var(--stldocs-font-mono);
-            color: var(--stldocs-color-text-mid);
+            font-family: var(--stl-typography-font-mono);
+            color: var(--stl-color-foreground-muted);
           }
         }
       }
 
       .stldocs-method-description {
-        color: var(--stldocs-color-text);
+        color: var(--stl-color-foreground);
       }
     }
 
@@ -132,16 +132,16 @@
         gap: 0.5rem;
 
         .stldocs-property-name {
-          font-family: var(--stldocs-font-mono);
+          font-family: var(--stl-typography-font-mono);
         }
 
         .stldocs-property-typename {
-          color: var(--stldocs-color-text-mid);
+          color: var(--stl-color-foreground-muted);
         }
       }
 
       .stldocs-property-description {
-        color: var(--stldocs-color-text);
+        color: var(--stl-color-foreground);
       }
     }
 
@@ -152,8 +152,8 @@
         gap: 0.5rem;
 
         .stldocs-property-type {
-          font-family: var(--stldocs-font-mono);
-          color: var(--stldocs-color-text);
+          font-family: var(--stl-typography-font-mono);
+          color: var(--stl-color-foreground);
         }
       }
     }
@@ -164,7 +164,7 @@
       }
 
       .stldocs-search-result-guide-excerpt {
-        color: var(--stldocs-color-text);
+        color: var(--stl-color-foreground);
       }
 
       .stldocs-search-breadcrumb-item {
@@ -179,7 +179,7 @@
     font-size: 0.8rem;
 
     .stldocs-search-breadcrumb-item {
-      color: var(--stldocs-color-text-mid);
+      color: var(--stl-color-foreground-muted);
     }
 
     .stldocs-icon {
@@ -199,9 +199,9 @@
   inset: 0;
   max-width: 1024px;
   max-height: 80vh;
-  background-color: var(--stldocs-color-bg);
-  color: var(--stldocs-color-text);
-  border: 1px solid var(--stldocs-color-hairline);
+  background-color: var(--stl-color-background);
+  color: var(--stl-color-foreground);
+  border: 1px solid var(--stl-color-border);
   border-radius: 8px;
 
   &:popover-open,

package/dist/styles/sidebar.css

@@ -1,10 +1,10 @@
 .stldocs-sidebar {
-  font-family: var(--stldocs-font);
-  font-size: var(--stldocs-font-size-body);
+  font-family: var(--stl-typography-font);
+  font-size: var(--stl-typography-scale-sm);
 
   a {
     text-decoration: none;
-    color: var(--stldocs-color-text-secondary);
+    color: var(--stl-color-foreground-reduced);
   }
 
   .stldocs-sidebar-resource-title {
@@ -24,7 +24,7 @@
     &[data-selected='true'] {
       & > a,
       & > details > summary > a {
-        color: var(--stldocs-color-text);
+        color: var(--stl-color-foreground);
       }
     }
   }
@@ -33,7 +33,7 @@
     display: block;
 
     a {
-      color: var(--stldocs-color-text);
+      color: var(--stl-color-foreground);
       font-weight: 500;
     }
   }
@@ -49,7 +49,7 @@
 
         & > .stldocs-icon {
           vertical-align: middle;
-          color: var(--stldocs-color-text-tertiary);
+          color: var(--stl-color-foreground-muted);
         }
 
         & > :last-child {

package/dist/styles/variables.css

@@ -1,88 +1,27 @@
 :root {
-  --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-gray-9: #151515;
-
-  --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-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-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-http-get-bg: var(--stl-color-green-muted-background);
+  --stldocs-color-http-get: var(--stl-color-green-muted-foreground);
+  --stldocs-color-http-put-bg: var(--stl-color-orange-muted-background);
+  --stldocs-color-http-put: var(--stl-color-orange-muted-foreground);
+  --stldocs-color-http-post-bg: var(--stl-color-blue-muted-background);
+  --stldocs-color-http-post: var(--stl-color-blue-muted-foreground);
+  --stldocs-color-http-delete-bg: var(--stl-color-red-muted-background);
+  --stldocs-color-http-delete: var(--stl-color-red-muted-foreground);
 
-  --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-syntax-color-green: var(--stl-color-foreground-green);
+  --stldocs-syntax-color-orange: var(--stl-color-foreground-orange);
+  --stldocs-syntax-color-purple: var(--stl-color-foreground-purple);
+  --stldocs-syntax-color-blue: var(--stl-color-foreground-blue);
 
-  --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;
+  --stldocs-color-backdrop-overlay: var(--stl-color-muted-background);
 }