From 697981bb5ed13e3dba060e83775cd4926df52bd0 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Thu, 9 May 2024 15:31:04 +0200
Subject: [PATCH 1/2] kup-theme-application : iconLayerDemo

---
 packages/ketchup/src/components.d.ts          | 10 +++++++++
 .../src/f-components/f-image/f-image.tsx      |  4 +++-
 .../kup-theme/kup-theme-application.scss      | 21 +++++++++++++++++++
 3 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 10e2acf51c..443e83fa83 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -2807,6 +2807,11 @@ export namespace Components {
           * This method is used to trigger a new render of the component.
          */
         "refresh": () => Promise<void>;
+        /**
+          * Credentials sending along with request
+          * @default true
+         */
+        "sendCredentials": boolean;
         /**
           * Sets the props to the component.
           * @param props - Object containing props that will be set to the component.
@@ -7447,6 +7452,11 @@ declare namespace LocalJSX {
           * @default null
          */
         "pdfPath"?: string;
+        /**
+          * Credentials sending along with request
+          * @default true
+         */
+        "sendCredentials"?: boolean;
     }
     interface KupPhotoFrame {
         /**
diff --git a/packages/ketchup/src/f-components/f-image/f-image.tsx b/packages/ketchup/src/f-components/f-image/f-image.tsx
index cd93272629..b347d28501 100644
--- a/packages/ketchup/src/f-components/f-image/f-image.tsx
+++ b/packages/ketchup/src/f-components/f-image/f-image.tsx
@@ -74,7 +74,9 @@ function createIcon(props: FImageProps): HTMLDivElement {
         'f-image__icon': true,
     };
     const style: GenericObject = {
-        background: props.color ? props.color : `var(--kup-gray-color-70)`,
+        background: props.color
+            ? props.color
+            : `var(--kup-icon-layer, var(--kup-gray-color-70))`,
     };
     if (props.resource.indexOf('--kup') > -1) {
         let themeIcon: string = props.resource.replace('--', '');
diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
index 801d3eb029..e00e4d7098 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
@@ -1,3 +1,24 @@
+/*-------------------------------------------------*/
+/*                   Custom CSS                    */
+/*-------------------------------------------------*/
+
+:root {
+  --kup-layer-0: var(--kup-gray-color-0);
+  --kup-layer-1: var(--kup-gray-color-10);
+  --kup-layer-2: var(--kup-gray-color-20);
+  --kup-layer-3: var(--kup-gray-color-30);
+  --kup-icon-layer: var(--kup-gray-color-70);
+  --kup-imagelist-item-background-color : var(--kup-gray-color-10);
+}
+
+:root[kup-theme='ocean'] {
+  --kup-icon-layer: var(--kup-primary-color-70);
+}
+
+:root[kup-theme='ketchup'] {
+  --kup-icon-layer: red;
+}
+
 /*-------------------------------------------------*/
 /*                   E d i t o r                   */
 /*-------------------------------------------------*/

From 4f4cb1a13fd286adfe42f881378f24cf120d6699 Mon Sep 17 00:00:00 2001
From: Leonardo-Signorelli <leonardo.signorelliv@gmail.com>
Date: Thu, 9 May 2024 15:32:06 +0200
Subject: [PATCH 2/2] Update kup-theme-application.scss

---
 .../ketchup/src/managers/kup-theme/kup-theme-application.scss  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
index e00e4d7098..36530d9eef 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
@@ -2,15 +2,18 @@
 /*                   Custom CSS                    */
 /*-------------------------------------------------*/
 
+// Livello di profondità 0
 :root {
   --kup-layer-0: var(--kup-gray-color-0);
   --kup-layer-1: var(--kup-gray-color-10);
   --kup-layer-2: var(--kup-gray-color-20);
   --kup-layer-3: var(--kup-gray-color-30);
   --kup-icon-layer: var(--kup-gray-color-70);
+  // Livello di profondità 1
   --kup-imagelist-item-background-color : var(--kup-gray-color-10);
 }
 
+ // Livello di profondità 2
 :root[kup-theme='ocean'] {
   --kup-icon-layer: var(--kup-primary-color-70);
 }