Make top-level Sidebar Items subtle like nested Sidebar Items

[trueberryless]

What version of starlight are you using?

0.32.0

What is your idea?

Currently, top-level items in the Starlight Sidebar are pretty bold and large, like you can see here.

I personally think that those items should be designed more subtle and smaller like the other items inside groups. And as Chris mentioned in Discord this design choice was made very efficient. Now that Starlight has gained more popularity, I think it's time to address this "design artifact".

Write down below what you think could be improved, share ideas or just upvote if you agree with the suggestion!

If you wanna temporarily change the design in your project without waiting for this discussion, take this CSS with you:

sl-sidebar-state-persist ul.top-level > li {
  margin-top: 0rem;
}
sl-sidebar-state-persist ul.top-level > li > a {
  font-size: var(--sl-text-sm);
}
sl-sidebar-state-persist ul.top-level > li > a[aria-current="page"] {
  font-weight: 600;
}
sl-sidebar-state-persist ul.top-level > li > a[aria-current="false"] {
  font-weight: 400;
  color: var(--sl-color-gray-2);
}

Reference: https://github.com/trueberryless-org/starlight-subtle-top-level-items/blob/603537096a4a8ced917b05a2d70b0799e8e6ef58/starlight/src/styles/subtle-top-level-items.css#L1-L16

Why is this feature necessary?

Make all top-level items / items without groups / unnested items more subtle, cleaner and/or smaller.

Do you have examples of this feature in other projects?

I created an example website so everybody can view the suggestion in different browsers, on different screen sizes etc.:
https://starlight-subtle-top-level-items.trueberryless.org/

This is not a direct suggestion for the perfect CSS solution to solve / change this, but rather a jump-start to get the ball rolling.

Participation

• I am willing to submit a pull request for this feature.

[sarah11918]

Thanks for starting this discussion, trueberryless! 🙌

Just sharing an image of your jump-start example, and using it as a jump start.

I'm noticing that it maybe feels odd to have the group headings larger than the stand alone items, I think? Maybe just bold, but same size would be enough? I know you're not proposing perfect CSS, but that was the first thing I noticed. If a page is important enough to be a top level, stand-alone page, then it feels weird for it to be smaller than a group heading, I think. In fact, when Group 2 is collapsed below, it makes me think that the top level links underneath it (before Group 3) are actually its sub pages:

[trueberryless]

Maybe just bold, but same size would be enough?

You mean that the headings would be bold but not larger than the top-level items?
Because if so, I have to say one thing: I'm currently not manipulating the headings in any way, and personally, I think we should leave the headings sizes as is, because we should probably not change too much about the whole design...

However, what I think you actually meant is: The top-level items should be made larger (which they were). So in other words: Leave the sizes of ALL elements untouched and just manipulate the boldness, colors and margins between the items...

Personally, I understand what your argument is, and it makes total sense at all. Nonetheless I think there is one scenario where the larger top-level items would make the list feel weird: If NO GROUPS exist at all... Because then there are only top-level items taking up a lot of space...

If I should elaborate more about anything please let me know because I feel like I did a horrible job explaining what I mean 😆

EDIT: Okay, wait actually, I just tried it out, it isn't even that bad.
Your feedback was completely right, my intuition wrong. I'm probably gonna improve the example website with some different settings, so we some options to compare tomorrow...