Implement green focus ring on text field

I know this has yet to be changed in the style guide, but I created a patch which removes the old focus styling from form fields.
This way text fields will use the default focus style which looks correct in my opinion (compared to the focus style of ex. Select field).

A thing that came up when looking at the code is that checkboxes and radios also still have the old focus styling.
For addressing these fields I will create a new issue.

Added :active, :focus:active and :focus:hover styling (same approach as the Select field).

Patch with changes from #4

I've also did a change on the loading text. I added a line-height to it and a small margin-bottom so the text became above the focus effect. (solve issue on #5)

Ok, this patch should pass the test. Forgot to add a leading zero.

This looks good! Added some size comments to clarify the rem calculation as we have done it in the other cases.
From my point of view: RTBC.

Issues I've found after a fast visual review:

1. Text inputs with errors do not have the focus ring when they're focused (but not hovered).
2. If an input with error is focused AND hovered, its border gets half red and half black.

I've changed the behaviour. The issues described in #10 should been solved.

It looks now like this:

In the design specs I didn't found the behaviour what should happen when you hover an error input element

Normal input element:
- border black and really thin
- hover: border is a black but thicker

Input element with error:
- border red and thick
- hover: no different in thickness

Is this correct? I should espect that the input element with error should have in non-hover state the same border thickness as the normal input element.

Huh, actually I missed testing the error state, sorry!

Good catch! I think it's on purpose that the error states red border is thicker than the regular states black border because the thicker border on the error state has much more visibility and gets better recognition.

Imagining the red border would be the same thickness than the regular states black one would miss the needed recognition and would impair visibility.

Therefore, this is implemented correctly.

If you have questions in case of the Figma designs, the #admin-ui-design channel in drupal slack is extremely helpful to clarify things.

Thanks for the feedback!

I've changed the height of the row so there's enough spacing for the loading text (24px like mentioned on #3023320 Entity Reference Style Update).

It looks now like this:

Thanks for the quick response and your work! I'm not sure if we should fix this bug (#14) in this issue so I asked in the related field cardinality issue.
For reviewers, the patch in #12 should be fine to test.

Indeed, it should be on the autocomplete styles.
I've removed it from tabledrag and added a margin top and bottom to the autocomplete style:

.claro-autocomplete {
  display: inline-block;
  position: relative;
  max-width: 100%;
  margin: 0.5rem 0;
}

@lot007 Thanks! Setting to needs review because of the patch.

This looks good! But I'm wondering, did we already take comment #17 into account?

The spacing has been taken into account in the latest patch, but I believe the distance does not correspond with the one set in the design (it results in 28px instead of 24px).

I'll create a new patch adjusting this value.

Spacing has been adjusted.

I believe it is not possible. It would overwrite the box-shadow value of .form-element:active & .form-element:hover.

As it is in #24:

If I combine them (without adding an inset, both states have a different border-color):

Checking this.

+++ b/css/src/components/form--text.css
@@ -55,27 +55,33 @@
+  border-width: var(--input--error-border-size);

This increases the visual border of the text editor to 3px. Even though we have a separate issue to update the styles for the editor, I think it is better not changing it here. Please remove this line!

This is fine!