Embed Scalar API Reference on a Starlight docs page

scalar-starlight-theme.css

/* Scalar sidebar theme to match Starlight */

/* Set Scalar sidebar width to match Starlight
   There's a 1px difference for some reason. */
.scalar-api-reference {
  --scalar-sidebar-width: calc(var(--sl-sidebar-width) - 1px);
}

/* Set font family to use Inter from Fontsource */
.scalar-api-reference {
  --scalar-font: Inter, ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  --scalar-font-code: var(--sl-font-mono);
  /* Set background color to match Starlight */
  --scalar-background-1: var(--sl-color-black);
  --scalar-background-2: var(--sl-color-gray-7);
  --scalar-background-3: var(--sl-color-gray-6);
}

/* Override sidebar indentation */
.sidebar {
  --scalar-sidebar-indent-base: 12px !important;
}

/* Adjust min-height to account for Starlight's fixed header */
.scalar-api-reference.references-layout {
  min-height: calc(100dvh - var(--sl-nav-height)) !important;
}

/* Tell Scalar about our header height */
:root {
  --scalar-custom-header-height: var(--sl-nav-height);
}

/* Dark mode overrides */
.scalar-api-reference-container:not([data-theme='light']) {
  /* Override Scalar theme variables to match Starlight dark mode colors */
  --scalar-sidebar-background-1: #182a2f !important;
  --scalar-sidebar-color-1: #ffffff !important;
  --scalar-sidebar-color-2: #bac4c8 !important;
  --scalar-sidebar-color-active: var(--sl-color-text-invert) !important;
  --scalar-sidebar-item-hover-color: #ffffff !important;
  --scalar-sidebar-item-hover-background: transparent !important;
  --scalar-sidebar-item-active-background: var(
    --sl-color-text-accent
  ) !important;
  --scalar-sidebar-border-color: var(--sl-color-hairline-shade) !important;
  --scalar-sidebar-search-background: transparent !important;
  --scalar-sidebar-search-color: #7b8f96 !important;
  --scalar-sidebar-search-border-color: var(
    --sl-color-hairline-shade
  ) !important;
  --scalar-sidebar-indent-border: var(--sl-color-hairline-light) !important;
  --scalar-sidebar-indent-border-hover: var(--sl-color-gray-2) !important;
}

/* Light mode overrides */
[data-theme='light'] .scalar-api-reference-container {
  /* Override Scalar theme variables to match Starlight light mode colors */
  --scalar-sidebar-background-1: #ffffff !important;
  --scalar-sidebar-color-1: #121a1c !important;
  --scalar-sidebar-color-2: #2a3b41 !important;
  --scalar-sidebar-color-active: var(--sl-color-text-invert) !important;
  --scalar-sidebar-item-hover-color: #121a1c !important;
  --scalar-sidebar-item-hover-background: transparent !important;
  --scalar-sidebar-item-active-background: var(
    --sl-color-text-accent
  ) !important;
  --scalar-sidebar-border-color: var(--sl-color-hairline-shade) !important;
  --scalar-sidebar-search-background: transparent !important;
  --scalar-sidebar-search-color: #495c62 !important;
  --scalar-sidebar-search-border-color: var(
    --sl-color-hairline-shade
  ) !important;
  --scalar-sidebar-indent-border: var(--sl-color-hairline-light) !important;
  --scalar-sidebar-indent-border-hover: var(--sl-color-gray-2) !important;
}

/* Dark mode overrides for Scalar's internal classes */
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #182a2f !important;
  --scalar-sidebar-color-1: #ffffff !important;
  --scalar-sidebar-color-2: #bac4c8 !important;
  --scalar-sidebar-color-active: var(--sl-color-text-invert) !important;
  --scalar-sidebar-item-hover-color: #ffffff !important;
  --scalar-sidebar-item-hover-background: transparent !important;
  --scalar-sidebar-item-active-background: var(
    --sl-color-text-accent
  ) !important;
  --scalar-sidebar-border-color: var(--sl-color-hairline-shade) !important;
  --scalar-sidebar-indent-border: var(--sl-color-hairline-light) !important;
  --scalar-sidebar-indent-border-hover: var(--sl-color-gray-2) !important;
}

