Notice Component: Low text contrast when using dark theme styles

[thealexandrelara]

Describe the bug

The Notice component is being imported from @wordpress/components and is used to communicate prominent messages to the merchant when using the Site Editor. We have some blocks making use of it, for example: the Add To Cart Form and the Related Products.

When we use a dark theme style, the text color inside the Notice component becomes very light, which greatly reduces the contrast and makes the text practically illegible. I haven't investigated this problem in depth, but I believe that to compensate for the darker background used by the style, the text color of all the HTML is changed to a lighter color; however, the Notice component always has the same background color and it wouldn't be necessary to dynamically change the text color.

To reproduce

Steps to reproduce the behavior:

1. Go to Appearance > Themes and activate a Blockfied theme, such as: Twenty-twenty Three;
2. After the theme is activated, go to Appearance > Editor (Beta);
3. Inside the Design section, click on Templates;
4. Select the Single Product template;
5. On the top left of the page, click on the Edit button;
6. Add the Add To Cart form and Related Products blocks;
7. On the top right of the page, click on the Styles icon (a circle half white and half black);
8. Click on Browse Styles;
9. Test different styles, focusing on the ones with dark backgrounds. If you're testing with Twenty-twenty three, you can see the issue when selecting: Aubergine, Pilgrimage, or Pitch.

Expected behavior

The expected behavior would be for the text inside the Notice component to keep a higher contrast, even when the theme's background color is darker.

Screenshots

Example of this issue happening with Pilgrimage style on Twenty-twenty three theme:

Environment

WordPress (please complete the following information):

• WordPress version: 6.1.1
• Gutenberg version (if installed): 15.0.1
• WooCommerce version: 7.6.0-dev
• WooCommerce Blocks version: 9.7.0-dev
• Site language: English
• Any other plugins installed: Jetpack

Desktop (please complete the following information):

• OS: MacOS Ventura
• Browser: Chrome
• Version: 110.0.5481.100

[ralucaStan]

Closing this ticket as we have a new notice style as of #8659