add field color

app/javascript/draw.js

@@ -12,6 +12,10 @@ window.customElements.define('draw-signature', class extends HTMLElement {
 
     this.pad = new SignaturePad(this.canvas)
 
+    if (this.dataset.color) {
+      this.pad.penColor = this.dataset.color
+    }
+
     this.pad.addEventListener('endStroke', () => {
       this.updateSubmitButtonVisibility()
     })

app/javascript/submission_form/area.vue

@@ -408,6 +408,10 @@ export default {
         style.lineHeight = `clamp(6pt, 2.0vw, ${parseInt(this.field.preferences.font_size) + 3}pt)`
       }
 
+      if (this.field.preferences?.color) {
+        style.color = this.field.preferences.color
+      }
+
       return style
     }
   },

app/javascript/submission_form/initials_step.vue

@@ -226,6 +226,10 @@ export default {
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
+      if (this.field.preferences?.color) {
+        this.pad.penColor = this.field.preferences.color
+      }
+
       this.pad.addEventListener('beginStroke', () => {
         this.isInitialsStarted = true
 

app/javascript/submission_form/signature_step.vue

@@ -423,6 +423,10 @@ export default {
     if (this.$refs.canvas) {
       this.pad = new SignaturePad(this.$refs.canvas)
 
+      if (this.field.preferences?.color) {
+        this.pad.penColor = this.field.preferences.color
+      }
+
       this.pad.addEventListener('endStroke', () => {
         this.isSignatureStarted = true
 

app/javascript/template_builder/area.vue

@@ -175,6 +175,7 @@
           <div
             ref="textContainer"
             class="flex items-center px-0.5"
+            :style="{ color: field.preferences?.color }"
             :class="{ 'w-full h-full': ['cells', 'checkbox'].includes(field.type) }"
           >
             <IconCheck