@iota/apps-ui-kit 0.5.1 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -22,32 +22,39 @@
   },
   "types": "./dist/index.d.ts",
   "dependencies": {
+    "@fontsource-variable/roboto-flex": "^5.2.6",
     "@fontsource/inter": "^5.0.17",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.3.0"
+    "@iota/apps-ui-icons": "0.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
     "@storybook/addon-essentials": "^7.1.0",
     "@storybook/addon-interactions": "^7.1.0",
     "@storybook/addon-links": "^7.1.0",
+    "@storybook/addon-themes": "^7.6.20",
     "@storybook/blocks": "^7.1.0",
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",
     "memfs": "^4.11.1",
     "postcss": "^8.4.31",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "storybook": "^7.1.0",
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.3.3",

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

@@ -4,30 +4,30 @@
 import { BadgeType } from './badge.enums';
 
 export const BACKGROUND_COLORS = {
-    [BadgeType.PrimarySolid]: 'bg-primary-30',
-    [BadgeType.Neutral]: 'bg-neutral-92 dark:bg-neutral-12',
-    [BadgeType.PrimarySoft]: 'bg-primary-90 dark:bg-primary-10',
-    [BadgeType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
-    [BadgeType.Warning]: 'bg-warning-90 dark:bg-warning-20',
-    [BadgeType.Error]: 'bg-error-90 dark:bg-error-10',
+    [BadgeType.PrimarySolid]: 'badge-bg-color-primary',
+    [BadgeType.Neutral]: 'badge-bg-color-neutral',
+    [BadgeType.PrimarySoft]: 'badge-bg-color-primary-soft',
+    [BadgeType.Success]: 'bg-success-surface',
+    [BadgeType.Warning]: 'bg-warning-surface',
+    [BadgeType.Error]: 'bg-error-surface',
 };
 
 export const TEXT_COLORS: Record<BadgeType, string> = {
-    [BadgeType.PrimarySolid]: 'text-primary-100',
-    [BadgeType.Neutral]: 'text-neutral-10 dark:text-neutral-92',
-    [BadgeType.PrimarySoft]: 'text-primary-20 dark:text-primary-90',
-    [BadgeType.Success]: 'text-tertiary-20 dark:text-tertiary-90',
-    [BadgeType.Warning]: 'text-warning-10 dark:text-warning-90',
-    [BadgeType.Error]: 'text-error-20 dark:text-error-90',
+    [BadgeType.PrimarySolid]: 'badge-text-color-primary',
+    [BadgeType.Neutral]: 'badge-text-color-neutral',
+    [BadgeType.PrimarySoft]: 'badge-text-color-primary-soft',
+    [BadgeType.Success]: 'text-on-success',
+    [BadgeType.Warning]: 'text-on-warning',
+    [BadgeType.Error]: 'text-on-error',
 };
 
 export const BORDER_COLORS: Record<BadgeType, string> = {
-    [BadgeType.PrimarySolid]: 'border-primary-30',
-    [BadgeType.Neutral]: 'border-neutral-92 dark:border-neutral-12',
-    [BadgeType.PrimarySoft]: 'border-primary-90 dark:border-primary-10',
-    [BadgeType.Success]: 'border-tertiary-90 dark:border-tertiary-10',
-    [BadgeType.Warning]: 'border-warning-90 dark:border-warning-20',
-    [BadgeType.Error]: 'border-error-90 dark:border-error-10',
+    [BadgeType.PrimarySolid]: 'badge-border-color-primary',
+    [BadgeType.Neutral]: 'badge-border-color-neutral',
+    [BadgeType.PrimarySoft]: 'badge-border-color-soft',
+    [BadgeType.Success]: 'border-success-surface',
+    [BadgeType.Warning]: 'border-warning-surface',
+    [BadgeType.Error]: 'border-error-surface',
 };
 
 export const BADGE_TEXT_CLASS = 'text-label-md';

package/src/lib/components/atoms/badge/badge.enums.ts

@@ -4,7 +4,7 @@
 export enum BadgeType {
     Neutral = 'neutral',
     PrimarySolid = 'primary-solid',
-    PrimarySoft = 'primary-fill',
+    PrimarySoft = 'primary-soft',
     Success = 'success',
     Warning = 'warning',
     Error = 'error',

package/src/lib/components/atoms/button/button-variants/ButtonPill.tsx

@@ -12,7 +12,7 @@ export function ButtonPill({
 }: Omit<ButtonVariantProps, 'className'>) {
     return (
         <button
-            className="flex items-center justify-center rounded-xl border border-neutral-70 px-sm text-body-md text-neutral-40 disabled:opacity-40 dark:border-neutral-40 dark:text-neutral-60"
+            className="button-pill-border-color button-pill-text-color flex items-center justify-center rounded-xl border px-sm text-body-md disabled:opacity-40"
             type={htmlType}
             tabIndex={tabIndex}
             {...buttonProps}

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

@@ -14,29 +14,29 @@ export const PADDINGS_ONLY_ICON: Record<ButtonSize, string> = {
 };
 
 export const BACKGROUND_COLORS: Record<ButtonType, string> = {
-    [ButtonType.Primary]: 'bg-primary-30',
-    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Primary]: 'button-bg-color-primary',
+    [ButtonType.Secondary]: 'button-bg-color-secondary',
     [ButtonType.Ghost]: 'bg-transparent',
-    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
+    [ButtonType.Outlined]: 'bg-transparent button-border-color-outline',
+    [ButtonType.Destructive]: 'button-bg-color-error',
 };
 
 export const DISABLED_BACKGROUND_COLORS: Record<ButtonType, string> = {
-    [ButtonType.Primary]: 'bg-neutral-80 dark:bg-neutral-30',
-    [ButtonType.Secondary]: 'bg-neutral-90 dark:bg-neutral-20',
+    [ButtonType.Primary]: 'button-bg-color-disabled-primary',
+    [ButtonType.Secondary]: 'button-bg-color-secondary',
     [ButtonType.Ghost]: 'bg-transparent',
-    [ButtonType.Outlined]: 'bg-transparent border border-neutral-50',
-    [ButtonType.Destructive]: 'bg-error-90 dark:bg-error-20',
+    [ButtonType.Outlined]: 'bg-transparent button-border-color-outline',
+    [ButtonType.Destructive]: 'button-bg-color-error',
 };
 
-const DEFAULT_TEXT_COLORS: string = 'text-neutral-10 dark:text-neutral-92';
+const DEFAULT_TEXT_COLORS: string = 'button-text-color-neutral';
 
 export const TEXT_COLORS: Record<ButtonType, string> = {
-    [ButtonType.Primary]: 'text-primary-100',
+    [ButtonType.Primary]: 'button-text-color-primary',
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
+    [ButtonType.Destructive]: 'button-text-color-error',
 };
 
 export const TEXT_CLASSES: Record<ButtonSize, string> = {
@@ -49,5 +49,5 @@ export const TEXT_COLOR_DISABLED: Record<ButtonType, string> = {
     [ButtonType.Secondary]: DEFAULT_TEXT_COLORS,
     [ButtonType.Ghost]: DEFAULT_TEXT_COLORS,
     [ButtonType.Outlined]: DEFAULT_TEXT_COLORS,
-    [ButtonType.Destructive]: 'text-error-20 dark:text-error-90',
+    [ButtonType.Destructive]: 'button-text-color-error',
 };

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -38,6 +38,10 @@ interface ButtonSegmentProps {
      * The type of the button.
      */
     type?: ButtonSegmentType;
+    /**
+     * If the button is nested inside a parent button.
+     */
+    isNested?: boolean;
 }
 
 export function ButtonSegment({
@@ -47,6 +51,7 @@ export function ButtonSegment({
     disabled,
     onClick,
     type = ButtonSegmentType.Rounded,
+    isNested = false,
 }: ButtonSegmentProps): React.JSX.Element {
     const isUnderlined = type === ButtonSegmentType.Underlined;
 
@@ -58,9 +63,16 @@ export function ButtonSegment({
 
     const underlined = isUnderlined ? (selected ? UNDERLINED_SELECTED : UNDERLINED) : '';
     const textColors = selected ? TEXT_COLORS_SELECTED : TEXT_COLORS;
-    const padding = isUnderlined ? 'px-lg py-md' : 'px-sm py-[6px]';
+    const padding = isUnderlined ? (isNested ? 'px-md py-sm' : 'px-lg py-md') : 'px-sm py-[6px]';
     const borderRadius = isUnderlined ? '' : 'rounded-full';
-    const textSize = isUnderlined ? 'text-title-md' : 'text-label-lg';
+    const textSize = isNested
+        ? isUnderlined
+            ? 'text-title-sm'
+            : 'text-label-md'
+        : isUnderlined
+          ? 'text-title-md'
+          : 'text-label-lg';
+
     return (
         <ButtonUnstyled
             onClick={onClick}
@@ -79,7 +91,7 @@ export function ButtonSegment({
         >
             <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
                 {icon && <span>{icon}</span>}
-                <span className="font-inter">{label}</span>
+                <span className="shrink-0 font-inter">{label}</span>
             </div>
         </ButtonUnstyled>
     );

package/src/lib/components/atoms/button-segment/buttonSegment.classes.ts

@@ -2,44 +2,23 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export const BACKGROUND_COLORS = 'bg-transparent';
-export const BACKGROUND_COLORS_SELECTED = 'bg-primary-100 dark:bg-neutral-6';
+export const BACKGROUND_COLORS_SELECTED = 'button-segment-bg-color-selected';
 
-const TEXT_COLOR = 'text-neutral-60 dark:text-neutral-40';
-const TEXT_COLOR_HOVER = 'enabled:hover:text-neutral-40 enabled:dark:hover:text-neutral-60';
-const TEXT_COLOR_FOCUSED = 'enabled:focused:text-neutral-40 enabled:dark:focused:text-neutral-60';
+const TEXT_COLOR = 'button-segment-text-color-default';
+const TEXT_COLOR_HOVER = 'button-segment-text-color-hover';
+const TEXT_COLOR_FOCUSED = 'button-segment-text-color-focused';
 
 export const TEXT_COLORS = `${TEXT_COLOR} ${TEXT_COLOR_HOVER} ${TEXT_COLOR_FOCUSED}`;
-export const TEXT_COLORS_SELECTED = 'text-neutral-10 dark:text-neutral-92';
-
-export const UNDERLINED_SELECTED = `
-    relative
-    before:content-['']
-    border-b
-    border-shader-neutral-light-8
-    dark:border-shader-neutral-dark-8
-    before:block
-    before:w-full
-    before:border-b
-    before:absolute
-    before:bottom-[-0.8px]
-    before:left-0
-    enabled:before:w-[calc(100%-16px)]
-    enabled:before:left-2
-    enabled:before:border-primary-30
-    enabled:before:dark:border-primary-80`;
+export const TEXT_COLORS_SELECTED = 'button-segment-text-color-selected';
 
 export const UNDERLINED = `
-    relative
-    before:content-['']
-    before:block
-    before:w-full
-    before:border-b
-    before:border-shader-neutral-light-8
-    before:dark:border-shader-neutral-dark-8
-    before:absolute
-    before:bottom-0
-    before:left-0
-    hover:before:w-[calc(100%-16px)]
-    hover:before:left-2
-    hover:before:border-neutral-70
-    hover:before:dark:border-neutral-40`;
+  button-segment-underline-base
+  before:bottom-0
+  button-segment-underline-hover
+  button-segment-underline-hover-color
+`;
+
+export const UNDERLINED_SELECTED = `
+  button-segment-underline-base
+  button-segment-underline-selected
+`;

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -72,10 +72,14 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
         return (
             <div
-                className={cx('group inline-flex', isLabelFirst ? 'flex-row-reverse' : 'flex-row', {
-                    disabled: isDisabled,
-                    'gap-x-2': label,
-                })}
+                className={cx(
+                    'group inline-flex has-[:disabled]:opacity-40',
+                    isLabelFirst ? 'flex-row-reverse' : 'flex-row',
+                    {
+                        disabled: isDisabled,
+                        'gap-x-2': label,
+                    },
+                )}
             >
                 <input
                     id={name}
@@ -91,7 +95,17 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 />
                 <span
                     onClick={() => inputRef.current?.click()}
-                    className="peer-enabled:state-layer relative inset-0 flex h-5 w-5 items-center justify-center rounded border border-neutral-80 text-neutral-40 group-[.disabled]:cursor-not-allowed peer-disabled:text-neutral-70 peer-disabled:text-opacity-40 peer-disabled:opacity-40 peer-[&:is(:checked,:indeterminate)]:border-primary-30 peer-[&:is(:checked,:indeterminate)]:bg-primary-30 peer-[&:is(:checked,:indeterminate)]:text-white peer-[&:not(:checked,:indeterminate)]:text-opacity-40 disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-70 dark:border-neutral-20 dark:text-neutral-60 dark:peer-disabled:text-neutral-30 dark:peer-disabled:text-opacity-40 dark:peer-disabled:peer-[&:not(:checked,:indeterminate)]:border-neutral-30 dark:peer-disabled:peer-[&:is(:checked,:indeterminate)]:bg-neutral-40 peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-60 peer-disabled:[&:is(:checked,:indeterminate)]:bg-neutral-60 dark:peer-disabled:[&:is(:checked,:indeterminate)]:border-neutral-40 [&_svg]:h-4 [&_svg]:w-4 peer-[&:not(:checked,:indeterminate)]:[&_svg]:hidden"
+                    className={cx(
+                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden',
+                        'checkbox-border-default',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
+                        'peer-[&:is(:checked,:indeterminate)]:checkbox-text-checked',
+                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:[&_svg]:hidden',
+                        'peer-disabled:peer-[&:not(:checked,:indeterminate)]:checkbox-border-color-disabled',
+                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-border-color-disabled-checked',
+                        'peer-disabled:peer-[&:is(:checked,:indeterminate)]:checkbox-bg-color-disabled-checked',
+                    )}
                 >
                     <CheckmarkIcon />
                 </span>
@@ -104,10 +118,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
     return (
-        <label
-            htmlFor={name}
-            className="text-label-lg text-neutral-40 group-[.disabled]:cursor-not-allowed group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40"
-        >
+        <label htmlFor={name} className="checkbox-label checkbox-label-disabled">
             {label}
         </label>
     );

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

@@ -3,7 +3,7 @@
 
 import { DividerType } from './divider.enums';
 
-export const BACKGROUND_COLORS = 'bg-shader-neutral-light-8 dark:bg-shader-neutral-dark-8';
+export const BACKGROUND_COLORS = 'divider-bg-color';
 
 export const DIVIDER_FULL_WIDTH: Record<DividerType, string> = {
     [DividerType.Horizontal]: 'w-full',

package/src/lib/components/atoms/header/Header.tsx

@@ -39,7 +39,7 @@ export function Header({
     const keepSpaceForIcon = titleCentered && (!onBack || !onClose);
 
     return (
-        <div className="flex min-h-[56px] w-full items-center bg-neutral-100 px-md--rs pb-xs pt-sm text-neutral-10 dark:bg-neutral-6 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5">
+        <div className="header-bg-color header-text-color flex min-h-[56px] w-full items-center px-md--rs pb-xs pt-sm [&_svg]:h-5 [&_svg]:w-5">
             {onBack ? (
                 <Button
                     size={ButtonSize.Small}

package/src/lib/components/atoms/image/Image.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { forwardRef, useState } from 'react';
+import { MediaFallback } from '../media-fallback';
+
+export interface ImageWithFallbackProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    renderFallback?: React.ReactNode;
+}
+
+export const ImageWithFallback = forwardRef<HTMLImageElement, ImageWithFallbackProps>(
+    ({ onError, renderFallback: fallback, ...imageProps }, ref) => {
+        const [imageError, setImageError] = useState(false);
+
+        function handleImageError(error: React.SyntheticEvent<HTMLImageElement, Event>) {
+            setImageError(true);
+            onError?.(error);
+        }
+
+        if (imageError || !imageProps.src) {
+            return fallback ? fallback : <MediaFallback />;
+        }
+
+        return <Image onError={handleImageError} ref={ref} {...imageProps} />;
+    },
+);
+
+export const Image = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
+    (imageProps, ref) => {
+        return <img className="h-full w-full object-cover" ref={ref} {...imageProps} />;
+    },
+);

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

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

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

@@ -13,11 +13,13 @@ export * from './label-text';
 export * from './list-item';
 export * from './header';
 export * from './panel';
+export * from './media-fallback';
+export * from './image';
 export * from './tooltip';
 export * from './info-box';
 export * from './snackbar';
-export * from './visual-asset-card';
 export * from './loading-indicator';
 export * from './placeholder';
 export * from './skeleton';
+export * from './video';
 export * from './toggle';

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -58,15 +58,9 @@ export function InfoBox({
                 </span>
             )}
             <div className="flex flex-col gap-1">
-                {title && (
-                    <span className="text-title-sm text-neutral-10 dark:text-neutral-92">
-                        {title}
-                    </span>
-                )}
+                {title && <span className="infobox-text-title text-title-sm">{title}</span>}
                 {supportingText && (
-                    <span className="text-body-sm text-neutral-40 dark:text-neutral-60">
-                        {supportingText}
-                    </span>
+                    <span className="infobox-supporting-text text-body-sm">{supportingText}</span>
                 )}
             </div>
         </div>

package/src/lib/components/atoms/info-box/infoBox.classes.ts

@@ -4,16 +4,15 @@
 import { InfoBoxType } from './infoBox.enums';
 
 export const ICON_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10 text-primary-20 dark:text-primary-90',
-    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10 text-error-20 dark:text-error-90',
-    [InfoBoxType.Success]:
-        'bg-tertiary-90 dark:bg-tertiary-10 text-tertiary-20 dark:text-tertiary-90',
-    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20 text-warning-10 dark:text-warning-90',
+    [InfoBoxType.Default]: 'bg-default-surface text-on-default',
+    [InfoBoxType.Error]: 'bg-error-surface text-on-error',
+    [InfoBoxType.Success]: 'bg-success-surface text-on-success',
+    [InfoBoxType.Warning]: 'bg-warning-surface text-on-warning',
 };
 
 export const BACKGROUND_COLORS: Record<InfoBoxType, string> = {
-    [InfoBoxType.Default]: 'bg-primary-90 dark:bg-primary-10',
-    [InfoBoxType.Error]: 'bg-error-90 dark:bg-error-10',
-    [InfoBoxType.Success]: 'bg-tertiary-90 dark:bg-tertiary-10',
-    [InfoBoxType.Warning]: 'bg-warning-90 dark:bg-warning-20',
+    [InfoBoxType.Default]: 'bg-default-surface',
+    [InfoBoxType.Error]: 'bg-error-surface',
+    [InfoBoxType.Success]: 'bg-success-surface',
+    [InfoBoxType.Warning]: 'bg-warning-surface',
 };

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -111,10 +111,10 @@ export function KeyValueInfo({
                     'w-1/4': !fullwidth,
                 })}
             >
-                <span className="text-body-md text-neutral-40 dark:text-neutral-60">{keyText}</span>
+                <span className="key-value-key-text-color text-body-md">{keyText}</span>
                 {tooltipText && (
                     <Tooltip text={tooltipText} position={tooltipPosition}>
-                        <Info className="text-neutral-60 dark:text-neutral-40" />
+                        <Info className="key-supporting-text-color" />
                     </Tooltip>
                 )}
             </div>
@@ -127,7 +127,7 @@ export function KeyValueInfo({
                 <span
                     title={valueHoverTitle}
                     className={cx(
-                        'text-neutral-10 dark:text-neutral-92',
+                        'key-value-hover-text-color',
                         size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',
                         { truncate: isTruncated },
                     )}
@@ -137,7 +137,7 @@ export function KeyValueInfo({
                 {supportingLabel && (
                     <span
                         className={cx(
-                            'text-neutral-60 dark:text-neutral-40',
+                            'key-supporting-text-color',
                             size === ValueSize.Medium ? 'text-body-md' : 'text-body-sm',
                         )}
                     >
@@ -147,7 +147,7 @@ export function KeyValueInfo({
                 <div className="self-center">
                     {copyText && (
                         <ButtonUnstyled onClick={handleCopyClick}>
-                            <Copy className="text-neutral-60 dark:text-neutral-40" />
+                            <Copy className="key-supporting-text-color" />
                         </ButtonUnstyled>
                     )}
                 </div>

package/src/lib/components/atoms/label-text/LabelText.tsx

@@ -56,15 +56,13 @@ export function LabelText({
     return (
         <div className={cx('flex flex-col', centeredClasses, gapClass)}>
             <div className="flex flex-row flex-wrap items-center gap-0.5">
-                <span
-                    className={cx('font-inter text-neutral-10 dark:text-neutral-92', textClasses)}
-                >
+                <span className={cx('label-text-primary-neutral font-inter', textClasses)}>
                     {text}
                 </span>
                 {supportingLabel && (
                     <span
                         className={cx(
-                            'font-inter text-neutral-60 dark:text-neutral-40',
+                            'label-text-secondary-neutral font-inter',
                             supportingLabelClasses,
                         )}
                     >
@@ -75,7 +73,7 @@ export function LabelText({
             <div className="flex flex-row items-center gap-x-0.5">
                 <span
                     className={cx(
-                        'flex items-center font-inter text-neutral-60 dark:text-neutral-40',
+                        'label-text-secondary-neutral flex items-center font-inter',
                         labelTextClasses,
                     )}
                 >
@@ -83,7 +81,7 @@ export function LabelText({
                     {tooltipText && (
                         <div className="ml-xxxs flex items-center">
                             <Tooltip text={tooltipText} position={tooltipPosition}>
-                                <Info className="text-neutral-60 dark:text-neutral-40" />
+                                <Info className="label-text-secondary-neutral" />
                             </Tooltip>
                         </div>
                     )}

package/src/lib/components/atoms/list-item/ListItem.tsx

@@ -54,8 +54,7 @@ export function ListItem({
             className={cx(
                 'w-full',
                 {
-                    'border-b border-shader-neutral-light-8 pb-xs dark:border-shader-neutral-dark-8':
-                        !hideBottomBorder,
+                    'list-item-border-color border-b pb-xs': !hideBottomBorder,
                 },
                 { 'opacity-40': isDisabled },
             )}
@@ -66,10 +65,10 @@ export function ListItem({
                 tabIndex={0}
                 onKeyDown={handleKeyDown}
                 className={cx(
-                    'relative flex flex-row items-center justify-between px-md py-sm text-neutral-10 dark:text-neutral-92',
+                    'list-item-color relative flex flex-row items-center justify-between px-md py-sm',
                     !isDisabled && onClick ? 'cursor-pointer' : 'cursor-default',
                     {
-                        'bg-shader-primary-dark-16 dark:bg-shader-inverted-dark-16': isHighlighted,
+                        'list-item-highlight-bg': isHighlighted,
                         'state-layer': !isDisabled,
                     },
                 )}

package/src/lib/components/atoms/loading-indicator/LoadingIndicator.tsx

@@ -24,7 +24,7 @@ export interface LoadingIndicatorProps {
 }
 
 export function LoadingIndicator({
-    color = 'text-primary-30 dark:text-primary-80',
+    color = 'loading-indicator-color',
     size = 'w-5 h-5',
     text,
     testId,

package/src/lib/components/atoms/media-fallback/MediaFallback.tsx

@@ -0,0 +1,12 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { PlaceholderReplace } from '@iota/apps-ui-icons';
+
+export function MediaFallback() {
+    return (
+        <div className="flex h-full w-full items-center justify-center bg-iota-neutral-96 dark:bg-iota-neutral-10">
+            <PlaceholderReplace className="h-4 w-4 text-iota-neutral-40 dark:text-iota-neutral-60" />
+        </div>
+    );
+}

package/src/lib/components/atoms/media-fallback/index.ts

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

package/src/lib/components/atoms/panel/Panel.tsx

@@ -17,11 +17,9 @@ interface PanelProps {
 export function Panel({
     children,
     hasBorder,
-    bgColor = 'bg-neutral-100 dark:bg-neutral-6',
+    bgColor = 'panel-bg',
 }: React.PropsWithChildren<PanelProps>): React.JSX.Element {
-    const borderClass = hasBorder
-        ? 'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8'
-        : 'border border-transparent';
+    const borderClass = hasBorder ? 'border panel-border-color' : 'border border-transparent';
     return (
         <div className={cx('flex w-full flex-col rounded-xl', bgColor, borderClass)}>
             {children}

package/src/lib/components/atoms/radio-button/RadioButton.tsx

@@ -33,7 +33,7 @@ function RadioButton({
 
     return (
         <label
-            className={cx('group flex flex-row gap-x-1 text-center', {
+            className={cx('flex flex-row gap-x-1 text-center has-[:disabled]:opacity-40', {
                 disabled: isDisabled,
                 'cursor-pointer': !isDisabled,
             })}
@@ -48,17 +48,13 @@ function RadioButton({
                     checked={isChecked}
                     onChange={onChange}
                     disabled={isDisabled}
-                    className={cx('peer appearance-none disabled:opacity-40')}
+                    className={cx('peer appearance-none')}
                 />
-                <span
-                    className="absolute
-                    text-neutral-40 peer-checked:text-primary-30 peer-disabled:opacity-40 peer-checked:peer-disabled:text-neutral-40 dark:text-neutral-60 dark:peer-checked:peer-disabled:text-neutral-40 [&_svg]:h-6 [&_svg]:w-6
-                "
-                >
+                <span className="radio-icon-color peer-checked:radio-icon-checked-color peer-checked:peer-disabled:radio-icon-checked-disabled-color absolute [&_svg]:h-6 [&_svg]:w-6">
                     <RadioIcon />
                 </span>
             </div>
-            <span className="inline-flex items-center justify-center text-label-lg text-neutral-40 group-[.disabled]:text-opacity-40 dark:text-neutral-60 group-[.disabled]:dark:text-opacity-40">
+            <span className="radio-label-color inline-flex items-center justify-center text-label-lg ">
                 {label}
             </span>
         </label>