@iota/apps-ui-kit 0.7.0 → 0.7.1

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -41,19 +41,30 @@ const DialogOverlay = React.forwardRef<
 >(({ showCloseIcon, position, ...props }, ref) => (
     <RadixDialog.Overlay
         ref={ref}
-        className={cx('dialog-overlay-bg inset-0 z-[99998] backdrop-blur-md', {
-            fixed: position === DialogPosition.Right,
-            absolute: position === DialogPosition.Center,
-        })}
+        className={cx(
+            ' dialog-overlay-bg absolute h-full w-full backdrop-blur-md names:backdrop-blur-lg',
+        )}
         {...props}
     >
         <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
-            <Close />
+            <Close className="button-text-color-neutral" />
         </DialogClose>
     </RadixDialog.Overlay>
 ));
 DialogOverlay.displayName = RadixDialog.Overlay.displayName;
 
+const DialogContainer = React.forwardRef<
+    HTMLDivElement,
+    React.PropsWithChildren<{ isFixedPosition: boolean }>
+>((props, ref) => (
+    <div
+        className={cx('inset-0 z-[99999]', props.isFixedPosition ? 'fixed' : 'absolute')}
+        ref={ref}
+    >
+        <div className="relative h-full w-full">{props.children}</div>
+    </div>
+));
+
 const DialogContent = React.forwardRef<
     React.ElementRef<typeof RadixDialog.Content>,
     React.ComponentPropsWithoutRef<typeof RadixDialog.Content> & {
@@ -61,6 +72,7 @@ const DialogContent = React.forwardRef<
         showCloseOnOverlay?: boolean;
         position?: DialogPosition;
         customWidth?: string;
+        isFixedPosition?: boolean;
     }
 >(
     (
@@ -71,6 +83,7 @@ const DialogContent = React.forwardRef<
             children,
             position = DialogPosition.Center,
             customWidth = 'w-80 max-w-[85vw] md:w-96',
+            isFixedPosition = position === DialogPosition.Right,
             ...props
         },
         ref,
@@ -85,7 +98,7 @@ const DialogContent = React.forwardRef<
             const element = containerId ? document.getElementById(containerId) : undefined;
             setContainerElement(element ?? undefined);
         }, [containerId]);
-        const positionClass =
+        const dialogPositioning =
             position === DialogPosition.Right
                 ? 'overflow-hidden right-0 h-screen top-0 w-full'
                 : 'overflow-y-auto overflow-x-hidden left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl';
@@ -94,22 +107,24 @@ const DialogContent = React.forwardRef<
         const heightClass = position === DialogPosition.Right ? 'h-screen' : 'max-h-[80vh] h-full';
         return (
             <RadixDialog.Portal container={containerElement}>
-                <DialogOverlay showCloseIcon={showCloseOnOverlay} position={position} />
-                <RadixDialog.Content
-                    ref={ref}
-                    className={cx(
-                        'dialog-content-bg dialog-outline fixed z-[99999] flex flex-col justify-center',
-                        positionClass,
-                        widthClass,
-                    )}
-                    {...props}
-                >
-                    <VisuallyHidden.Root>
-                        <RadixDialog.Title />
-                        <RadixDialog.Description />
-                    </VisuallyHidden.Root>
-                    <div className={cx('flex flex-1 flex-col', heightClass)}>{children}</div>
-                </RadixDialog.Content>
+                <DialogContainer isFixedPosition={isFixedPosition}>
+                    <DialogOverlay showCloseIcon={showCloseOnOverlay} position={position} />
+                    <RadixDialog.Content
+                        ref={ref}
+                        className={cx(
+                            'dialog-content-bg dialog-outline absolute flex flex-col justify-center',
+                            dialogPositioning,
+                            widthClass,
+                        )}
+                        {...props}
+                    >
+                        <VisuallyHidden.Root>
+                            <RadixDialog.Title />
+                            <RadixDialog.Description />
+                        </VisuallyHidden.Root>
+                        <div className={cx('flex flex-1 flex-col', heightClass)}>{children}</div>
+                    </RadixDialog.Content>
+                </DialogContainer>
             </RadixDialog.Portal>
         );
     },

package/src/lib/constants/colors.constants.ts

@@ -87,6 +87,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '100': '#FFFFFF',
     },
 };
