sectioned page - add custom section background color

assets/css/panel.css

@@ -19,10 +19,11 @@ body,
   --color-yellow: #d6ff00;
   --color-brown: #d6cfbe;
   --color-grey: #c4c9cc;
+  --color-mint: #45e6ba;
 }
 
 .k-panel-menu {
-  background-color: var(--color-yellow);
+  background-color: var(--color-mint);
 }
 
 .k-field-name-herotext .k-block-type-heading-input[data-level="h3"] .k-text {

assets/css/src/page-sectioned.css

@@ -1,5 +1,6 @@
 [data-template="sectioned"] section {
   scroll-margin-top: 6rem;
+  background-color: var(--color);
 }
 
 [data-template="sectioned"] .section__row {

site/blueprints/pages/section.yml

@@ -6,6 +6,16 @@ tabs:
     label: Constructeur
     icon: dashboard
     fields:
+      isIndexed:
+        label: Indexée
+        type: toggle
+        default: true
+        help: Les titres des sections indéxés sont affichés dans le menu développé et dans le bandeau d'ancres.
+        width: 1/4
+      backgroundColor:
+        extends: fields/color
+        label: Couleur de fond
+        width: 3/4
       section:
         label: Section
         type: layout
@@ -18,12 +28,5 @@ tabs:
           - text
           - image
           - links-list
-  paramsTab:
-    label: Paramètres
-    icon: cog
-    fields:
-      isIndexed:
-        label: Titre de section affichée dans le menu développé ?
-        type: toggle
-        default: true
+
   filesTab: tabs/files

site/templates/sectioned.php

@@ -5,12 +5,15 @@
 </section>
 
 <?php foreach($page->children() as $sectionPage): ?>
-  <section id="<?= $sectionPage->slug() ?>">
+  <section id="<?= $sectionPage->slug() ?>" <?= e($sectionPage->backgroundColor()->isNotEmpty() == 'true', ' style="--color: ' . $sectionPage->backgroundColor() . ';"') ?>>
     <?php if ($sectionPage->isIndexed() != 'false'): ?>
       <h2 class="h3"><?= $sectionPage->title() ?></h2>
     <?php endif ?>
     <?php foreach ($sectionPage->section()->toLayouts() as $layout): ?>
-    <div class="section__row grid" id="<?= $layout->id() ?>">
+    <div 
+      class="section__row grid" 
+      id="<?= $layout->id() ?>"
+    >
       <?php foreach ($layout->columns() as $column): ?>
       <div class="grid__item" style="--span:<?= $column->span() ?>">
         <div class="blocks">