/* Light mode overrides for Scalar's internal classes */
.light-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: #ffffff !important;
  --scalar-sidebar-color-1: #121a1c !important;
  --scalar-sidebar-color-2: #2a3b41 !important;
  --scalar-sidebar-color-active: var(--sl-color-text-invert) !important;
  --scalar-sidebar-item-hover-color: #121a1c !important;
  --scalar-sidebar-item-hover-background: transparent !important;
  --scalar-sidebar-item-active-background: var(
    --sl-color-text-accent
  ) !important;
  --scalar-sidebar-border-color: var(--sl-color-hairline-shade) !important;
  --scalar-sidebar-indent-border: var(--sl-color-hairline-light) !important;
  --scalar-sidebar-indent-border-hover: var(--sl-color-gray-2) !important;
}

/* Direct background override for the sidebar navigation */
.references-navigation.t-doc__sidebar {
  background-color: #182a2f !important;
}

/* Light mode direct background override */
[data-theme='light'] .references-navigation.t-doc__sidebar {
  background-color: #ffffff !important;
}

/* Additional styling to match Starlight's sidebar behavior */
.t-doc__sidebar {
  padding: 1rem var(--sl-sidebar-pad-x) 0;
}

/* Remove top padding from navigation sidebar to prevent scrolling */
aside.references-navigation.t-doc__sidebar {
  padding-top: 0 !important;
}

/* Fix mobile sidebar padding */
@media (max-width: 1000px) {
  aside.references-navigation.t-doc__sidebar .sidebar {
    padding-right: 32px;
  }
}

/* Remove the sidebar border */
.sidebar {
  border-right: none !important;
}

/* Add border to aside for light mode to match Starlight */
[data-theme='light'] aside.references-navigation {
  border-right: 1px solid var(--sl-color-hairline-shade) !important;
}

