fix colors for inputs when using dark background colors (fix #121)

also adds a new setting to brighten up inputs

app/Http/Controllers/Api/FormController.php

@@ -94,6 +94,7 @@ public function update(Request $request, Form $form)
                 'user_message_text_color',
                 'interaction_background_color',
                 'interaction_text_color',
+                'use_brighter_inputs',
                 'show_form_progress',
                 'cta_link',
                 'cta_label',

app/Http/Resources/PublicFormResource.php

@@ -26,6 +26,8 @@ public function toArray($request)
             'contrast_color' => $this->contrast_color,
             'privacy_link' => $this->privacy_link,
             'legal_notice_link' => $this->legal_notice_link,
+            'use_brighter_inputs' => $this->use_brighter_inputs,
+            'show_form_progress' => $this->show_form_progress,
             'eoc_text' => $this->eoc_text,
             'eoc_headline' => $this->eoc_headline,
             'cta_label' => $this->cta_label,

app/Models/Form.php

@@ -30,6 +30,7 @@ class Form extends BaseModel
     protected $casts = [
         'is_notification_via_mail' => 'boolean',
         'show_cta_link' => 'boolean',
+        'use_brighter_inputs' => 'boolean',
         'show_form_progress' => 'boolean',
         'cta_append_params' => 'boolean',
         'cta_append_session_id' => 'boolean',
@@ -96,6 +97,7 @@ class Form extends BaseModel
         'twitter',
         'show_cta_link',
         'show_social_links',
+        'use_brighter_inputs',
         'show_form_progress',
     ];
 

database/migrations/2023_11_30_124841_add_use_brighter_inputs_attribute_to_forms.php

@@ -0,0 +1,18 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::table('forms', function (Blueprint $table) {
+            $table->boolean('use_brighter_inputs')->default(false)->after('message_background_color');
+        });
+    }
+};

resources/js/components/CharCount.vue

@@ -5,7 +5,7 @@
     :class="[
       hasMaxChars && charCount > maxChars
         ? 'font-medium text-red-600'
-        : 'text-grey-600',
+        : 'text-content/80',
     ]"
   >
     {{ charCount }}

resources/js/components/Factory/Settings/Appearance.vue

@@ -24,6 +24,19 @@
         <D9Input type="color" v-model="textColor" block show-color-picker />
       </div>
 
+      <div class="mb-4 flex justify-between">
+        <D9Label
+          label="Brighten Input Fields"
+          description="This will brighten up the inputs and is especially desirable for themes with a dark background color."
+        />
+        <D9Switch
+          label="Brighten Input Fields"
+          v-model="useBrighterInputs"
+          onLabel="yes"
+          offLabel="no"
+        />
+      </div>
+
       <hr class="mb-4 border-grey-200" />
 
       <div class="mb-4 flex justify-between pb-3">
@@ -54,6 +67,7 @@ const brandColor = ref(store?.form?.brand_color);
 const backgroundColor = ref(store?.form?.background_color);
 const textColor = ref(store?.form?.text_color);
 
+const useBrighterInputs = ref(store?.form?.use_brighter_inputs);
 const showFormProgress = ref(store?.form?.show_form_progress);
 
 const saveOptions = async () => {
@@ -64,6 +78,7 @@ const saveOptions = async () => {
     background_color: backgroundColor.value,
     text_color: textColor.value,
     show_form_progress: showFormProgress.value,
+    use_brighter_inputs: useBrighterInputs.value,
   });
 
   isSaving.value = false;

resources/js/forms/classic/ClassicForm.vue

@@ -108,6 +108,7 @@ const backgroundColor = useThemableColor(
   store.form?.background_color ?? "#ffffff",
 );
 const textColor = useThemableColor(store.form?.text_color ?? "#000000");
+const brightness = store.form?.use_brighter_inputs ? 1.5 : 1;
 </script>
 
 <style>
@@ -116,13 +117,19 @@ const textColor = useThemableColor(store.form?.text_color ?? "#000000");
   --color-contrast: v-bind(contrastColor);
   --color-background: v-bind(backgroundColor);
   --color-content: v-bind(textColor);
+  --brightness-user: v-bind(brightness);
 }
 
