diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index 585a9ca..80d99af 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -79,7 +79,7 @@ input[type="number"] {
         width: 50%;
 
         label {
-          width: 30%;
+          width: 50%;
         }
 
         .input-with-unit {
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index d202694..6944468 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -140,7 +140,7 @@ input[type=number] {
   width: 50%;
 }
 .settings-section .settings-subsection.margins .field label {
-  width: 30%;
+  width: 50%;
 }
 .settings-section .settings-subsection.margins .field .input-with-unit input {
   width: 50%;
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 33c4551..451b682 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -6,470 +6,515 @@
       pouvez modifier ensuite les éléments indépendamment.
     </p>
 
-    <div class="settings-subsection">
-      <div class="field">
-        <label for="text-font">Police</label>
-        <div class="field-with-option">
-          <select id="text-font" v-model="font">
-            <option value="Alegreya Sans">Alegreya Sans</option>
-            <option value="Arial">Arial</option>
-            <option value="Georgia">Georgia</option>
-            <option value="Helvetica">Helvetica</option>
-            <option value="Times New Roman">Times New Roman</option>
-          </select>
-          <div class="field-checkbox">
-            <input id="text-italic" type="checkbox" v-model="italic" />
-            <label for="text-italic">Italique</label>
-          </div>
+    <div class="field">
+      <label for="text-font">Police</label>
+      <div class="field-with-option">
+        <select id="text-font" v-model="font">
+          <option value="Alegreya Sans">Alegreya Sans</option>
+          <option value="Arial">Arial</option>
+          <option value="Georgia">Georgia</option>
+          <option value="Helvetica">Helvetica</option>
+          <option value="Times New Roman">Times New Roman</option>
+        </select>
+        <div class="field-checkbox">
+          <input id="text-italic" type="checkbox" v-model="italic" />
+          <label for="text-italic">Italique</label>
         </div>
       </div>
     </div>
 
-    <div class="settings-subsection">
-      <div class="field">
-        <label>Graisse</label>
+    <div class="field">
+      <label>Graisse</label>
+      <div class="weight-toggle">
+        <button
+          type="button"
+          :class="{ active: weight === '200' }"
+          @click="weight = '200'"
+        >
+          200
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === '300' }"
+          @click="weight = '300'"
+        >
+          300
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === '400' }"
+          @click="weight = '400'"
+        >
+          400
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === '600' }"
+          @click="weight = '600'"
+        >
+          600
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === '800' }"
+          @click="weight = '800'"
+        >
+          800
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === 'normal' }"
+          @click="weight = 'normal'"
+        >
+          normal
+        </button>
+        <button
+          type="button"
+          :class="{ active: weight === 'bold' }"
+          @click="weight = 'bold'"
+        >
+          bold
+        </button>
+      </div>
+    </div>
+
+    <div class="field">
+      <label for="text-size-range">Taille du texte</label>
+      <div class="input-with-unit">
+        <input
+          id="text-size-range"
+          type="range"
+          v-model.number="fontSize.value"
+          min="8"
+          max="72"
+          step="1"
+        />
+        <input
+          type="number"
+          v-model.number="fontSize.value"
+          min="8"
+          max="72"
+          step="1"
+          class="size-input"
+        />
         <div class="unit-toggle">
           <button
             type="button"
-            :class="{ active: weight === '200' }"
-            @click="weight = '200'"
+            :class="{ active: fontSize.unit === 'px' }"
+            @click="fontSize.unit = 'px'"
           >
-            200
+            px
           </button>
           <button
             type="button"
-            :class="{ active: weight === '300' }"
-            @click="weight = '300'"
+            :class="{ active: fontSize.unit === 'em' }"
+            @click="fontSize.unit = 'em'"
           >
-            300
+            em
           </button>
           <button
             type="button"
-            :class="{ active: weight === '400' }"
-            @click="weight = '400'"
+            :class="{ active: fontSize.unit === 'rem' }"
+            @click="fontSize.unit = 'rem'"
           >
