Refine styles of controls to match Compound (#12299)

This changes the styles of buttons, other form controls, and tabs in settings to:

1. Improve their usage of semantic colors, so that they adapt correctly to custom themes
2. Make them more visually coherent with the new Compound design system, as we integrate more of it into the app

This is a re-introduction of https://github.com/matrix-org/matrix-react-sdk/pull/12241 with the difference that we're now using our branding colors again on form colors, and buttons have become rounded to match the appearance of new Compound buttons.

res/css/views/elements/_Field.pcss

@@ -22,17 +22,17 @@ limitations under the License.
     min-width: 0;
     position: relative;
     margin: 1em 0;
-    border-radius: 4px;
+    border-radius: 8px;
     transition: border-color 0.25s;
-    border: 1px solid $input-border-color;
+    border: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field_prefix {
-    border-right: 1px solid $input-border-color;
+    border-right: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field_postfix {
-    border-left: 1px solid $input-border-color;
+    border-left: 1px solid var(--cpd-color-border-interactive-secondary);
 }
 
 .mx_Field input,
@@ -42,7 +42,7 @@ limitations under the License.
     border: none;
     /* Even without a border here, we still need this avoid overlapping the rounded */
     /* corners on the field above. */
-    border-radius: 4px;
+    border-radius: 8px;
     padding: 8px 9px;
     color: $primary-content;
     background-color: $background;
@@ -102,6 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     background-color: transparent;
     font: var(--cpd-font-body-md-regular);
+    color: var(--cpd-color-text-secondary);
     transform: translateY(0);
     position: absolute;
     left: 0px;