From e3523fce29bb946bf9d2442b9421310d6d8177a2 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 4 Dec 2025 16:21:50 +0100
Subject: [PATCH] refactor: uniformize TextSettings styling and integrate
 Coloris
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrap all field sections in .settings-subsection divs to match PageSettings structure
- Properly nest margin outer and inner collapsed sections within their parent subsections
- Replace custom color picker with Coloris integration for color and background fields
- Simplify reactive state by removing unused format and picker properties
- Initialize Coloris with dark theme, alpha support, and format toggle

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/editor/TextSettings.vue | 927 ++++++++++++-------------
 1 file changed, 434 insertions(+), 493 deletions(-)

diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 451b682..33c4551 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -6,515 +6,470 @@
       pouvez modifier ensuite les éléments indépendamment.
     </p>
 
-    <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>
+    <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>
+      </div>
+    </div>
+
+    <div class="settings-subsection">
+      <div class="field">
+        <label>Graisse</label>
+        <div class="unit-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>
+
+    <div class="settings-subsection">
+      <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: 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 class="field-checkbox">
-          <input id="text-italic" type="checkbox" v-model="italic" />
-          <label for="text-italic">Italique</label>
-        </div>
       </div>
     </div>
 
-    <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: 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 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="settings-subsection">
       <div class="field">
-        <label for="margin-outer-top">Haut</label>
+        <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-top"
+            id="margin-outer"
             type="number"
-            v-model.number="marginOuterDetailed.top.value"
+            v-model.number="marginOuter.value"
             min="0"
           />
           <div class="unit-toggle">
             <button
               type="button"
-              :class="{ active: marginOuterDetailed.top.unit === 'mm' }"
-              @click="marginOuterDetailed.top.unit = 'mm'"
+              :class="{ active: marginOuter.unit === 'mm' }"
+              @click="marginOuter.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
-              :class="{ active: marginOuterDetailed.top.unit === 'px' }"
-              @click="marginOuterDetailed.top.unit = 'px'"
+              :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 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 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>
 
-      <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 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>
 
-      <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 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="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">
+    <div class="settings-subsection">
+      <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="{ active: marginInner.unit === 'mm' }"
-            @click="marginInner.unit = 'mm'"
+            class="collapse-toggle"
+            :class="{ expanded: marginInnerExpanded }"
+            @click="marginInnerExpanded = !marginInnerExpanded"
+            title="Réglages détaillés"
           >
-            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 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>
 
-      <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 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>
 
-      <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 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>
 
-      <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 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>
       </div>
@@ -523,8 +478,9 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
+import Coloris from '@melloware/coloris';
 
 const stylesheetStore = useStylesheetStore();
 
@@ -558,27 +514,14 @@ 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,
@@ -659,7 +602,7 @@ watch(
   }
 );
 
-// Color - debounced for text value, immediate for format and picker
+// Color - debounced for text value
 watch(
   () => color.value.value,
   () => {
@@ -670,17 +613,7 @@ watch(
   }
 );
 
-watch(
-  () => [color.value.format, color.value.picker],
-  () => {
-    if (isUpdatingFromStore) return;
-    immediateUpdate(() => {
-      // TODO: implement color update
-    });
-  }
-);
-
-// Background - debounced for value, immediate for format and enabled
+// Background - debounced for value
 watch(
   () => background.value.value,
   () => {
@@ -691,16 +624,6 @@ 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,
@@ -804,4 +727,22 @@ watch(
     });
   }
 );
+
+onMounted(() => {
+  Coloris.init();
+  Coloris({
+    themeMode: 'dark',
+    alpha: true,
+    format: 'auto',
+    formatToggle: true,
+    swatches: [
+      '#000000',
+      '#FFFFFF',
+      '#FF0000',
+      '#00FF00',
+      '#0000FF',
+      'transparent',
+    ],
+  });
+});
 </script>