-            400
-          </button>
-          <button
-            type="button"
-            :class="{ active: weight === '600' }"
-            @click="weight = '600'"
-          >
-            600
-          </button>
-          <button
-            type="button"
-            :class="{ active: weight === '800' }"
-            @click="weight = '800'"
-          >
-            800
-          </button>
-          <button
-            type="button"
-            :class="{ active: weight === 'normal' }"
-            @click="weight = 'normal'"
-          >
-            normal
-          </button>
-          <button
-            type="button"
-            :class="{ active: weight === 'bold' }"
-            @click="weight = 'bold'"
-          >
-            bold
+            rem
           </button>
         </div>
       </div>
     </div>
 
-    <div class="settings-subsection">
+    <div class="field">
+      <label for="text-alignment">Alignement</label>
+      <select id="text-alignment" v-model="alignment">
+        <option value="left">Gauche</option>
+        <option value="center">Centre</option>
+        <option value="right">Droite</option>
+        <option value="justify">Justifié</option>
+      </select>
+    </div>
+
+    <div class="field">
+      <label for="text-color">Couleur</label>
+      <div class="field-with-color">
+        <input type="color" v-model="color.picker" class="color-picker" />
+        <input
+          id="text-color"
+          type="text"
+          v-model="color.value"
+          class="color-input"
+        />
+        <div class="unit-toggle">
+          <button
+            type="button"
+            :class="{ active: color.format === 'rgb' }"
+            @click="color.format = 'rgb'"
+          >
+            rgb
+          </button>
+          <button
+            type="button"
+            :class="{ active: color.format === 'hex' }"
+            @click="color.format = 'hex'"
+          >
+            hex
+          </button>
+          <button
+            type="button"
+            class="clear-btn"
+            @click="clearColor"
+            title="Réinitialiser"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="field">
+      <label for="text-background">Arrière-plan</label>
+      <div class="field-with-color">
+        <button
+          type="button"
+          class="toggle-btn"
+          :class="{ active: background.enabled }"
+          @click="background.enabled = !background.enabled"
+        >
+          ×
+        </button>
+        <input
+          id="text-background"
+          type="text"
+          v-model="background.value"
+          :disabled="!background.enabled"
+          class="color-input"
+        />
+        <div class="unit-toggle">
+          <button
+            type="button"
+            :class="{ active: background.format === 'rgb' }"
+            :disabled="!background.enabled"
+            @click="background.format = 'rgb'"
+          >
+            rgb
+          </button>
+          <button
+            type="button"
+            :class="{ active: background.format === 'hex' }"
+            :disabled="!background.enabled"
+            @click="background.format = 'hex'"
+          >
+            hex
+          </button>
+          <button
+            type="button"
+            class="clear-btn"
+            :disabled="!background.enabled"
+            @click="clearBackground"
+            title="Effacer"
+          >
+            ×
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="field">
+      <label for="margin-outer">Marges extérieures</label>
+      <div class="input-with-unit">
+        <input
+          id="margin-outer"
+          type="number"
+          v-model.number="marginOuter.value"
+          min="0"
+        />
+        <div class="unit-toggle">
+          <button
+            type="button"
+            :class="{ active: marginOuter.unit === 'mm' }"
+            @click="marginOuter.unit = 'mm'"
+          >
+            mm
+          </button>
+          <button
+            type="button"
+            :class="{ active: marginOuter.unit === 'px' }"
+            @click="marginOuter.unit = 'px'"
+          >
+            px
+          </button>
+        </div>
+        <button
+          type="button"
+          class="collapse-toggle"
+          :class="{ expanded: marginOuterExpanded }"
+          @click="marginOuterExpanded = !marginOuterExpanded"
+          title="Réglages détaillés"
+        >
+          ▶
+        </button>
+      </div>
+    </div>
+
+    <div v-if="marginOuterExpanded" class="subsection collapsed-section">
       <div class="field">
-        <label for="text-size-range">Taille du texte</label>
+        <label for="margin-outer-top">Haut</label>
         <div class="input-with-unit">
           <input
-            id="text-size-range"
-            type="range"
-            v-model.number="fontSize.value"
-            min="8"
-            max="72"
-            step="1"
-          />
-          <input
+            id="margin-outer-top"
             type="number"
