@iota/apps-ui-kit 0.5.1 → 0.7.0

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.tsx

@@ -26,8 +26,12 @@ export function SegmentedButton({
     const backgroundColors = BACKGROUND_COLORS[type];
     const borderColors = type === SegmentedButtonType.Outlined ? OUTLINED_BORDER : '';
     const borderShape = shape === ButtonSegmentType.Rounded ? 'rounded-full gap-1 p-xxs' : '';
+    const scrollable =
+        shape === ButtonSegmentType.Rounded ? 'flex-wrap' : 'flex-nowrap overflow-x-auto';
     return (
-        <div className={cx('flex flex-row flex-wrap', backgroundColors, borderColors, borderShape)}>
+        <div
+            className={cx('flex flex-row', backgroundColors, borderColors, borderShape, scrollable)}
+        >
             {children}
         </div>
     );

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -41,7 +41,7 @@ const DialogOverlay = React.forwardRef<
 >(({ showCloseIcon, position, ...props }, ref) => (
     <RadixDialog.Overlay
         ref={ref}
-        className={cx('inset-0 z-[99998] bg-shader-neutral-light-48 backdrop-blur-md', {
+        className={cx('dialog-overlay-bg inset-0 z-[99998] backdrop-blur-md', {
             fixed: position === DialogPosition.Right,
             absolute: position === DialogPosition.Center,
         })}
@@ -98,7 +98,7 @@ const DialogContent = React.forwardRef<
                 <RadixDialog.Content
                     ref={ref}
                     className={cx(
-                        'fixed z-[99999] flex flex-col justify-center bg-primary-100 dark:bg-neutral-6',
+                        'dialog-content-bg dialog-outline fixed z-[99999] flex flex-col justify-center',
                         positionClass,
                         widthClass,
                     )}
@@ -122,7 +122,7 @@ const DialogTitle = React.forwardRef<
 >((props, ref) => (
     <RadixDialog.Title
         ref={ref}
-        className="font-inter text-title-lg text-neutral-10 dark:text-neutral-92"
+        className="dialog-title-color font-inter text-title-lg"
         {...props}
     />
 ));
@@ -132,7 +132,7 @@ const DialogBody = React.forwardRef<React.ElementRef<'div'>, React.ComponentProp
     (props, ref) => (
         <div
             ref={ref}
-            className="flex-1 overflow-y-auto p-md--rs text-body-sm text-neutral-40 dark:text-neutral-60"
+            className="dialog-body-color flex-1 overflow-y-auto p-md--rs text-body-sm"
             {...props}
         />
     ),

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -56,10 +56,10 @@ export function Navbar({
             {isCollapsible && (
                 <div className="flex w-full items-center justify-between sm:mb-[48px] sm:flex-col">
                     <div className="flex justify-center [&_svg]:h-[38px] [&_svg]:w-[38px]">
-                        <IotaLogoMark className="text-neutral-10 dark:text-neutral-92" />
+                        <IotaLogoMark className="navbar-icon-color" />
                     </div>
                     <div
-                        className="state-layer relative rounded-full p-xs hover:cursor-pointer dark:text-neutral-92 sm:hidden [&_svg]:h-6 [&_svg]:w-6"
+                        className="state-layer navbar-icon-color relative rounded-full p-xs hover:cursor-pointer sm:hidden [&_svg]:h-6 [&_svg]:w-6"
                         onClick={onToggleNavbar}
                     >
                         <MenuIcon />

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -25,7 +25,7 @@ export function NavbarSlideout({
             />
             <div
                 className={cx(
-                    'z-999 rounded-tb-3xl fixed left-0 top-0 h-full w-11/12 rounded-tr-3xl bg-white px-lg py-lg transition-transform duration-300 ease-out dark:bg-neutral-6',
+                    'z-999 rounded-tb-3xl navbar-slideout-bg fixed left-0 top-0 h-full w-11/12 rounded-tr-3xl px-lg py-lg transition-transform duration-300 ease-out',
                     {
                         'translate-x-0': isOpen,
                         '-translate-x-full': !isOpen,

package/src/lib/components/organisms/table/Table.tsx

@@ -103,9 +103,9 @@ export function Table({
                     </table>
                 </div>
                 <div
-                    className={cx('flex w-full items-center gap-2 pt-md', {
+                    className={cx('flex w-full items-center gap-sm pt-md', {
                         hidden: !supportingLabel && !paginationOptions && !action,
-                        'justify-between': paginationOptions,
+                        'flex-col justify-between sm:flex-row': paginationOptions,
                         'justify-end': !paginationOptions && action,
                     })}
                 >
@@ -149,7 +149,7 @@ export function Table({
                     {supportingLabel || pageSizeSelector ? (
                         <div className="flex flex-row items-center gap-x-sm">
                             {supportingLabel && (
-                                <span className=" text-label-md text-neutral-40 dark:text-neutral-60">
+                                <span className="table-text-color text-label-md">
                                     {supportingLabel}
                                 </span>
                             )}
@@ -182,7 +182,7 @@ export function TableRow({
     );
 }
 
-const TEXT_COLOR_CLASS = 'text-neutral-40 dark:text-neutral-60';
+const TEXT_COLOR_CLASS = 'table-text-color';
 const TEXT_SIZE_CLASS = 'text-body-md';
 
 export function TableBody({ children }: PropsWithChildren): JSX.Element {