Fix title hover and focus color (#11343)

Co-authored-by: Yoni K <[email protected]>

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>