Mixing Clarity Core and Clarity Angular

[hrant-ian]

Hello,

Is it safe to use both Clarity Core and Clarity Angular in the same Angular app?

Most components I need are available in Core, but some like Dropdown are only still available in Clarity Angular. I would like to use both, and migrate the components once they become available in Core. However, I'm unsure if the packages will have conflicts for components which are defined in both. Obviously, the element names are different, but maybe styles etc may conflict?

[hrant-ian]

I am obviously blind, since dropdown also comes with regular HTML elements with CSS styling (which is great), but the question still stands in case I missed something in the docs (haven't read the full docs yet).

[hippee-lee]

You can use @cds/core components alongside @clr/angular. In addition we will be adding more core components like dropdowns in the future.

[hrant-ian]

Thanks @hippee-lee

[grahamford]

Should we be explicitly importing the core styles as well as the Angular ones if we are using both in the same app.

ie do we need to add these to our main stylesheet?

@import '~normalize.css/normalize.css'; // css reset
@import '~@cds/core/global.min'; // clarity global styles
@import '~@cds/core/styles/module.shims.min'; // non-evergreen browser shims
@import '~@cds/city/css/bundles/default.min'; // load base font

I've tried both with, and without but didn't see any change in appearance.

[bbogdanov]

#5730 (reply in thread) already answered @grahamford question.

[gnomeontherun]

I suggest reading our blog post about doing just this! https://medium.com/claritydesignsystem/level-up-your-application-by-adopting-clarity-core-8a5f3f863139 Let us know this helps or if there is more detail we can provide. We're working on more tooling and adoption content that will give more guidance and automation to make this even easier to be released in the near future.

[nightwolfdev]

I'm using v5 and the v5 doc makes it sound like toggling the cds-theme on the body from dark to nothing should do it?

Are you saying it's not yet possible and you have to use the v4 approach? It doesn't look like the runCssVarsPolyfill exists?

[mathisscott]

@clr/angular and @clr/ui/@cds/ui are a different thing from @cds/core. changing cds-theme on the body will only change @cds/core elements to/from dark theme.

If you are mixing Clarity Angular and Clarity Core, you still need to use the theming approach that applies to the old Clarity CSS and Angular components alongside the Clarity Core theming. Switching only one to dark theme will have no effect on the other.

https://clarity.design/foundation/themes/usage/ 👈 Core component theming
https://v4.clarity.design/documentation/themes#examples 👈 Theming the Angular and other non-Core Clarity components

[nightwolfdev]

Thank you for that clarification!

[nightwolfdev]

I was working through the example found at https://github.com/mathisscott/clarity-theming-starter/tree/clarity-css-dark-theme-switcher.

runCssVarsPolyfill does not seem to exist in Clarity 5? @clr/core doesn't exist and I didn't see it in @cds/core either.

[mathisscott]

runCssVarsPolyfill was removed in 5.0 because our larger org dropped support for IE. If you need to support IE, then you'll need to wire up the polyfills and run the css-vars polyfill everytime you switch your theme. That link there shows you what runCssVarsPolyfill does...

If you don't need to support IE, then you can ignore it. No browser in wide use today needs it.

[ph55]

I mean we kinda have to mix it now if we want to use icons. Don't we ?
Because, v4 clr-icon is deprecated and in order to use cds-icon you have to install @cds/core.

[hippee-lee]

Yes, if a v5 app wants to use cds-icon (or any other core component) they need to install @cds/core but they are independent from each other and should work seamlessly together. Let us know if you experience issues or conflicts.

Fwiw - clr-icons usage in @clr/angular is deprecated in v5 and is opt in. We don't want to force apps to remove/replace clr-icon -> cds-icon unless they choose to. The API's are different and incompatible and would place a potentially significant burden for apps that are upgrading.