feat: create themes for donuts

Author: bellangerq

confiture-web-app/src/components/AuditGenerationHeader.vue

@@ -21,7 +21,7 @@ defineProps<{
     value: number;
     total: number;
     unit?: string;
-    danger?: boolean;
+    theme?: string;
   }[];
   editUniqueId?: string;
 }>();
@@ -181,7 +181,7 @@ const isDevMode = useDevMode();
         :value="info.value"
         :total="info.total"
         :unit="info.unit"
-        :danger="info.danger"
+        :theme="info.theme"
       />
     </div>
   </div>

confiture-web-app/src/components/StatDonut.vue

@@ -3,12 +3,13 @@ defineProps<{
   value: number;
   total: number;
   unit?: string;
-  danger?: boolean;
+  // "france" for blue | "marianne" for red
+  theme?: string;
 }>();
 </script>
 
 <template>
-  <div class="card-donut" :class="{ 'is-danger': danger }">
+  <div class="card-donut" :class="theme ? `theme-${theme}` : null">
     <div class="fr-m-0 card-hole">
       <p class="fr-m-0 card-hole-content">
         {{ value }}
@@ -30,12 +31,19 @@ defineProps<{
   align-items: center;
   justify-content: center;
   background: conic-gradient(
-    var(--background-action-high-blue-france) 0deg var(--pie-deg),
-    var(--background-alt-grey) var(--pie-deg) 360deg
+    var(--border-plain-grey) 0deg var(--pie-deg),
+    var(--border-disabled-grey) var(--pie-deg) 360deg
   );
 }
 
-.is-danger {
+.theme-france {
+  background: conic-gradient(
+    var(--background-active-blue-france) 0deg var(--pie-deg),
+    var(--background-contrast-info) var(--pie-deg) 360deg
+  );
+}
+
+.theme-marianne {
   background: conic-gradient(
     var(--red-marianne-main-472) 0deg var(--pie-deg),
     var(--background-action-low-pink-macaron) var(--pie-deg) 360deg

confiture-web-app/src/components/SummaryCard.vue

@@ -9,7 +9,7 @@ defineProps<{
   value: number;
   total: number;
   unit?: string;
-  danger?: boolean;
+  theme?: string;
 }>();
 
 const slots = useSlots();
@@ -22,7 +22,7 @@ const uniqueId = useUniqueId();
 <template>
   <div class="card">
     <div class="fr-p-3w card-main-content">
-      <StatDonut :value="value" :total="total" :unit="unit" :danger="danger" />
+      <StatDonut :value="value" :total="total" :unit="unit" :theme="theme" />
 
       <div class="card-info">
         <p class="fr-h6 fr-mb-1v card-title">{{ title }}</p>

confiture-web-app/src/pages/edit/EditAuditStepFourPage.vue

@@ -46,6 +46,7 @@ const headerInfos = computed(() => [
           value: complianceLevel.value,
           total: 100,
           unit: "%",
+          theme: "france",
         },
       ]
     : []),
@@ -54,7 +55,7 @@ const headerInfos = computed(() => [
     description: `Dont ${blockingCriteriaCount.value} bloquants pour l’usager`,
     value: notCompliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.data?.auditType as AuditType),
-    danger: true,
+    theme: "marianne",
   },
   {
     title: "Critères non applicables",

confiture-web-app/src/pages/edit/EditAuditStepThreePage.vue

@@ -110,6 +110,7 @@ const headerInfos = computed(() => [
           value: complianceLevel.value,
           total: 100,
           unit: "%",
+          theme: "france",
         },
       ]
     : []),
@@ -118,7 +119,7 @@ const headerInfos = computed(() => [
     description: `Dont ${blockingCriteriaCount.value} bloquants pour l’usager`,
     value: notCompliantCriteriaCount.value,
     total: getCriteriaCount(auditStore.data?.auditType as AuditType),
-    danger: true,
+    theme: "marianne",
   },
   {
     title: "Critères non applicables",