feat(notification): introduce high contrast style #2814
Conversation
asudoh
added this to In progress
in v10 enhancements, tech debt, new features
via automation
|
Deploy preview for the-carbon-components ready! Built with commit e352f6c https://deploy-preview-2814--the-carbon-components.netlify.com |
|
Deploy preview for carbon-components-react ready! Built with commit e352f6c https://deploy-preview-2814--carbon-components-react.netlify.com |
There was a problem hiding this comment.
Thanks for getting this done so quickly! @asudoh Just 1 comment,
- we have agreed to remove drop-shadow on the inline, but keep drop-shadow on toast.
Inline notification got drop-shadow in the previous iteration because of the background color is too close to Gray10 ui-background. Now with high contrast colors, we can safely remove the drop shadow. Thanks!
Comment/question: Can we keep the previous style with colored background as a secondary style? We are seeing potential use cases where users might want the more subtle style, so ideally we can keep both, where High contrast is default/primary. Mentioned this in #2354 (comment) Thanks!
asudoh
force-pushed
the
notification-high-contrast-style
branch
from
70ae352
to
368edcf
Compare
asudoh
force-pushed
the
notification-high-contrast-style
branch
from
368edcf
to
11a6edd
Compare
|
@shixiedesign Updated the code to remove drop shadow from inline notification. Also implemented "light" variant with old color scheme - Great to have your thoughts on here, esp. would you think of better naming? Thanks! |
There was a problem hiding this comment.
Perfect! 🎉 Thank you so much.
Naming wise,
- suggestion 1:
low-contrastvariant. Dark background has been referred to ashigh-contraststyling. - suggestion 2:
pastelvariant, but on dark themes this wouldn't make sense as much. - suggestion 3: say use
tinted background?
I proposed these to design team and will return with decision shortly. Let's wait a minute to merge until this is resolved.
shixiedesign
added
status: needs more info
and removed
status: ready for review 👀
status: visual review 🔍
labels
|
Hi @asudoh |
shixiedesign
added
status: waiting for author's response 💬
and removed
status: needs more info
labels
|
Thank you for coming up with a name @shixiedesign! Updated. |
Fixes #2354.
Changelog
Changed
$inverse-01$inverse-02$inverse-01(@carbon-design-system/design Does it match your intent?)$inverse-support-0xTesting / Reviewing
Testing should make sure notification looks good.