Theme/style the Form elements

Hi there!

I'm taking this on. Aiming to have something reviewable by end of next sprint (starting 3/16?).

Planning on using Style Guide module to have all the relevant from-related elements rendered on a single page, and will theme them from there.

I will share big patch tomorrow (24th march) since such a huge issue :)

@kostyashupenko - I had gotten a small start on this before you claimed it. I'm going to move on to a different issue since it sounds like you've got a big patch incoming and I don't want to duplicate work.

@jerseycheese thanks for that and i'm sorry. There was no activity from 16th Match, so i decided to take care about that issue.

If you don't have pre-defined templates with all form-elements presented, i would recommend to use "styleguide" module, or "webform" and "webform UI" module to easily create all possible elements with all needed cases.

Mockup is not full, so don't forget to test the following cases:
- Disabled text input
- Hover/focus styles on text input when errors
- Selectbox when errors (also hover/focus styles, also disabled selectbox)
- Checkboxes / radios when errors
- Disabled button
- Also input type="date", type="file" and other.

On my side all looks good even in IE.

Things were done based on Claro techniques, also i tried to evade overriding templates, when it was possible to use hooks instead.

@kostyashupenko I gave your patch a quick test with the webform module and things look good on my side. I tested the cases you mentioned above and they look just like the Figma designs.

I tested the patch on Firefox 74 Ubuntu.

Re-rolled.

Last patch didn't get all of the changes. Corrected re-rolled patch attached.

First of all, thank you for all of this work! This is looking amazing.

Requested changes:

* The label elements need to be set to display: block by default (this may be because we removed the dependency of the Classy base theme).
* Form items need some vertical spacing on .form-item. I recommend var(--sp0-5), which is 9px.

* No visible focus states in Windows High Contrast mode. This is because this mode makes transparent borders visible (so everything has a border).

One more re-roll (after the grid refactor was committed)

So, about #15 - I have provided already form.css styles, which are based on claro's styles, but with overrides specifically for Olivero and its css variables. It was done in #11.

There was an issue after your @mherchel rerolls/rebases, since classy is not a base theme anymore - then form.css couldn't be attached. But now it is :) I just added form.css into global-styling components.

So everything i fixed here - is windows high-contrast mode. Now all should be fine

This looks good! I'm going to fix and commit this (and made the following changes on commit)

1. +++ b/css/src/base/variables.css
   @@ -25,6 +25,14 @@
   +  --line-height-base: 1.5;
   

   We're utilizing vertical rhythm within the theme (where everything is a multiple of a value). This should be set to 18px.

2. +++ b/css/src/components/button.css
   @@ -0,0 +1,77 @@
   +  --button-border-width: 2px;
   

   You have --form-element-border-size-base set within variables.css. Should this be used here?

3. +++ b/css/src/components/button.css
   @@ -0,0 +1,77 @@
   +  color: var(--color--blue-20);
   

   At some point, I'd love to abstract the button colors. But that can be a followup issue

4. +++ b/olivero.info.yml
   @@ -35,10 +35,7 @@ regions:
   +  core/drupal.checkbox: false
   

   This should be moved under libraries-override.

5. +++ b/olivero.theme
   @@ -169,3 +328,36 @@ function olivero_preprocess_menu_local_task(&$variables) {
   +function claro_preprocess_fieldset(&$variables) {
   

   This still has the claro namespace.

6. +++ b/templates/form/fieldset.html.twig
   @@ -0,0 +1,81 @@
   + * @see claro_preprocess_fieldset()
   

   Update documentation.

Attaching updated patch and interdiff

Committed! I'm going to open up some followup issues.