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

[janosh]

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

[janosh]

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

svelte-toc/src/lib/Toc.svelte

Line 159 in 06da853

style:font-size="{2 - 0.2 * (levels[idx] - minLevel)}ex"

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.