pack/docs/src/tailwind.css

@layer base, starlight, theme, components, utilities;

@import "@astrojs/starlight-tailwind";
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

@theme {
  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --color-accent-200: #d1bef0;
  --color-accent-600: #863ccf;
  --color-accent-900: #3d205e;
  --color-accent-950: #2b1a40;
  --color-gray-100: #f7f5f9;
  --color-gray-200: #efecf3;
  --color-gray-300: #c4c0c8;
  --color-gray-400: #8f8897;
  --color-gray-500: #5b5563;
  --color-gray-700: #3b3542;
  --color-gray-800: #2a2430;
  --color-gray-900: #1a171d;
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

/* NAV BAR STYLES */
.header {
  @apply bg-white dark:bg-gray-900;
}

starlight-theme-select label {
  @apply text-gray-600 dark:text-gray-400;
}

site-search {
  @apply bg-red-50 dark:bg-gray-800;
}

site-search button[data-open-modal] {
  @apply border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400;

  kbd {
    @apply bg-gray-50 dark:bg-gray-700;
  }
}

/* SIDEBAR STYLES */
.sidebar-pane {
  border-inline-end: 0;
  @apply dark:bg-gray-900 bg-white;
}

@media (min-width: 50rem) {
  :root {
    --sl-sidebar-pad-x: 1.25rem;
  }
}

.sidebar-content {
  @apply pt-6;

  summary {
    @apply gap-1 px-0 flex flex-row justify-between font-bold;

    .caret {
      @apply hidden;
    }

    @media (min-width: 50rem) {
      /* Tweak alignment of group label and caret icon */
      --caret-adjustment: 0.5px;
      transform: translateY(var(--caret-adjustment));

      .group-label {
        transform: translateY(calc(-1 * var(--caret-adjustment)));
      }
    }
  }

  li {
    border: 0;
    --sl-sidebar-item-padding-inline: 0.45rem;
    margin: 0;
    padding: 0;
  }

  .top-level {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .top-level > * {
    margin-block: 0;
  }

  .top-level > li:has(details) {
    margin-block: 0.5rem;
  }

  .large {
    @apply px-3 text-sm text-gray-400 dark:text-gray-400;

    @media (min-width: 50rem) {
      font-size: var(--sl-text-sm);
    }
  }

  a.large {
    @apply text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800;
  }

  a {
    @apply px-3 py-2 text-sm text-gray-900 hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-gray-800;

    &[aria-current="page"] {
      @apply bg-violet-50 text-violet-600 dark:bg-violet-100/10 dark:text-violet-300;
    }
  }
}

/* MARKDOWN CONTENT STYLES */

.sl-markdown-content {
  h1 {
    @apply text-3xl font-bold dark:text-white;
  }

  h2 {
    @apply text-2xl font-bold dark:text-white;
  }

  h3 {
    @apply text-xl font-bold dark:text-white;
  }

  h4 {
    @apply text-lg font-bold dark:text-white;
  }

  h5 {
    @apply text-base font-bold dark:text-white;
  }

  h6 {
    @apply text-sm font-bold dark:text-white;
  }

  p {
    @apply text-base leading-normal text-gray-900 dark:text-gray-100;
  }

  a {
    @apply text-violet-600 dark:text-violet-400 no-underline hover:underline hover:text-violet-700 dark:hover:text-violet-300;
  }

  code {
    @apply font-mono bg-gray-50 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 px-1.5 py-0.5 text-sm text-gray-600 dark:text-gray-300 rounded-md;
  }

  /* generally, code elements in the first column are environment variable lists */
  td:first-child code {
    white-space: nowrap;
  }

  :not(a, strong, em, del, span, input, code, br) + hr {
    @apply my-8;
  }
}

.content-panel {
  border-top: none !important;
}

/* Next/Previous Page Links */
.content-panel footer {
  .pagination-links > a {
    @apply text-sm border-gray-300/50 dark:border-gray-700/50 border shadow-none dark:bg-gray-800;

    svg {
      @apply hidden;
    }

    span {
      @apply text-gray-400 dark:text-gray-500 text-xs font-bold;
      span {
        @apply text-base text-gray-900 dark:text-gray-100 font-normal;
      }
    }

    &:hover {
      @apply border-gray-300 dark:border-gray-700;
    }
  }
}