[IndexTable] Update hover styles for status and subdued rows (#9893)

### WHY are these changes introduced?

Resolves [#666](Shopify/polaris-internal#666).
Updates hover styles for critical, subdued, and success status rows on
IndexTable.
Updates hover styles when `subdued` prop is `true`.
> Note: Hover styles on selected IndexTable rows remains unchanged,
regardless of status.

### WHAT is this pull request doing?
Updates hover styles for critical, subdued, and success status rows on
IndexTable.
Updates hover styles when `subdued` prop is `true`.
    <details>
      <summary>IndexTable with Row Status</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/5c6f36f8-d96d-408f-aa6f-37fbf9efc75a"
alt="IndexTable with Row Status">
    </details>
    <details>
      <summary>IndexTable with Subdued Rows</summary>
<img
src="https://github.com/Shopify/polaris/assets/26749317/75b440d4-33fe-4753-a2c2-36a6d15c8771"
alt="IndexTable with Subdued Rows">
    </details>

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

[Row Status
Storybook](https://5d559397bae39100201eedc1-albpoemcxb.chromatic.com/?path=/story/all-components-indextable--with-row-status&globals=polarisSummerEditions2023:true)
[Row Subdued
Storybook](https://5d559397bae39100201eedc1-albpoemcxb.chromatic.com/?path=/story/all-components-indextable--with-subdued-rows&globals=polarisSummerEditions2023:true)

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

polaris-react/src/components/IndexTable/IndexTable.scss

@@ -262,6 +262,40 @@ $loading-panel-height: 53px;
         // other way around.
         background-color: var(--p-color-bg-hover);
       }
+
+      // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
+      &.statusCritical {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-critical-subdued-hover);
+        }
+      }
+
+      &.statusSubdued {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-subdued-hover);
+        }
+      }
+
+      &.statusSuccess {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-success-subdued-hover);
+        }
+      }
+
+      &.TableRow-subdued {
+        &,
+        .TableCell-first,
+        .TableCell-first + .TableCell {
+          background-color: var(--p-color-bg-subdued-hover);
+        }
+      }
+      // stylelint-enable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles
     }
   }
 

polaris-react/src/components/IndexTable/IndexTable.stories.tsx

@@ -657,6 +657,100 @@ export function WithDisabledRows() {
   );
 }
 
+export function WithSubduedRows() {
+  const customers = [
+    {
+      id: '3410',
+      url: '#',
+      name: 'Mae Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$2,400',
+    },
+    {
+      id: '3412',
+      url: '#',
+      name: 'Sam Jemison',
+      location: 'Decatur, USA',
+      orders: 20,
+      amountSpent: '$400',
+    },
+    {
+      id: '2563',
+      url: '#',
+      name: 'Ellen Ochoa',
+      location: 'Los Angeles, USA',
+      orders: 30,
+      amountSpent: '$140',
+    },
+  ];
+  const resourceName = {
+    singular: 'customer',
+    plural: 'customers',
+  };
+
+  const {selectedResources, allResourcesSelected, handleSelectionChange} =
+    useIndexResourceState(customers);
+
+  const rowMarkup = customers.map(
+    ({id, name, location, orders, amountSpent}, index) => (
+      <IndexTable.Row
+        id={id}
+        key={id}
+        selected={selectedResources.includes(id)}
+        position={index}
+        subdued={index === 1 || index === 2}
+      >
+        <IndexTable.Cell>
+          <Text fontWeight="bold" as="span">
+            {name}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>{location}</IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {orders}
+          </Text>
+        </IndexTable.Cell>
+        <IndexTable.Cell>
+          <Text as="span" alignment="end" numeric>
+            {amountSpent}
+          </Text>
+        </IndexTable.Cell>
+      </IndexTable.Row>
+    ),
+  );
+
+  return (
+    <LegacyCard>
+      <IndexTable
+        resourceName={resourceName}
+        itemCount={customers.length}
+        selectedItemsCount={
+          allResourcesSelected ? 'All' : selectedResources.length
+        }
+        onSelectionChange={handleSelectionChange}
+        headings={[
+          {title: 'Name'},
+          {title: 'Location'},
+          {
+            alignment: 'end',
+            id: 'order-count',
+            title: 'Order count',
+          },
+          {
+            alignment: 'end',
+            id: 'amount-spent',
+            title: 'Amount spent',
+          },
+        ]}
+      >
+        {rowMarkup}
+      </IndexTable>
+    </LegacyCard>
+  );
+}
+
 export function WithEmptyState() {
   const customers = [];
   const resourceName = {