You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For the 'severity' prop, if value is set to 'secondary' or 'contrast', the Toast component will not properly render in dark themes. (it renders with a transparent background instead of blurred background)
Observe Toast component then rendered with transparent background instead of blurred
Note: if you comment out line 8 of Main.jsx on stackblitz, Toast component will render in a light theme instead (if you wish to observe usual render)
Expected behavior
When using dark themes, 'contrast' & 'secondary' values of the 'severity' prop for the Toast component should render with a blurred background (just as it does in light themes) instead of a transparent background.
As is observed from screenshots, text in Toast is unreadable if background is transparent.
The text was updated successfully, but these errors were encountered:
Describe the bug
For the 'severity' prop, if value is set to 'secondary' or 'contrast', the Toast component will not properly render in dark themes. (it renders with a transparent background instead of blurred background)
Render in light theme:
![Image](https://private-user-images.githubusercontent.com/43180381/408352985-eca285bf-35b8-42e2-9c8c-159e2dd8e050.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMTc5NDcsIm5iZiI6MTczOTAxNzY0NywicGF0aCI6Ii80MzE4MDM4MS80MDgzNTI5ODUtZWNhMjg1YmYtMzViOC00MmUyLTljOGMtMTU5ZTJkZDhlMDUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDEyMjcyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY1ZDQ0NTBiNWFkMzk1MmM2NWViOTNjYmRiODM1YTM1ZmY3MzE2Zjc1NGFlMWFhN2VhZjVlNTQzNGZiZGVmNjUmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.EC9DA-iLW2XMNO3cHFgQCBZVQq1GWRS7vjJoawPxDeI)
Render in dark theme:
![Image](https://private-user-images.githubusercontent.com/43180381/408353182-da5ea964-3bdb-47d5-a6b0-db37631ff732.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkwMTc5NDcsIm5iZiI6MTczOTAxNzY0NywicGF0aCI6Ii80MzE4MDM4MS80MDgzNTMxODItZGE1ZWE5NjQtM2JkYi00N2Q1LWE2YjAtZGIzNzYzMWZmNzMyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNTAyMDglMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjUwMjA4VDEyMjcyN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk1NTQ2YWYxYjA3YzhkZTgzYjAzMTQ2ZjA2NzA4MmM1OWIyZTc2MjQ0YzY0MDIzZjZkNmE2ZWEwZDMzMGQzYjgmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.gB7iSZuPVHsWHO6kfMpzOKOslTjgtN_X3AEisnwgfKU)
Reproducer
https://stackblitz.com/edit/11istbbg?file=src%2Fmain.jsx
System Information
Steps to reproduce the behavior
Note: if you comment out line 8 of Main.jsx on stackblitz, Toast component will render in a light theme instead (if you wish to observe usual render)
Expected behavior
When using dark themes, 'contrast' & 'secondary' values of the 'severity' prop for the Toast component should render with a blurred background (just as it does in light themes) instead of a transparent background.
As is observed from screenshots, text in Toast is unreadable if background is transparent.
The text was updated successfully, but these errors were encountered: