fix(list-box): update background, border colors

[tw15egan]

Closes #5705

Updates a few colors and uses the new decorative-01 token so horizontal rules (border-top) correctly show in dark themes on components that have a light prop

Changelog

Changed

• Listbox components (MultiSelect, ComboBox) use field-02 as the menu background when light prop is applied
• OverflowMenu uses field-02 as the menu background when light prop is applied
• Any horizontal rule (border-top) is now using decorative-01 when light prop is applied

Testing / Reviewing

View these components in all 4 themes, and check that the rules show up when the light prop is applied

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 04f4f31

https://deploy-preview-5707--carbon-elements.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 04f4f31

https://deploy-preview-5707--carbon-components-react.netlify.com

[laurenmrice]

So the rules are looking correct with the new token in all themes. yay!

This was my bad for not finding this earlier because I only speced out the light themes, but when there is selected state in a row in the dark themes, the selected-ui color is the same as the field-02 🤦🏼‍♀️, which then makes it looks wonky.

---

Talked with Anna about it. We think we should just also make another token called selected-ui-light to be applied to selected states.

White	G10	G90	G100
G20 #e0e0e0	G20 #e0e0e0	G60 #6f6f6f	G70 #525252

I think I can approve this pr since its accomplishing what we wanted. but could tackle the above separately.

[emyarod]

looks good to me

[tw15egan]

Dependent on #5688