/* Style links to match Starlight */
.t-doc__sidebar a {
  border-radius: 0.25rem;
  padding: 0.3em 0.5rem;
  line-height: 1.4;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

/* Active link styling */
.t-doc__sidebar a[aria-current='page'] {
  font-weight: 600;
}

/* Group headers (like Starlight's large text) */
.t-doc__sidebar .group-header {
  font-size: var(--sl-text-base);
  font-weight: 600;
  color: var(--sl-color-white);
}

/* Nested items indentation */
.t-doc__sidebar ul ul {
  margin-inline-start: 0.5rem;
  padding-inline-start: 0.5rem;
}

/* Top level items spacing */
.t-doc__sidebar > ul > li + li {
  margin-top: 0.5rem;
}

/* Search box styling to match Starlight */
.scalar-api-references-standalone-search {
  padding: 16px 0px !important;
}

.scalar-api-references-standalone-search button[role='search'] {
  background-color: var(--sl-color-black) !important;
  border: 1px solid var(--sl-color-gray-5) !important;
  border-radius: 0.5rem !important;
  color: var(--sl-color-gray-2) !important;
  height: 40px !important;
  padding-left: 12px !important;
  padding-right: 0.5rem !important;
  transition: none !important;
}

/* Hover state for search box */
@media (min-width: 50rem) {
  .scalar-api-references-standalone-search button[role='search']:hover {
    border-color: var(--sl-color-gray-2) !important;
    color: var(--sl-color-white) !important;
  }
}

.scalar-api-references-standalone-search .sidebar-search-placeholder {
  margin-left: 4px;
  font-size: var(--sl-text-sm);
}

/* Override h-8 height */
.scalar-api-references-standalone-search .h-8 {
  height: 40px !important;
}

/* Light mode color overrides for search */
[data-theme='light']
  .scalar-api-references-standalone-search
  button[role='search'] {
  background-color: #f3f4f6 !important;
  border-color: #e0e3e6 !important;
  color: #495c62 !important;
}

/* Light mode hover state for search box */
@media (min-width: 50rem) {
  [data-theme='light']
    .scalar-api-references-standalone-search
    button[role='search']:hover {
    border-color: var(--sl-color-gray-3) !important;
    color: var(--sl-color-black) !important;
  }
}

/* Reduce indentation on Scalar sidebar items */
.t-doc__sidebar nav.sidebar-pages {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 1rem;
}

.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item {
    margin-top: 0.375rem;
  }

  .sidebar-pages
  > .sidebar-group
  > .sidebar-group-item:first-child {
    margin-top: 0;
  }

.t-doc__sidebar .sidebar-group {
  padding-left: 0 !important;
}

.t-doc__sidebar .sidebar-heading {
  padding-left: 8px !important;
}

/* Match Starlight's font weight for sidebar group headings */
.t-doc__sidebar .sidebar-group-title {
  font-weight: 600 !important;
}

.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading {
    padding-left: calc((var(--scalar-sidebar-level) * var(--scalar-sidebar-indent-base)) ) !important;
    border-radius: 0.25rem;
  }

  .sidebar-pages
  .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading {
    /* Align HTTP method with caret */
    padding-right: 14px;
  }


.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading
  > .sidebar-heading-link {
    padding: 0.35em 0.5rem;

    /* Right-align the caret */
    padding-right: 0;
  }

/* Style group headings to match Starlight's large spans */
.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading
  .sidebar-heading-link-title {
  font-size: var(--sl-text-base);
  font-weight: 600 !important;
  color: var(--sl-color-white) !important;
}

/* Make line at left of nested items thicker to match Starlight */
.scalar-api-reference-container
.sidebar-indent-nested .sidebar-indent-nested
 .sidebar-group-item .sidebar-heading:before {
  width: 1px;

  /* Adjust indent line positioning */
  left: calc((var(--scalar-sidebar-level) * 8px)) !important;
}

/* Keep active page color for top-level headings */
.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading.active_page
  .sidebar-heading-link-title {
  color: var(--scalar-sidebar-color-active) !important;
}

/* Hide indent borders for active items since we use background highlighting */
.sidebar-indent-nested
  .sidebar-indent-nested
  .active_page.sidebar-heading:before {
  display: none !important;
}

/* Make HTTP method colors match text color (neutral) for active sidebar items */
.active_page .sidebar-heading-type {
  color: currentColor !important;
}

/* Remove right padding for caret */
.sidebar-pages
  > .sidebar-group
  > .sidebar-group-item
  > .sidebar-heading.sidebar-group-item__folder {
  padding-right: 8px;
}

/* Add carets to sidebar group headings */
.sidebar-heading.sidebar-group-item__folder .sidebar-heading-link-title::after {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

/* Full opacity for active items */
.sidebar-heading.sidebar-group-item__folder.active_page
  .sidebar-heading-link-title::after {
  opacity: 1;
}

/* Make the link flex to position caret */
.sidebar-heading.sidebar-group-item__folder .sidebar-heading-link {
  display: flex !important;
  align-items: center;
  width: 100%;
}

/* Push caret to the right */
.sidebar-heading.sidebar-group-item__folder .sidebar-heading-link-title {
  flex: 1;
}

/* Rotate caret when group is open (has nested ul) */
li:has(ul)
  > .sidebar-heading.sidebar-group-item__folder
  .sidebar-heading-link-title::after {
  transform: rotate(90deg);
}

/* Disable all transitions in the sidebar */
.t-doc__sidebar *,
.references-navigation *,
.sidebar * {
  transition: none !important;
}

/* Re-enable transition for caret rotation only */
.sidebar-heading-link-title::after {
  transition: transform 0.2s ease !important;
}

/* Keyboard shortcut badge */
.scalar-api-references-standalone-search
  button[role='search']
  > span:has(kbd) {
  background-color: #182b2f !important;
  border-radius: 0.25rem !important;
  font-size: var(--sl-text-2xs) !important;
  gap: 0.25em !important;
  padding-inline-start: 0.371rem !important;
  padding-inline-end: 0.388rem !important;
  padding-block: 0.2815rem !important;
  letter-spacing: -0.013rem !important;
}

/* Make keyboard shortcut text inherit color from button */
.scalar-api-references-standalone-search
  button[role='search']
  .text-sidebar-c-2 {
  color: inherit !important;
}

/* Light mode keyboard shortcut badge colors */
[data-theme='light']
  .scalar-api-references-standalone-search
  button[role='search']
  > span:has(kbd) {
  background-color: var(--sl-color-gray-6) !important;
}

/* Hide Scalar's search icon */
.scalar-api-references-standalone-search > button[role='search'] > svg {
  display: none;
}

/* Add Starlight's search icon using pseudo-element */
.scalar-api-references-standalone-search > button[role='search']::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg>');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: currentColor;
}

/* Use background-3 for card headers to match Starlight tabs */
.scalar-card-header {
  background-color: var(--scalar-background-3) !important;
}

/* Fix introduction card items that oddly use bg-2 */
.introduction-card-item .bg-b-2,
.introduction-card > .introduction-card-item .client-libraries-heading {
  background-color: var(--scalar-background-3) !important;
}