[Bug]: `CodeSnippet` component styling whilst embedded within a table

[DanielSmithUI]

Package

@carbon/react

Browser

Chrome

Package version

v1.65.0

Description

I’m encountering an issue with the theming of the CodeSnippet component with my setup.

I'm using the component embedded within a table that has a background of cds-layer gray-10. The table rows change colour on hover to cds-layer-hover. According to Carbon’s theming guidance for a CodeSnippet on a gray-10 background, the component should be displayed in white: https://react.carbondesignsystem.com/?path=/story/components-codesnippet--singleline&globals=theme:g10

The guidance also specifies that the Copy button should have the cds-layer-hover colour when hovering over the button. However, since this is the same colour as the row hover state, it creates a clash, making it difficult to distinguish.

Whats the correct styling for the Copy button in this scenario?

Screenshots

https://github.com/user-attachments/assets/edaffdd5-f525-48b3-872c-14f69fc6f5d8

Steps to reproduce

Embedded a CodeSnippet component into a table row. Notice styling problems when hovering over the row.

Code of Conduct

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

[alisonjoseph]

This is working as intended based on our current layering and token models, however I think its something we can look at possibly updating. Updating this to an enhancement vs. bug.

[alina-jacob]

Pasting the Slack discussion about possible solutions.