-            v-model.number="fontSize.value"
-            min="8"
-            max="72"
-            step="1"
-            class="size-input"
-          />
-          <div class="unit-toggle">
-            <button
-              type="button"
-              :class="{ active: fontSize.unit === 'px' }"
-              @click="fontSize.unit = 'px'"
-            >
-              px
-            </button>
-            <button
-              type="button"
-              :class="{ active: fontSize.unit === 'em' }"
-              @click="fontSize.unit = 'em'"
-            >
-              em
-            </button>
-            <button
-              type="button"
-              :class="{ active: fontSize.unit === 'rem' }"
-              @click="fontSize.unit = 'rem'"
-            >
-              rem
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="settings-subsection">
-      <div class="field">
-        <label for="text-alignment">Alignement</label>
-        <select id="text-alignment" v-model="alignment">
-          <option value="left">Gauche</option>
-          <option value="center">Centre</option>
-          <option value="right">Droite</option>
-          <option value="justify">Justifié</option>
-        </select>
-      </div>
-    </div>
-
-    <div class="settings-subsection">
-      <div class="field">
-        <label for="text-color">Couleur</label>
-        <div class="input-with-color">
-          <input
-            id="text-color"
-            type="text"
-            v-model="color.value"
-            class="color-input"
-            data-coloris
-          />
-        </div>
-      </div>
-
-      <div class="field">
-        <label for="text-background">Arrière-plan</label>
-        <div class="input-with-color">
-          <input
-            id="text-background"
-            type="text"
-            v-model="background.value"
-            class="color-input"
-            data-coloris
-          />
-        </div>
-      </div>
-    </div>
-
-    <div class="settings-subsection">
-      <div class="field">
-        <label for="margin-outer">Marges extérieures</label>
-        <div class="input-with-unit">
-          <input
-            id="margin-outer"
-            type="number"
-            v-model.number="marginOuter.value"
+            v-model.number="marginOuterDetailed.top.value"
             min="0"
           />
           <div class="unit-toggle">
             <button
               type="button"
-              :class="{ active: marginOuter.unit === 'mm' }"
-              @click="marginOuter.unit = 'mm'"
+              :class="{ active: marginOuterDetailed.top.unit === 'mm' }"
+              @click="marginOuterDetailed.top.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
-              :class="{ active: marginOuter.unit === 'px' }"
-              @click="marginOuter.unit = 'px'"
+              :class="{ active: marginOuterDetailed.top.unit === 'px' }"
+              @click="marginOuterDetailed.top.unit = 'px'"
             >
               px
             </button>
           </div>
-          <button
-            type="button"
-            class="collapse-toggle"
-            :class="{ expanded: marginOuterExpanded }"
-            @click="marginOuterExpanded = !marginOuterExpanded"
-            title="Réglages détaillés"
-          >
-            ▶
-          </button>
         </div>
       </div>
 
-      <div v-if="marginOuterExpanded" class="subsection collapsed-section">
-        <div class="field">
-          <label for="margin-outer-top">Haut</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-outer-top"
-              type="number"
-              v-model.number="marginOuterDetailed.top.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.top.unit === 'mm' }"
-                @click="marginOuterDetailed.top.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.top.unit === 'px' }"
-                @click="marginOuterDetailed.top.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="field">
-          <label for="margin-outer-bottom">Bas</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-outer-bottom"
-              type="number"
-              v-model.number="marginOuterDetailed.bottom.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.bottom.unit === 'mm' }"
-                @click="marginOuterDetailed.bottom.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.bottom.unit === 'px' }"
-                @click="marginOuterDetailed.bottom.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="field">
-          <label for="margin-outer-left">Gauche</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-outer-left"
-              type="number"
-              v-model.number="marginOuterDetailed.left.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.left.unit === 'mm' }"
-                @click="marginOuterDetailed.left.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.left.unit === 'px' }"
-                @click="marginOuterDetailed.left.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <div class="field">
-          <label for="margin-outer-right">Droite</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-outer-right"
-              type="number"
-              v-model.number="marginOuterDetailed.right.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.right.unit === 'mm' }"
-                @click="marginOuterDetailed.right.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginOuterDetailed.right.unit === 'px' }"
-                @click="marginOuterDetailed.right.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="settings-subsection">
       <div class="field">
-        <label for="margin-inner">Marges intérieures</label>
+        <label for="margin-outer-bottom">Bas</label>
         <div class="input-with-unit">
           <input
-            id="margin-inner"
+            id="margin-outer-bottom"
             type="number"
-            v-model.number="marginInner.value"
+            v-model.number="marginOuterDetailed.bottom.value"
             min="0"
           />
           <div class="unit-toggle">
             <button
               type="button"
