diff --git a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx index 04832bf07f3..c6ab914dcb5 100644 --- a/app/component-library/components-temp/ActionListItem/ActionListItem.tsx +++ b/app/component-library/components-temp/ActionListItem/ActionListItem.tsx @@ -18,7 +18,6 @@ import { import { useTailwind } from '@metamask/design-system-twrnc-preset'; // Internal dependencies -import { useElevatedSurface } from '../../../util/theme/themeUtils'; import { ActionListItemProps } from './ActionListItem.types'; /** @@ -39,7 +38,6 @@ const ActionListItem: React.FC = ({ ...pressableProps }) => { const tw = useTailwind(); - const surfaceClass = useElevatedSurface(); // Render label based on type const renderLabel = () => { @@ -100,11 +98,11 @@ const ActionListItem: React.FC = ({ const getStyle = useCallback( ({ pressed }: { pressed: boolean }) => tw.style( - `${surfaceClass} px-4 py-3`, - pressed && !isDisabled && 'bg-default-pressed', + 'px-4 py-3', + pressed && !isDisabled && 'bg-pressed', isDisabled && 'opacity-50', ), - [tw, isDisabled, surfaceClass], + [tw, isDisabled], ); return ( diff --git a/app/component-library/components-temp/ActionListItem/README.md b/app/component-library/components-temp/ActionListItem/README.md index edca439e1e9..ea40bfb1e00 100644 --- a/app/component-library/components-temp/ActionListItem/README.md +++ b/app/component-library/components-temp/ActionListItem/README.md @@ -87,7 +87,7 @@ import { IconName } from '../../components/Icons/Icon'; ## Design Specifications -- **Background**: `bg-default` on default state, `bg-default-pressed` when pressed +- **Background**: transparent by default (parent owns surface); `bg-pressed` when pressed - **Padding**: 12px vertical, 16px horizontal - **Gap**: 16px between start content and end accessory - **Label**: Uses `TextVariant.BodyMD` with `TextColor.Default` for strings