From 3021234895bbb4aadf2687a2ca7e153a1ce7abee Mon Sep 17 00:00:00 2001
From: Stephen Abello <stephen.abello@combodo.com>
Date: Thu, 2 Mar 2023 15:45:36 +0100
Subject: [PATCH] =?UTF-8?q?N=C2=B04460=20-=20Allow=20to=20customize=20skel?=
 =?UTF-8?q?eton=20placeholders=20colors=20using=20CSS3=20variables?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/backoffice/utils/variables/colors/_all.scss |  3 ++-
 .../variables/colors/_skeleton-palette.scss     | 17 +++++++++++++++++
 images/placeholders/skeleton-dashboard.svg      |  6 +++---
 images/placeholders/skeleton-list.svg           |  6 +++---
 images/placeholders/skeleton-object.svg         |  6 +++---
 images/placeholders/skeleton.svg                |  6 +++---
 6 files changed, 31 insertions(+), 13 deletions(-)
 create mode 100644 css/backoffice/utils/variables/colors/_skeleton-palette.scss

diff --git a/css/backoffice/utils/variables/colors/_all.scss b/css/backoffice/utils/variables/colors/_all.scss
index bc56d42e5..d2dab10ad 100644
--- a/css/backoffice/utils/variables/colors/_all.scss
+++ b/css/backoffice/utils/variables/colors/_all.scss
@@ -6,4 +6,5 @@
 @import "base";
 @import "base-palette";
 @import "semantic-palette";
-@import "lifecycle-palette";
\ No newline at end of file
+@import "lifecycle-palette";
+@import "skeleton-palette";
\ No newline at end of file
diff --git a/css/backoffice/utils/variables/colors/_skeleton-palette.scss b/css/backoffice/utils/variables/colors/_skeleton-palette.scss
new file mode 100644
index 000000000..9b73f95bf
--- /dev/null
+++ b/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};
+}
\ No newline at end of file
diff --git a/images/placeholders/skeleton-dashboard.svg b/images/placeholders/skeleton-dashboard.svg
index d36062b96..3a6bca4df 100644
--- a/images/placeholders/skeleton-dashboard.svg
+++ b/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
diff --git a/images/placeholders/skeleton-list.svg b/images/placeholders/skeleton-list.svg
index 56a448b9e..f714a9426 100644
--- a/images/placeholders/skeleton-list.svg
+++ b/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
diff --git a/images/placeholders/skeleton-object.svg b/images/placeholders/skeleton-object.svg
index c49462e66..437be2d9c 100644
--- a/images/placeholders/skeleton-object.svg
+++ b/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
diff --git a/images/placeholders/skeleton.svg b/images/placeholders/skeleton.svg
index 41addc105..5d7264b42 100644
--- a/images/placeholders/skeleton.svg
+++ b/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