#3497754: Start of form styles.

build/css/forms.css

+:root {
+  --me-forms-borders: var(--me-color-gray-400);
+  --me-forms-font-size: 16px;
+  --me-forms-padding: 8px 16px;
+  --me-forms-radius: 2px;
+}
+
+label[for] {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.625;
+  margin-bottom: 8px;
+}
+
+input[type="date"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="text"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+select,
+textarea {
+  background-color: var(--me-color-white);
+  border: 1px solid var(--me-forms-borders);
+  border-radius: var(--me-forms-radius);
+  font-size: var(--me-forms-font-size);
+  padding: var(--me-forms-padding);
+}

build/css/settings.css

@@ -2,6 +2,8 @@
   /** Named color properties */
   --me-color-blue-10: #F0F4FF;
   --me-color-blue-100: #003ECC;
+  --me-color-gray-400: #C3C1C3;
+  --me-color-white: #fff;
   --me-color-black: #130F13;
 
   /** Typography properties */

mercury_editor_theme.info.yml

@@ -7,3 +7,4 @@ core_version_requirement: ^10
 libraries-extend:
   mercury_editor/mercury_editor:
     - mercury_editor_theme/buttons
+    - mercury_editor_theme/forms

mercury_editor_theme.libraries.yml

@@ -10,6 +10,13 @@ base:
   dependencies:
     - mercury_editor_theme/settings
 
+forms:
+  css:
+    component:
+      build/css/forms.css: {}
+  dependencies:
+    - mercury_editor_theme/base
+
 buttons:
   css:
     component:

source/css/forms.css

+:root {
+  --me-forms-borders: var(--me-color-gray-400);
+  --me-forms-font-size: 16px;
+  --me-forms-padding: 8px 16px;
+  --me-forms-radius: 2px;
+}
+
+label[for] {
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.625;
+  margin-block-end: 8px;
+}
+
+input[type="date"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="text"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+select,
+textarea {
+  background-color: var(--me-color-white);
+  border: 1px solid var(--me-forms-borders);
+  border-radius: var(--me-forms-radius);
+  font-size: var(--me-forms-font-size);
+  padding: var(--me-forms-padding);
+}

source/css/settings.css

@@ -2,6 +2,8 @@
   /** Named color properties */
   --me-color-blue-10: #F0F4FF;
   --me-color-blue-100: #003ECC;
+  --me-color-gray-400: #C3C1C3;
+  --me-color-white: #fff;
   --me-color-black: #130F13;
 
   /** Typography properties */