Replace bg-secondary-experimental with bg-subdued for Tables (Shopify…

…#10649)

### WHY are these changes introduced?

A [previous change](Shopify#9498) went
in to replace some instances of `bg-subdued` with
`bg-secondary-experimental`. There are now some inconsistencies between
our Table and List usages of these background colors. Additionally,
there is a migration planned for next week that will replace all
`bg-subdued` instances with `bg-secondary`.

### WHAT is this pull request doing?

To resolve the inconsistencies and prepare for the migration, this pull
request replaces instances of `bg-secondary-experiement` with the
`bg-subdued` token within `DataTable` and `IndexTable`.

NOTE: the existing usage of `bg-secondary-experiment` is not likely seen
visually, because header cells defined their background as `bg-subdued`
and sit on top of the row with `bg-secondary-experiment`. Likely further
improvement here, but this will combat the incorrect color from leaking
through.

### How to 🎩

Validate that `DataTable` and `IndexTable` do not render row backgrounds
with `secondary`, but with `subdued`.

- Storybook
-
[DataTable](https://storybook.web.swap-table-secondary-with-subdued.matt-kubej.us.spin.dev/?path=/story/all-components-datatable--default&globals=polarisSummerEditions2023:true;polarisSummerEditions2023ShadowBevelOptOut:true)
-
[IndexTable](https://storybook.web.swap-table-secondary-with-subdued.matt-kubej.us.spin.dev/?path=/story/all-components-indextable--default&globals=polarisSummerEditions2023:true;polarisSummerEditions2023ShadowBevelOptOut:true)
- Web
- [Product
Index](https://admin.web.swap-table-secondary-with-subdued.matt-kubej.us.spin.dev/store/shop1/products)
(using snapshot and loaded with products to test sticky header)

### 🎩 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)
- [x] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [x] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

.changeset/pretty-bees-try.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Replace usages of `bg-secondary-experimental` with `bg-subdued` for Tables

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

@@ -149,10 +149,6 @@
   &.ShowTotalsInFooter .TableRow:nth-child(2n + 1) .Cell,
   &.ShowTotalsInFooter.RowCountIsEven .TableRow:nth-child(2n) .Cell {
     background: var(--p-color-bg-subdued);
-
-    #{$se23} & {
-      background: var(--p-color-bg-secondary-experimental);
-    }
   }
 }
 
@@ -398,16 +394,11 @@
   border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued);
 
   #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
     border-bottom: var(--p-border-width-1) solid var(--p-color-border);
   }
 
   .ZebraStripingOnData.ShowTotals & {
     background: var(--p-color-bg-subdued);
-
-    #{$se23} & {
-      background: var(--p-color-bg-secondary-experimental);
-    }
   }
 
   .ZebraStripingOnData.ShowTotals.RowCountIsEven &,
@@ -453,7 +444,6 @@
   border-bottom-right-radius: var(--p-border-radius-2);
 
   #{$se23} & {
-    background: var(--p-color-bg-secondary-experimental);
     padding: var(--p-space-2) var(--p-space-3);
     border-top: var(--p-border-width-1) solid var(--p-color-border);
     border-radius: 0;

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

@@ -429,10 +429,6 @@ $loading-panel-height: 53px;
     .TableCell-first + .TableCell,
     .TableCell:last-child {
       background: var(--p-color-bg-subdued);
-
-      #{$se23} & {
-        background: var(--p-color-bg-secondary-experimental);
-      }
     }
   }
 
@@ -1044,12 +1040,11 @@ $loading-panel-height: 53px;
 
 .StickyTableHeader-isSticky {
   visibility: visible;
-  background-color: var(--p-color-bg);
+  background-color: var(--p-color-bg-subdued);
   box-shadow: var(--p-shadow-md);
 
   #{$se23} & {
     box-shadow: var(--p-shadow-xs);
-    background-color: var(--p-color-bg-secondary-experimental);
   }
 }