search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 763 forks source link

typography core/clr-modal #6605

Closed coryrylan closed 2 years ago

coryrylan commented 2 years ago

Describe the bug

How to reproduce

https://stackblitz.com/edit/clarity-dark-theme-v5-vzy4py?file=src%2Fapp%2Fapp.component.html

When using the clr-modal the CSS overrides the cds-text utilities if used on the modal heading. Teams wanting to use cds-text cannot since the specificity is high on the modal heading.

Expected behavior

The fix would be to use :not([cds-text]) selector with the modal heading selector to ensure the clr-modal heading styles only apply if cds-text is not used. This will allow us to fix the issue without having to increase the specificity of the cds-text utils. See clr-ui css for similar uses of :not([cds-text]). At minimum for this fix ensure any projected styles of the modal have the not selector to support the cds-text utils.

Versions

Clarity project:

Clarity version:

Framework:

Framework version: ie: Angular 11

Device:

Additional notes

Add any other notes about the problem here.

github-actions[bot] commented 1 year ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.