[feat] Update color input when a variable is being used

[thughey]

Describe the feature

When a color variable is being used, change the color input to:

• Remove the background and add a lighter border
• Use the name of the color in the input instead of the hex code (add "..." if the name exceeds the width of the input)
  

On hover of the input:

• Show an "x": On click this will remove the color
  

On click of the color input (not the "x") open up the color modal - just like how the current input works.

Let me know if you have any questions :)