+
 export const IOTA_NAMES_COLOR_PALETTE = {
     'names-primary': {
         '0': '#000000',
@@ -159,11 +160,11 @@ export const IOTA_NAMES_COLOR_PALETTE = {
         '98': '#F8F9FF',
         '100': '#ffffff',
     },
-    'names-gradient': {
-        'stop-1': '#3131FF',
-        'stop-2': '#A139FF',
-        'stop-3': '#14F0D6',
-        'stop-4': '#20233C',
+    'names-solid': {
+        blue: '#3131FF',
+        purple: '#A139FF',
+        green: '#14F0D6',
+        neutral: '#20233C',
     },
     'names-warning': {
         '0': '#000000',
@@ -188,6 +189,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#bed8ff28',
         '48': '#bed8ff7a',
         '72': '#bed8ffb7',
+        '100': '#bed8ff',
     },
     'shader-inverted-dark': {
         '0': '#002f6d00',
@@ -196,6 +198,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#002f6d28',
         '48': '#002f6d7a',
         '72': '#002f6db7',
+        '100': '#002f6d',
     },
     'shader-neutral-dark': {
         '0': '#bed8ff00',
@@ -204,6 +207,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#bed8ff28',
         '48': '#bed8ff7a',
         '72': '#bed8ffb7',
+        '100': '#bed8ff',
     },
     'shader-primary-light': {
         0: '#0067ee00',
@@ -212,6 +216,7 @@ export const SHADER_COLOR_PALETTE = {
         16: '#0067ee28',
         48: '#0067ee7a',
         72: '#0067eeb7',
+        100: '#0067ee',
     },
     'shader-inverted-light': {
         0: '#bed8ff00',
@@ -220,6 +225,7 @@ export const SHADER_COLOR_PALETTE = {
         16: '#bed8ff28',
         48: '#bed8ff7a',
         72: '#bed8ffb7',
+        100: '#bed8ff',
     },
     'shader-neutral-light': {
         0: '#002f6d00',
@@ -228,5 +234,6 @@ export const SHADER_COLOR_PALETTE = {
         16: '#002f6d28',
         48: '#002f6d7a',
         72: '#002f6db7',
+        100: '#002f6d',
     },
 };

package/src/lib/enums/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './screenSize.enums';
+export * from './theme.enums';

package/src/lib/enums/theme.enums.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum UIKitTheme {
+    Light = 'light',
+    Dark = 'dark',
+    Names = 'names',
+}

package/src/lib/index.ts

@@ -1,6 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import './styles/index.css';
+
 export * from './tailwind';
 export * from './components';
 export * from './constants';

package/src/lib/styles/base.css

@@ -39,6 +39,46 @@
         font-variant-alternates: 'ss01';
     }
 
+    :root.names {
+        --roboto-flex-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750,
+            'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
+
+        .text-display-lg,
+        .text-display-md,
+        .text-display-sm {
+            font-family: var(--font-family-heading);
+            font-variation-settings: var(--roboto-flex-variation-settings);
+        }
+
+        .text-headline-lg,
+        .text-headline-md,
+        .text-headline-sm,
+        .text-title-lg,
+        .text-title-md,
+        .text-title-sm,
+        .text-body-lg,
+        .text-body-md,
+        .text-body-sm,
+        .text-body-ds-lg,
+        .text-body-ds-md,
+        .text-body-ds-sm,
+        .text-label-lg,
+        .text-label-md,
+        .text-label-sm {
+            font-family: var(--font-family-text);
+        }
+
+        .text-headline-sm,
+        .text-headline-md,
+        .text-headline-lg {
+            font-feature-settings: 'ss01' on;
+        }
+
+        .font-roboto-flex {
+            font-variation-settings: var(--roboto-flex-variation-settings);
+        }
+    }
+
     input:-webkit-autofill,
     input:-webkit-autofill:enabled,
     input:-webkit-autofill:hover,

package/src/lib/styles/components.css

@@ -415,8 +415,12 @@
 
     /* CHIP */
 
-    .chip-bg-selected {
-        background-color: var(--chip-bg-selected);
+    .chip-bg-selected-outline {
+        background-color: var(--chip-bg-selected-outline);
+    }
+
+    .chip-bg-elevated {
+        background-color: var(--chip-bg-elevated);
     }
 
     .chip-border-default {
@@ -427,14 +431,58 @@
         color: var(--chip-text-default);
     }
 
-    .chip-text-selected {
-        color: var(--chip-text-selected);
+    .chip-text-secondary {
+        color: var(--chip-text-secondary);
     }
 
     .chip-focus-ring {
         box-shadow: 0 0 0 2px var(--chip-focus-ring);
     }
 
+    .chip-bg-brand {
+        background-color: var(--chip-bg-brand);
+    }
+
+    .chip-text-brand {
+        color: var(--chip-text-brand);
+    }
+
+    .chip-border-color-brand {
+        border-color: var(--chip-border-color-brand);
+    }
+
+    .chip-bg-selected-overlay {
+        background-color: var(--chip-bg-selected-overlay);
+    }
+
+    .chip-outline-color {
+        outline-color: var(--chip-outline-color);
+    }
+
+    .chip-outline-color-hover {
+        outline-color: var(--chip-outline-color-hover);
+    }
+
+    .chip-outline-color-active {
+        outline-color: var(--chip-outline-color-active);
+    }
+
+    .chip-bg-color-hover {
+        background-color: var(--chip-bg-color-hover);
+    }
+
+    .chip-bg-color-active {
+        background-color: var(--chip-bg-color-active);
+    }
+
+    .chip-bg-color-focus {
+        background-color: var(--chip-bg-color-focus);
+    }
+
+    .chip-close-icon-opacity {
+        opacity: var(--chip-close-icon-opacity);
+    }
+
     /* DISPLAY STATS */
     .display-stats-bg-default {
         background-color: var(--display-stats-bg-default);