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

package/dist/styles/main.css

@@ -15,8 +15,8 @@
       align-items: center;
 
       .stldocs-overview-header-info-timestamp {
-        font-size: var(--stldocs-font-size-small);
-        color: var(--stldocs-color-text);
+        font-size: var(--stl-typography-scale-xs);
+        color: var(--stl-color-foreground);
         opacity: 50%;
       }
     }
@@ -39,7 +39,7 @@
       .stldocs-resource-title {
         .stldocs-icon {
           margin-left: 8px;
-          color: var(--stldocs-color-text-tertiary);
+          color: var(--stl-color-foreground-muted);
           vertical-align: middle;
           display: inline;
           height: 1rem;
@@ -47,23 +47,23 @@
 
         .stldocs-resource-title-segment {
           margin-right: 8px;
-          color: var(--stldocs-color-text);
+          color: var(--stl-color-foreground);
 
           &:not(:last-child) {
-            color: var(--stldocs-color-text-secondary);
+            color: var(--stl-color-foreground-reduced);
             font-weight: 400;
           }
         }
       }
 
       .stldocs-resource-name {
-        font-family: var(--stldocs-font-mono);
-        color: var(--stldocs-color-text);
+        font-family: var(--stl-typography-font-mono);
+        color: var(--stl-color-foreground);
       }
 
       .stldocs-resource-description {
-        font-size: var(--stldocs-font-size-body);
-        color: var(--stldocs-color-text-secondary);
+        font-size: var(--stl-typography-scale-base);
+        color: var(--stl-color-foreground-reduced);
         line-height: 150%;
       }
     }
