style

- 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>

public/assets/css/src/_forms.scss

@@ -79,7 +79,7 @@ input[type="number"] {
         width: 50%;
 
         label {
-          width: 50%;
+          width: 30%;
         }
 
         .input-with-unit {

public/assets/css/style.css

@@ -140,7 +140,7 @@ input[type=number] {
   width: 50%;
 }
 .settings-section .settings-subsection.margins .field label {
-  width: 50%;
+  width: 30%;
 }
 .settings-section .settings-subsection.margins .field .input-with-unit input {
   width: 50%;

src/components/editor/TextSettings.vue

@@ -6,6 +6,7 @@
       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">
@@ -22,10 +23,12 @@
           </div>
         </div>
       </div>
+    </div>
 
+    <div class="settings-subsection">
       <div class="field">
         <label>Graisse</label>
-      <div class="weight-toggle">
+        <div class="unit-toggle">
           <button
             type="button"
             :class="{ active: weight === '200' }"
@@ -77,7 +80,9 @@
           </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">
@@ -122,7 +127,9 @@
           </div>
         </div>
       </div>
+    </div>
 
+    <div class="settings-subsection">
       <div class="field">
         <label for="text-alignment">Alignement</label>
         <select id="text-alignment" v-model="alignment">
@@ -132,92 +139,37 @@
           <option value="justify">Justifié</option>
         </select>
       </div>
+    </div>
 
+    <div class="settings-subsection">
       <div class="field">
         <label for="text-color">Couleur</label>
-      <div class="field-with-color">
-        <input type="color" v-model="color.picker" class="color-picker" />
+        <div class="input-with-color">
           <input
             id="text-color"
             type="text"
             v-model="color.value"
             class="color-input"
+            data-coloris
           />
-        <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>
+        <div class="input-with-color">
           <input
             id="text-background"
             type="text"
             v-model="background.value"
-          :disabled="!background.enabled"
             class="color-input"
+            data-coloris
           />
-        <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="settings-subsection">
       <div class="field">
         <label for="margin-outer">Marges extérieures</label>
         <div class="input-with-unit">
@@ -368,7 +320,9 @@
           </div>
         </div>
       </div>
+    </div>
 
+    <div class="settings-subsection">
       <div class="field">
         <label for="margin-inner">Marges intérieures</label>
         <div class="input-with-unit">
@@ -519,12 +473,14 @@
           </div>
         </div>
       </div>
+    </div>
   </section>
 </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>