[CORL-560] Update Admin > Config area to match new designs (#2514)

* Add solid background to Moderate > Config area headers

CORL-560

* Update Config > General section text and font weight

CORL-560

* Update ordering of Config > Moderation page items

CORL-560

* Update text and font weights in Configure > Moderation page

CORL-560

* Update text and font weight on Configure > Organization page

CORL-560

* Update text and font weight on Configure > Banned and Suspect Words page

CORL-560

* Update text and font weight on Configure > Authentication page

CORL-560

* Update text and font weights on Configure > Email page

CORL-560

* Update text and font weights on Configure > Advanced page

CORL-560

* Repair tests around the styling changes made to the moderation config area

CORL-560

* Fix capitalization on the Config > General page

CORL-560

* Make email checkbox light themed so its text shows up on new headers

CORL-560

* Update Header width to account for padding

Prevents it from sticking out over the edge of the page layout

CORL-560

* Align "Sort by" text to the drop down in Admin > Config > General > Reactions

CORL-560

* Update Admin > Config > General snapshot to adjust for vertical aligned text

Vertical flex aligned the "Sort by" text to a combo box in a previous changed

CORL-560

* Rename "Perspective Toxic Comment Filter" header to "Toxic Comment Filter"

CORL-560

* Use overlay scrolling if available to prevent scroll bar width popping

CORL-560

* Remove overflow-y: overlay

CORL-560

* Rename Akismet Spam Detection to Spam Detection

CORL-560

* Make all non-complex text fields full width in Admin > Config

CORL-560

* Remove Authentication Integrations header

Area underneath was empty

CORL-560

* Re-arrange SSO Key Field layout

CORL-560

* Create new typography types for bodyShort and fieldDescription

CORL-560

* Update Admin > Config to use bodyShort, fieldDescription typography

CORL-560

* Add a slight padding on InputLabel

CORL-560

* Add padding on either side of Admin > Config section content

CORL-560

src/core/client/ui/theme/mixins.css

@@ -7,6 +7,22 @@
   color: var(--palette-text-primary);
 }
 
+@define-mixin bodyShort {
+  font-size: var(--font-size-rem-4);
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family-sans-serif);
+  line-height: var(--line-height-body-short);
+  color: var(--palette-text-primary);
+}
+
+@define-mixin fieldDescription {
+  font-size: var(--font-size-rem-3);
+  font-weight: var(--font-weight-regular);
+  font-family: var(--font-family-sans-serif);
+  line-height: var(--line-height-body-short);
+  color: var(--palette-grey-dark);
+}
+
 @define-mixin heading1 {
   font-size: calc(24rem / var(--rem-base));
   font-weight: var(--font-weight-medium);

src/core/client/ui/theme/variables.ts

@@ -100,6 +100,16 @@ const variables = {
     6: "24px",
     7: "28px",
     8: "32px",
+    rem: {
+      1: "0.75rem",
+      2: "0.875rem",
+      3: "1rem",
+      4: "1.125rem",
+      5: "1.25rem",
+      6: "1.5rem",
+      7: "1.75rem",
+      8: "2rem",
+    },
   },
   fontWeight: {
     sans: {
@@ -117,6 +127,7 @@ const variables = {
     1: "1.1em",
     2: "1.2em",
     3: "1.45em",
+    bodyShort: 1.142,
   },
   /* Breakpoints */
   breakpoints: {