Merge pull request #1887 from smeup/icon-layer-demo

Icon layer demo
smeup · May 9, 2024 · 9aa9f48 · 9aa9f48
2 parents f602256 + 4f4cb1a
commit 9aa9f48
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
@@ -2929,6 +2929,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.
@@ -7736,6 +7741,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
@@ -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
@@ -5,6 +5,30 @@
   --kup-layer-3: var(--kup-gray-color-30);
 }
 
+/*-------------------------------------------------*/
+/*                   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);
+}
+
+:root[kup-theme='ketchup'] {
+  --kup-icon-layer: red;
+}
+
 /*-------------------------------------------------*/
 /*                   E d i t o r                   */
 /*-------------------------------------------------*/