-.text-content {
+.form-message-prose {
   @apply text-base;
 }
 
-.text-content a {
+.form-message-prose a,
+.form-message-prose a:visited {
   @apply text-primary underline;
 }
+
+.form-message-prose a:hover {
+  @apply brightness-125;
+}
 </style>

resources/js/forms/classic/interactions/ButtonAction.vue

@@ -2,7 +2,7 @@
   <label
     v-if="isVisible"
     :for="action.id"
-    class="relative block cursor-pointer rounded border py-2 pl-6 pr-3"
+    class="relative block cursor-pointer rounded border py-2 pl-6 pr-3 bg-background brightness-user"
     :class="{
       'border-primary ring-1 ring-primary': isChecked,
       'border-content/20': !isChecked,
@@ -14,7 +14,7 @@
         class="flex h-5 w-5 items-center justify-center rounded-sm text-xs font-medium"
         :class="{
           'bg-primary text-contrast': isChecked,
-          'bg-content/80 text-background': !isChecked,
+          'bg-content/70 text-background': !isChecked,
         }"
         >{{ index + 1 }}</span
       >
@@ -103,7 +103,7 @@ const isChecked = computed<boolean>(() => {
   if (Array.isArray(store.currentPayload)) {
     return (
       store.currentPayload.findIndex(
-        (value) => value.actionId === props.action.id
+        (value) => value.actionId === props.action.id,
       ) !== -1
     );
   } else {
@@ -206,7 +206,7 @@ if (isVisible.value) {
         e.preventDefault();
         startEditing(true);
       },
-      { target: document }
+      { target: document },
     );
   }
 }

resources/js/forms/classic/interactions/DateAction.vue

@@ -3,7 +3,7 @@
     <label class="sr-only block" :for="action.id">{{ action.label }}</label>
     <input
       type="date"
-      class="block w-full max-w-xs rounded border border-grey-300 bg-white px-3 py-2 pl-10 text-black focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+      class="block w-full max-w-xs rounded border border-content/20 bg-background brightness-user px-3 py-2 pl-10 text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
       :name="block.id"
       :id="action.id"
       :placeholder="action.label || t('Choose a date')"
@@ -16,7 +16,7 @@
       v-once
     />
 
-    <div class="absolute inset-y-0 left-3 flex items-center text-grey-700">
+    <div class="absolute inset-y-0 left-3 flex items-center text-content/50">
       <D9Icon name="calendar" />
     </div>
   </div>

resources/js/forms/classic/interactions/InputAction.vue

@@ -3,7 +3,7 @@
     <label class="sr-only block" :for="action.id">{{ action.label }}</label>
     <input
       :type="nativeInputType"
-      class="block w-full max-w-xs rounded border border-grey-300 bg-white px-3 py-2 text-black focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+      class="block w-full max-w-xs rounded border border-content/20 bg-background brightness-user px-3 py-2 text-content focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
       :class="[
         {
           'pl-16': useSymbol,

resources/js/forms/classic/interactions/TextareaAction.vue

@@ -2,7 +2,7 @@
   <div>
     <label class="sr-only block" :for="action.id"> {{ action.label }}</label>
     <textarea
-      class="block min-h-[4rem] w-full max-w-md rounded border border-grey-300 bg-white px-3 py-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
+      class="block min-h-[4rem] w-full max-w-md rounded border border-content/20 bg-background brightness-user text-content px-3 py-2 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary"
       :name="block.id"
       :id="action.id"
       :placeholder="action.label || 'Enter text'"

resources/js/forms/classic/layout/Block.vue

@@ -1,6 +1,6 @@
 <template>
   <form @submit.prevent="onSubmit" :title="`Form for section ${block.id}`">
-    <div class="text-content" v-html="block.message"></div>
+    <div class="text-content form-message-prose" v-html="block.message"></div>
 
     <div class="mt-6">
       <div
@@ -51,7 +51,7 @@ const disableFocus: ComputedRef<boolean> | undefined = inject("disableFocus");
 const store = useConversation();
 
 const { actionComponent, actionValidator, actionProps } = useActions(
-  props.block
+  props.block,
 );
 
 const submitButton = templateRef<HTMLElement | null>("submitButton", null);

resources/js/types/models.d.ts

@@ -24,6 +24,7 @@ interface FormModel extends BaseModel {
     user_message_background_color: string | null;
     user_message_text_color: string | null;
     user_message_background_color: string | null;
+    use_brighter_inputs: boolean | null;
     show_form_progress: boolean | null;
     eoc_text: string | null;
     eoc_headline: string | null;
@@ -178,6 +179,8 @@ type PublicFormModel = {
     user_message_background_color: string | null;
     user_message_text_color: string | null;
     user_message_background_color: string | null;
+    use_brighter_inputs: boolean | null;
+    show_form_progress: boolean | null;
     eoc_text: string | null;
     eoc_headline: string | null;
     data_retention_days: number | null;

tailwind.config.js

@@ -42,6 +42,9 @@ module.exports = {
             borderColor: {
                 DEFAULT: colors.slate[300],
             },
+            brightness: {
+                user: "var(--brightness-user)",
+            },
             keyframes: {
                 spinner: {
                     "0%, 70%, 100%": { transform: "scale3D(1,1,1);" },

tests/Feature/FormTest.php

@@ -139,6 +139,7 @@
         'user_message_text_color' => '#ffffff',
         'interaction_background_color' => '#ffffff',
         'interaction_text_color' => '#ffffff',
+        'use_brighter_inputs' => true,
         'show_form_progress' => true,
 
         // Social Settings
@@ -190,6 +191,7 @@
     $this->assertEquals('#ffffff', $form->user_message_text_color);
     $this->assertEquals('#ffffff', $form->interaction_background_color);
     $this->assertEquals('#ffffff', $form->interaction_text_color);
+    $this->assertTrue($form->use_brighter_inputs);
     $this->assertTrue($form->show_form_progress);
 
     $this->assertTrue($form->show_social_links);