[docs][base-ui] Make Base UI demos denser

[zanivan]

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

Overview

This is an umbrella issue for tracking PRs that will make the following Base UI component demos denser. The reason for that is that in most interfaces we see out there, particularly in webapps (also even in some marketing pages), denser designs are used more often and also harmonize better.

For Buttons

  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 16px;
  border-radius: 8px;

For inputs and auto-completes

  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 8px;

---

Progress

The progress should follow the #37222

• Autocomplete
• Button ([docs][base] Make Base UI button demos denser #37689)
• Input ([docs][base] Make Base UI input demos denser #37750)
• Select ([docs][base] Make Base UI Select demos denser #37836)
• Snackbar
• Menu
• Table pagination
• Tabs
• Form control
• Modal
• Popper
• Textarea Autosize

[the-mgi]

hello, i am interested to help you guys here, can you give a bit more description about that?

[zanivan]

Hey @the-mgi It'd be nice to have help on this!

I'm still working on the definitions of tokens and patterns, but the idea is to make the demo of the components denser by reducing their padding. It'd help to harmonize better with the style we see on applications, and to improve consistency among the demos within the docs. Moreover, some demos really could use some polishing, but these and a few other details could be ad-hoc by components PR's.

e.g.: for Buttons, we went from:

  padding: 12px 24px;
  border-radius: 12px;

to

  padding: 8px 16px;
  border-radius: 6px;

I'll work in a few more to be used as examples, and then I'll complement the description, so we can have more people helping with the other components.

[the-mgi]

Hey @the-mgi It'd be nice to have help on this!

I'm still working on the definitions of tokens and patterns, but the idea is to make the demo of the components denser by reducing their padding. It'd help to harmonize better with the style we see on applications, and to improve consistency among the demos within the docs. Moreover, some demos really could use some polishing, but these and a few other details could be ad-hoc by components PR's.

e.g.: for Buttons, we went from:

  padding: 12px 24px;
  border-radius: 12px;

to

  padding: 8px 16px;
  border-radius: 6px;

I'll work in a few more to be used as examples, and then I'll complement the description, so we can have more people helping with the other components.

ah nice, looking forward to it

[zanivan]

I'm closing this because we're fixing and updating all the demo designs on #38820