kup-theme-application : iconLayerDemo

smeup · May 9, 2024 · 697981b · 697981b
1 parent d0f7a26
commit 697981b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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                   */
 /*-------------------------------------------------*/