Package

@carbon/web-components

Browser

No response

Package version

^2.39.0

React version

N/A

Description

The web-components data-table does not respect the layer it's in. The background color of the table does not properly update as it does in React:

React: https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/data-table/_data-table.scss#L132. Background color is based on the current layer.

WC: https://github.com/carbon-design-system/carbon/blob/main/packages/web-components/src/components/data-table/_table-core.scss#L30. Background color is always var(--cds-layer-01), irrespective of the layer it's placed in.

This likely holds for other table tokens too, since it's also using --layer-accent-01 and other such ..-01 tokens.

PS would be happy to make a PR if the issue is confirmed.

Reproduction/example

https://stackblitz.com/edit/github-zvf5u87u?file=index.html (WC), https://stackblitz.com/edit/github-r9nonu6l?file=src%2FApp.jsx (React)

Steps to reproduce

See reproduction example.

Suggested Severity

Severity 3 = User can complete task, and/or has a workaround within the user experience of a given component.

Application/PAL

No response

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems