How do I customize the font-size of each item of the ToC?

[wentallout]

I just can't find anything related to font-size on the doc. This is my current codes:

<script>
    import Toc from 'svelte-toc';
    import ListBullets from '~icons/ph/list-bullets';
</script>

<Toc
    breakpoint="992"
    flashClickedHeadingsFor="0"
    --toc-font-size="var(--font-size-small)"
    --toc-width="240px"
    --toc-padding="var(--space-m)"
    --toc-li-border-radius="0"
    --toc-li-hover-bg="transparent"
    --toc-li-hover-color="var(--primary-500)"
    --toc-li-padding="var(--space-2xs) 0"
    --toc-active-bg="transparent"
    --toc-active-color="var(--primary-500)"
    --toc-desktop-bg="var(--black-400)"
    --toc-desktop-sticky-top="var(--scroll-padding)"
    --toc-mobile-bottom="100px"
    --toc-mobile-btn-border-radius="100%"
    --toc-mobile-bg="var(--black-400)"
    --toc-mobile-btn-bg="var(--primary-500)"
    --toc-mobile-btn-padding="var(-space-m)">
    <span class="toc-title mid-text" slot="title">
        <ListBullets color="var(--text-color)" width="24" height="24" />
        Contents</span>

    <span slot="open-toc-icon">
        <ListBullets color="var(--black-500)" width="24" height="24" />
    </span>
</Toc>

<style>
    .toc-title {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        font-family: 'Fancy';
    }
</style>

[janosh]

The ToC item font size is calculated based on heading level:

https://github.com/janosh/svelte-toc/blob/06da85303dcbe6bed1e31057447f5348e4220c84/src/lib/Toc.svelte#L159

But it uses ex units so any font-size you apply to the parent container should take effect. You can do that by passing a prop --toc-font-size="2em" or through global CSS if you want to target specific elements (with increasing level of specificity)

  :global(aside.toc) {
    font-size: 2em;
  }
  :global(aside.toc > nav) {
    font-size: 1ex;
  } 
  :global(aside.toc > nav > ul) {
    font-size: 5pt;
  }

If you increase the font-size of sub-elements like aside.toc > nav it won't increase the overall TOC's width so you might have to do that manually with e.g. --toc-desktop-max-width="20em".

[wentallout]

umm I would love to be able to customize the color of li elements? so far there's only --toc-active-color but nothing for the inactive elements

[janosh]

Sure, happy to take a PR that adds --toc-li-color. Feel free to add more CSS variables if you think they make sense.

[janosh]

Closing as

:where(aside.toc > nav > ol > li) {
    color: var(--toc-li-color);

was added in ade5425.