@stainless-api/ui-primitives 0.1.0-beta.8 → 1.0.0-beta.54

package/src/components/details.css

@@ -1,124 +0,0 @@
-/* revert starlight details styles */
-@layer starlight.content {
-  /* artificially increase specificity to outcompete selectors in the same layer whose styles we want to revert */
-  .stl-ui-prose .sl-markdown-content.sl-markdown-content.sl-markdown-content {
-    details,
-    summary,
-    summary::before,
-    summary::marker {
-      all: revert-layer;
-    }
-  }
-}
-
-@layer stl-ui.components {
-  .stl-ui-prose {
-    details {
-      --stl-ui-details-padding: 12px;
-      --stl-ui-details-content-padding-bottom: 4px;
-      --stl-ui-details-marker-size: 1em;
-      --stl-ui-details-marker-margin: calc((1lh - var(--stl-ui-details-marker-size)) / 2);
-      --stl-ui-details-row-gap: 8px;
-      --stl-ui-details-summary-column-gap: 8px;
-      --stl-ui-details-border-radius: var(--stl-ui-layout-border-radius);
-      /* left inset to make content line up with summary content (after chevron) */
-      --stl-ui--internal--details-padding-start: calc(
-        var(--stl-ui-details-padding)
-        + var(--stl-ui-details-marker-size)
-        + var(--stl-ui-details-marker-margin) * 2
-        + var(--stl-ui-details-summary-column-gap)
-      );
-
-      background-color: var(--stl-ui-card-background);
-      border: 1px solid var(--stl-ui-border);
-      border-radius: var(--stl-ui-details-border-radius);
-      font-size: var(--stl-ui-typography-text-body);
-
-      padding: var(--stl-ui-details-padding);
-      /* indent content to line up with left edge of summary content */
-      padding-inline-start: var(--stl-ui--internal--details-padding-start);
-
-      summary {
-        display: block;
-        list-style: none;
-
-        /* summary extends to the edges of the element in order to increase click target */
-        padding: var(--stl-ui-details-padding);
-        padding-inline-start: var(--stl-ui--internal--details-padding-start);
-        margin: calc(-1 * var(--stl-ui-details-padding));
-        margin-inline-start: calc(-1 * var(--stl-ui--internal--details-padding-start));
-
-        cursor: pointer;
-        font-weight: 500;
-
-        border-radius: var(--stl-ui-details-border-radius);
-
-        &::before {
-          content: '';
-          width: var(--stl-ui-details-marker-size);
-          height: var(--stl-ui-details-marker-size);
-          margin: var(--stl-ui-details-marker-margin);
-          background-color: currentColor;
-          display: block;
-          position: absolute;
-          --stl-ui-details--internal--marker-width: calc(var(--stl-ui-details-marker-size) + var(--stl-ui-details-marker-margin) * 2);
-          --stl-ui-details--internal--summary-marker-transform: translateX(calc(-1 * var(--stl-ui-details--internal--marker-width) - var(--stl-ui-details-summary-column-gap)));
-          transform: var(--stl-ui-details--internal--summary-marker-transform);
-
-          --lucide-chevron-right: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNoZXZyb24tcmlnaHQtaWNvbiBsdWNpZGUtY2hldnJvbi1yaWdodCI+PHBhdGggZD0ibTkgMTggNi02LTYtNiIvPjwvc3ZnPg==');
-          mask-image: var(--lucide-chevron-right);
-          mask-size: contain;
-          mask-repeat: no-repeat;
-
-          transition: transform 0.1s ease-out;
-        }
-
-        & > :first-child {
-          margin-top: 0;
-        }
-      }
-
-      &[open] {
-        padding-bottom: calc(var(--stl-ui-details-padding) + var(--stl-ui-details-content-padding-bottom));
-
-        summary {
-          /* padding-bottom shouldn’t extend beyond the row gap while open, i.e. we shouldn’t be negative-margin-placing content overlapping summary */
-          --stl-ui--internal--summary-padding-bottom: min(var(--stl-ui-details-padding), var(--stl-ui-details-row-gap));
-          padding-bottom: var(--stl-ui--internal--summary-padding-bottom);
-          margin-bottom: calc(var(--stl-ui-details-row-gap) - var(--stl-ui--internal--summary-padding-bottom));
-          border-bottom-left-radius: 0;
-          border-bottom-right-radius: 0;
-
-          &::before {
-            transform: var(--stl-ui-details--internal--summary-marker-transform) rotate(90deg);
-          }
-        }
-      }
-
-      summary + * {
-        margin-top: 0;
-      }
-    }
-  }
-
-  .stl-ui-details-group {
-    & > details:has(+ details) {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-      summary {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-    & > details + details {
-      margin-top: 0;
-      border-top: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      summary {
-        border-top-left-radius: 0;
-        border-top-right-radius: 0;
-      }
-    }
-  }
-}

package/src/components/dropdown-button.css

@@ -1,177 +0,0 @@
-/* revert docs-ui resets */
-@layer docs-ui {
-  .stldocs-root .stl-ui-dropdown-button {
-    all: revert-layer;
-
-    * {
-      all: revert-layer;
-    }
-  }
-}
-
-@layer stl-ui.components {
-  .stl-ui-dropdown-button {
-    --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
-    --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
-    --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
-    --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
-    --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
-
-    --stl-ui-dropdown-button-height: 32px;
-    --stl-ui-dropdown-button-padding: 8px 10px;
-    --stl-ui-dropdown-button-line-height: 100%;
-    --stl-ui-dropdown-button-font-weight: 500;
-
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-
-    background-color: var(--stl-ui-dropdown-button-background-color);
-    border: 1px solid var(--stl-ui-dropdown-button-border-color);
-    border-radius: var(--stl-ui-dropdown-button-border-radius);
-    color: var(--stl-ui-dropdown-button-color);
-    gap: 0;
-    font-size: var(--stl-ui-dropdown-button-font-size);
-
-    .stl-ui-dropdown-button__button {
-      border: none;
-      background: none;
-      height: var(--stl-ui-dropdown-button-height);
-      padding: var(--stl-ui-dropdown-button-padding);
-      line-height: var(--stl-ui-dropdown-button-line-height);
-      font-weight: var(--stl-ui-dropdown-button-font-weight);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      &:hover {
-        background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-        border-color: var(--stl-ui-border-emphasis);
-      }
-    }
-
-    .stl-ui-dropdown-button--action {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      &:hover {
-        background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-        border-color: var(--stl-ui-border-emphasis);
-      }
-
-      &.disabled {
-        cursor: not-allowed;
-        background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-      }
-    }
-
-    .stl-ui-dropdown-button__trigger {
-      border-left: 1px solid var(--stl-ui-border);
-      border-radius: 0;
-
-      &:hover {
-        background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
-        border-color: var(--stl-ui-border-emphasis);
-      }
-    }
-
-    .stl-ui-dropdown-button__menu {
-      --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
-      --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
-      --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
-      --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
-
-      background-color: var(--stl-ui-dropdown-button__menu-background-color);
-      border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
-      box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
-      border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
-
-      position: absolute;
-      top: 100%;
-      right: 0;
-      margin-top: 4px;
-      z-index: 1000;
-      min-width: 100%;
-      padding: 4px;
-      display: none;
-
-      &[data-state='open'] {
-        display: block;
-      }
-    }
-
-    .stl-ui-dropdown-button__menu-item {
-      --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
-      --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
-      --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
-      --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
-        from var(--stl-ui-foreground) l c h / 0.05
-      );
-
-      border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
-      height: var(--stl-ui-dropdown-button__menu-item-height);
-      line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
-
-      padding: 8px;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 16px;
-
-      &:hover {
-        background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
-      }
-
-      .stl-ui-dropdown-button__menu-item-content {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .stl-ui-dropdown-button__menu-item-text {
-        white-space: nowrap;
-      }
-
-      .stl-ui-dropdown-button__menu-item-text--subtle {
-        color: var(--stl-ui-foreground-muted);
-      }
-
-      strong {
-        color: var(--stl-ui-foreground);
-        font-weight: 500;
-      }
-
-      .stl-ui-dropdown-button__menu-item-icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .stl-ui-dropdown-button__menu-item-external-link-icon {
-        --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
-          from var(--stl-ui-foreground) l c h / 0.25
-        );
-
-        svg {
-          color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
-        }
-      }
-    }
-
-    hr {
-      --stl-ui-dropdown-button__divider-height: 1px;
-      --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
-
-      height: var(--stl-ui-dropdown-button__divider-height);
-      background-color: var(--stl-ui-dropdown-button__divider-color);
-      border: none;
-
-      margin: 4px 0;
-      width: calc(100% + 8px);
-      transform: translateX(-4px);
-    }
-  }
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './components/Button';
-export * from './components/DropdownButton';
-export * from './components/Callout';
-export * from './components/DetailsGroup';

package/src/scripts/dropdown-button.ts

@@ -1,55 +0,0 @@
-export function initDropdownButton({
-  dropdownId,
-  onSelect,
-  onPrimaryAction,
-}: {
-  dropdownId: string;
-  onSelect: (value: string) => void;
-  onPrimaryAction: (primaryActionElement: Element) => void;
-}) {
-  const dropdown = document.getElementById(dropdownId);
-  if (!dropdown) return;
-
-  const trigger = dropdown.querySelector('[data-part="trigger"]') as HTMLButtonElement | null;
-  const menu = dropdown.querySelector('[data-part="menu"]') as HTMLElement | null;
-  const primaryAction = dropdown.querySelector('[data-part="primary-action"]');
-
-  if (!trigger || !menu || !primaryAction) return;
-
-  let isOpen = false;
-
-  function toggleDropdown() {
-    if (!trigger || !menu) return;
-    isOpen = !isOpen;
-    menu.dataset.state = isOpen ? 'open' : 'closed';
-    trigger.setAttribute('aria-expanded', String(isOpen));
-  }
-
-  trigger.addEventListener('click', toggleDropdown);
-
-  document.addEventListener('click', (event) => {
-    if (!isOpen) return;
-    if (!dropdown.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-
-    if (primaryAction && primaryAction.contains(event.target as Node)) {
-      toggleDropdown();
-    }
-  });
-
-  const items = dropdown.querySelectorAll('[data-part="item"]');
-  items.forEach((item) => {
-    item.addEventListener('click', () => {
-      const value = item.getAttribute('data-value');
-      if (value) {
-        onSelect(value);
-      }
-      toggleDropdown();
-    });
-  });
-
-  primaryAction.addEventListener('click', () => {
-    onPrimaryAction(primaryAction);
-  });
-}

package/src/scripts/index.ts

@@ -1 +0,0 @@
-export * from './dropdown-button';

package/src/styles/layout.css

@@ -1,11 +0,0 @@
-@layer stl-ui {
-  /* Layout - Stainless */
-  :root {
-    --stl-ui-layout-border-radius-xs: 4px;
-    --stl-ui-layout-border-radius-sml: 8px;
-    --stl-ui-layout-border-radius: 12px;
-    --stl-ui-layout-border-radius-med: 16px;
-    --stl-ui-layout-border-radius-max: 9999px;
-    --stl-ui-left-content-indent: 24px;
-  }
-}

package/src/styles/scales.css

@@ -1,129 +0,0 @@
-@layer stl-ui {
-  /* Scales - Default */
-  :root {
-    --stl-ui-gray-50: rgba(250, 250, 250, 1);
-    --stl-ui-gray-100: rgba(245, 245, 245, 1);
-    --stl-ui-gray-200: rgba(229, 229, 229, 1);
-    --stl-ui-gray-300: rgba(212, 212, 212, 1);
-    --stl-ui-gray-400: rgba(163, 163, 163, 1);
-    --stl-ui-gray-500: rgba(115, 115, 115, 1);
-    --stl-ui-gray-600: rgba(82, 82, 82, 1);
-    --stl-ui-gray-700: rgba(64, 64, 64, 1);
-    --stl-ui-gray-800: rgba(38, 38, 38, 1);
-    --stl-ui-gray-900: rgba(23, 23, 23, 1);
-    --stl-ui-gray-950: rgba(10, 10, 10, 1);
-    --stl-ui-accent-50: #eff6ffff;
-    --stl-ui-accent-100: #dbeafeff;
-    --stl-ui-accent-200: #bedbffff;
-    --stl-ui-accent-300: #8ec5ffff;
-    --stl-ui-accent-400: #51a2ffff;
-    --stl-ui-accent-500: #2b7fffff;
-    --stl-ui-accent-600: #155dfcff;
-    --stl-ui-accent-700: #1447e6ff;
-    --stl-ui-accent-800: #193cb8ff;
-    --stl-ui-accent-900: #132762ff;
-    --stl-ui-accent-950: #0b1128ff;
-    --stl-ui-red-50: rgba(252, 243, 243, 1);
-    --stl-ui-red-100: rgba(249, 227, 227, 1);
-    --stl-ui-red-200: rgba(246, 203, 203, 1);
-    --stl-ui-red-300: rgba(242, 166, 165, 1);
-    --stl-ui-red-400: rgba(235, 109, 108, 1);
-    --stl-ui-red-500: rgba(227, 64, 65, 1);
-    --stl-ui-red-600: rgba(208, 30, 34, 1);
-    --stl-ui-red-700: rgba(174, 25, 26, 1);
-    --stl-ui-red-800: rgba(143, 28, 27, 1);
-    --stl-ui-red-900: rgba(85, 24, 22, 1);
-    --stl-ui-red-950: rgba(43, 9, 8, 1);
-    --stl-ui-blue-50: rgba(239, 246, 255, 1);
-    --stl-ui-blue-100: rgba(219, 234, 254, 1);
-    --stl-ui-blue-200: rgba(190, 219, 255, 1);
-    --stl-ui-blue-300: rgba(142, 197, 255, 1);
-    --stl-ui-blue-400: rgba(81, 162, 255, 1);
-    --stl-ui-blue-500: rgba(43, 127, 255, 1);
-    --stl-ui-blue-600: rgba(21, 93, 252, 1);
-    --stl-ui-blue-700: rgba(20, 71, 230, 1);
-    --stl-ui-blue-800: rgba(25, 60, 184, 1);
-    --stl-ui-blue-900: rgba(19, 39, 98, 1);
-    --stl-ui-blue-950: rgba(11, 17, 40, 1);
-    --stl-ui-green-50: rgba(240, 253, 244, 1);
-    --stl-ui-green-100: rgba(220, 252, 231, 1);
-    --stl-ui-green-200: rgba(187, 247, 208, 1);
-    --stl-ui-green-300: rgba(134, 239, 172, 1);
-    --stl-ui-green-400: rgba(74, 222, 128, 1);
-    --stl-ui-green-500: rgba(34, 197, 94, 1);
-    --stl-ui-green-600: rgba(22, 163, 74, 1);
-    --stl-ui-green-700: rgba(21, 128, 61, 1);
-    --stl-ui-green-800: rgba(22, 101, 52, 1);
-    --stl-ui-green-900: rgba(15, 62, 33, 1);
-    --stl-ui-green-950: rgba(4, 32, 15, 1);
-    --stl-ui-orange-50: rgba(255, 247, 237, 1);
-    --stl-ui-orange-100: rgba(255, 237, 213, 1);
-    --stl-ui-orange-200: rgba(254, 215, 170, 1);
-    --stl-ui-orange-300: rgba(253, 186, 116, 1);
-    --stl-ui-orange-400: rgba(251, 146, 60, 1);
-    --stl-ui-orange-500: rgba(249, 115, 22, 1);
-    --stl-ui-orange-600: rgba(234, 88, 12, 1);
-    --stl-ui-orange-700: rgba(194, 65, 12, 1);
-    --stl-ui-orange-800: rgba(154, 52, 18, 1);
-    --stl-ui-orange-900: rgba(89, 32, 13, 1);
-    --stl-ui-orange-950: rgba(46, 14, 5, 1);
-    --stl-ui-purple-50: rgba(250, 245, 255, 1);
-    --stl-ui-purple-100: rgba(243, 232, 255, 1);
-    --stl-ui-purple-200: rgba(233, 213, 255, 1);
-    --stl-ui-purple-300: rgba(216, 180, 254, 1);
-    --stl-ui-purple-400: rgba(192, 132, 252, 1);
-    --stl-ui-purple-500: rgba(168, 85, 247, 1);
-    --stl-ui-purple-600: rgba(147, 51, 234, 1);
-    --stl-ui-purple-700: rgba(126, 34, 206, 1);
-    --stl-ui-purple-800: rgba(107, 33, 168, 1);
-    --stl-ui-purple-900: rgba(72, 23, 110, 1);
-    --stl-ui-purple-950: rgba(39, 5, 67, 1);
-    --stl-ui-cyan-50: rgba(236, 254, 255, 1);
-    --stl-ui-cyan-100: rgba(207, 250, 254, 1);
-    --stl-ui-cyan-200: rgba(165, 243, 252, 1);
-    --stl-ui-cyan-300: rgba(103, 232, 249, 1);
-    --stl-ui-cyan-400: rgba(34, 211, 238, 1);
-    --stl-ui-cyan-500: rgba(6, 182, 212, 1);
-    --stl-ui-cyan-600: rgba(8, 145, 178, 1);
-    --stl-ui-cyan-700: rgba(14, 116, 144, 1);
-    --stl-ui-cyan-800: rgba(21, 94, 117, 1);
-    --stl-ui-cyan-900: rgba(18, 62, 79, 1);
-    --stl-ui-cyan-950: rgba(5, 34, 46, 1);
-    --stl-ui-pink-50: rgba(253, 242, 248, 1);
-    --stl-ui-pink-100: rgba(252, 231, 243, 1);
-    --stl-ui-pink-200: rgba(251, 207, 232, 1);
-    --stl-ui-pink-300: rgba(249, 168, 212, 1);
-    --stl-ui-pink-400: rgba(244, 114, 182, 1);
-    --stl-ui-pink-500: rgba(236, 72, 153, 1);
-    --stl-ui-pink-600: rgba(219, 39, 119, 1);
-    --stl-ui-pink-700: rgba(190, 24, 93, 1);
-    --stl-ui-pink-800: rgba(157, 23, 77, 1);
-    --stl-ui-pink-900: rgba(103, 19, 53, 1);
-    --stl-ui-pink-950: rgba(56, 5, 25, 1);
-    --stl-ui-yellow-50: rgba(254, 252, 232, 1);
-    --stl-ui-yellow-100: rgba(254, 249, 195, 1);
-    --stl-ui-yellow-200: rgba(254, 240, 138, 1);
-    --stl-ui-yellow-300: rgba(253, 224, 71, 1);
-    --stl-ui-yellow-400: rgba(250, 204, 21, 1);
-    --stl-ui-yellow-500: rgba(234, 179, 8, 1);
-    --stl-ui-yellow-600: rgba(202, 138, 4, 1);
-    --stl-ui-yellow-700: rgba(161, 98, 7, 1);
-    --stl-ui-yellow-800: rgba(133, 77, 14, 1);
-    --stl-ui-yellow-900: rgba(88, 49, 14, 1);
-    --stl-ui-yellow-950: rgba(47, 23, 4, 1);
-
-    /* TODO support accent generation */
-    /* --stl-ui-accent-base: rgb(21, 93, 252);
-    --stl-ui-accent-50: color-mix(in oklch, white 95%, var(--stl-ui-accent-base));
-    --stl-ui-accent-100: color-mix(in oklch, white 85%, var(--stl-ui-accent-base));
-    --stl-ui-accent-200: color-mix(in oklch, white 70%, var(--stl-ui-accent-base));
-    --stl-ui-accent-300: color-mix(in oklch, white 55%, var(--stl-ui-accent-base));
-    --stl-ui-accent-400: color-mix(in oklch, white 40%, var(--stl-ui-accent-base));
-    --stl-ui-accent-500: color-mix(in oklch, white 25%, var(--stl-ui-accent-base));
-    --stl-ui-accent-600: var(--stl-ui-accent-base);
-    --stl-ui-accent-700: color-mix(in oklch, black 15%, var(--stl-ui-accent-base));
-    --stl-ui-accent-800: color-mix(in oklch, black 30%, var(--stl-ui-accent-base));
-    --stl-ui-accent-900: color-mix(in oklch, black 45%, var(--stl-ui-accent-base));
-    --stl-ui-accent-950: color-mix(in oklch, black 60%, var(--stl-ui-accent-base)); */
-  }
-}

package/src/styles/starlight-compat.css

@@ -1,152 +0,0 @@
-@layer stl-ui.starlight-compat {
-  :root {
-    --stl-ui-button-border-radius: 8px;
-    --stl-ui-text-body: 14px;
-    --stl-ui-button-size: 2rem;
-
-    /* Brand colors */
-    --stl-ui-color-text-brand: var(--stl-ui-color-text-invert);
-    --stl-ui-color-brand: var(--stl-ui-color-accent);
-  }
-
-  :root {
-    --sl-font: var(--stl-ui-typography-font);
-    --sl-font-mono: var(--stl-ui-typography-font-mono);
-
-    /* Layout and Typography */
-    --sl-text-h1: var(--stl-ui-typography-text-h1);
-    --sl-text-h2: var(--stl-ui-typography-text-h2);
-    --sl-text-h3: var(--stl-ui-typography-text-h3);
-    --sl-text-h4: var(--stl-ui-typography-text-h4);
-    --sl-text-h4: var(--stl-ui-typography-text-h5);
-
-    /* Colors */
-    --sl-color-bg: var(--stl-ui-background);
-    --sl-color-bg-sidebar: var(--stl-ui-background);
-    --sl-color-bg-ui: var(--stl-ui-card-background);
-    --sl-color-bg-nav: var(--stl-ui-background);
-    --sl-color-bg-inline-code: var(--stl-ui-muted-background);
-    --sl-color-bg-accent: var(--stl-ui-accent-background);
-
-    --sl-color-text: var(--stl-ui-foreground);
-    --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
-    --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
-    --sl-color-text-accent: var(--stl-ui-foreground-accent);
-    --sl-color-hairline: var(--stl-ui-border);
-    --sl-color-hairline-light: var(--stl-ui-border-muted);
-    --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
-    --sl-color-text-invert: var(--stl-ui-inverse-foreground);
-
-    /* Primary colors */
-    --sl-color-red-low: var(--stl-ui-swatch-red-faint);
-    --sl-color-red: var(--stl-ui-swatch-red-base);
-    --sl-color-red-high: var(--stl-ui-swatch-red-base);
-
-    --sl-color-green-low: var(--stl-ui-swatch-green-faint);
-    --sl-color-green: var(--stl-ui-swatch-green-base);
-    --sl-color-green-high: var(--stl-ui-swatch-green-base);
-
-    --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
-    --sl-color-blue: var(--stl-ui-swatch-blue-base);
-    --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
-
-    --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
-    --sl-color-orange: var(--stl-ui-swatch-orange-base);
-    --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
-
-    --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
-    --sl-color-purple: var(--stl-ui-swatch-purple-base);
-    --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
-
-    --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
-    --sl-color-teal: var(--stl-ui-swatch-teal-base);
-    --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
-
-    --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
-    --sl-color-magenta: var(--stl-ui-swatch-pink-base);
-    --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
-
-    --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
-    --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
-    --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
-  }
-
-  /* Starlight Compatibility */
-  .stl-ui-prose {
-    :is(h1, h2, h3, h4, h5) code {
-      font-size: 0.9em;
-      font-weight: inherit;
-    }
-    /* TODO: Disable starlight headingLinks and replace with our own */
-    /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
-    .sl-heading-wrapper.level-h1 {
-      font-size: var(--stl-ui-typography-text-h1);
-      letter-spacing: -0.03em;
-      margin-top: 64px;
-    }
-    .sl-heading-wrapper.level-h2 {
-      font-size: var(--stl-ui-typography-text-h2);
-      letter-spacing: -0.03em;
-      margin-top: 48px;
-    }
-    .sl-heading-wrapper.level-h3 {
-      font-size: var(--stl-ui-typography-text-h3);
-      letter-spacing: -0.02em;
-      margin-top: 40px;
-    }
-    .sl-heading-wrapper.level-h4 {
-      font-size: var(--stl-ui-typography-text-h4);
-      letter-spacing: -0.02em;
-      margin-top: 32px;
-    }
-    .sl-heading-wrapper.level-h5 {
-      font-size: var(--stl-ui-typography-text-h5);
-      letter-spacing: -0.02em;
-      margin-top: 24px;
-    }
-    .sl-heading-wrapper {
-      --sl-anchor-icon-size: 0.8em;
-    }
-    /* TODO: replace with an icon that matches Stainless branding */
-    .sl-anchor-link svg {
-      margin-top: 0;
-    }
-
-    /* Tab component */
-    starlight-tabs {
-      a {
-        text-decoration: none;
-        line-height: unset;
-        color: var(--stl-ui-foreground);
-
-        &[aria-selected='true'] {
-          color: var(--stl-ui-foreground-accent);
-        }
-      }
-
-      ol,
-      ul {
-        padding-left: 0;
-      }
-
-      li {
-        margin-bottom: -2px;
-        &:not(:last-child) {
-          margin-bottom: -2px;
-        }
-
-        a:first-child {
-          display: flex;
-        }
-      }
-    }
-
-    /* Pagination Links */
-
-    .pagination-links {
-      a {
-        color: var(--stl-ui-foreground);
-      }
-    }
-  }
-}