Default input styles are to general

Problem/Motivation

The base styles for inputs is very general and should be a bit more targeted. Currently we have:

  
  input,
  textarea {
    @include type-scale(label, 16);
    background-color: var(--prototype-color-white);
    border: solid 1px var(--prototype-color-dark);
    border-radius: 0;
    max-width: 100%;
    padding: 8px 12px;
  }
  

The broad input specifically targets texted based inputs, submit/reset inputs, checkboxes/radios. We don't want those to be styled the same way by default.

Proposed resolution

Break things out into clearer and more targeted selectors. Group texted based inputs with:

input[type="text"],
input[type="password"],
input[type="date"],
input[type="email"],
input[type="number"],
textarea {}

There are a lot of other types like tel that should be in this list. I could also see adding select as they often share a lot of similarities.

Move things typically button like into:

input[type="submit"],
input[type="reset"] {}

And then finally update the base styles for checkboxes/radios to not assume Drupal specific field markup. Remove the .form-type__checkbox|radio selector and simply use:

input[type="checkbox"],
input[type="radio"] {
  // Styles...

  + label[for] {}
}

Remaining tasks

1. Open a MR with changes.