@iota/apps-ui-kit 0.6.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('inset-0 z-[99998] bg-shader-neutral-light-48 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(
-                        'fixed z-[99999] flex flex-col justify-center bg-primary-100 dark:bg-neutral-6',
-                        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>
         );
     },
@@ -122,7 +137,7 @@ const DialogTitle = React.forwardRef<
 >((props, ref) => (
     <RadixDialog.Title
         ref={ref}
-        className="font-inter text-title-lg text-neutral-10 dark:text-neutral-92"
+        className="dialog-title-color font-inter text-title-lg"
         {...props}
     />
 ));
@@ -132,7 +147,7 @@ const DialogBody = React.forwardRef<React.ElementRef<'div'>, React.ComponentProp
     (props, ref) => (
         <div
             ref={ref}
-            className="flex-1 overflow-y-auto p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
+            className="dialog-body-color flex-1 overflow-y-auto p-md--rs text-body-sm"
             {...props}
         />
     ),

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -56,10 +56,10 @@ export function Navbar({
             {isCollapsible && (
                 <div className="flex w-full items-center justify-between sm:mb-[48px] sm:flex-col">
                     <div className="flex justify-center [&_svg]:h-[38px] [&_svg]:w-[38px]">
-                        <IotaLogoMark className="text-neutral-10 dark:text-neutral-92" />
+                        <IotaLogoMark className="navbar-icon-color" />
                     </div>
                     <div
-                        className="state-layer relative rounded-full p-xs hover:cursor-pointer dark:text-neutral-92 sm:hidden [&_svg]:h-6 [&_svg]:w-6"
+                        className="state-layer navbar-icon-color relative rounded-full p-xs hover:cursor-pointer sm:hidden [&_svg]:h-6 [&_svg]:w-6"
                         onClick={onToggleNavbar}
                     >
                         <MenuIcon />

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -25,7 +25,7 @@ export function NavbarSlideout({
             />
             <div
                 className={cx(
-                    'z-999 rounded-tb-3xl fixed left-0 top-0 h-full w-11/12 rounded-tr-3xl bg-white px-lg py-lg transition-transform duration-300 ease-out dark:bg-neutral-6',
+                    'z-999 rounded-tb-3xl navbar-slideout-bg fixed left-0 top-0 h-full w-11/12 rounded-tr-3xl px-lg py-lg transition-transform duration-300 ease-out',
                     {
                         'translate-x-0': isOpen,
                         '-translate-x-full': !isOpen,

package/src/lib/components/organisms/table/Table.tsx

@@ -149,7 +149,7 @@ export function Table({
                     {supportingLabel || pageSizeSelector ? (
                         <div className="flex flex-row items-center gap-x-sm">
                             {supportingLabel && (
-                                <span className=" text-label-md text-neutral-40 dark:text-neutral-60">
+                                <span className="table-text-color text-label-md">
                                     {supportingLabel}
                                 </span>
                             )}
@@ -182,7 +182,7 @@ export function TableRow({
     );
 }
 
-const TEXT_COLOR_CLASS = 'text-neutral-40 dark:text-neutral-60';
+const TEXT_COLOR_CLASS = 'table-text-color';
 const TEXT_SIZE_CLASS = 'text-body-md';
 
 export function TableBody({ children }: PropsWithChildren): JSX.Element {

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const IOTA_PRIMITIVES_COLOR_PALETTE = {
-    primary: {
+    'iota-primary': {
         '0': '#000000',
         '10': '#061244',
         '20': '#182b8a',
@@ -15,7 +15,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '90': '#d5e8ff',
         '100': '#ffffff',
     },
-    secondary: {
+    'iota-secondary': {
         '0': '#000000',
         '10': '#051631',
         '20': '#17345f',
@@ -28,7 +28,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '90': '#dde9f7',
         '100': '#ffffff',
     },
-    tertiary: {
+    'iota-tertiary': {
         '0': '#000000',
         '10': '#071f22',
         '20': '#18393b',
@@ -41,7 +41,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '90': '#c2f1f4',
         '100': '#ffffff',
     },
-    error: {
+    'iota-error': {
         '0': '#000000',
         '10': '#330009',
         '20': '#610012',
@@ -54,7 +54,7 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '90': '#ffd9e0',
         '100': '#ffffff',
     },
-    neutral: {
+    'iota-neutral': {
         '0': '#000000',
         '4': '#0a0f17',
         '6': '#0f141c',
@@ -73,11 +73,111 @@ export const IOTA_PRIMITIVES_COLOR_PALETTE = {
         '98': '#f8fafc',
         '100': '#ffffff',
     },
-    warning: {
-        '10': '#422C00',
-        '20': '#2D1E00',
+    'iota-warning': {
+        '0': '#000000',
+        '10': '#2D1E00',
+        '20': '#422C00',
+        '30': '#674500',
+        '40': '#8C5D00',
+        '50': '#A47518',
+        '60': '#BE8F32',
+        '70': '#D9AA4D',
+        '80': '#F4C568',
+        '90': '#FFE3AB',
+        '100': '#FFFFFF',
+    },
+};
+
+export const IOTA_NAMES_COLOR_PALETTE = {
+    'names-primary': {
+        '0': '#000000',
+        '10': '#061244',
+        '20': '#182b8a',
+        '30': '#3131ff',
+        '40': '#2563f5',
+        '50': '#3f80f0',
+        '60': '#5b9cfe',
+        '70': '#85b5fb',
+        '80': '#adceff',
+        '90': '#d5e8ff',
+        '100': '#ffffff',
+    },
+    'names-secondary': {
+        '0': '#000000',
+        '10': '#051631',
+        '20': '#17345f',
+        '30': '#2d4c7a',
+        '40': '#4b648a',
+        '50': '#637ca2',
+        '60': '#7e97bd',
+        '70': '#96b3d5',
+        '80': '#b6cde8',
+        '90': '#dde9f7',
+        '100': '#ffffff',
+    },
+    'names-tertiary': {
+        '0': '#000000',
+        '10': '#00231F',
+        '20': '#00453D',
+        '30': '#00685C',
+        '40': '#008C7C',
+        '50': '#00AF9B',
+        '60': '#00D7BE',
+        '70': '#17F3D9',
+        '80': '#54FFEB',
+        '90': '#A6FFF4',
+        '100': '#ffffff',
+    },
+    'names-error': {
+        '0': '#000000',
+        '10': '#3D001F',
+        '20': '#620432',
+        '30': '#A30251',
+        '40': '#C90E6A',
+        '50': '#DC2B82',
+        '60': '#E35A9E',
+        '70': '#EF84B9',
+        '80': '#FCADD4',
+        '90': '#FFD7EB',
+        '100': '#ffffff',
+    },
+    'names-neutral': {
+        '0': '#000000',
+        '4': '#0A0D23',
+        '6': '#0F1228',
+        '10': '#181B31',
+        '12': '#20233C',
+        '20': '#2B2E45',
+        '30': '#404359',
+        '40': '#585B71',
+        '50': '#71748B',
+        '60': '#8C8FA5',
+        '70': '#ACAFC5',
+        '80': '#CED1E7',
+        '90': '#DFE2F8',
+        '92': '#E5E8FE',
+        '96': '#F0F2FF',
+        '98': '#F8F9FF',
+        '100': '#ffffff',
+    },
+    'names-solid': {
+        blue: '#3131FF',
+        purple: '#A139FF',
+        green: '#14F0D6',
+        neutral: '#20233C',
+    },
+    'names-warning': {
+        '0': '#000000',
+        '10': '#2D1E00',
+        '20': '#422C00',
+        '30': '#674500',
+        '40': '#8C5D00',
+        '50': '#A47518',
         '60': '#BE8F32',
+        '70': '#D9AA4D',
+        '80': '#F4C568',
         '90': '#FFE3AB',
+        '100': '#FFFFFF',
     },
 };
 
@@ -89,6 +189,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#bed8ff28',
         '48': '#bed8ff7a',
         '72': '#bed8ffb7',
+        '100': '#bed8ff',
     },
     'shader-inverted-dark': {
         '0': '#002f6d00',
@@ -97,6 +198,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#002f6d28',
         '48': '#002f6d7a',
         '72': '#002f6db7',
+        '100': '#002f6d',
     },
     'shader-neutral-dark': {
         '0': '#bed8ff00',
@@ -105,6 +207,7 @@ export const SHADER_COLOR_PALETTE = {
         '16': '#bed8ff28',
         '48': '#bed8ff7a',
         '72': '#bed8ffb7',
+        '100': '#bed8ff',
     },
     'shader-primary-light': {
         0: '#0067ee00',
@@ -113,6 +216,7 @@ export const SHADER_COLOR_PALETTE = {
         16: '#0067ee28',
         48: '#0067ee7a',
         72: '#0067eeb7',
+        100: '#0067ee',
     },
     'shader-inverted-light': {
         0: '#bed8ff00',
@@ -121,6 +225,7 @@ export const SHADER_COLOR_PALETTE = {
         16: '#bed8ff28',
         48: '#bed8ff7a',
         72: '#bed8ffb7',
+        100: '#bed8ff',
     },
     'shader-neutral-light': {
         0: '#002f6d00',
@@ -129,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

@@ -0,0 +1,137 @@
+@layer base {
+    .text-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm {
+        font-family: var(--font-family-heading);
+    }
+
+    .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-display-lg,
+    .text-display-md,
+    .text-display-sm,
+    .text-headline-lg,
+    .text-headline-md,
+    .text-headline-sm,
+    .text-body-ds-lg {
+        font-variant-alternates: 'ss02';
+        font-weight: var(--font-weight);
+        letter-spacing: var(--letter-spacing);
+    }
+
+    .text-label-md {
+        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,
+    input:-webkit-autofill:focus {
+        @apply appearance-none !bg-transparent !bg-none;
+        @apply !text-iota-neutral-92 names:!text-names-neutral-10 dark:!text-iota-neutral-10;
+        transition: background-color 5000s ease-in-out 0s;
+        -webkit-text-fill-color: theme('colors.iota-neutral.92') !important;
+    }
+
+    :root:not(.dark):not(.names) {
+        input:-webkit-autofill,
+        input:-webkit-autofill:enabled,
+        input:-webkit-autofill:hover,
+        input:-webkit-autofill:focus {
+            -webkit-text-fill-color: theme('colors.iota-neutral.10') !important;
+        }
+    }
+}
+
+@-moz-document url-prefix() {
+    * {
+        scrollbar-width: thin;
+        scrollbar-color: theme('colors.iota-neutral.30') transparent;
+    }
+
+    :root:not(.dark) {
+        * {
+            scrollbar-color: theme('colors.iota-neutral.80') transparent;
+        }
+    }
+}
+@supports selector(::-webkit-scrollbar) {
+    *::-webkit-scrollbar {
+        width: 0.875rem;
+    }
+
+    *::-webkit-scrollbar-track {
+        border-radius: 0.75rem;
+        background-color: transparent;
+    }
+
+    *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #cad4e2;
+        border-radius: 0.75rem;
+        border: 4px solid transparent;
+    }
+
+    .dark *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #3c4656;
+    }
+
+    .names *::-webkit-scrollbar-thumb {
+        box-shadow: inset 0 0 10px 10px #3c4656;
+    }
+}