N°4460 - Allow to customize skeleton placeholders colors using CSS3 variables

css/backoffice/utils/variables/colors/_all.scss

@@ -6,4 +6,5 @@
 @import "base";
 @import "base-palette";
 @import "semantic-palette";
-@import "lifecycle-palette";
+@import "lifecycle-palette";
+@import "skeleton-palette";

css/backoffice/utils/variables/colors/_skeleton-palette.scss

@@ -0,0 +1,17 @@
+/*
+ * @copyright   Copyright (C) 2010-2023 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+/* Skeleton palette */
+/* - Colors used by skeletons svg to display placeholders */
+
+$ibo-skeleton-start-color: $ibo-color-grey-200 !default;
+$ibo-skeleton-stop-color: $ibo-color-blue-grey-100 !default;
+
+/* CSS variables */
+/* Skeleton CSS3 variables are not ibo prefixed as they are not iTop backoffice exclusives*/
+:root {
+  --skeleton-start-color: #{$ibo-skeleton-start-color};
+  --skeleton-stop-color: #{$ibo-skeleton-stop-color};
+}

images/placeholders/skeleton-dashboard.svg

@@ -38,7 +38,7 @@
     <linearGradient id="dashboard-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -51,7 +51,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -64,7 +64,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate

images/placeholders/skeleton-list.svg

@@ -39,7 +39,7 @@
     <linearGradient id="list-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -52,7 +52,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -65,7 +65,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate

images/placeholders/skeleton-object.svg

@@ -44,7 +44,7 @@
     <linearGradient id="object-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -57,7 +57,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -70,7 +70,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate

images/placeholders/skeleton.svg

@@ -39,7 +39,7 @@
     <linearGradient id="misc-fill">
       <stop
               offset="0.599964"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate
@@ -52,7 +52,7 @@
       </stop>
       <stop
               offset="1.59996"
-              stop-color="#ecebeb"
+              stop-color="var(--skeleton-stop-color)"
               stop-opacity="1"
       >
         <animate
@@ -65,7 +65,7 @@
       </stop>
       <stop
               offset="2.59996"
-              stop-color="#f3f3f3"
+              stop-color="var(--skeleton-start-color)"
               stop-opacity="1"
       >
         <animate