Icon stroke weight: Light/Dark toggle vs Search bar

[peterpeterparker]

As of Docusaurus v3.9.0, the difference in stroke weight between the light/dark mode icons and the search bar icons has become a bit more visually noticeable. Is that expected, or is this an issue?

From my perspective, it looks like a small discrepancy that makes the design feel inconsistent. Of course, design is often subjective, but I wanted to ask in case others share the same impression.

Update: I added some width to the stroke.

.DocSearch-Button-Container svg {
      circle {
        stroke-width: 2.35;
      }
    }

[slorber]

So my understand is that you want this:

Instead of this:

right?

---

Previously, it was:

As you can see your suggestion is thicker than what we had previously.

---

We could apply a larger stroke width to the Docusaurus theme, although maybe the DocSearch team could also want to do so internally? 🤔

cc @NatanTechofNY @dylantientcheu @8bittitan

[peterpeterparker]

Also note that, as I mentioned above with my update, I managed to achieve a look that matches my taste using stroke-width: 2.35; (see it in action here). So no action really needed on my end unless others share the same impression.

[dylantientcheu]

IIUC you want to match the stroke width of the theme switcher to that of the icon in th search bar?

I doubt that we should do it internally as we don't control the surrounding icons on each website.

Will changing the stroke help in fix the visual inconsistency in all docusaurus websites?–If so we should do it in Docusaurus.
Upstream we could expose the icon so that anyone can chose their icon and stroke?

[slorber]

I guess we could slightly increase the stroke width on the Docusaurus side, but for that I'd prefer to have a commitment from the Algolia team to maintain a stable selector. Will .DocSearch-Button-Container svg keep working within the next major version?

Note for myself: we support both DocSearch v3 and v4, and both should render nicely with the CSS override.

Exposing the icon as part of the upcoming, more composable API, could be great, but probably overkill if it's just to change the stroke width. Up to you.

[dylantientcheu]

We will expose the prop then.
As of now, we have no plan to change the selector.

[slorber]

@dylantientcheu to me the problem is that you now hardcode a stroke width on the circle, and we now have to provide 2 stroke widths to make it look consistent.

Wouldn't this make sense to not hardcode the circle stroke width to 1.4, and just let the general icon stroke width (1.6) apply to both elements, like it used to be?

Doing this change would likely increase the circle enough for it to look visually better for Docusaurus.