-              :class="{ active: marginInner.unit === 'mm' }"
-              @click="marginInner.unit = 'mm'"
+              :class="{ active: marginOuterDetailed.bottom.unit === 'mm' }"
+              @click="marginOuterDetailed.bottom.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
-              :class="{ active: marginInner.unit === 'px' }"
-              @click="marginInner.unit = 'px'"
+              :class="{ active: marginOuterDetailed.bottom.unit === 'px' }"
+              @click="marginOuterDetailed.bottom.unit = 'px'"
             >
               px
             </button>
           </div>
-          <button
-            type="button"
-            class="collapse-toggle"
-            :class="{ expanded: marginInnerExpanded }"
-            @click="marginInnerExpanded = !marginInnerExpanded"
-            title="Réglages détaillés"
-          >
-            ▶
-          </button>
         </div>
       </div>
 
-      <div v-if="marginInnerExpanded" class="subsection collapsed-section">
-        <div class="field">
-          <label for="margin-inner-top">Haut</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-inner-top"
-              type="number"
-              v-model.number="marginInnerDetailed.top.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.top.unit === 'mm' }"
-                @click="marginInnerDetailed.top.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.top.unit === 'px' }"
-                @click="marginInnerDetailed.top.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
+      <div class="field">
+        <label for="margin-outer-left">Gauche</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-outer-left"
+            type="number"
+            v-model.number="marginOuterDetailed.left.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginOuterDetailed.left.unit === 'mm' }"
+              @click="marginOuterDetailed.left.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginOuterDetailed.left.unit === 'px' }"
+              @click="marginOuterDetailed.left.unit = 'px'"
+            >
+              px
+            </button>
           </div>
         </div>
+      </div>
 
-        <div class="field">
-          <label for="margin-inner-bottom">Bas</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-inner-bottom"
-              type="number"
-              v-model.number="marginInnerDetailed.bottom.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.bottom.unit === 'mm' }"
-                @click="marginInnerDetailed.bottom.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.bottom.unit === 'px' }"
-                @click="marginInnerDetailed.bottom.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
+      <div class="field">
+        <label for="margin-outer-right">Droite</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-outer-right"
+            type="number"
+            v-model.number="marginOuterDetailed.right.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginOuterDetailed.right.unit === 'mm' }"
+              @click="marginOuterDetailed.right.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginOuterDetailed.right.unit === 'px' }"
+              @click="marginOuterDetailed.right.unit = 'px'"
+            >
+              px
+            </button>
           </div>
         </div>
+      </div>
+    </div>
 
-        <div class="field">
-          <label for="margin-inner-left">Gauche</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-inner-left"
-              type="number"
-              v-model.number="marginInnerDetailed.left.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.left.unit === 'mm' }"
-                @click="marginInnerDetailed.left.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.left.unit === 'px' }"
-                @click="marginInnerDetailed.left.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
+    <div class="field">
+      <label for="margin-inner">Marges intérieures</label>
+      <div class="input-with-unit">
+        <input
+          id="margin-inner"
+          type="number"
+          v-model.number="marginInner.value"
+          min="0"
+        />
+        <div class="unit-toggle">
+          <button
+            type="button"
+            :class="{ active: marginInner.unit === 'mm' }"
+            @click="marginInner.unit = 'mm'"
+          >
+            mm
+          </button>
+          <button
+            type="button"
+            :class="{ active: marginInner.unit === 'px' }"
+            @click="marginInner.unit = 'px'"
+          >
+            px
+          </button>
+        </div>
+        <button
+          type="button"
+          class="collapse-toggle"
+          :class="{ expanded: marginInnerExpanded }"
+          @click="marginInnerExpanded = !marginInnerExpanded"
+          title="Réglages détaillés"
+        >
+          ▶
+        </button>
+      </div>
+    </div>
+
+    <div v-if="marginInnerExpanded" class="subsection collapsed-section">
+      <div class="field">
+        <label for="margin-inner-top">Haut</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-inner-top"
+            type="number"
+            v-model.number="marginInnerDetailed.top.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.top.unit === 'mm' }"
+              @click="marginInnerDetailed.top.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.top.unit === 'px' }"
+              @click="marginInnerDetailed.top.unit = 'px'"
+            >
+              px
+            </button>
           </div>
         </div>
