[docs-infra] Tigthen up the header design

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

This also includes the website header! The main purpose of the changes below is to carve a few height pixels out and fine-tune spacing and sizing a bit. Here's a summary:

• Remove "MUI Core" from the product switcher label—we want to reduce mentions to "Core"
• Reduce the --MuiDocs-header-height var size from 64px to 59px
• Fine-tune icon button style definitions

[mui-bot]

Netlify deploy preview

https://deploy-preview-42180--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 0a06ef2

[colmtuite]

@danilo-leal Had a peek 👀. I've got some notes, I didn't mean for it to be this long, but it's mostly multiple points talking about the same small details.

1. The controls inside the header are misaligned; they're closer to the top of the viewport than to the header's bottom border.
2. A few things that are probably contributing to any difficulty in center-aligning things: the header is split into two sections, in terms of how it's coded, there seems to be no need for that? It's set to flex-direction: column, when it's a row. There seems to be no need for the min-height and height, if you just remove those properties (and rely on the padding), the misalignment goes away (and the header is now a height that fits into an 8px scale).
3. I would reduce the padding even further to 8px. That brings the header to 48px (plus the border).
4. The search button needs line-height: 1. The text inside is currently misaligned.
5. The magnifying glass icon is 20px, but the icon button icons are 18px. All icons should be consistently sized for good visuals, but also so we can use consistent spacing values properly. I would set all icons to 16px.
6. The magnifying glass icon is much closer to the left edge of the button than the "Search..." label is to the icon.
7. Related to previous point: the search button's padding-left value is 4.8px. This is very odd, we shouldn't have weird decimal values like this, all spacing/sizing should be uniform and consistent. I'd set this value to 8px, and text label's margin-left value to 4px.
8. The logo is currently 30px x 32px, which is weird, and again can cause issues with alignment. All svgs should be square.
9. The search button's border is opaque, and not clipped, so it's conflicting with the button's shadow, causing things to look muddy. If we set box-sizing: border-box; background-clip: padding-box on the search button, and make the shadow transparent (something like rgb(18 20 21 / 12%)), then the shadow will bleed through and prevent muddiness.
10. Related to previous point: The search button just has a single outset shadow. Shadows don't render properly in browsers, and to fix that, you can blend multiple shadows together to create a smoother effect. Gradients work the same way. The shadow is also quite opaque, which contributes to muddiness. Something like rgb(66 69 75 / 6%) 0px 1px 2px 0px, rgb(66 69 75 / 6%) 0px 1px 4px -1px, rgb(66 69 75 / 6%) 0px 2px 8px -4px will look smoother. Now you could also remove the bottom inset shadow, which was intended to produce a similar effect, if I understand correctly.
11. Related to previous point: I would then set the same shadow/border treatments on the icon buttons.
12. I'd make the search button text label lighter so it looks more like a placeholder.
13. The search button and icon button hover styles are very stark compared to the normal state. I'd make them much more subtle.
14. The "⌘K" inside the search button should be a <kbd> element.
15. I'd make the version number 400 weight and also light gray, to differentiate it from the product switcher menu button, and introduce some hierarchy between them. To reinforce the flow that you first choose the product, then choose the version.

Screenshot of the suggested changes attached:

[colmtuite]

Oh also, I forgot to mention the header's background blur. Was that removed in this PR? I don't see it in the changes. I thought that was a kinda cool vibe