Checkbox and radio styling progress.

build/libraries/global/base/forms.css

-input,
-label {
-  font-family: var(--font-family-interface);
+/** API
+Animation
+- transition-speed (F, S)
+- transition-ease
+
+Logo
+- width
+- inset
+
+Menu Button
+- icon size
+- Inset
+- transition speed
+- background color
+- button (fill) color
+- border
+- size
+- width
+
+Button
+- font-size
+- color-text (H, F, A, D)
+- color-background (H, F, A, D)
+- color-border (H, F, A, D)
+- color-glow
+- color-shadow
+- size-icon
+- size-border
+- size-radius
+- space-inset
+
+Label
+- font-family
+- font-weight
+- font-size
+- color-text (D, E)
+- space-gap
+
+Input
+- font-family
+- font-weight
+- font-size
+- color-text (D, E)
+- space-gap
+- space-inset
+- size-radius
+- size-icon
+
+Form-Item
+- space-gap
+
+**/
+
+:root {
+  /**
+    Boolean inputs such as checkboxs and radios
+    as well as select options when styling is available.
+  **/
+  --options-space-gap-y: .75em;
+  --options-space-gap-x: .25em;
+  --option-line-height: var(--font-line-height-tight, 1.2);
+  --option-font-size: 16px;
+  --option-font-weight: 400;
+  --option-space-gap-x: .75em;
+  --option-space-gap-y: .25em;
+  --option-input-size: .75em;
+}
+
+form > * + * {
+  margin-top: var(--space-gap-y);
 }
 
-label {
+label,
+legend {
   display: block;
-  margin-bottom: 15px;
-  font-family: var(--font-family-interface);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-bold);
+  margin-bottom: 0;
+  font-family: var(--label-font-family, var(--font-family-interface));
+  font-size: var(--label-font-size, 16px);
+  font-weight: var(--label-font-weight, var(--font-weight-bold));
 }
 
 input,
 textarea {
+  background-color: var(--input-color-background, #fff);
+  border-color: var(--input-color-border, var(--color-border));
+  border-width: var(--input-size-border, var(--size-border, 1px));
+  border-style: var(--input-style-border, solid);
+  border-radius: var(--input-size-radius, 0);
+  font-family: var(--input-font-family, var(--font-family-interface));
+  font-size: var(--input-font-size, var(--font-size-body-small));
   max-width: 100%;
-  padding: 6px 15px;
-  border: 1px solid var(--color-border);
-  font-size: var(--font-size-body-small);
+  padding: var(--input-space-inset-y, var(--input-space-inset, 6px)) var(--input-space-inset-y, var(--input-space-inset, 12px));
+}
+
+textarea {
+  display: block;
+  width: 100%;
 }
 
 input[type=text],
@@ -31,38 +109,179 @@ input[type=file] {
   height: inherit;
 }
 
-input[type=checkbox] {
-  height: auto;
-}
-
 input[type=submit],
 button {
   text-transform: uppercase;
 }
 
-input[type=checkbox] + label,
-input[type=radio] + label {
-  display: inline;
-}
-
 select {
-  padding: 0 10px;
-  text-indent: 0.01px;
-  -o-text-overflow: "";
-     text-overflow: "";
-  color: var(--color-text-interface);
-  border-radius: 0;
-  background: #fff;
-  font-size: var(--font-size-body-small);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  background-color: var(--input-color-background, #fff);
+  border-radius: var(--input-size-radius, 0);
+  color: var(--input-color-text, --color-text-interface);
+  font-family: var(--input-font-family, var(--font-family-interface));
+  font-size: var(--input-font-size, var(--font-size-body-small));
+  padding: var(--input-space-inset-y, var(--input-space-inset, 6px)) var(--input-space-inset-y, var(--input-space-inset, 12px));
+  text-indent: 0.01px;
+  -o-text-overflow: "";
+     text-overflow: "";
 }
 
 select::-ms-expand {
   display: none;
 }
 
-.form-item {
-  margin: 1em 0;
+.form-item > * + * {
+  margin-top: var(--space-gap-y-minimal);
+}
+
+.form-item + .form-item {
+  margin-top: var(--space-gap-y);
+}
+
+input[type=checkbox],
+input[type=radio] {
+  height: var(--option-input-size, auto);
+  width: var(--option-input-size, auto);
+}
+
+input[type=checkbox] + label,
+input[type=radio] + label,
+.option {
+  display: inline-block;
+  font-size: var(--option-font-size);
+  font-weight: var(--option-font-weight);
+  line-height: var(--option-line-height);
+}
+
+.form-type-boolean + .form-type-boolean {
+  margin-top: var(--options-space-gap-y);
+}
+
+.form-type-boolean {
+  padding-left: calc(var(--option-space-gap-x) + var(--option-input-size));
+  font-size: var(--option-font-size);
+}
+
+.form-type-boolean input[type=checkbox],
+.form-type-boolean input[type=radio] {
+  display: inline-block;
+  font-size: inherit;
+  left: calc((var(--option-space-gap-x) + var(--option-input-size)) * -1);
+  margin-right: calc((var(--option-input-size)) * -1);
+  position: relative;
+}
+
+.form-type-boolean input[type=checkbox] + label,
+.form-type-boolean input[type=radio] + label {
+  font-size: inherit;
+}
+
+@supports (display: grid) {
+  .form-type-boolean {
+    display: grid;
+    grid-template-columns: var(--option-input-size) auto;
+    grid-column-gap: var(--option-space-gap-x);
+    -webkit-column-gap: var(--option-space-gap-x);
+       -moz-column-gap: var(--option-space-gap-x);
+            column-gap: var(--option-space-gap-x);
+    padding-left: 0;
+  }
+
+  .form-type-boolean > * {
+    grid-column: 2;
+  }
+
+  .form-type-boolean input[type=checkbox],
+.form-type-boolean input[type=radio] {
+    grid-column: 1;
+    left: auto;
+    margin: calc((1em - var(--option-input-size)) / var(--option-line-height)) 0 0;
+    position: static;
+  }
+
+  .form-type-boolean input[type=checkbox] + *,
+.form-type-boolean input[type=radio] + * {
+    margin-top: 0;
+  }
+}
+
+.description {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.filter-wrapper {
+  margin-top: 0;
+}
+
+.filter-guidelines,
+.filter-help {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.filter-guidelines ul {
+  margin-top: 0;
+}
+
+/** Password **/
+
+.form-item-password-confirm {
+  width: var(--size-form-narrow);
+  max-width: 100%;
+}
+
+.password-strength__meter {
+  background-color: var(--color-feedback-background);
+}
+
+.password-strength__indicator.is-fair {
+  background-color: var(--color-feedback-fair);
+}
+
+.password-strength__indicator.is-strong {
+  background-color: var(--color-feedback-strong);
+}
+
+.password-strength__indicator.is-good {
+  background-color: var(--color-feedback-good);
+}
+
+.password-strength__indicator.is-weak {
+  background-color: var(--color-feedback-weak);
+}
+
+.password-confirm,
+.password-strength__title {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.password-strength__text {
+  font-weight: var(--font-weight-bold);
+}
+
+.password-confirm > span {
+  font-weight: var(--font-weight-bold);
+}
+
+.password-confirm > span.error {
+  color: var(--color-feedback-error);
+}
+
+.password-confirm > span.ok {
+  color: var(--color-feedback-good);
+}
+
+.password-suggestions {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+  font-weight: var(--font-weight-bold);
+}
+
+.password-suggestions > ul {
+  font-weight: var(--font-weight-regular);
 }
\ No newline at end of file

build/libraries/global/base/lists.css

@@ -4,39 +4,46 @@
   Lists
 */
 
-ul:not([class]) {
+ul:not([class]),
+ol:not([class]) {
   list-style: none;
   margin-left: 0;
-  padding-left: 0;
+  padding-left: var(--space-indent);
 }
 
-ul:not([class]) > li:before {
-  content: "•";
-  font-weight: var(--font-weight-bold);
-}
-
-ul:not([class]) ul {
-  margin-top: 6px;
+ul:not([class]) > li:before,
+ol:not([class]) > li:before {
+  position: absolute;
 }
 
-ul:not([class]) ul {
+ul:not([class]) ul,
+ol:not([class]) ul {
   margin-top: 12px;
 }
 
-ul:not([class]) ul li:before {
+ul:not([class]) ul li:before,
+ol:not([class]) ul li:before {
   content: "◦";
 }
 
+ul:not([class]) > li:before {
+  content: "•";
+  font-weight: var(--font-weight-bold);
+  margin-left: calc(var(--space-indent) * -1);
+}
+
 ol:not([class]) {
-  list-style: none;
-  margin-left: 0;
-  padding-left: 0;
   counter-reset: number;
 }
 
 ol:not([class]) > li:before {
   content: counters(number, ".") ".";
   counter-increment: number;
+  margin-left: calc((var(--space-indent) * -1) + 1ch);
+  text-align: right;
+  -webkit-transform: translateX(-100%);
+      -ms-transform: translateX(-100%);
+          transform: translateX(-100%);
 }
 
 ol:not([class]) ol {

build/libraries/global/base/text.css

@@ -48,13 +48,11 @@ hr {
 }
 
 a {
-  text-decoration: none;
-  color: var(--link-color-text);
+  color: var(--color-link);
 }
 
 a:hover, a:focus {
-  text-decoration: underline;
-  color: var(--link-color-text-hover);
+  color: var(--color-link-hover);
 }
 
 h1 > a,h2 > a,h3 > a,h4 > a,h5 > a {

build/libraries/global/settings/color.css

@@ -16,6 +16,11 @@
   --color-feedback-success:#417505;
   --color-feedback-warning:#fdc400;
   --color-feedback-error: #c00;
+  --color-feedback-weak: #c00;
+  --color-feedback-fair: #fdc400;
+  --color-feedback-good: #417505;
+  --color-feedback-strong: #417505;
+  --color-feedback-background: #e1e0e1;
   --table-color-border: var(--color-border);
   --table-color-background-header: #e1e0e1;
   --table-color-background-row-odd: #e1e0e1;

build/libraries/global/settings/font.css

@@ -19,6 +19,7 @@
   --font-size-body-large: 1.125rem;
   --font-size-body-huge: 1.25rem;
   --font-size-body-macro: 1.5rem;
+  --font-size-description: 0.875rem;
   --font-size-heading-small: 1rem;
   --font-size-heading: 1.125rem;
   --font-size-heading-large: 1.25rem;

build/libraries/global/settings/space.css

 :root {
   /* Space between items (margin or gap). */
-  --space-gap: 20px;
+  --space-gap: 2em;
   --space-gap-x: var(--space-gap);
   --space-gap-y: var(--space-gap);
+  --space-gap-tight: 1em;
+  --space-gap-x-tight: var(--space-gap-tight);
+  --space-gap-y-tight: var(--space-gap-tight);
+  --space-gap-minimal: .25em;
+  --space-gap-x-minimal: var(--space-gap-minimal);
+  --space-gap-y-minimal: var(--space-gap-minimal);
+  /* Amount of indentation on list items. */
+  --space-indent: 1em;
   /* Space between and the edge of their containers (padding). */
   --space-inset: 20px;
   --space-inset-x: var(--space-inset);

gulpfile.js/index.js

@@ -8,16 +8,10 @@ require('./browser-sync');
 require('./css');
 require('./js');
 
-let devTasks = [
-  'cssWatch',
-  'jsWatch',
-];
+let devTasks = ['cssWatch', 'jsWatch'];
 
 if (argv.serve) {
-  devTasks = [
-    'browser-sync',
-    ...devTasks
-  ];
+  devTasks = ['browser-sync', ...devTasks];
 }
 
 gulp.task('dev', parallel(devTasks));

libraries/global/base/forms.css

-input,
-label {
-  font-family: var(--font-family-interface);
+/** API
+Animation
+- transition-speed (F, S)
+- transition-ease
+
+Logo
+- width
+- inset
+
+Menu Button
+- icon size
+- Inset
+- transition speed
+- background color
+- button (fill) color
+- border
+- size
+- width
+
+Button
+- font-size
+- color-text (H, F, A, D)
+- color-background (H, F, A, D)
+- color-border (H, F, A, D)
+- color-glow
+- color-shadow
+- size-icon
+- size-border
+- size-radius
+- space-inset
+
+Label
+- font-family
+- font-weight
+- font-size
+- color-text (D, E)
+- space-gap
+
+Input
+- font-family
+- font-weight
+- font-size
+- color-text (D, E)
+- space-gap
+- space-inset
+- size-radius
+- size-icon
+
+Form-Item
+- space-gap
+
+**/
+
+:root {
+  /**
+    Boolean inputs such as checkboxs and radios
+    as well as select options when styling is available.
+  **/
+  --options-space-gap-y: .75em;
+  --options-space-gap-x: .25em;
+
+  --option-line-height: var(--font-line-height-tight, 1.2);
+  --option-font-size: 16px;
+  --option-font-weight: 400;
+  --option-space-gap-x: .75em;
+  --option-space-gap-y: .25em;
+  --option-input-size: .75em;
+}
+
+form > * + * {
+  margin-top: var(--space-gap-y);
 }
 
-label {
+label,
+legend {
   display: block;
-  margin-bottom: 15px;
-  font-family: var(--font-family-interface);
-  font-size: var(--font-size-label);
-  font-weight: var(--font-weight-bold);
+  margin-bottom: 0;
+  font-family: var(--label-font-family, var(--font-family-interface));
+  font-size: var(--label-font-size, 16px);
+  font-weight: var(--label-font-weight, var(--font-weight-bold));
 }
 
 input,
 textarea {
+  background-color: var(--input-color-background, #fff);
+  border-color: var(--input-color-border, var(--color-border));
+  border-width: var(--input-size-border, var(--size-border, 1px));
+  border-style: var(--input-style-border, solid);
+  border-radius: var(--input-size-radius, 0);
+  font-family: var(--input-font-family, var(--font-family-interface));
+  font-size: var(--input-font-size, var(--font-size-body-small));
   max-width: 100%;
-  padding: 6px 15px;
-  border: 1px solid var(--color-border);
-  font-size: var(--font-size-body-small);
+  padding: var(--input-space-inset-y, var(--input-space-inset, 6px)) var(--input-space-inset-y, var(--input-space-inset, 12px));
+}
+
+textarea {
+  display: block;
+  width: 100%;
 }
 
 input[type="text"],
@@ -31,43 +110,169 @@ input[type="file"] {
   height: inherit;
 }
 
-input[type="checkbox"] {
-  height: auto;
-}
-
 input[type="submit"],
 button {
   text-transform: uppercase;
 }
 
-input[type="checkbox"] + label,
-input[type="radio"] + label {
-  display: inline;
-}
-
-
 select {
-  padding: 0 10px;
+  appearance: none;
+  background-color: var(--input-color-background, #fff);
+  border-radius: var(--input-size-radius, 0);
+  color: var(--input-color-text, --color-text-interface);
+  font-family: var(--input-font-family, var(--font-family-interface));
+  font-size: var(--input-font-size, var(--font-size-body-small));
+  padding: var(--input-space-inset-y, var(--input-space-inset, 6px)) var(--input-space-inset-y, var(--input-space-inset, 12px));
   text-indent: 0.01px;
   text-overflow: "";
-  color: var(--color-text-interface);
-  border-radius: 0;
-  background: #fff;
-  font-size: var(--font-size-body-small);
-  appearance: none;
 }
 
 // Remove default IE arrow
 select::-ms-expand { display: none; }
 
-//
-// @file
-// Form Styles
-//
-// Classes to support form elements
-//
-
 // Form Item Wrapper
 .form-item {
-  margin: 1em 0;
+  > * + * {
+    margin-top: var(--space-gap-y-minimal);
+  }
+}
+
+.form-item + .form-item {
+  margin-top: var(--space-gap-y);
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+  height: var(--option-input-size, auto);
+  width: var(--option-input-size, auto);
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label,
+.option {
+  display: inline-block;
+  font-size: var(--option-font-size);
+  font-weight: var(--option-font-weight);
+  line-height: var(--option-line-height);
+}
+
+.form-type-boolean + .form-type-boolean {
+  margin-top: var(--options-space-gap-y);
+}
+
+.form-type-boolean {
+  padding-left: calc(var(--option-space-gap-x) + var(--option-input-size));
+  font-size: var(--option-font-size);
+
+  input[type="checkbox"],
+  input[type="radio"] {
+    display: inline-block;
+    font-size: inherit;
+    left: calc((var(--option-space-gap-x) + var(--option-input-size)) * -1);
+    margin-right: calc((var(--option-input-size)) * -1);
+    position: relative;
+
+    & + label {
+      font-size: inherit;
+    }
+  }
+
+  @supports (display: grid) {
+    display: grid;
+    grid-template-columns: var(--option-input-size) auto;
+    column-gap: var(--option-space-gap-x);
+    padding-left: 0;
+
+    > * {
+      grid-column: 2;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      grid-column: 1;
+      left: auto;
+      margin: calc((1em - var(--option-input-size)) / var(--option-line-height)) 0 0;
+      position: static;
+
+      & + * {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.description {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.filter-wrapper {
+  margin-top: 0;
+}
+
+.filter-guidelines,
+.filter-help {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.filter-guidelines ul {
+  margin-top: 0;
+}
+
+/** Password **/
+.form-item-password-confirm {
+  width: var(--size-form-narrow);
+  max-width: 100%;
+}
+
+.password-strength__meter {
+  background-color: var(--color-feedback-background);
+}
+
+.password-strength__indicator {
+  &.is-fair {
+    background-color: var(--color-feedback-fair);
+  }
+  &.is-strong {
+    background-color: var(--color-feedback-strong);
+  }
+  &.is-good {
+    background-color: var(--color-feedback-good);
+  }
+  &.is-weak {
+    background-color: var(--color-feedback-weak);
+  }
+}
+
+.password-confirm,
+.password-strength__title {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+}
+
+.password-strength__text {
+  font-weight: var(--font-weight-bold);
+}
+
+.password-confirm > span {
+  font-weight: var(--font-weight-bold);
+
+  &.error {
+    color: var(--color-feedback-error);
+  }
+
+  &.ok {
+    color: var(--color-feedback-good);
+  }
+}
+
+.password-suggestions {
+  font-size: var(--font-size-description);
+  font-family: var(--font-family-interface);
+  font-weight: var(--font-weight-bold);
+
+  > ul {
+    font-weight: var(--font-weight-regular);
+  }
 }

libraries/global/base/lists.css

@@ -4,8 +4,15 @@
 */
 @import '_partials';
 
-ul:not([class]) {
-  @include list--bullets;
+ul:not([class]),
+ol:not([class]) {
+  list-style: none;
+  margin-left: 0;
+  padding-left: var(--space-indent);
+
+  > li:before {
+    position: absolute;
+  }
 
   ul {
     margin-top: 12px;
@@ -16,8 +23,41 @@ ul:not([class]) {
   }
 }
 
+ul:not([class]) {
+  > li:before {
+    content: "\2022";
+    font-weight: var(--font-weight-bold);
+    margin-left: calc(var(--space-indent) * -1);
+  }
+}
+
 ol:not([class]) {
-  @include list--numbered;
+  counter-reset: number;
+
+  > li:before {
+    content: counters(number, ".") ".";
+    counter-increment: number;
+    margin-left: calc((var(--space-indent) * -1) + 1ch);
+    text-align: right;
+    transform: translateX(-100%);
+  }
+
+  // Second Level
+  ol {
+    margin-top: 6px;
+    padding-left: 30px;
+
+    > li {
+      padding-left: 0;
+      text-indent: -30px;
+
+      &:before {
+        display: inline;
+        margin-right: .5em;
+        position: static;
+      }
+    }
+  }
 }
 
 /*

libraries/global/base/text.css

@@ -54,13 +54,11 @@ hr {
 // Links
 //
 a {
-  text-decoration: none;
-  color: var(--link-color-text);
+  color: var(--color-link);
 
   &:hover,
   &:focus {
-    text-decoration: underline;
-    color: var(--link-color-text-hover);
+    color: var(--color-link-hover);
   }
 }
 

libraries/global/settings/font.css

@@ -26,6 +26,7 @@
   --font-size-body-large: 18px;
   --font-size-body-huge: 20px;
   --font-size-body-macro: 24px;
+  --font-size-description: 14px;
   --font-size-heading-small: 16px;
   --font-size-heading: 18px;
   --font-size-heading-large: 20px;

libraries/global/settings/space.css

 :root {
   /* Space between items (margin or gap). */
-  --space-gap: 20px;
+  --space-gap: 2em;
   --space-gap-x: var(--space-gap);
   --space-gap-y: var(--space-gap);
 
+  --space-gap-tight: 1em;
+  --space-gap-x-tight: var(--space-gap-tight);
+  --space-gap-y-tight: var(--space-gap-tight);
+
+  --space-gap-minimal: .25em;
+  --space-gap-x-minimal: var(--space-gap-minimal);
+  --space-gap-y-minimal: var(--space-gap-minimal);
+
+  /* Amount of indentation on list items. */
+  --space-indent: 1em;
+
   /* Space between and the edge of their containers (padding). */
   --space-inset: 20px;
   --space-inset-x: var(--space-inset);
   --space-inset-y: var(--space-inset);
   --space-inset-min: 20px;
+
 }
 
 @media (width >= 600px) {

partials/mixins/_list.scss

@@ -25,6 +25,7 @@
 
   ul {
     margin-top: 6px;
+    padding-left: var(--space-indent);
   }
 }
 

prototype.theme

@@ -6,6 +6,7 @@
  */
 
 use Drupal\block\Entity\Block;
+use Drupal\Component\Utility\Html;
 use Drupal\Core\Form\FormStateInterface;
 
 /**
@@ -118,6 +119,122 @@ function prototype_theme_suggestions_input_alter(&$suggestions, array $variables
   }
 }
 
+
+/**
+ * Implements hook_preprocess_form_element().
+ */
+function prototype_preprocess_form_element(&$variables) {
+  if (in_array($variables['element']['#type'] ?? FALSE, ['checkbox', 'radio'], TRUE)) {
+    $variables['attributes']['class'][] = 'form-type-boolean';
+  }
+
+  if (!empty($variables['description']['attributes'])) {
+    $variables['description']['attributes']->addClass('form-item__description');
+  }
+
+  if ($variables['disabled']) {
+    $variables['label']['#attributes']['class'][] = 'is-disabled';
+  }
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_form_element_label(&$variables) {
+  $variables['attributes']['class'][] = 'form-item__label';
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_input(&$variables) {
+  if (
+    !empty($variables['element']['#title_display']) &&
+    $variables['element']['#title_display'] === 'attribute' &&
+    !empty((string) $variables['element']['#title'])
+  ) {
+    $variables['attributes']['title'] = (string) $variables['element']['#title'];
+  }
+
+  $type_api = $variables['element']['#type'];
+  $type_html = $variables['attributes']['type'];
+  $text_types_html = [
+    'text',
+    'email',
+    'tel',
+    'number',
+    'search',
+    'password',
+    'date',
+    'time',
+    'file',
+    'color',
+    'datetime-local',
+    'url',
+    'month',
+    'week',
+  ];
+
+  if (in_array($type_html, $text_types_html, TRUE)) {
+    $variables['attributes']['class'][] = 'form-element';
+    $variables['attributes']['class'][] = Html::getClass('form-element--type-' . $type_html);
+    $variables['attributes']['class'][] = Html::getClass('form-element--api-' . $type_api);
+
+    if (!empty($variables['element']['#autocomplete_route_name'])) {
+      $variables['autocomplete_message'] = t('Loading…');
+    }
+  }
+
+  if (in_array($type_html, ['checkbox', 'radio'], TRUE)) {
+    $variables['attributes']['class'][] = 'form-boolean';
+    $variables['attributes']['class'][] = Html::getClass('form-boolean--type-' . $type_html);
+  }
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_textarea(&$variables) {
+  $variables['attributes']['class'][] = 'form-element';
+  $variables['attributes']['class'][] = 'form-element--type-textarea';
+  $variables['attributes']['class'][] = 'form-element--api-textarea';
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_select(&$variables) {
+  $variables['attributes']['class'][] = 'form-element';
+  $variables['attributes']['class'][] = $variables['element']['#multiple'] ?
+    'form-element--type-select-multiple' :
+    'form-element--type-select';
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_checkboxes(&$variables) {
+  $variables['attributes']['class'][] = 'form-boolean-group';
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_radios(&$variables) {
+  $variables['attributes']['class'][] = 'form-boolean-group';
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function prototype_preprocess_field(&$variables) {
+  $rich_field_types = ['text_with_summary', 'text', 'text_long'];
+
+  if (in_array($variables['field_type'], $rich_field_types, TRUE)) {
+    $variables['attributes']['class'][] = 'text-content';
+  }
+}
+
 /**
  * Implements hook_preprocess_menu().
  */