+      </div>
 
-        <div class="field">
-          <label for="margin-inner-right">Droite</label>
-          <div class="input-with-unit">
-            <input
-              id="margin-inner-right"
-              type="number"
-              v-model.number="marginInnerDetailed.right.value"
-              min="0"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.right.unit === 'mm' }"
-                @click="marginInnerDetailed.right.unit = 'mm'"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginInnerDetailed.right.unit === 'px' }"
-                @click="marginInnerDetailed.right.unit = 'px'"
-              >
-                px
-              </button>
-            </div>
+      <div class="field">
+        <label for="margin-inner-bottom">Bas</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-inner-bottom"
+            type="number"
+            v-model.number="marginInnerDetailed.bottom.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.bottom.unit === 'mm' }"
+              @click="marginInnerDetailed.bottom.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.bottom.unit === 'px' }"
+              @click="marginInnerDetailed.bottom.unit = 'px'"
+            >
+              px
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="field">
+        <label for="margin-inner-left">Gauche</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-inner-left"
+            type="number"
+            v-model.number="marginInnerDetailed.left.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.left.unit === 'mm' }"
+              @click="marginInnerDetailed.left.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.left.unit === 'px' }"
+              @click="marginInnerDetailed.left.unit = 'px'"
+            >
+              px
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="field">
+        <label for="margin-inner-right">Droite</label>
+        <div class="input-with-unit">
+          <input
+            id="margin-inner-right"
+            type="number"
+            v-model.number="marginInnerDetailed.right.value"
+            min="0"
+          />
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.right.unit === 'mm' }"
+              @click="marginInnerDetailed.right.unit = 'mm'"
+            >
+              mm
+            </button>
+            <button
+              type="button"
+              :class="{ active: marginInnerDetailed.right.unit === 'px' }"
+              @click="marginInnerDetailed.right.unit = 'px'"
+            >
+              px
+            </button>
           </div>
         </div>
       </div>
@@ -478,9 +523,8 @@
 </template>
 
 <script setup>
-import { ref, watch, onMounted } from 'vue';
+import { ref, watch } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
-import Coloris from '@melloware/coloris';
 
 const stylesheetStore = useStylesheetStore();
 
@@ -514,14 +558,27 @@ const alignment = ref('left');
 
 // Color
 const color = ref({
+  picker: '#000000',
   value: 'rgb(250, 250, 250)',
+  format: 'rgb',
 });
 
+const clearColor = () => {
+  color.value.picker = '#000000';
+  color.value.value = '';
+};
+
 // Background
 const background = ref({
+  enabled: false,
   value: 'transparent',
+  format: 'hex',
 });
 
+const clearBackground = () => {
+  background.value.value = 'transparent';
+};
+
 // Margin outer
 const marginOuter = ref({
   value: 23,
@@ -602,7 +659,7 @@ watch(
   }
 );
 
-// Color - debounced for text value
+// Color - debounced for text value, immediate for format and picker
 watch(
   () => color.value.value,
   () => {
@@ -613,7 +670,17 @@ watch(
   }
 );
 
-// Background - debounced for value
+watch(
+  () => [color.value.format, color.value.picker],
+  () => {
+    if (isUpdatingFromStore) return;
+    immediateUpdate(() => {
+      // TODO: implement color update
+    });
+  }
+);
+
+// Background - debounced for value, immediate for format and enabled
 watch(
   () => background.value.value,
   () => {
@@ -624,6 +691,16 @@ watch(
   }
 );
 
+watch(
+  () => [background.value.format, background.value.enabled],
+  () => {
+    if (isUpdatingFromStore) return;
+    immediateUpdate(() => {
+      // TODO: implement background update
+    });
+  }
+);
+
 // Margin outer - debounced for value, immediate for unit
 watch(
   () => marginOuter.value.value,
@@ -727,22 +804,4 @@ watch(
     });
   }
 );
-
-onMounted(() => {
-  Coloris.init();
-  Coloris({
-    themeMode: 'dark',
-    alpha: true,
-    format: 'auto',
-    formatToggle: true,
-    swatches: [
-      '#000000',
-      '#FFFFFF',
-      '#FF0000',
-      '#00FF00',
-      '#0000FF',
-      'transparent',
-    ],
-  });
-});
 </script>