feat(DataTable): Update DataTable to phase 2 spec

[tw15egan]

Closes #15708

Updates the DataTable with Slug to the new phase 2 styles. It also adds support for the full-column gradient.

Changelog

New

• $ai-aura-start-table token, slightly more opaque than $ai-aura-start
• getCellProps prop getter added to TableCell to check if a cell is in a column that has a Slug in the header
• ai-table-gradient mixin to specify the DataTable specific gradients

Changed

• Converted TableCell to a component, rather than using wrapComponent function
• slug can now be provided the DataTableHeader, e.g. you would define your headers (with a slug) like so:

const columnSlugHeaders = [
  {
    key: 'name',
    header: 'Name',
  },
...
  {
    key: 'attached_groups',
    header: 'Attached groups',
    slug: MySlugComponent
  },
];

Testing / Reviewing

Go to Experiemental --> unstable__slug --> DataTable and ensure all variants match the spec. Ensure there are no regressions to the main DataTable

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Name	Link
🔨 Latest commit	c939d1d
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/65c4fd80e67a56000858b3f5
😎 Deploy Preview	https://deploy-preview-15662--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[guidari]

LGTM! 🚀

[tay1orjones]

@aagonzales just need a visual pass on this one, looks good to go on the dev side

[aagonzales]

It looks good! But can we move this slug over to the right in the header in the story "column slug with expansion and selection"

Also the hover colors in all the themes seems a little too intense/bright compared to the design. Would adding that extra stop in the gradient help with this?

[aagonzales]

Reviewed it with TJ, looks good to go now! 🎉 ✅

[carbon-automation]

Hey there! v11.50.0 was just released that references this issue/PR.