@iota/apps-ui-kit 0.6.0 → 0.7.1

package/src/lib/components/molecules/index.ts

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './address';
+export * from './asset-media-renderer';
 export * from './chip';
 export * from './segmented-button';
 export * from './title';
@@ -15,3 +16,4 @@ export * from './table-header-cell';
 export * from './search';
 export * from './card';
 export * from './display-stats';
+export * from './visual-asset-card';

package/src/lib/components/molecules/input/Input.tsx

@@ -23,7 +23,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * A leading icon that is shown before the input
      */
-    leadingIcon?: React.JSX.Element;
+    leadingIcon?: React.ReactNode;
     /**
      * Supporting text that is shown at the end of the input component.
      */
@@ -35,7 +35,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Trailing element that is shown after the input
      */
-    trailingElement?: React.JSX.Element;
+    trailingElement?: React.ReactNode;
     /**
      * Is the content of the input visible
      */
@@ -44,6 +44,10 @@ export interface BaseInputProps extends InputWrapperProps {
      * Value of the input
      */
     value?: string | number;
+    /**
+     * Text that is shown below the value of the input.
+     */
+    supportingValue?: string | null;
     /**
      * Default value of the input
      */
@@ -72,6 +76,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
         trailingElement,
         isContentVisible,
         value,
+        supportingValue,
         defaultValue,
         onClearInput,
         isVisibilityToggleEnabled,
@@ -111,28 +116,38 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
             required={inputProps.required}
         >
             <div
-                className={cx('relative flex flex-row items-center gap-x-3', BORDER_CLASSES)}
+                className={cx(
+                    'input-container relative flex flex-row items-center gap-x-3',
+                    BORDER_CLASSES,
+                )}
                 onClick={focusOnInput}
                 ref={inputWrapperRef}
             >
-                {leadingIcon && (
-                    <span className="text-neutral-10 dark:text-neutral-92">{leadingIcon}</span>
-                )}
-                <InputElement
-                    {...inputProps}
-                    inputRef={forwardRef}
-                    value={value}
-                    type={
-                        type === InputType.Password && isInputContentVisible ? InputType.Text : type
-                    }
-                    disabled={disabled}
-                    className={cx(
-                        INPUT_CLASSES,
-                        INPUT_TEXT_CLASSES,
-                        INPUT_PLACEHOLDER_CLASSES,
-                        INPUT_NUMBER_CLASSES,
+                {leadingIcon && <span className="input-icon-color">{leadingIcon}</span>}
+                <div className="flex flex-1 flex-col items-start">
+                    <InputElement
+                        {...inputProps}
+                        inputRef={forwardRef}
+                        value={value}
+                        type={
+                            type === InputType.Password && isInputContentVisible
+                                ? InputType.Text
+                                : type
+                        }
+                        disabled={disabled}
+                        className={cx(
+                            INPUT_CLASSES,
+                            INPUT_TEXT_CLASSES,
+                            INPUT_PLACEHOLDER_CLASSES,
+                            INPUT_NUMBER_CLASSES,
+                        )}
+                    />
+                    {supportingValue && (
+                        <span className="text-label-md text-iota-neutral-60 names:text-iota-neutral-60 dark:text-iota-neutral-40">
+                            {supportingValue}
+                        </span>
                     )}
-                />
+                </div>
 
                 {supportingText && <SecondaryText>{supportingText}</SecondaryText>}
                 <InputTrailingElement
@@ -223,7 +238,7 @@ function InputTrailingElement({
     if (showClearInput) {
         return (
             <ButtonUnstyled
-                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 onClick={onClearInput}
                 tabIndex={-1}
             >
@@ -234,7 +249,7 @@ function InputTrailingElement({
         return (
             <ButtonUnstyled
                 onClick={onToggleButtonClick}
-                className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                 tabIndex={-1}
             >
                 {isContentVisible ? <VisibilityOn /> : <VisibilityOff />}

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -74,7 +74,7 @@ export function InputWrapper({
                 <div
                     className={cx(
                         'flex flex-row items-center',
-                        caption || errorMessage ? 'justify-between' : 'justify-end',
+                        caption || errorMessage ? 'justify-between gap-md' : 'justify-end',
                     )}
                 >
                     {(errorMessage || caption) && (

package/src/lib/components/molecules/input/TextArea.tsx

@@ -93,14 +93,13 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
                     required={required}
                     ref={ref}
                     className={cx(
-                        'peer block min-h-[50px]',
+                        'text-area-container peer block min-h-[50px]',
                         BORDER_CLASSES,
                         INPUT_CLASSES,
                         INPUT_TEXT_CLASSES,
                         INPUT_PLACEHOLDER_CLASSES,
                         isInputContentVisible && isResizeEnabled ? 'resize-y' : 'resize-none',
-                        !isInputContentVisible &&
-                            'not-visible select-none text-transparent dark:text-transparent',
+                        !isInputContentVisible && 'not-visible select-none text-transparent',
                     )}
                     value={isInputContentVisible ? value : ''}
                     {...textareaProps}
@@ -115,7 +114,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextFieldBaseProps>(func
                     <span className="absolute bottom-4 right-4 flex">
                         <ButtonUnstyled
                             onClick={onToggleButtonClick}
-                            className="text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                            className="input-icon-color [&_svg]:h-5 [&_svg]:w-5"
                             tabIndex={-1}
                         >
                             {isInputContentVisible ? <VisibilityOn /> : <VisibilityOff />}
@@ -139,10 +138,7 @@ function VisibilityOffBar({ rows, halfWidthRow }: VisibilityOffBarProps) {
                 const isHalfWidth = halfWidthRow === index + 1;
                 const width = isHalfWidth ? 'w-1/2' : 'w-full';
                 return (
-                    <div
-                        key={index}
-                        className={`h-2.5 rounded bg-neutral-92/60 dark:bg-neutral-10/60 ${width}`}
-                    />
+                    <div key={index} className={`input-visibility-bar h-2.5 rounded ${width}`} />
                 );
             })}
         </>

package/src/lib/components/molecules/input/input.classes.ts

@@ -2,13 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const INPUT_CLASSES =
-    'w-full bg-transparent text-body-lg caret-primary-30 dark:caret-primary-80 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
-export const INPUT_TEXT_CLASSES = 'text-neutral-10 dark:text-neutral-92';
-export const INPUT_PLACEHOLDER_CLASSES =
-    'enabled:placeholder:text-neutral-40/40  dark:placeholder:text-neutral-60/40 enabled:dark:placeholder:text-neutral-60/40';
-export const BORDER_CLASSES =
-    'px-md py-sm rounded-lg border border-neutral-80 group-[.enabled]:cursor-text group-[.errored]:border-error-30 hover:group-[.enabled]:border-neutral-50 dark:border-neutral-20 dark:hover:border-neutral-60 dark:group-[.errored]:border-error-80 [&:has(input:focus)]:!border-primary-30 [&:has(input:focus)]:dark:!border-primary-80';
+    'w-full input-caret-color bg-transparent text-body-lg caret-input-caret-color focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed';
+export const INPUT_TEXT_CLASSES = 'input-text-color';
+export const INPUT_PLACEHOLDER_CLASSES = 'input-placeholder-color';
 export const INPUT_NUMBER_CLASSES =
     '[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none disabled:cursor-not-allowed';
-export const LABEL_CLASSES =
-    'flex flex-col gap-y-2 text-label-lg text-neutral-40 dark:text-neutral-60';
+export const BORDER_CLASSES =
+    'px-md py-sm rounded-lg border input-border-color input-border-color-disabled group-[.enabled]:cursor-text input-border-error-color hover:group-[.enabled]:input-border-color-hover input-border-color-focus';
+
+export const LABEL_CLASSES = 'flex flex-col gap-y-2 text-label-lg input-label-color';

package/src/lib/components/molecules/navbar-item/NavbarItem.tsx

@@ -10,7 +10,6 @@ export interface NavbarItemProps {
      * The type of the navbar item.
      */
     type?: NavbarItemType;
-
     /**
      * The icon of the navbar item.
      */

package/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -29,7 +29,7 @@ export function NavbarItemHorizontal({
     const backgroundColors = isSelected && SELECTED_BACKGROUND;
     const badgePositionClasses = text ? BADGE_WITH_TEXT : BADGE_WITHOUT_TEXT;
     const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
-    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer';
+    const disabledClasses = isDisabled ? 'cursor-not-allowed opacity-60' : 'state-layer-secondary';
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (isDisabled) {
             e.preventDefault();

package/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -25,7 +25,7 @@ export function NavbarItemVertical({
     const textClasses = isSelected ? SELECTED_TEXT : UNSELECTED_TEXT;
     const disabledClasses = isDisabled
         ? 'cursor-not-allowed opacity-60'
-        : 'state-layer cursor-pointer ';
+        : 'state-layer-secondary cursor-pointer ';
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (isDisabled) {
             e.preventDefault();

package/src/lib/components/molecules/navbar-item/navbarItem.classes.ts

@@ -1,8 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export const SELECTED_ICON = 'text-neutral-10 dark:text-neutral-92';
-export const UNSELECTED_ICON = 'text-neutral-40 dark:text-neutral-60';
+export const SELECTED_ICON = 'navbar-item-icon-selected-color';
+export const UNSELECTED_ICON = 'navbar-item-icon-color';
 
 export const PADDING_WITH_TEXT = 'py-xxs px-sm';
 export const PADDING_WITHOUT_TEXT = 'p-sm';
@@ -12,5 +12,5 @@ export const SELECTED_BACKGROUND = 'bg-shader-primary-light-12 dark:bg-shader-pr
 export const BADGE_WITH_TEXT = '-top-3 right-3';
 export const BADGE_WITHOUT_TEXT = '-top-1 right-3';
 
-export const SELECTED_TEXT = 'text-neutral-10 dark:text-neutral-92';
-export const UNSELECTED_TEXT = 'text-neutral-60 dark:text-neutral-40';
+export const SELECTED_TEXT = 'navbar-item-label-selected-color';
+export const UNSELECTED_TEXT = 'navbar-item-label-color';

package/src/lib/components/molecules/search/Search.tsx

@@ -116,7 +116,12 @@ export function Search({
     const showSuggestions = isSuggestionsVisible && suggestions && suggestions.length > 0;
 
     const roundedStyleWithSuggestions = showSuggestions
-        ? 'rounded-t-3xl border-b border-b-transparent'
+        ? cx(
+              'rounded-t-3xl border-b',
+              type === SearchBarType.Outlined
+                  ? '[&:not(.dark_*,.names_*)]:border-b-transparent'
+                  : 'border-b-transparent',
+          )
         : type === SearchBarType.Outlined
           ? 'rounded-3xl border-b'
           : 'rounded-full';
@@ -159,7 +164,7 @@ export function Search({
         <div className="relative w-full">
             <div
                 className={cx(
-                    'flex items-center overflow-hidden px-md py-sm text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6',
+                    'search-text-color flex items-center overflow-hidden px-md py-sm [&_svg]:h-6 [&_svg]:w-6',
                     roundedStyleWithSuggestions,
                     searchTypeClass,
                 )}
@@ -173,7 +178,7 @@ export function Search({
                     onFocus={() => setIsSuggestionsVisible(true)}
                     placeholder={placeholder}
                     className={cx(
-                        'w-full flex-1 outline-none placeholder:text-neutral-40 placeholder:dark:text-neutral-60',
+                        'search-placeholder-color w-full flex-1 outline-none',
                         backgroundColorClass,
                     )}
                 />
@@ -183,7 +188,7 @@ export function Search({
                 <div
                     ref={suggestionsListRef}
                     className={cx(
-                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden bg-neutral-100 dark:bg-neutral-10',
+                        'absolute left-0 top-full flex w-full flex-col items-center overflow-hidden',
                         suggestionsStyle,
                     )}
                 >
@@ -200,9 +205,7 @@ export function Search({
                                 onMouseEnter={() => setSelectedIndex(index)}
                                 className={cx(
                                     'w-full cursor-pointer px-md py-sm',
-                                    selectedIndex === index
-                                        ? 'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16'
-                                        : '',
+                                    selectedIndex === index ? 'search-selected-index-bg-color' : '',
                                 )}
                             >
                                 {renderSuggestion(suggestion, index)}

package/src/lib/components/molecules/search/search.classes.ts

@@ -5,16 +5,16 @@ import { SearchBarType } from './search.enums';
 
 export const BACKGROUND_COLORS: Record<SearchBarType, string> = {
     [SearchBarType.Outlined]: 'bg-transparent',
-    [SearchBarType.Filled]: 'bg-neutral-92 dark:bg-neutral-12',
+    [SearchBarType.Filled]: 'search-bg-color-filled',
 };
 
 export const SEARCH_WRAPPER_STYLE: Record<SearchBarType, string> = {
-    [SearchBarType.Outlined]: 'border-l border-r border-t border-neutral-70 dark:border-neutral-40',
-    [SearchBarType.Filled]: 'bg-neutral-92 dark:bg-neutral-12',
+    [SearchBarType.Outlined]: 'border-l border-r border-t search-border-color',
+    [SearchBarType.Filled]: 'search-bg-color-filled',
 };
 
 export const SUGGESTIONS_WRAPPER_STYLE: Record<SearchBarType, string> = {
     [SearchBarType.Outlined]:
-        'rounded-b-3xl border-b border-l border-r border-neutral-70  dark:border-neutral-40',
-    [SearchBarType.Filled]: 'rounded-b-3xl bg-neutral-92 dark:bg-neutral-12',
+        'rounded-b-3xl border-b border-l border-r search-border-color search-suggestion-bg-color',
+    [SearchBarType.Filled]: 'rounded-b-3xl search-bg-color-filled',
 };

package/src/lib/components/molecules/segmented-button/segmentedButton.classes.ts

@@ -5,8 +5,8 @@ import { SegmentedButtonType } from './segmentedButton.enums';
 
 export const BACKGROUND_COLORS: Record<SegmentedButtonType, string> = {
     [SegmentedButtonType.Outlined]: 'bg-transparent',
-    [SegmentedButtonType.Filled]: 'bg-neutral-96 dark:bg-neutral-10',
+    [SegmentedButtonType.Filled]: 'segmented-filled-bg-color',
     [SegmentedButtonType.Transparent]: 'bg-transparent',
 };
 
-export const OUTLINED_BORDER = 'border border-neutral-70 dark:border-neutral-40';
+export const OUTLINED_BORDER = 'border segmented-outlined-border';

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

@@ -3,7 +3,7 @@
 
 import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { forwardRef, useEffect, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
 import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
@@ -88,16 +88,35 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
     ) => {
         const [isOpen, setIsOpen] = useState<boolean>(false);
         const selectedValue = findValueByProps(value, options);
+        const wrapperRef = useRef<HTMLDivElement>(null);
 
         const selectorText = selectedValue || placeholder;
         const selectPadding = size === SelectSize.Small ? 'px-sm' : 'px-md';
         const textSize = size === SelectSize.Small ? 'text-body-md' : 'text-body-lg';
+
         useEffect(() => {
             if (disabled && isOpen) {
                 closeDropdown();
             }
         }, [disabled, isOpen]);
 
+        useEffect(() => {
+            if (!isOpen) return;
+
+            const handleClickOutside = (e: MouseEvent) => {
+                const target = e.target as Node;
+                if (wrapperRef.current && !wrapperRef.current.contains(target)) {
+                    closeDropdown();
+                }
+            };
+
+            document.addEventListener('mousedown', handleClickOutside);
+
+            return () => {
+                document.removeEventListener('mousedown', handleClickOutside);
+            };
+        }, [isOpen]);
+
         function findValueByProps(value: SelectProps['value'], options: SelectOption[] = []) {
             return (
                 options.find((option) =>
@@ -123,6 +142,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
         function closeDropdown() {
             setIsOpen(false);
         }
+
         return (
             <InputWrapper
                 label={label}
@@ -131,27 +151,23 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                 errorMessage={errorMessage}
                 labelHtmlTag={LabelHtmlTag.Div}
             >
-                <div className="relative flex w-full flex-col">
+                <div className="relative flex w-full flex-col" ref={wrapperRef}>
                     <ButtonUnstyled
                         ref={ref}
                         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-container 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,18 +183,15 @@ 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>
 
                     {isOpen && (
                         <div
-                            className="fixed left-0 top-0 z-[49] h-screen w-screen bg-transparent"
+                            className="fixed left-0 top-0 z-[49] bg-transparent"
                             onClick={closeDropdown}
                         />
                     )}

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';