Replace ColorPreviewInput preview box with 'color' input (#3271)

framework/core/js/src/common/components/ColorPreviewInput.tsx

@@ -5,23 +5,20 @@ import classList from '../utils/classList';
 import icon from '../helpers/icon';
 
 export default class ColorPreviewInput extends Component {
-  value?: string;
-
   view(vnode: Mithril.Vnode<ComponentAttrs, this>) {
-    const { className, ...attrs } = this.attrs;
+    const { className, id, ...attrs } = this.attrs;
-    const value = attrs.bidi?.() || attrs.value;
 
     attrs.type ||= 'text';
 
     return (
       <div className="ColorInput">
-        <input className={classList('FormControl', className)} {...attrs} />
+        <input className={classList('FormControl', className)} id={id} {...attrs} />
 
         <span className="ColorInput-icon" role="presentation">
           {icon('fas fa-exclamation-circle')}
         </span>
 
-        <div className="ColorInput-preview" style={{ '--input-value': value }} role="presentation" />
+        <input className="ColorInput-preview" {...attrs} type="color" />
       </div>
     );
   }

framework/core/less/common/ColorInput.less

@@ -7,12 +7,26 @@
     bottom: 8px;
     width: 20px;
     height: 20px;
-    pointer-events: none;
   }
 
   &-preview {
-    background-color: var(--input-value);
+    display: inline-block;
     border-radius: 15%;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+
+    // Match both the wrapper div and the div with the background color
+    &, &::-webkit-color-swatch-wrapper, &::-webkit-color-swatch {
+      border: none;
+      padding: 0;
+    }
+
+    // This has to be a separate entry so other browsers
+    // don't ignore the entire CSS rule. Thanks Firefox.
+    &::-moz-color-swatch {
+      border: none;
+    }
   }
 
   &-icon {