carbon
carbon copied to clipboard
carbon-design-system
[Bug]: InlineNotification in Dark mode does not use proper text color
Package
@carbon/react
Browser
Safari
Package version
1.4.0
React version
18.1.0
Description
When using lowContrast InlineNotifications in g100 the color for text is wrong. It is using the page text color (white) which makes it not readable.
Reproduction/example
https://stackblitz.com/edit/github-kkpgmp?file=src/App.jsx
Steps to reproduce
Using Dark mode g100 add inline notification with lowContrast.
Code of Conduct
- [X] I agree to follow this project's Code of Conduct
- [X] I checked the current issues for duplicate problems
I believe this is due to the notification component using component tokens.
In your example, if I remove the manual cds--g100 class from <body> and import the theme through scss (see below), it is displayed correctly.
@use '@carbon/react/scss/themes';
@use '@carbon/react/scss/theme';
:root {
@include theme.theme(themes.$g100);
}
Yeah, that's correct. In order to use the g100 theme it needs to be configured as shown above. This ensures all tokens values are set properly.
This is also why it's not reproducible in the storybook. It is configured to emit each theme within a data attribute selector for the theme switcher.
https://github.com/carbon-design-system/carbon/blob/2073d0385c57f0b7b567fd7270c009bfc08f5fe5/packages/react/.storybook/styles.scss#L11-L25
I'm going to close this out as the above should be the solution, but let us know if there's an issue!
I use the class cds—g100 to mimick using the Theme component to set the g100 theme as that is the only way I have found to get it to work in the code example site.
The cds—g100 should be fine as that is setting the css variables that everything uses for getting color.
We were told early on that Theme is what to use for implementing dark components. And it seems to work fine for everything but this one component in low contrast mode so I feel this is not really any issue with our setup but that one component not using the css variables properly.
I'll reopen to investigate. After looking more closely, we do emit component tokens per zone, I'm unsure why the proper value is not provided when the theme mixin is not called. This was the goal of https://github.com/carbon-design-system/carbon/pull/11227