MC-3087: Overlay color for banner displays as input instead of color input component

- Converted color input to color input component for banner, slide, and divider

Author: Michael Yu

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_banner_form.xml

@@ -243,7 +243,7 @@
                 </select>
             </formElements>
         </field>
-        <field name="overlay_color" sortOrder="80" formElement="input">
+        <field name="overlay_color" sortOrder="80" formElement="colorPicker">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="disabledValues" xsi:type="array">
@@ -253,16 +253,28 @@
             </argument>
             <settings>
                 <label translate="true">Overlay Color</label>
+                <componentType>colorPicker</componentType>
+                <placeholder translate="true">No Color</placeholder>
                 <additionalClasses>
-                    <class name="admin__field-small">true</class>
+                    <class name="admin__field-medium">true</class>
                 </additionalClasses>
-                <addAfter translate="true">hex color</addAfter>
-                <dataType>text</dataType>
+                <validation>
+                    <rule name="validate-color" xsi:type="boolean">true</rule>
+                </validation>
                 <dataScope>overlay_color</dataScope>
+                <dataType>text</dataType>
                 <imports>
                     <link name="setDisabled">ns = ${ $.ns }, index = show_overlay:value</link>
                 </imports>
             </settings>
+            <formElements>
+                <colorPicker>
+                    <settings>
+                        <colorPickerMode>full</colorPickerMode>
+                        <colorFormat>hex</colorFormat>
+                    </settings>
+                </colorPicker>
+            </formElements>
         </field>
         <field name="overlay_transparency" sortOrder="90" formElement="input">
             <argument name="data" xsi:type="array">

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_divider_form.xml

@@ -74,17 +74,33 @@
         <settings>
             <label/>
         </settings>
-        <field name="line_color" sortOrder="10" formElement="input">
+        <field name="line_color" sortOrder="10" formElement="colorPicker">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">#CECECE</item>
                 </item>
             </argument>
             <settings>
                 <label translate="true">Line Color</label>
-                <addAfter translate="true">hex code</addAfter>
+                <componentType>colorPicker</componentType>
+                <placeholder translate="true">No Color</placeholder>
+                <additionalClasses>
+                    <class name="admin__field-medium">true</class>
+                </additionalClasses>
                 <notice translate="true">Example: #FF5733</notice>
+                <validation>
+                    <rule name="validate-color" xsi:type="boolean">true</rule>
+                </validation>
+                <dataType>text</dataType>
             </settings>
+            <formElements>
+                <colorPicker>
+                    <settings>
+                        <colorPickerMode>full</colorPickerMode>
+                        <colorFormat>hex</colorFormat>
+                    </settings>
+                </colorPicker>
+            </formElements>
         </field>
         <field name="line_thickness" sortOrder="20" formElement="input">
             <argument name="data" xsi:type="array">

app/code/Magento/PageBuilder/view/adminhtml/ui_component/pagebuilder_slide_form.xml

@@ -431,7 +431,7 @@
                 </select>
             </formElements>
         </field>
-        <field name="overlay_color" sortOrder="80" formElement="input">
+        <field name="overlay_color" sortOrder="80" formElement="colorPicker">
             <argument name="data" xsi:type="array">
                 <item name="config" xsi:type="array">
                     <item name="default" xsi:type="string">#FFFFFF</item>
@@ -442,16 +442,28 @@
             </argument>
             <settings>
                 <label translate="true">Overlay Color</label>
+                <componentType>colorPicker</componentType>
+                <placeholder translate="true">No Color</placeholder>
                 <additionalClasses>
-                    <class name="admin__field-small">true</class>
+                    <class name="admin__field-medium">true</class>
                 </additionalClasses>
-                <addAfter translate="true">hex color</addAfter>
-                <dataType>text</dataType>
+                <validation>
+                    <rule name="validate-color" xsi:type="boolean">true</rule>
+                </validation>
                 <dataScope>overlay_color</dataScope>
+                <dataType>text</dataType>
                 <imports>
                     <link name="setDisabled">ns = ${ $.ns }, index = show_overlay:value</link>
                 </imports>
             </settings>
+            <formElements>
+                <colorPicker>
+                    <settings>
+                        <colorPickerMode>full</colorPickerMode>
+                        <colorFormat>hex</colorFormat>
+                    </settings>
+                </colorPicker>
+            </formElements>
         </field>
         <field name="overlay_transparency" sortOrder="90" formElement="input">
             <argument name="data" xsi:type="array">