@iota/apps-ui-kit 0.6.0 → 0.7.0

package/src/lib/components/molecules/select/Select.tsx

@@ -137,21 +137,17 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                         onClick={onSelectorClick}
                         disabled={disabled}
                         className={cx(
-                            'flex flex-row items-center gap-x-3 rounded-lg border border-neutral-80 py-sm hover:enabled:border-neutral-50 focus-visible:enabled:border-primary-30 active:enabled:border-primary-30 disabled:cursor-not-allowed  group-[.errored]:border-error-30 group-[.opened]:border-primary-30 dark:border-neutral-20 dark:hover:enabled:border-neutral-60 dark:group-[.errored]:border-error-80 dark:group-[.opened]:border-primary-80 [&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-30 dark:[&:is(:focus,_:focus-visible,_:active)]:enabled:border-primary-80 [&_svg]:h-5 [&_svg]:w-5',
+                            'select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
                             selectPadding,
                         )}
                     >
-                        {leadingIcon && (
-                            <span className="text-neutral-10 dark:text-neutral-92">
-                                {leadingIcon}
-                            </span>
-                        )}
+                        {leadingIcon && <span className="select-icon-color">{leadingIcon}</span>}
 
                         <div className="flex w-full flex-row items-baseline gap-x-3">
                             {selectorText && (
                                 <div
                                     className={cx(
-                                        'block w-full text-start text-neutral-10 dark:text-neutral-92',
+                                        'select-label-color block w-full text-start',
                                         textSize,
                                     )}
                                 >
@@ -167,12 +163,9 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                         </div>
 
                         <TriangleDown
-                            className={cx(
-                                'text-neutral-10 transition-transform dark:text-neutral-92',
-                                {
-                                    ' rotate-180': isOpen,
-                                },
-                            )}
+                            className={cx('select-icon-color transition-transform', {
+                                ' rotate-180': isOpen,
+                            })}
                         />
                     </ButtonUnstyled>
 

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -27,7 +27,7 @@ export function TableCellBase({
     return (
         <td
             className={cx(
-                'h-14 border-b border-shader-neutral-light-8 px-md dark:border-shader-neutral-dark-8',
+                'table-cell-border-color h-14  border-b px-md',
                 { 'last:border-none': hasLastBorderNoneClass },
                 { 'flex items-center justify-center': isContentCentered },
             )}
@@ -49,7 +49,7 @@ export function TableCellText({
         <div className="flex flex-row items-baseline gap-1">
             <span>{children}</span>
             {supportingLabel && (
-                <span className="text-body-sm text-neutral-60 dark:text-neutral-40">
+                <span className="table-cell-supporting-label-color text-body-sm">
                     {supportingLabel}
                 </span>
             )}

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -79,7 +79,7 @@ export function TableHeaderCell({
         }
     };
 
-    const textColorClass = 'text-neutral-10 dark:text-neutral-92';
+    const textColorClass = 'table-header-text-color';
     const textSizeClass = 'text-label-lg';
 
     const sortElement = (() => {
@@ -102,7 +102,7 @@ export function TableHeaderCell({
         <th
             onClick={hasSort ? handleSort : undefined}
             className={cx(
-                'state-layer group relative h-14 border-b border-shader-neutral-light-8 px-md after:pointer-events-none dark:border-shader-neutral-dark-8',
+                'state-layer table-cell-border-color group relative h-14 border-b px-md after:pointer-events-none',
                 {
                     'cursor-pointer': hasSort,
                 },

package/src/lib/components/molecules/title/Title.tsx

@@ -60,15 +60,15 @@ export function Title({
         >
             <div className="flex flex-row items-center gap-x-xxxs">
                 <div className="flex flex-col justify-start">
-                    <div className="flex flex-row items-center gap-x-0.5 text-neutral-10 dark:text-neutral-92">
+                    <div className="title-main-color flex flex-row items-center gap-x-0.5">
                         <h4 className={cx(TITLE_SIZE[size])}>{title}</h4>
                         {tooltipText && (
                             <Tooltip text={tooltipText} position={tooltipPosition}>
-                                <Info />
+                                <Info className="title-icon-color" />
                             </Tooltip>
                         )}
                     </div>
-                    <p className="text-label-md text-neutral-60 dark:text-neutral-40">{subtitle}</p>
+                    <p className="title-subtitle-color text-label-md">{subtitle}</p>
                 </div>
                 {supportingElement}
             </div>

package/src/lib/components/{atoms → molecules}/visual-asset-card/VisualAssetCard.tsx

@@ -1,25 +1,13 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { VisualAssetType } from './visualAssetCard.enums';
-import { ButtonUnstyled } from '../button';
-import { MoreHoriz, PlaceholderReplace } from '@iota/apps-ui-icons';
+import { ButtonUnstyled } from '../../atoms/button';
+import { MoreHoriz } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { useState } from 'react';
+import { AssetMediaRenderer } from '../../molecules/asset-media-renderer';
+import type { AssetMediaRendererProps } from '../../molecules/asset-media-renderer';
 
-export interface VisualAssetCardProps {
-    /**
-     * The type of the asset to be displayed.
-     */
-    assetType?: VisualAssetType;
-    /**
-     * The source of the image to be displayed.
-     */
-    assetSrc: string;
-    /**
-     * Alt text for the image.
-     */
-    altText: string;
+interface VisualAssetBaseProps {
     /**
      * The onClick event for the icon.
      */
@@ -42,23 +30,31 @@ export interface VisualAssetCardProps {
     isHoverable?: boolean;
 }
 
+interface CustomAssetDisplayProps {
+    /**
+     * The media to be displayed inside the card.
+     */
+    renderAsset?: React.ReactNode;
+}
+
+export type VisualAssetCardProps = VisualAssetBaseProps &
+    (AssetMediaRendererProps | CustomAssetDisplayProps);
+
 export function VisualAssetCard({
-    assetType = VisualAssetType.Image,
-    assetSrc,
-    altText,
     onIconClick,
     onClick,
     icon = <MoreHoriz />,
     assetTitle,
     isHoverable = true,
-}: VisualAssetCardProps): React.JSX.Element {
-    const [imageError, setImageError] = useState(false);
-
+    ...assetProps
+}: VisualAssetBaseProps & (AssetMediaRendererProps | CustomAssetDisplayProps)): React.JSX.Element {
     const handleIconClick = (event: React.MouseEvent<HTMLButtonElement>) => {
         onIconClick?.(event);
         event?.stopPropagation();
     };
 
+    const isCustomAsset = !('src' in assetProps);
+
     return (
         <div
             className={cx('relative aspect-square w-full overflow-hidden rounded-xl', {
@@ -66,26 +62,16 @@ export function VisualAssetCard({
             })}
             onClick={onClick}
         >
-            {assetType === VisualAssetType.Video ? (
-                <video src={assetSrc} className="h-full w-full object-cover" autoPlay loop muted />
-            ) : imageError ? (
-                <div className="flex h-full w-full items-center justify-center bg-neutral-96 dark:bg-neutral-10">
-                    <PlaceholderReplace className="h-4 w-4 text-neutral-40 dark:text-neutral-60" />
-                </div>
-            ) : (
-                <img
-                    src={assetSrc}
-                    alt={altText}
-                    className="h-full w-full object-cover"
-                    onError={() => setImageError(true)}
-                />
-            )}
+            {!isCustomAsset && <AssetMediaRenderer {...assetProps} />}
+
+            {isCustomAsset && assetProps.renderAsset}
+
             {isHoverable && (
-                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
+                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:names:bg-shader-inverted-light-48 group-hover:dark:bg-shader-primary-dark-48" />
             )}
             {isHoverable && onIconClick && (
                 <ButtonUnstyled
-                    className="absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-primary-100"
+                    className="visual-asset-icon-color absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
                     onClick={handleIconClick}
                 >
                     {icon}
@@ -93,7 +79,7 @@ export function VisualAssetCard({
             )}
             {isHoverable && assetTitle && (
                 <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                    <span className="text-title-md text-neutral-100">{assetTitle}</span>
+                    <span className="visual-asset-title-color text-title-md">{assetTitle}</span>
                 </div>
             )}
         </div>

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -98,9 +98,8 @@ export function Accordion({
 }): React.JSX.Element {
     return (
         <div
-            className={cx('rounded-xl bg-neutral-100 dark:bg-neutral-6', {
-                'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
-                    !hideBorder,
+            className={cx('accordion-bg rounded-xl', {
+                'accordion-border-color border': !hideBorder,
             })}
         >
             {children}

package/src/lib/components/organisms/accordion/accordion.classes.ts

@@ -1,4 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export const ICON_STYLE = 'text-neutral-10 dark:text-neutral-92 transition-transform ease-linear';
+export const ICON_STYLE = 'accordion-icon-color transition-transform ease-linear';

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

@@ -41,7 +41,7 @@ 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', {
+        className={cx('dialog-overlay-bg inset-0 z-[99998] backdrop-blur-md', {
             fixed: position === DialogPosition.Right,
             absolute: position === DialogPosition.Center,
         })}
@@ -98,7 +98,7 @@ const DialogContent = React.forwardRef<
                 <RadixDialog.Content
                     ref={ref}
                     className={cx(
-                        'fixed z-[99999] flex flex-col justify-center bg-primary-100 dark:bg-neutral-6',
+                        'dialog-content-bg dialog-outline fixed z-[99999] flex flex-col justify-center',
                         positionClass,
                         widthClass,
                     )}
@@ -122,7 +122,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 +132,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,110 @@ 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-gradient': {
+        'stop-1': '#3131FF',
+        'stop-2': '#A139FF',
+        'stop-3': '#14F0D6',
+        'stop-4': '#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',
     },
 };
 

package/src/lib/styles/base.css

@@ -0,0 +1,97 @@
+@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';
+    }
+
+    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;
+    }
+}