background-color for select is transparent

[TastyDucks]

carbon/packages/styles/scss/components/select/_select.scss

Line 213 in 29f7380

background-color: transparent;

At least in my testing in Chrome, the transparent color here allows the browser chrome for the default selectlist items to show, rendering it unusable in dark (g90, g100) color themes.
Current behavior (example taken from Pagination component):

Expected behavior (made by removing the background-color property from the SCSS):

[joshblack]

Hi there @TastyDucks! 👋 Thanks so much for taking the time to make this issue.

Could you share more information to help us reproduce this problem 👀 I think specifically knowing how you are changing themes would help out a ton. Thanks!

[TastyDucks]

The theming in my application is set by a <Theme /> at the top of the DOM. At the moment I am only using the built-in themes, and I switch them out by changing the theme prop.

I import all of my CDS styles in SCSS like so:

@use '@carbon/react/scss/themes';
@use '@carbon/styles/scss/zone';
@use '@carbon/charts/styles-g100';
@use '@carbon/react'; // TODO: to reduce build size, only import specific component styles in the manner of `@carbon/react/scss/components/NAME`

Regardless of the theme I use, the background-color for .cds--select-input is transparent, when it should probably be using a color token. (Perhaps theme.$background?)

Thank you for your quick reply and work on CDS as a whole!

[joshblack]

Perfect, thanks so much @TastyDucks! Really appreciate this, I'm glad you shared the packages because I totally did not realize you were using the beta 😂

This is incredibly helpful and we'll definitely make sure this gets addressed 👍

[tay1orjones]

Potentially related? #10306