Fix template editor dark theme and add #8fb6ba accent color

- Fix field type buttons in template editor sidebar: add dark background
  fallback (#252525) when no submitter color is set, preventing browser
  default white button backgrounds
- Fix submitter dropdown menu: change fallback from white to dark (#252525)
- Update primary and accent color to #8fb6ba for subtle blue detail
  throughout the interface
- Make action buttons (base-button) use primary color instead of neutral
- Add primary color focus states to input fields and textareas
- Add subtle primary hover border to outline buttons

https://claude.ai/code/session_01SMJoL1Hzz3b5qqDhyD63jF

app/javascript/application.scss

@@ -48,19 +48,19 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 }
 
 .base-input {
-  @apply input input-bordered bg-base-300;
+  @apply input input-bordered bg-base-300 focus:border-primary/50;
 }
 
 .base-textarea {
-  @apply textarea textarea-bordered bg-base-300 rounded-3xl;
+  @apply textarea textarea-bordered bg-base-300 rounded-3xl focus:border-primary/50;
 }
 
 .base-button {
-  @apply btn btn-neutral text-white text-base;
+  @apply btn btn-primary text-base-100 text-base;
 }
 
 .white-button {
-  @apply btn btn-outline text-base bg-base-300 border-2;
+  @apply btn btn-outline text-base bg-base-300 border-2 hover:border-primary/50 hover:bg-base-200;
 }
 
 .base-checkbox {

app/javascript/form.scss

@@ -48,7 +48,7 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 }
 
 .base-textarea {
-  @apply textarea textarea-bordered bg-base-300 rounded-3xl;
+  @apply textarea textarea-bordered bg-base-300 rounded-3xl focus:border-primary/50;
 }
 
 .btn {
@@ -56,15 +56,15 @@ button[disabled] .enabled, button.btn-disabled .enabled {
 }
 
 .base-input {
-  @apply input input-bordered bg-base-300;
+  @apply input input-bordered bg-base-300 focus:border-primary/50;
 }
 
 .base-button {
-  @apply btn btn-neutral text-white text-base;
+  @apply btn btn-primary text-base-100 text-base;
 }
 
 .white-button {
-  @apply btn btn-outline text-base bg-base-300 border-2;
+  @apply btn btn-outline text-base bg-base-300 border-2 hover:border-primary/50 hover:bg-base-200;
 }
 
 .base-checkbox {

app/javascript/template_builder/builder.vue

@@ -56,7 +56,7 @@
       id="title_container"
       class="flex justify-between py-1.5 items-center pr-4 top-0 z-10 title-container"
       :class="{ sticky: withStickySubmitters || isBreakpointLg }"
-      :style="{ backgroundColor }"
+      :style="{ backgroundColor: backgroundColor || '' }"
     >
       <div class="flex items-center space-x-3">
         <a
@@ -285,7 +285,7 @@
         />
         <div
           class="sticky bottom-0 py-2 space-y-2"
-          :style="{ backgroundColor }"
+          :style="{ backgroundColor: backgroundColor || '' }"
         >
           <Upload
             v-if="editable && withUploadButton"
@@ -445,7 +445,7 @@
         <div
           v-if="showDrawField || drawField || drawCustomField"
           class="sticky inset-0 h-full z-20"
-          :style="{ backgroundColor }"
+          :style="{ backgroundColor: backgroundColor || '' }"
         >
           <div class="bg-base-200 rounded-lg p-5 text-center space-y-4 draw-field-container">
             <p v-if="(drawField?.type || drawFieldType || drawCustomField?.type) === 'strikethrough'">

app/javascript/template_builder/fields.vue

@@ -5,7 +5,7 @@
       class="roles-dropdown w-full rounded-lg roles-dropdown"
       :style="withStickySubmitters ? { backgroundColor } : {}"
       :submitters="submitters"
-      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
+      :menu-style="{ overflow: 'auto', display: 'flex', flexDirection: 'row', maxHeight: 'calc(100vh - 120px)', backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? '#252525' : backgroundColor }"
       :editable="editable && !defaultSubmitters.length"
       @new-submitter="save"
       @remove="removeSubmitter"
@@ -79,7 +79,7 @@
         :key="field.name"
       >
         <div
-          :style="{ backgroundColor }"
+          :style="{ backgroundColor: backgroundColor || '#252525' }"
           draggable="true"
           class="border border-base-300 rounded relative group mb-2 default-field fields-list-item"
           @dragstart="onDragstart($event, field)"
@@ -208,7 +208,7 @@
         :id="`${type}_type_field_button`"
         draggable="true"
         class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative fields-grid-item"
-        :style="{ backgroundColor }"
+        :style="{ backgroundColor: backgroundColor || '#252525' }"
         :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
         @dragstart="onDragstart($event, { type: type })"
         @dragend="$emit('drag-end')"
@@ -237,7 +237,7 @@
           href="https://www.docuseal.com/pricing"
           target="_blank"
           class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative fields-grid-item"
-          :style="{ backgroundColor }"
+          :style="{ backgroundColor: backgroundColor || '#252525' }"
         >
           <div class="w-0 absolute left-0">
             <IconLock
@@ -263,7 +263,7 @@
           href="https://www.docuseal.com/qualified-electronic-signature"
           target="_blank"
           class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative fields-grid-item"
-          :style="{ backgroundColor }"
+          :style="{ backgroundColor: backgroundColor || '#252525' }"
         >
           <div class="w-0 absolute left-0">
             <IconLock

tailwind.config.js

@@ -7,9 +7,9 @@ module.exports = {
       {
         docuseal: {
           'color-scheme': 'dark',
-          primary: '#93bec7',
+          primary: '#8fb6ba',
           secondary: '#97b0b4',
-          accent: '#adada2',
+          accent: '#8fb6ba',
           neutral: '#2a2a2a',
           'neutral-content': '#ededde',
           'base-100': '#1a1a1a',