@@ -75,7 +75,7 @@
 
         .stldocs-resource-content-group-model-title {
           padding-top: var(--stldocs-content-padding);
-          color: var(--stldocs-color-text-tertiary);
+          color: var(--stl-color-foreground-muted);
           font-weight: normal;
           font-size: 1rem;
           padding-bottom: 0.5rem;
@@ -83,7 +83,7 @@
         }
 
         .stldocs-resource-content-group-name {
-          color: var(--stldocs-color-text-muted);
+          color: var(--stl-color-foreground-muted);
         }
 
         .stldocs-resource-content-properties {
@@ -122,42 +122,12 @@
 
   .stldocs-method-signature {
     max-width: var(--stldocs-content-width);
-    font-family: var(--stldocs-font-mono);
-    font-size: var(--stldocs-font-size-body);
-    color: var(--stldocs-color-text-tertiary);
-    white-space: pre-wrap;
-    word-wrap: break-word;
     overflow: hidden;
     text-overflow: ellipsis;
-    line-height: 1.5rem;
-
-    .stldocs-signature-qualified {
-      color: var(--stldocs-color-text-secondary);
-      font-weight: 400;
-    }
-
-    .stldocs-signature-name {
-      color: var(--stldocs-color-text);
-      font-weight: 600;
-    }
-
-    .stldoc-signature-params {
-      .stldocs-text-identifier {
-        color: var(--stldocs-color-text);
-      }
-    }
-
-    .stldocs-type {
-      color: var(--stldocs-color-text);
-    }
-
-    .stldocs-type-preview[data-stldocs-type-preview='properties'] {
-      display: none;
-    }
   }
 
   .stldocs-method-description {
-    color: var(--stldocs-color-text-muted);
+    color: var(--stl-color-foreground-muted);
     height: 1.7rem;
     overflow-y: hidden;
     line-height: 1.7rem;
@@ -178,9 +148,9 @@
   padding: 0;
 
   .stldocs-method-route-endpoint {
-    font-family: var(--stldocs-font-mono);
-    font-size: var(--stldocs-font-size-body);
-    color: var(--stldocs-color-text-tertiary);
+    font-family: var(--stl-typography-font-mono);
+    font-size: var(--stl-typography-scale-sm);
+    color: var(--stl-color-foreground-reduced);
     align-content: center;
     line-height: 120%;
     overflow: hidden;
@@ -196,7 +166,7 @@
     padding: 4px 8px 4px 4px;
     text-transform: uppercase;
     border-radius: 4px;
-    font-size: var(--stldocs-font-size-body-xs);
+    font-size: var(--stl-typography-scale-xs);
     line-height: 100%;
     align-content: center;
     font-weight: 600;
@@ -221,6 +191,7 @@
   flex-direction: column;
   gap: 0.8rem;
   padding: 0.5rem 0;
+  font-size: var(--stl-typography-scale-sm);
 
   .stldocs-expander-summary-content {
     width: 100%;
@@ -238,13 +209,13 @@
     flex-direction: column;
 
     & > .stldocs-property-type > .stldocs-text-identifier {
-      color: var(--stldocs-color-text);
+      color: var(--stl-color-foreground);
     }
   }
 
   .stldocs-property-type {
-    font-family: var(--stldocs-font-mono);
-    color: var(--stldocs-color-text-muted);
+    font-family: var(--stl-typography-font-mono);
+    color: var(--stl-color-foreground-muted);
   }
 
   .stldocs-property-type,
@@ -256,22 +227,21 @@
   }
 
   .stldocs-property-deprecated {
-    font-family: var(--stldocs-font);
-    color: var(--stldocs-color-red);
-    font-size: var(--stldocs-font-size-body);
+    font-family: var(--stl-typography-font);
+    color: var(--stl-color-foreground-red);
+    font-size: var(--stl-typography-scale-sm);
     font-weight: 600;
   }
 
   .stldocs-property-deprecated-message {
-    color: var(--stldocs-color-red);
-    font-size: var(--stldocs-font-size-small);
+    color: var(--stl-color-foreground-red);
+    font-size: var(--stl-typography-scale-sm);
   }
 
   .stldocs-property-declaration {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    font-size: var(--stldocs-font-size-body);
     flex: 1;
     min-width: 0;
 
@@ -281,29 +251,28 @@
   }
 
   .stldocs-property-description {
-    font-size: 0.9rem;
-    color: var(--stldocs-color-text-secondary);
+    font-size: var(--stl-typography-scale-sm);
+    color: var(--stl-color-foreground-reduced);
 
-    & .stldocs-content {
-      color: var(--stldocs-color-text-secondary);
+    .stldocs-content {
+      color: inherit;
+      font-size: inherit;
     }
   }
 
   .stldocs-property-name {
-    font-family: var(--stldocs-font-mono);
-    font-size: var(--stldocs-font-size-body);
-    color: var(--stldocs-color-text-bright);
+    font-family: var(--stl-typography-font-mono);
+    color: var(--stl-color-foreground);
     font-weight: 700;
   }
 
   .stldocs-property-annotation {
-    color: var(--stldocs-color-text-tertiary);
-    font-size: var(--stldocs-font-size-body);
+    color: var(--stl-color-foreground-reduced);
   }
 
   .stldocs-property-typename {
-    font-size: var(--stldocs-font-size-small);
-    color: var(--stldocs-color-text-tertiary);
+    font-size: var(--stl-typography-scale-xs);
+    color: var(--stl-color-foreground-muted);
     line-height: 175%;
 
     .stldocs-type-reference {
@@ -326,41 +295,25 @@
     gap: 0.5rem;
     text-transform: lowercase;
     line-height: 1.5rem;
-
-    [data-badge-id='deprecated'] {
-      color: var(--stldocs-color-red);
-      background-color: var(--stldocs--color-red-low);
-      padding: 0px 6px;
-      border-radius: 4px;
-      text-transform: capitalize;
-    }
-
-    [data-badge-id='optional'] {
-      background-color: var(--stldocs-color-bg-inline-code);
-      padding: 0px 6px;
-      border-radius: 4px;
-      text-transform: capitalize;
-    }
   }
 
   .stldocs-property-constraints {
     display: flex;
-    font-size: var(--stldocs-font-size-body);
   }
 
   .stldocs-property-constraint {
-    color: var(--stldocs-color-text-muted);
+    color: var(--stl-color-foreground-reduced);
 
     &:not(:last-child) {
       &::after {
         content: ', ';
         margin-right: 0.4rem;
-        color: var(--stldocs-color-text-tertiary);
+        color: var(--stl-color-foreground-reduced);
       }
     }
 
     .stldocs-property-constraint-name {
-      color: var(--stldocs-color-text-tertiary);
+      color: var(--stl-color-foreground-reduced);
 
       &::after {
         content: ':';
@@ -370,8 +323,8 @@
 
     .stldocs-property-constraint-value {
       background-color: var(--stldocs-color-bg-inline-code);
-      color: var(--stldocs-color-text-secondary);
-      font-family: var(--stldocs-font-mono);
+      color: var(--stl-color-foreground-reduced);
+      font-family: var(--stl-typography-font-mono);
       border-radius: 4px;
       padding: 3px 4px;
     }
@@ -412,7 +365,66 @@
   border: 0;
 }
 
+.stldocs-root .stldocs-badge {
+  display: inline-block;
+  background-color: var(--stl-color-muted-background);
+  padding: 0 0.5rem;
+  border-radius: 4px;
+  font-size: var(--stl-typography-scale-xs);
+  font-weight: 500;
+
+  &[data-badge-id='deprecated'] {
+    background-color: var(--stl-color-red-muted-background);
+    color: var(--stl-color-red-muted-foreground);
+    text-transform: capitalize;
+  }
+
+  &[data-badge-id='optional'] {
+    background-color: var(--stl-color-muted-background);
+    text-transform: capitalize;
+  }
+}
+
 /* Method Pages */
+
+.stldocs-root .stldocs-method-signature {
+  font-family: var(--stl-typography-font-mono);
+  font-size: var(--stl-typography-scale-sm);
+  color: var(--stl-color-foreground-muted);
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  font-weight: 400;
+  line-height: 1.5rem;
+
+  .stldocs-signature-qualified {
+    color: var(--stl-color-foreground-reduced);
+    font-weight: 400;
+  }
+
+  .stldocs-signature-name {
+    color: var(--stl-color-foreground);
+    font-weight: 600;
+  }
+
+  .stldoc-signature-params {
+    .stldocs-text-identifier {
+      color: var(--stl-color-foreground);
+    }
+  }
+
+  .stldocs-type {
+    color: var(--stl-color-foreground);
+  }
+
+  .stldocs-type-preview[data-stldocs-type-preview='properties'] {
+    display: none;
+  }
+
+  .stldocs-method-badges {
+    margin-top: 1rem;
+  }
+}
+
 .stldocs-root .stldocs-method {
   .stldocs-method-content-column {
     display: contents;
@@ -422,64 +434,21 @@
     padding: var(--stldocs-title-padding-y) var(--stldocs-content-padding) var(--stldocs-content-padding);
 
     .stldocs-method-title {
-      font-size: var(--stldocs-font-size-h1);
+      font-size: var(--stl-typography-text-h1);
       letter-spacing: -0.03em;
     }
 
-    .stldocs-method-badges {
-      margin-top: 1rem;
-
-      .stldocs-badge {
-        display: inline-block;
-        background-color: var(--stldocs-color-gray-5);
-        padding: 0 0.5rem;
-        border-radius: 4px;
-        font-size: var(--stldocs-font-size-small);
-        font-weight: 500;
-      }
-    }
-
     .stldocs-method-signature {
       margin-top: 0.75rem;
-      font-family: var(--stldocs-font-mono);
-      font-size: var(--stldocs-font-size-body);
-      color: var(--stldocs-color-text-tertiary);
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      font-weight: 400;
-
-      .stldocs-signature-qualified {
-        color: var(--stldocs-color-text-secondary);
-        font-weight: 400;
-      }
-
-      .stldocs-signature-name {
-        color: var(--stldocs-color-text);
-        font-weight: 600;
-      }
-
-      .stldoc-signature-params {
-        .stldocs-text-identifier {
-          color: var(--stldocs-color-text);
-        }
-      }
-
-      .stldocs-type {
-        color: var(--stldocs-color-text);
-      }
     }
 
     .stldocs-method-route {
       padding-top: 12px;
     }
-
-    .stldocs-type-preview[data-stldocs-type-preview='properties'] {
-      display: none;
-    }
   }
 
   .stldocs-method-description {
-    grid-area: 1 / 1/ 2/ 2;
+    grid-area: 1 / 1 / 2 / 2;
     padding-bottom: var(--stldocs-content-padding);
 
     code {
@@ -490,7 +459,7 @@
 
   .stldocs-method-example {
     margin-top: 1rem;
-    grid-area: 2/ 1/ 3/ 2;
+    grid-area: 2 / 1 / 3 / 2;
 
     .stldocs-snippet-multi-response {
       display: none;
@@ -498,7 +467,7 @@
   }
 
   .stldocs-snippet-multi-response {
-    border: 1px solid var(--stldocs-color-hairline);
+    border: 1px solid var(--stl-color-border);
     border-radius: 12px;
 
     .stldocs-snippet {
@@ -512,11 +481,12 @@
 
   .stldocs-method-info {
     padding: var(--stldocs-content-padding) 0;
-    grid-area: 3/ 1/ 4/ 2;
+    grid-area: 3 / 1 / 4 / 2;
     display: flex;
     gap: 2rem;
     flex-direction: column;
     margin-top: 2.5rem;
+    font-size: var(--stl-typography-scale-sm);
 
     h5 {
       display: flex;
@@ -541,13 +511,14 @@
     padding: var(--stldocs-content-padding) 0;
 
     .stldocs-method-description p {
-      color: var(--stldocs-color-text-secondary);
+      color: var(--stl-color-foreground-reduced);
       line-height: 150%;
     }
 
     h5 {
       font-weight: 400;
-      color: var(--stldocs-color-text-tertiary);
+      color: var(--stl-color-foreground-muted);
+      font-size: var(--stl-typography-scale-base);
     }
 
     .stldocs-method-parameters,
@@ -574,32 +545,26 @@
     border-radius: 16px;
     background-color: transparent;
     padding: 0;
-    /* TODO: Update docs-ui to use stl-ui variables
-    * 14px. Should match var(--stl-ui-typography-text-body-sm)
-    */
-    font-size: 0.875rem;
-    font-family: var(--stldocs-font-mono);
+    font-size: var(--stl-typography-scale-sm);
+    font-family: var(--stl-typography-font-mono);
 
     .stldocs-snippet-request {
-      border: 1px solid var(--stldocs-color-hairline);
+      border: 1px solid var(--stl-color-border);
       border-radius: 12px;
       position: relative;
 
       .stldocs-snippet-code {
-        background-color: var(--stldocs-color-gray-8);
         border-bottom-left-radius: 12px;
         border-bottom-right-radius: 12px;
       }
     }
 
     .stldocs-snippet-request-title {
-      --stldocs-snippet-request-title-bg: var(--stldocs-color-bg);
-
       display: flex;
       justify-content: space-between;
-      background-color: var(--stldocs-snippet-request-title-bg);
-      color: var(--stldocs-color-snippet-title-muted);
-      border-bottom: 1px solid var(--stldocs-color-hairline);
+      background-color: var(--stl-color-background);
+      color: var(--stl-color-foreground-reduced);
+      border-bottom: 1px solid var(--stl-color-border);
       border-top-right-radius: 12px;
       border-top-left-radius: 12px;
       padding: 0.5rem;
@@ -621,9 +586,9 @@
         font-weight: 500;
         font-style: normal;
         line-height: 100%;
-        font-size: var(--stldocs-font-size-body);
-        font-family: var(--stldocs-font);
-        color: var(--stldocs-color-text);
+        font-size: inherit;
+        font-family: var(--stl-typography-font);
+        color: var(--stl-color-foreground);
         margin: 0;
 
         overflow: hidden;
@@ -642,13 +607,13 @@
       }
 
       .stldocs-snippet-request-title-content {
-        font-family: var(--stldocs-font);
+        font-family: var(--stl-typography-font);
         display: flex;
         gap: 0.5rem;
 
         .stldocs-snippet-request-title-language {
           position: relative;
-          color: var(--stldocs-color-text);
+          color: var(--stl-color-foreground);
           cursor: pointer;
           display: flex;
           align-items: center;
@@ -666,8 +631,8 @@
 
     .stldocs-snippet-response-pane {
       padding: 0.5rem;
-      background-color: var(--stldocs-color-bg-inline-code);
       display: none;
+      --shiki-background: var(--stl-color-faint-background);
 
       &.stldocs-snippet-response-pane-active {
         display: block;
@@ -676,14 +641,6 @@
 
     .stldocs-snippet-response {
       margin-top: 1rem;
-
-      .stldocs-snippet-response-title {
-        display: flex;
-        gap: 0.5rem;
-        color: var(--stldocs-color-snippet-title-muted);
-        padding: 0 1rem;
-        font-family: var(--stldocs-font);
-      }
     }
   }
 
@@ -705,11 +662,9 @@
     line-height: 1.75;
     transition: height 240ms ease;
     will-change: height;
-    background-color: var(--stldocs-color-gray-8);
 
     .shiki {
       padding: 1rem;
-      --shiki-dark-bg: var(--sl-color-bg) !important;
     }
 
     pre.shiki {
@@ -720,7 +675,7 @@
 
         &::before {
           content: counter(codeblock-line);
-          color: var(--sl-color-text-tertiary);
+          color: var(--stl-color-foreground-muted);
           margin-right: 1rem;
           opacity: 0.5;
           display: inline-flex;
@@ -728,7 +683,7 @@
         }
 
         &.ellipsis {
-          color: var(--sl-color-text-tertiary) !important;
+          color: var(--stl-color-foreground-muted) !important;
           opacity: 0.5;
         }
       }
@@ -752,35 +707,37 @@
         overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
-        color: var(--stldocs-color-text-secondary);
+        color: var(--stl-color-foreground-reduced);
       }
 
       button:hover {
-        background-color: #ebebeb;
+        background-color: var(--stl-color-background-hover);
       }
     }
 
     .stldocs-snippet-response-tab-item-active {
-      border-color: var(--stldocs-color-bg-accent);
+      border-color: var(--stl-color-accent-background);
 
       button {
-        color: var(--stldocs-color-text);
+        color: var(--stl-color-foreground);
       }
     }
 
     &.stldocs-snippet-response-tab-single-return {
-      background-color: var(--stldocs-color-bg-inline-code);
+      background-color: var(--stl-color-faint-background);
       border-top-left-radius: 12px;
       border-top-right-radius: 12px;
 
       .stldocs-snippet-response-tab-item {
         border: none;
-        color: var(--stldocs-color-text-secondary);
+        color: var(--stl-color-foreground-reduced);
         font-weight: 400;
+        display: flex;
 
         button {
           justify-content: flex-start;
           cursor: default;
+          height: auto;
 
           &:hover {
             background-color: transparent;
@@ -798,8 +755,8 @@
 }
 
 .stldocs-root .stldocs-language-block {
-  background-color: var(--stldocs-color-bg);
-  border: 1px solid var(--stldocs-color-hairline);
+  background-color: var(--stl-color-background);
+  border: 1px solid var(--stl-color-border);
   border-radius: 8px;
   padding: 16px;
   display: flex;
@@ -812,7 +769,7 @@
 
     .stldocs-language-block-content-icon {
       display: inline-flex;
-      border: 1px solid var(--stldocs-color-hairline);
+      border: 1px solid var(--stl-color-border);
       border-radius: 4px;
       padding: 12px;
       aspect-ratio: 1 / 1;
@@ -825,8 +782,8 @@
       }
 
       .stldocs-language-block-content-info-version {
-        font-family: var(--stldocs-font-mono);
-        font-size: var(--stldocs-font-size-code);
+        font-family: var(--stl-typography-font-mono);
+        font-size: var(--stl-typography-scale-sm);
         font-weight: 200;
       }
     }
@@ -834,11 +791,11 @@
 
   .stldocs-language-block-install {
     display: flex;
-    font-family: var(--stldocs-font-mono);
-    font-size: var(--stldocs-font-size-code);
+    font-family: var(--stl-typography-font-mono);
+    font-size: var(--stl-typography-scale-sm);
     background-color: var(--stldocs-color-bg-inline-code);
-    border: 1px solid var(--stldocs-color-hairline);
-    color: var(--stldocs-color-text-secondary);
+    border: 1px solid var(--stl-color-border);
+    color: var(--stl-color-foreground-reduced);
     border-radius: 4px;
     padding: 4px 8px;
 
@@ -867,14 +824,6 @@
   }
 }
 
-starlight-theme-select label {
-  height: 2rem;
-}
-
-starlight-theme-select select {
-  height: 100%;
-}
-
 /* Media Queries */
 @media (min-width: 1280px) {
   .stldocs-root .stldocs-method.stldocs-method-double-pane {
@@ -903,15 +852,6 @@ starlight-theme-select select {
     .stldocs-resource-content-properties {
       margin-left: 0 !important;
     }
-
-    .stldocs-snippet-response-closed {
-      background-color: var(--stldocs-color-snippet-box-bg);
-
-      .stldocs-snippet-response {
-        max-height: 1000px;
-        opacity: 1;
-      }
-    }
   }
 }
 
@@ -938,7 +878,13 @@ starlight-theme-select select {
         padding: 0.5rem;
         display: flex;
         flex-direction: column;
-        background-color: var(--stldocs-color-gray-8);
+        background-color: var(--stl-color-faint-background);
+        border: 1px solid var(--stl-color-border);
+
+        .stldocs-snippet-request {
+          background-color: var(--stl-color-background);
+          --shiki-background: var(--stl-color-background);
+        }
 
         .stldocs-snippet-response {
           display: block;
@@ -947,6 +893,7 @@ starlight-theme-select select {
         .stldocs-snippet-response-pane {
           position: relative;
           padding: 0;
+          --shiki-background: transparent;
 
           &::before {
             content: '';
@@ -956,7 +903,7 @@ starlight-theme-select select {
             position: absolute;
             top: calc(-0.5rem);
             left: -1rem;
-            background-color: var(--stldocs-color-hairline);
+            background-color: var(--stl-color-border);
           }
         }
 
@@ -985,6 +932,7 @@ starlight-theme-select select {
 
           .stldocs-snippet {
             background-color: transparent;
+            border: none;
           }
         }
       }
@@ -1011,30 +959,5 @@ starlight-theme-select select {
       }
     }
   }
-
-  :root[data-theme='dark'] {
-    .stldocs-root {
-      .stldocs-method.stldocs-method-double-pane .stldocs-method-body {
-        .stldocs-snippet {
-          background-color: var(--stldocs-color-gray-9);
-        }
-
-        .stldocs-snippet-response-tab {
-          .stldocs-snippet-response-tab-item button:hover {
-            background-color: #222222;
-          }
-          &.stldocs-snippet-response-tab-single-return {
-            .stldocs-snippet-response-tab-item button:hover {
-              background-color: transparent;
-            }
-          }
-        }
-      }
-
-      .stldocs-snippet-code {
-        background-color: var(--stldocs-color-gray-9);
-      }
-    }
-  }
 }