Low contrast notification text uses the incorrect token when using the dark theme with CSS variables

[metonym]

What package(s) are you using?

• carbon-components

Detailed description

After upgrading to carbon-components v10.29.0, the text color for a low contrast notification uses the $text-01 token when I believe it should be $inverse-01.

Note: This only happens when using a dark theme combined with CSS custom properties. I've tested the g90/g100 themes without custom CSS properties and they work as expected.

The result is that the text is not legible:

When inspecting the styles using Chrome DevTools, the selector uses the $text-01 token but falls back to the correct $inverse-01 value (#161616)

Steps to reproduce the issue

• Enable CSS custom properties and use a dark theme (g90 or g100)

Unfortunately, I don't have an isolated CodeSandbox, but this bug can be observed when comparing two snapshots of the Carbon Svelte documentation website. The only discernible difference between the snapshots is upgrading from carbon-components v10.28 to v10.29:

• Expected result using [email protected]: https://carbon-components-svelte-4hwsgvakp.vercel.app/components/ToastNotification#low-contrast
• Unexpected result using [email protected]: https://carbon-components-svelte-pavryf5kk.vercel.app/components/ToastNotification#low-contrast

[tw15egan]

Related: #7808, #7801

[emyarod]

this should be resolved https://carbon-components-react.netlify.app/?path=/story/notifications--inline

[metonym]

Thank you, following the updated guidance in #7808 resolves my issue.