@iota/apps-ui-kit 0.6.0 → 0.7.0

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/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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { ChipState } from './chip.enums';
+import { ChipSize, ChipState } from './chip.enums';
 import {
     BORDER_CLASSES,
     BACKGROUND_CLASSES,
@@ -51,6 +51,10 @@ interface ChipProps {
      * The button is disabled or not.
      */
     disabled?: boolean;
+    /**
+     * The size of the chip.
+     */
+    size?: ChipSize;
 }
 
 export function Chip({
@@ -63,6 +67,7 @@ export function Chip({
     leadingElement,
     trailingElement,
     disabled,
+    size = ChipSize.Default,
 }: ChipProps) {
     const chipState = selected ? ChipState.Selected : ChipState.Default;
     return (
@@ -89,7 +94,9 @@ export function Chip({
                 )}
             >
                 {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

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

@@ -7,7 +7,7 @@ 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',
+    [ChipState.Selected]: 'chip-bg-selected',
 };
 
 const STATE_LAYER_OUTLINE =
@@ -19,14 +19,14 @@ const STATE_LAYER_BG_CLASSES =
 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.Default]: 'chip-border-default',
     [ChipState.Selected]: 'border-transparent',
 };
 
 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',
+    [ChipState.Default]: 'chip-text-default',
+    [ChipState.Selected]: 'chip-text-selected',
 };
 
 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';

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

@@ -5,3 +5,8 @@ export enum ChipState {
     Default = 'default',
     Selected = 'selected',
 }
+
+export enum ChipSize {
+    Small = 'small',
+    Default = 'default',
+}

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

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

@@ -115,9 +115,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function InputComp
                 onClick={focusOnInput}
                 ref={inputWrapperRef}
             >
-                {leadingIcon && (
-                    <span className="text-neutral-10 dark:text-neutral-92">{leadingIcon}</span>
-                )}
+                {leadingIcon && <span className="input-icon-color">{leadingIcon}</span>}
                 <InputElement
                     {...inputProps}
                     inputRef={forwardRef}
@@ -223,7 +221,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 +232,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

@@ -115,7 +115,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 +139,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.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';