Color Input:

 - Adds support for native color picket in modern browsers Now if the user click on the color preview area the color picker will apepar.

See #78208

Author: novaxpro

src/elements/Input/ColorInput.coffee

@@ -14,9 +14,36 @@ class CUI.ColorInput extends CUI.Input
         @opts.leftControlElement = new CUI.Button
             tabindex: -1
             onClick: (ev, btn) =>
-                @__input.focus()
+                if @isDisabled()
+                    return
+                @__colorPicker?.click()
         super()
 
+    render: ->
+        super()
+        @__colorPicker = CUI.dom.$element("input", "cui-color-picker-native",
+            type: "color"
+            tabindex: "-1"
+        )
+
+        CUI.Events.listen
+            node: @__colorPicker
+            type: "input"
+            call: =>
+                @__input.value = @__colorPicker.value
+                @__toggleColor()
+
+        CUI.Events.listen
+            node: @__colorPicker
+            type: "change"
+            call: =>
+                @__input.value = @__colorPicker.value
+                @__toggleColor()
+                new CUI.Event(type: "input", node: @__input).dispatch()
+
+        CUI.dom.append(@DOM, @__colorPicker)
+        @
+
     onDataChanged: (ev, info) ->
         super(ev, info)
         @__toggleColor()
@@ -28,12 +55,19 @@ class CUI.ColorInput extends CUI.Input
         else
             @_leftControlElement.DOM.style.setProperty("--btn-background", @__data[@_name])
             @_leftControlElement.removeClass('is-empty')
+            @__syncColorPicker(@__data[@_name])
+
+    __syncColorPicker: (value) ->
+        if not @__colorPicker
+            return
+        if value and /^#[0-9a-fA-F]{6}$/.test(value)
+            @__colorPicker.value = value
 
     __toggleColor: ->
         if @__input.value.length > 0 and @__checkInputInternal()
-            # Set the background color of the @_leftControlElement to the value of the input
             @_leftControlElement.DOM.style.setProperty("--btn-background", @__input.value)
             @_leftControlElement.removeClass('is-empty')
+            @__syncColorPicker(@__input.value)
         else
-            @_leftControlElement.DOM.style.removeProperty("--btn-background");
+            @_leftControlElement.DOM.style.removeProperty("--btn-background")
             @_leftControlElement.addClass('is-empty')

src/scss/themes/fylr/components/_input.scss

@@ -280,8 +280,6 @@ textarea {
 .cui-color-input,
 .cui-icon-input {
 	> .cui-button {
-		cursor: default;
-		
 		> .cui-button-visual {
 			--btn-border-width: 0;
 			--btn-background-hover: var(--btn-background);
@@ -294,16 +292,35 @@ textarea {
 
 // Color Input
 .cui-color-input {
-	> .cui-button.is-empty > .cui-button-visual {
-		--btn-background: transparent;
+	position: relative;
+
+	> .cui-button {
+		cursor: pointer;
+
+		&.is-empty > .cui-button-visual {
+			--btn-background: transparent;
 
-		background: linear-gradient(135deg, $gray-200 0, $gray-200 50%, $gray-300 50.01%, $gray-300);
+			background: linear-gradient(135deg, $gray-200 0, $gray-200 50%, $gray-300 50.01%, $gray-300);
+		}
+	}
+
+	> .cui-color-picker-native {
+		position: absolute;
+		left: 0;
+		top: 100%;
+		width: 0;
+		height: 0;
+		opacity: 0;
+		overflow: hidden;
+		pointer-events: none;
 	}
 }
 
-// Icon input 
+// Icon input
 .cui-icon-input {
 	> .cui-button {
+		cursor: default;
+
 		> .cui-button-visual {
 			--btn-background: #{$input-background};