[Bug]: .bx--content background disruptive for dark themes

[brunnerh]

Package

carbon-components

Browser

Chrome

Package version

v10.46.0

Description

The .bx--content container which is part of the UI shell (not really documented properly anywhere and not used in the UI shell examples) has a background color that causes poor contrast/visibility in darker themes. For some components it clashes with existing colors.

Examples for the different themes:

Maybe .bx--content should not set a background at all?

CodeSandbox example

https://codesandbox.io/s/bx--content-l1bnj

Steps to reproduce

• Set theme to g90 or g100
• Add a content container (.bx--content)
• Add components like ProgressIndicator to it which use conflicting colors

Code of Conduct

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

[tay1orjones]

@carbon-design-system/design is there context around why this class applies the background? Should we modify it to not set a background?

[aagonzales]

I have no clue where that class is coming from. It definitely shouldn't be used within the progress indicator. I think it may be part of the contained tab component though.

I'm not sure why it would be showing up in UI Shell either.

[brunnerh]

I'm not sure why it would be showing up in UI Shell either.

It performs layout in relation to the shell header and side-nav.

Introduced as part of the shell here:

3ee76bd#diff-4ea1e7accf7f77430fe69e984a086fe5fe13f048d2fe6de761960d3444cbb057

[jnm2377]

The PR you're linking to was just porting over existing UI Shell styles into our new @carbon/styles package that uses sass modules. Nothing new was introduced there. However, we did add theming into the v11 shell. It may be that it's using the wrong token for the background. I feel like I've ran into similar issues with things using the $layer token incorrectly.

[joshblack]

Just wanted to +1 what @brunnerh shared, the Content component uses the $ui-02 background color @aagonzales.

I think the tl;dr for this component is that we wanted a way to wire up the "skip to content" links with the "main" content area on the page.

[metonym]

This issue was fixed by #10992 but was not auto-closed by GitHub.

Can an admin close this?

[brunnerh]

I can :)