From 04022bd09c0f2adf1a8fc6cf65a7f1174dcb28c8 Mon Sep 17 00:00:00 2001
From: Yoni K <yoni.kid15@gmail.com>
Date: Mon, 26 Aug 2024 11:42:08 -0400
Subject: [PATCH] Fix title hover and focus color (#11343)

Co-authored-by: Yoni K <yonikid15@gmail.com>
---
 packages/ui/src/components/PreviewList/PreviewList.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/ui/src/components/PreviewList/PreviewList.tsx b/packages/ui/src/components/PreviewList/PreviewList.tsx
index 35a2f10b6d4..6461ec09a49 100644
--- a/packages/ui/src/components/PreviewList/PreviewList.tsx
+++ b/packages/ui/src/components/PreviewList/PreviewList.tsx
@@ -55,16 +55,21 @@ const Item = ({
       data-h2-padding="base(x1 0)"
       data-h2-border-bottom="base:all:selectors[:not(:last-child)](1px solid)"
       data-h2-border-bottom-color="base:all:selectors[:not(:last-child)](gray.lighter)"
+      data-h2-transition="base:children[.PreviewList__Heading](transform 200ms ease)"
+      data-h2-color="base:selectors[:has(button:hover) .PreviewList__Heading](secondary.darker) base:selectors[:has(button:focus-visible) .PreviewList__Heading](black)"
+      data-h2-background-color="base:selectors[:has(button:focus-visible) .PreviewList__Heading](focus)"
       role="listitem"
     >
       <div>
         <Heading
+          className="PreviewList__Heading"
           level={headingAs}
           data-h2-font-size="base(body)"
           data-h2-font-weight="base(700)"
           data-h2-text-decoration="base(underline)"
           data-h2-margin-bottom="base(x.5)"
           data-h2-margin-top="base(0)"
+          data-h2-display="base(inline-block)"
         >
           {title}
         </Heading>