feat: remove color validation in appearance admin page & add color indicator (#3140)

* Remove color validation in basics admin page & add color indicator

* Create ColorInput common component

* Revert 'formGroupAttrs' addition

* Rename component CSS classes

* Fix input type in ColorInput from AdminPage#buildSettingComponent

* Rename component to ColorPreviewInput, remove aliases in admin & export in compat

* Remove leftovers from rebase on master

* feat: add global type definition for a vnode element tag

* fix(a11y): add aria roles to color input

* chore: use new type

* chore: format

Co-authored-by: David Wheatley <hi@davwheat.dev>

framework/core/less/admin/AppearancePage.less

@@ -23,14 +23,6 @@
     margin-bottom: 24px !important;
     margin-left: 10px;
   }
-
-  input {
-    float: left;
-
-    &:first-child {
-      margin-right: 2%;
-    }
-  }
 }
 
 .AppearancePage-colors .Checkbox {

framework/core/less/common/ColorInput.less

@@ -0,0 +1,22 @@
+.ColorInput {
+  position: relative;
+
+  &-preview, &-icon {
+    position: absolute;
+    right: 8px;
+    bottom: 8px;
+    width: 20px;
+    height: 20px;
+    pointer-events: none;
+  }
+
+  &-preview {
+    background-color: var(--input-value);
+    border-radius: 15%;
+  }
+
+  &-icon {
+    text-align: center;
+    color: @validation-error-color;
+  }
+}

framework/core/less/common/common.less

@@ -17,6 +17,7 @@
 @import "Badge";
 @import "Button";
 @import "Checkbox";
+@import "ColorInput";
 @import "Dropdown";
 @import "EditUserModal";
 @import "Form";