Implement new form element designs for Olivero

the new form design looks slick! and so easy to preview with Tugboat.

I noticed that the number field has width set to 4em and if the max for field is a two or three digit number, then the second and third digit is cut off. Adding screenshots. It'd be best to keep the width of the field at `auto`.

number field with set width

number field with auto width

I haven't dug through any source code and not certain if the 4em value comes from Olivero, so may not be in scope here.

Sorry for being slow to RTBC this one. Confirming comment #11 - @mherchel and I did walk through the implementation during a video call.

I didn't see any significant deviations from the agreed designs from the earlier issue, so the implementation (broadly) looks good to go. We did note that in Windows high-contrast mode, a few things could do with some extra polish for the sake of elegance, but I don't think we saw any blockers there.

So I recommend we commit the work done so far, and if any glitches or accessibility issues are noticed afterwards they can have more specific issues. What we have here is several big steps forward.

I reviewed this with @lauriii - we took it for a test drive and it always lovely to see a see diff stat 31 files changed, 326 insertions, 1584 deletions. yum.

The focus state of inputs does quite match the design. There are rounded corners on the design but with the patch there aren't and the elements also get unrounded corners so it looks a bit odd.

Also we couldn't decide if the check in a checkbox was correctly aligned - not sure that it is as central as it should be:

I noticed that the dropbutton elements can be hard to distinguish from each other when the tray is open because it doesn't have any border. See this gif for an example of that:

@mherchel re focus styles - if both you and @jwitkowski79 are happy I'm happy! I had to comment because all I had to go on were the designs in the issue summary and figma and the patch itself. If there are other areas where the implementation and the design don't match it'd be great to detail them.

Hello! Mike did indeed review the focus states with me and we discussed different options. Removing the rounded corners was the best way forward. I give my thumbs up!

Thanks @mherchel, I tested the new patch with latest Drupal 9.2.0-dev in Firefox, Chromium, and GNOME Web browsers (OS: Ubuntu) and it looks great, and just as in your dropbutton.gif.

It doesn't look so great on the content types page see below...

Also the way the light blue bleeds over the drop button separator looks odd.

Just reviewed patch #26. LGTM. Marking RTBC.

I reviewed the code and did some cross-browser compatibility testing with @mherchel. @mherchel has opened some follow-ups for most of the issues discovered so we could land this issue as soon as soon as possible.

+++ b/core/themes/olivero/css/components/form-select.pcss.css
@@ -6,187 +6,81 @@
+  border-radius: 3px;

I did find one nitpick on the code. This should probably use --border-radius variable.

Committed 03bf48d and pushed to 9.2.x. Thanks!