@iota/apps-ui-kit 0.6.0 → 0.7.1

package/src/lib/components/atoms/skeleton/Skeleton.tsx

@@ -2,43 +2,26 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import React from 'react';
 
-interface SkeletonLoaderProps {
-    /**
-     * Width class for the skeleton div.
-     */
-    widthClass?: string;
-    /**
-     * Height class for the skeleton div.
-     */
-    heightClass?: string;
+interface SkeletonLoaderProps extends Pick<React.HTMLAttributes<HTMLDivElement>, 'className'> {
     /**
      * If true, the skeleton will use darker neutral colors.
      */
     hasSecondaryColors?: boolean;
-    /**
-     * Whether the class `rounded-full` should be applied. Defaults to true.
-     */
-    isRounded?: boolean;
 }
 
 export function Skeleton({
     children,
-    widthClass = 'w-full',
-    heightClass = 'h-3',
+    className,
     hasSecondaryColors,
-    isRounded = true,
 }: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
     return (
         <div
             className={cx(
-                'animate-pulse rounded-full',
-                widthClass,
-                heightClass,
-                isRounded && 'rounded-full',
-                hasSecondaryColors
-                    ? 'bg-neutral-80 dark:bg-neutral-10'
-                    : 'bg-neutral-90 dark:bg-neutral-12',
+                'h-3 w-full animate-pulse rounded-full',
+                hasSecondaryColors ? 'skeleton-secondary-bg' : 'skeleton-bg',
+                className,
             )}
         >
             {children}

package/src/lib/components/atoms/snackbar/snackbar.classes.ts

@@ -4,15 +4,15 @@
 import { SnackbarType } from './snackbar.enums';
 
 export const TEXT_COLOR: Record<SnackbarType, string> = {
-    [SnackbarType.Default]: 'text-neutral-10 dark:text-neutral-92',
-    [SnackbarType.Error]: 'text-error-20 dark:text-error-90',
-    [SnackbarType.Warning]: 'text-warning-10 dark:text-warning-90',
-    [SnackbarType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
+    [SnackbarType.Default]: 'text-on-default',
+    [SnackbarType.Error]: 'text-on-error',
+    [SnackbarType.Warning]: 'text-on-warning',
+    [SnackbarType.Success]: 'text-on-success',
 };
 
 export const BACKGROUND_COLOR: Record<SnackbarType, string> = {
-    [SnackbarType.Default]: 'bg-primary-90 dark:bg-primary-10',
-    [SnackbarType.Error]: 'bg-error-90 dark:bg-error-10',
-    [SnackbarType.Warning]: 'bg-warning-90 dark:bg-warning-20',
-    [SnackbarType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
+    [SnackbarType.Default]: 'bg-default-surface',
+    [SnackbarType.Error]: 'bg-error-surface',
+    [SnackbarType.Warning]: 'bg-warning-surface',
+    [SnackbarType.Success]: 'bg-success-surface',
 };

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -6,9 +6,9 @@ import { ToggleSize } from './toggle.enums';
 export const TOGGLE = 'relative inline-flex items-center p-xxs border rounded-full cursor-pointer';
 
 export const TOGGLE_STATES = {
-    active: 'bg-primary-30 border-primary-30',
-    inactive: 'bg-primary-100 dark:bg-neutral-6 border-neutral-70 dark:border-neutral-40',
-    disabledActive: 'bg-neutral-70 border-neutral-70',
+    active: 'toggle-bg-active toggle-border-active',
+    inactive: 'toggle-bg-inactive toggle-border-inactive',
+    disabledActive: 'toggle-bg-disabled-active toggle-border-disabled-active',
     disabled: 'opacity-40 cursor-not-allowed',
 };
 
@@ -29,8 +29,8 @@ export const TOGGLE_THUMB_POSITION = {
     },
 };
 export const TOGGLE_THUMB_COLOR = {
-    unchecked: 'bg-neutral-60',
-    checked: 'bg-white',
+    unchecked: 'toggle-thumb-color',
+    checked: 'toggle-thumb-color-checked',
 };
 export const TOGGLE_THUMB_SIZE = {
     [ToggleSize.Small]: 'h-3 w-3',
@@ -38,4 +38,4 @@ export const TOGGLE_THUMB_SIZE = {
 };
 
 export const TOGGLE_CONTAINER = 'inline-flex items-center gap-2';
-export const TOGGLE_LABEL = 'text-label-lg text-neutral-40 dark:text-neutral-60';
+export const TOGGLE_LABEL = 'text-label-lg toggle-label-color';

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -97,8 +97,9 @@ export function Tooltip({
         };
     }, [visible]);
 
-    const base =
-        'z-[999] w-max rounded bg-neutral-80 p-xs text-neutral-10 dark:bg-neutral-30 dark:text-neutral-92';
+    // z-[9999999999]: needed because we must exceed the popup’s ≈2 147 483 647 z-index;
+    // otherwise the tooltip renders but stays invisible inside a Chrome extension
+    const base = 'z-[9999999999] w-max rounded p-xs tooltip-bg tooltip-text-color';
 
     return (
         <>

package/src/lib/components/atoms/video/Video.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef } from 'react';
+import { VIDEO_AUTOPLAY_FLAGS, VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS } from './video.constants';
+
+export interface VideoProps {
+    /**
+     * Whether the video should autoplay.
+     */
+    isAutoPlayEnabled?: boolean;
+    /**
+     * If the video controls should be disabled.
+     */
+    disableControls?: boolean;
+}
+
+export const Video = forwardRef<
+    HTMLVideoElement,
+    React.ComponentPropsWithoutRef<'video'> & VideoProps
+>(({ width = '100%', height = 'auto', isAutoPlayEnabled, disableControls, ...props }, ref) => {
+    const videoProps = isAutoPlayEnabled
+        ? disableControls
+            ? VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS
+            : VIDEO_AUTOPLAY_FLAGS
+        : { preload: 'metadata', autoPlay: false };
+
+    return (
+        <video ref={ref} width={width} height={height} {...videoProps} {...props}>
+            Your browser does not support the video tag.
+        </video>
+    );
+});

package/src/lib/components/atoms/video/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Video';

package/src/lib/components/atoms/video/video.constants.ts

@@ -0,0 +1,31 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const VIDEO_AUTOPLAY_FLAGS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: true,
+    controlsList: 'nodownload',
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};
+
+export const VIDEO_AUTOPLAY_FLAGS_NO_CONTROLS: Partial<
+    Omit<React.VideoHTMLAttributes<HTMLVideoElement>, 'src'>
+> = {
+    autoPlay: true,
+    muted: true,
+    playsInline: true,
+    controls: false,
+    disablePictureInPicture: true,
+    preload: 'auto',
+    loop: true,
+    width: '100%',
+    height: 'auto',
+};

package/src/lib/components/index.ts

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

package/src/lib/components/molecules/account/Account.tsx

@@ -129,7 +129,7 @@ export function Account({
                 <Avatar isLocked={isLocked} />
                 <div className="flex flex-col items-start py-xs">
                     <div className="flex items-center space-x-2">
-                        <span className="font-inter text-title-md text-neutral-10 dark:text-neutral-92">
+                        <span className="account-title-color font-inter text-title-md">
                             {title}
                         </span>
                         {badgeText && badgeType ? (
@@ -153,7 +153,7 @@ export function Account({
                 </div>
             </div>
             <div className="z-10 ml-auto flex items-center space-x-2 [&_button]:h-5 [&_button]:w-5 [&_svg]:h-5 [&_svg]:w-5">
-                <div className="flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex [&_svg]:text-neutral-40 [&_svg]:dark:text-neutral-60">
+                <div className="account-icon-color flex items-center space-x-2 [&_button:not(.locked)]:hidden group-hover:[&_button:not(.locked)]:flex">
                     {onOptionsClick && (
                         <ButtonUnstyled onClick={onOptionsClick}>
                             <MoreHoriz />
@@ -180,9 +180,9 @@ export function Account({
                 {showSelected && (
                     <ButtonUnstyled>
                         {isSelected ? (
-                            <CheckmarkFilled className="h-5 w-5 text-primary-30 dark:text-primary-80" />
+                            <CheckmarkFilled className="account-check-active-color h-5 w-5" />
                         ) : (
-                            <RadioOff className="h-5 w-5 text-neutral-40 dark:text-neutral-60" />
+                            <RadioOff className="account-check-inactive-color h-5 w-5" />
                         )}
                     </ButtonUnstyled>
                 )}

package/src/lib/components/molecules/address/Address.tsx

@@ -78,7 +78,7 @@ export function Address({
     }
 
     return (
-        <div className="group flex flex-row items-center gap-1 text-neutral-40 dark:text-neutral-60">
+        <div className="address-text-color group flex flex-row items-center gap-1">
             <span className={cx('font-inter text-body-sm')}>{text}</span>
             {isCopyable && (
                 <ButtonUnstyled

package/src/lib/components/molecules/asset-media-renderer/AssetMediaRenderer.tsx

@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { VisualAssetType } from '../visual-asset-card/visualAssetCard.enums';
+import { Video, ImageWithFallback, Image } from '../../atoms';
+import type { VideoProps } from '../../atoms';
+
+export interface AssetMediaRendererProps extends VideoProps {
+    /**
+     * The source of the media to be displayed.
+     */
+    src: string;
+    /**
+     * The type of the asset to be displayed.
+     */
+    assetType: VisualAssetType;
+    /**
+     * Alt text for the image..
+     */
+    altText?: string;
+    /**
+     * Whether to show a fallback image if the main image fails to load.
+     */
+    showFallback?: boolean;
+}
+
+export function AssetMediaRenderer({
+    src,
+    isAutoPlayEnabled,
+    assetType,
+    altText: alt,
+    showFallback,
+    disableControls,
+}: AssetMediaRendererProps): React.JSX.Element {
+    if (assetType === VisualAssetType.Video) {
+        return (
+            <Video
+                src={src}
+                isAutoPlayEnabled={isAutoPlayEnabled}
+                disableControls={disableControls}
+            />
+        );
+    }
+
+    if (showFallback) {
+        return <ImageWithFallback src={src} alt={alt} />;
+    }
+
+    return <Image src={src} alt={alt} />;
+}

package/src/lib/components/molecules/asset-media-renderer/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AssetMediaRenderer';

package/src/lib/components/molecules/card/CardAction.tsx

@@ -37,7 +37,7 @@ export function CardAction({
         return (
             <div
                 onClick={handleActionClick}
-                className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
+                className="card-action-link-color shrink-0 [&_svg]:h-5 [&_svg]:w-5"
             >
                 {icon ? icon : <ArrowRight />}
             </div>
@@ -48,12 +48,10 @@ export function CardAction({
         return (
             <div className="shrink-0 text-right">
                 {title && (
-                    <div className="font-inter text-label-md text-neutral-10 dark:text-neutral-92">
-                        {title}
-                    </div>
+                    <div className="card-action-title-color font-inter text-label-md">{title}</div>
                 )}
                 {subtitle && (
-                    <div className="font-inter text-label-sm text-neutral-60 dark:text-neutral-40">
+                    <div className="card-action-subtitle-color font-inter text-label-sm">
                         {subtitle}
                     </div>
                 )}

package/src/lib/components/molecules/card/CardBody.tsx

@@ -39,12 +39,13 @@ export function CardBody({
                 })}
             >
                 <div
-                    className={cx('font-inter text-title-md text-neutral-10 dark:text-neutral-92', {
+                    className={cx('card-body-title-color font-inter text-title-md', {
                         truncate: isTextTruncated,
                     })}
                 >
                     {title}
                 </div>
+
                 {tooltipText ? (
                     <Tooltip text={tooltipText} position={tooltipPosition}>
                         {icon}
@@ -60,7 +61,7 @@ export function CardBody({
             </div>
             {subtitle && (
                 <div
-                    className={cx('font-inter text-body-md text-neutral-40 dark:text-neutral-60', {
+                    className={cx('card-body-subtitle-color font-inter text-body-md', {
                         truncate: isTextTruncated,
                     })}
                 >

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

@@ -14,8 +14,8 @@ export const IMAGE_VARIANT_CLASSES: { [key in ImageShape]: string } = {
 
 export const IMAGE_BG_CLASSES: { [key in ImageType]: string } = {
     [ImageType.Placeholder]: '',
-    [ImageType.BgSolid]: 'bg-neutral-96 dark:bg-neutral-10',
-    [ImageType.BgWhite]: 'bg-white dark:bg-neutral-6',
+    [ImageType.BgSolid]: 'card-image-bg-solid',
+    [ImageType.BgWhite]: 'card-image-bg-white',
     [ImageType.BgTransparent]: '',
 };
 
@@ -23,5 +23,5 @@ export const CARD_TYPE_CLASSES: Record<CardType, string> = {
     [CardType.Default]: 'border border-transparent',
     [CardType.Outlined]:
         'border border-shader-neutral-light-8 dark:border-shader-primary-dark-8 p-xs',
-    [CardType.Filled]: 'border border-transparent bg-neutral-96 dark:bg-neutral-10 p-xs',
+    [CardType.Filled]: 'border border-transparent card-filled-bg p-xs',
 };

package/src/lib/components/molecules/chip/Chip.tsx

@@ -1,18 +1,22 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { ButtonUnstyled } from '@/components/atoms/button';
+import { Close } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { ChipState } from './chip.enums';
 import {
-    BORDER_CLASSES,
     BACKGROUND_CLASSES,
+    BG_SELECTED_OUTLINE,
+    BG_SELECTED_OVERLAY,
+    BORDER_CLASSES,
+    CLOSE_ICON_INTERACTIVE,
+    FOCUS_CLASSES,
     ROUNDED_CLASS,
     STATE_LAYER_CLASSES,
     TEXT_COLOR,
-    FOCUS_CLASSES,
+    TEXT_COLOR_SELECTED_OUTLINE,
 } from './chip.classes';
-import { ButtonUnstyled } from '@/components/atoms/button';
-import { Close } from '@iota/apps-ui-icons';
+import { ChipSize, ChipType } from './chip.enums';
 
 interface ChipProps {
     /**
@@ -51,29 +55,53 @@ interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The type of the Chip
+     */
+    type?: ChipType;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
 }
 
 export function Chip({
     label,
-    showClose,
+    type = ChipType.Outline,
     selected,
+    showClose,
     onClose,
     onClick,
     avatar,
     leadingElement,
     trailingElement,
     disabled,
+    size = ChipSize.Default,
 }: ChipProps) {
-    const chipState = selected ? ChipState.Selected : ChipState.Default;
+    const isOutlineSelected = type === ChipType.Outline && selected;
+    const outlineStyle = selected
+        ? type === ChipType.Outline
+            ? 'outline-transparent names:outline-names-neutral-20'
+            : 'chip-outline-color'
+        : 'outline-transparent';
+
+    const focusOutlineStyle = cx(
+        'group-focus:chip-outline-color-active',
+        type === ChipType.Outline && 'names:group-focus:outline-transparent',
+    );
+    const selectedOverlayBg =
+        selected && !disabled && type !== ChipType.Outline ? BG_SELECTED_OVERLAY : '';
+
     return (
         <ButtonUnstyled
             onClick={onClick}
             className={cx(
-                'border transition-all duration-500 ease-in-out disabled:opacity-40',
+                'group border disabled:opacity-40',
                 ROUNDED_CLASS,
-                BACKGROUND_CLASSES[chipState],
-                BORDER_CLASSES[chipState],
-                FOCUS_CLASSES,
+                isOutlineSelected
+                    ? BG_SELECTED_OUTLINE[ChipType.Outline]
+                    : BACKGROUND_CLASSES[type],
+                selected ? 'border-transparent' : BORDER_CLASSES[type],
             )}
             disabled={disabled}
         >
@@ -82,22 +110,35 @@ export function Chip({
                     'flex h-full w-full flex-row items-center gap-x-2',
                     avatar ? 'py-xxs' : 'py-[6px]',
                     avatar ? 'pl-xxs' : leadingElement ? 'pl-xs' : 'pl-sm',
+                    showClose ? 'pr-xs' : 'pr-sm',
                     ROUNDED_CLASS,
+                    isOutlineSelected
+                        ? TEXT_COLOR_SELECTED_OUTLINE[ChipType.Outline]
+                        : TEXT_COLOR[type],
+                    outlineStyle,
+                    !disabled && focusOutlineStyle,
                     !disabled && STATE_LAYER_CLASSES,
-                    showClose ? 'pr-xs' : 'pr-sm',
-                    TEXT_COLOR[chipState],
+                    FOCUS_CLASSES,
+                    selectedOverlayBg,
                 )}
             >
                 {avatar ?? leadingElement}
-                <span className="text-body-md">{label}</span>
+                <span className={cx(size === ChipSize.Small ? 'text-label-md' : 'text-body-md')}>
+                    {label}
+                </span>
                 {trailingElement}
                 {showClose && (
-                    <ButtonUnstyled
+                    <div
                         onClick={onClose}
-                        className="cursor-pointer [&_svg]:h-4 [&_svg]:w-4"
+                        className={cx(disabled ? 'cursor-default' : 'cursor-pointer')}
                     >
-                        <Close />
-                    </ButtonUnstyled>
+                        <Close
+                            className={cx(
+                                'h-4 w-4 transition-opacity duration-150',
+                                disabled ? '' : selected ? 'opacity-100' : CLOSE_ICON_INTERACTIVE,
+                            )}
+                        />
+                    </div>
                 )}
             </span>
         </ButtonUnstyled>

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

@@ -1,32 +1,54 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ChipState } from './chip.enums';
+import { ChipType } from './chip.enums';
 
 export const ROUNDED_CLASS = 'rounded-full';
 
-export const BACKGROUND_CLASSES: Record<ChipState, string> = {
-    [ChipState.Default]: 'bg-transparent',
-    [ChipState.Selected]: 'bg-primary-90 dark:bg-primary-10',
+export const BACKGROUND_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'bg-transparent',
+    [ChipType.Elevated]: 'chip-bg-elevated',
+    [ChipType.Success]: 'bg-success-surface',
+    [ChipType.Brand]: 'chip-bg-brand',
+    [ChipType.Error]: 'bg-error-surface',
 };
 
-const STATE_LAYER_OUTLINE =
-    'outline outline-1 outline-transparent hover:outline-shader-primary-light-8 active:outline-shader-primary-light-12 dark:hover:outline-shader-primary-dark-8 dark:active:outline-shader-primary-dark-12';
+export const STATE_LAYER_OUTLINE =
+    'outline outline-1 hover:chip-outline-color-hover active:chip-outline-color-active';
 
-const STATE_LAYER_BG_CLASSES =
-    'hover:bg-shader-primary-light-8 active:bg-shader-primary-light-12 dark:hover:bg-shader-primary-dark-8 dark:active:bg-shader-primary-dark-12 focus:bg-shader-primary-light-12 dark:focus:bg-shader-primary-dark-12';
+export const STATE_LAYER_BG_CLASSES =
+    'hover:chip-bg-color-hover active:chip-bg-color-active group-focus:chip-bg-color-focus';
 
 export const STATE_LAYER_CLASSES = `${STATE_LAYER_OUTLINE} ${STATE_LAYER_BG_CLASSES}`;
 
-export const BORDER_CLASSES: Record<ChipState, string> = {
-    [ChipState.Default]: 'border-neutral-70 dark:border-neutral-40',
-    [ChipState.Selected]: 'border-transparent',
+export const BG_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-bg-selected-outline',
 };
 
-export const TEXT_COLOR: Record<ChipState, string> = {
-    [ChipState.Default]: 'text-neutral-40 dark:text-neutral-60',
-    [ChipState.Selected]: 'text-neutral-10 dark:text-neutral-92',
+export const BG_SELECTED_OVERLAY = 'chip-bg-selected-overlay';
+
+export const TEXT_COLOR_SELECTED_OUTLINE: Partial<Record<ChipType, string>> = {
+    [ChipType.Outline]: 'chip-text-secondary',
+};
+
+export const BORDER_CLASSES: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-border-default',
+    [ChipType.Elevated]: 'border-transparent',
+    [ChipType.Success]: 'border-success-surface',
+    [ChipType.Brand]: 'chip-border-color-brand',
+    [ChipType.Error]: 'border-error-surface',
+};
+
+export const TEXT_COLOR: Record<ChipType, string> = {
+    [ChipType.Outline]: 'chip-text-default',
+    [ChipType.Elevated]: 'chip-text-secondary',
+    [ChipType.Success]: 'chip-text-secondary',
+    [ChipType.Brand]: 'chip-text-brand',
+    [ChipType.Error]: 'chip-text-secondary',
 };
 
 export const FOCUS_CLASSES =
-    'focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-primary-30 focus-visible:outline-none dark:focus-visible:shadow-primary-80';
+    'focus-visible:shadow-[0_0_0_2px] focus-visible:chip-focus-ring focus-visible:outline-none';
+
+export const CLOSE_ICON_INTERACTIVE =
+    'chip-close-icon-opacity group-hover:opacity-100 group-focus:opacity-100 group-active:opacity-100';

package/src/lib/components/molecules/chip/chip.enums.ts

@@ -1,7 +1,15 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export enum ChipState {
+export enum ChipType {
+    Outline = 'outline',
+    Elevated = 'elevated',
+    Success = 'success',
+    Brand = 'brand',
+    Error = 'error',
+}
+
+export enum ChipSize {
+    Small = 'small',
     Default = 'default',
-    Selected = 'selected',
 }

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

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

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -120,7 +120,7 @@ export function DisplayStats({
                         </Tooltip>
                     )}
                 </div>
-                {icon && <span className="text-neutral-10 dark:text-neutral-92">{icon}</span>}
+                {icon && <span className="display-stats-icon-color">{icon}</span>}
             </div>
             <div className="flex w-full flex-row items-baseline gap-xxs">
                 <span className={cx('break-all', valueClass)}>{value}</span>
@@ -132,7 +132,7 @@ export function DisplayStats({
                 {copyText && (
                     <div className="self-center">
                         <ButtonUnstyled onClick={handleCopyClick}>
-                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                            <Copy className="display-stats-copy-icon-color" />
                         </ButtonUnstyled>
                     </div>
                 )}

package/src/lib/components/molecules/display-stats/displayStats.classes.ts

@@ -4,15 +4,15 @@
 import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
 
 export const BACKGROUND_CLASSES: Record<DisplayStatsType, string> = {
-    [DisplayStatsType.Default]: 'bg-neutral-96 dark:bg-neutral-10',
-    [DisplayStatsType.Highlight]: 'bg-primary-30 dark:bg-primary-80',
-    [DisplayStatsType.Secondary]: 'bg-secondary-90 dark:bg-secondary-10',
+    [DisplayStatsType.Default]: 'display-stats-bg-default',
+    [DisplayStatsType.Highlight]: 'display-stats-bg-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-bg-secondary',
 };
 
 export const TEXT_CLASSES: Record<DisplayStatsType, string> = {
-    [DisplayStatsType.Default]: 'text-neutral-10 dark:text-neutral-92',
-    [DisplayStatsType.Highlight]: 'text-neutral-100 dark:text-primary-10',
-    [DisplayStatsType.Secondary]: 'text-neutral-10 dark:text-neutral-92',
+    [DisplayStatsType.Default]: 'display-stats-text-default',
+    [DisplayStatsType.Highlight]: 'display-stats-text-highlight',
+    [DisplayStatsType.Secondary]: 'display-stats-text-secondary',
 };
 
 export const SIZE_CLASSES: Record<DisplayStatsSize, string> = {

package/src/lib/components/molecules/dropdown/Dropdown.tsx

@@ -3,7 +3,7 @@
 
 export function Dropdown({ children }: React.PropsWithChildren): React.JSX.Element {
     return (
-        <ul className="list-none rounded-lg border border-neutral-80 bg-neutral-100 py-xs dark:border-neutral-20 dark:bg-neutral-6">
+        <ul className="dropdown-bg dropdown-border-color list-none rounded-lg border py-xs">
             {children}
         </ul>
     );