basecoat/docs/css/custom.css

/* Basecoat docs font override. This is intentionally not part of the package default. */
:root {
  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --font-heading: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* HTMX */
.htmx-indicator {
  @apply invisible opacity-0 transition-discrete transition-all;
}
.htmx-indicator:not(.htmx-request) {
  @apply hidden;
}
.htmx-request,
.htmx-request.htmx-indicator {
  @apply visible opacity-100;
}

.docs-search-trigger {
  @apply hidden h-8 w-full min-w-0 max-w-72 cursor-text items-center gap-x-2 text-muted-foreground outline-none transition-colors md:flex;

  svg {
    @apply size-4 shrink-0;
  }
  .kbd {
    @apply -me-1.5 ms-auto;
  }
}

:root:not([data-style-variant]),
:root[data-style-variant='nova'] {
  .docs-search-trigger {
    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-lg border bg-transparent px-2.5 py-1 text-sm focus-visible:ring-3;
  }
}

:root[data-style-variant='vega'] .docs-search-trigger {
  @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-md border bg-transparent px-2.5 py-1 text-sm shadow-xs focus-visible:ring-3;
}

:root[data-style-variant='maia'] .docs-search-trigger {
  @apply border-input bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-4xl border px-3 py-1 text-sm focus-visible:ring-[3px];
}

:root[data-style-variant='lyra'] .docs-search-trigger {
  @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 rounded-none border bg-transparent px-2.5 py-1 text-xs focus-visible:ring-1;
}

:root[data-style-variant='mira'] .docs-search-trigger {
  @apply border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 rounded-md border px-2 py-0.5 text-xs/relaxed focus-visible:ring-2;
}

:root[data-style-variant='luma'] .docs-search-trigger {
  @apply bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 rounded-3xl border border-transparent px-3 py-1 text-sm focus-visible:ring-3;
}

:root[data-style-variant='sera'] .docs-search-trigger {
  @apply focus-visible:border-b-ring rounded-none border border-transparent border-b-input bg-transparent px-0 py-1 text-sm transition-[color,border-color];
}

:root[data-style-variant='rhea'] .docs-search-trigger {
  @apply bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 rounded-2xl border border-transparent px-2.5 py-1 text-sm duration-200 focus-visible:ring-3;
}

.content {
  pre {
    @apply grid max-h-[650px] overflow-y-auto rounded-lg bg-muted/40 text-sm;
  }
  pre > code {
    @apply block rounded-[inherit] bg-transparent p-3.5 font-mono;
  }
  pre > code.hljs {
    @apply !bg-transparent;
  }

  > h2 {
    @apply mt-12 lg:mt-20 mb-6 scroll-m-22 text-2xl font-semibold tracking-tight first:mt-0;
  }
  > h3 {
    @apply mt-8 mb-6 scroll-m-22 text-xl font-semibold tracking-tight;
  }
  > h4 {
    @apply my-6 scroll-m-22 font-semibold tracking-tight;
  }
  .prose {
    @apply my-6;

    a {
      @apply font-medium underline underline-offset-4;
    }
    code:not(pre > code) {
      @apply relative rounded-md bg-muted/50 px-[0.3rem] py-[0.2rem] font-mono text-sm;
    }
    blockquote {
      @apply border-l-4 border-border pl-4;
    }
    ol {
      @apply list-decimal ml-6;
    }
    ul {
      @apply list-disc ml-6;
    }
    ol,
    ul {
      li {
        @apply mt-2;
      }
    }
    dl {
      @apply border-b pb-3 my-6;
      dt {
        @apply border-t pt-3 mt-3 first:mt-0;
      }
      dd {
        @apply mt-2 space-y-2;
      }
      dl {
        @apply mt-4 border-b-0 pb-0 pl-8 my-0;
      }
    }
    b,
    strong {
      @apply font-semibold;
    }
    > p,
    > blockquote,
    > ul,
    > ol,
    > dl,
    > table,
    > pre,
    > p {
      @apply my-6;
    }
    > *:first-child {
      @apply !mt-0;
    }
    > *:last-child {
      @apply !mb-0;
    }
  }
  .step {
    counter-increment: step;

    &:before {
      @apply absolute w-8 h-8 md:w-9 md:h-9 bg-muted rounded-full font-mono font-semibold text-center text-sm inline-flex items-center justify-center -indent-px border-4 mr-2 border-background;
      @apply md:ml-[-50px] md:mt-[-4px];
      content: counter(step);
    }
    > h3 {
      @apply max-md:ml-10 min-h-8 flex items-center;
    }
  }
}