Custom add and create flow polish

app/components/layout/ListItem/ListItem.types.ts

@@ -7,4 +7,5 @@ export type ListItemProps = {
   /** Bottom divider between rows — false on the final row per Figma. */
   showDivider: boolean;
   className?: string;
+  variant?: "default" | "destructive";
 };

app/components/layout/ListItem/ListItem.view.tsx

@@ -10,10 +10,15 @@ export const ListItemView = memo(function ListItemView({
   onClick,
   showDivider,
   className = "",
+  variant = "default",
 }: ListItemProps) {
   const dividerClass = showDivider
     ? "border-b border-solid border-[var(--color-border-default-tertiary)]"
     : "";
+  const contentTone =
+    variant === "destructive"
+      ? "text-[var(--color-content-default-negative-primary)]"
+      : "text-[var(--color-content-default-primary)]";
 
   return (
     <button
@@ -22,10 +27,14 @@ export const ListItemView = memo(function ListItemView({
       onClick={onClick}
       className={`relative flex w-full shrink-0 cursor-pointer items-center gap-[6px] px-[4px] py-[16px] text-left hover:bg-[var(--color-surface-default-tertiary)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--color-border-invert-primary)] ${dividerClass} ${className}`}
     >
-      <span className="flex size-6 shrink-0 items-center justify-center overflow-visible text-[var(--color-content-default-primary)]">
+      <span
+        className={`flex size-6 shrink-0 items-center justify-center overflow-visible ${contentTone}`}
+      >
         <Icon name={leadingIcon} size={24} />
       </span>
-      <span className="min-w-0 flex-1 text-left font-inter text-[12px] font-normal leading-4 whitespace-normal text-[var(--color-content-default-primary)]">
+      <span
+        className={`min-w-0 flex-1 text-left font-inter text-[12px] font-normal leading-4 whitespace-normal ${contentTone}`}
+      >
         {label}
       </span>
     </button>