Diamond Template for Angular 16 and new @layer implementation

[mklinke]

I've attempted to upgrade our project to Angular 16 and PrimeNG 16.5.0 (from PrimeNG 15.1) and updated the styles from the latest diamond template 16.0.0 that is currently available.

While the updated app works technically, there are some bugs in the styling. After inspecting styles in app versions before and after the update, I saw that the styles were all there, but applied in the wrong order. E.g. the generic button radius was applied AFTER more specific styling of numeric input buttons (up/down with only one rounded corner each), so the buttons had four rounded corners and were significantly larger etc.

After digging around some more, I found this change: primefaces/primeng-sass-theme@df5de1d

I checked the latest diamond template and, apparently, it has not yet been updated to work with the new @layer implementation.

So I'd like to ask, whether my conclusions are valid and, if so, when can we expect an updated version of the template that works with PrimeNG versions >= 16.5.0?

(Unfortunately, I can't use any 16.x version <16.5.0, due to this bug breaking jest execution in our pipeline: primefaces/primeng#12945)

[ThoSap]

Hi @mklinke,

you could try the following guide to make it compatible with PrimeNG >= 16.4.0 (16.4.0 introduced the @layer implementation)
https://github.com/orgs/primefaces/discussions/130#discussioncomment-7130755
but in the case of Diamond you may have to use a different base theme than bootstrap4.

If it somehow does not work it is probably best to wait until the official @layer compatible premium template updates are released, see the following comment:
https://github.com/orgs/primefaces/discussions/150#discussioncomment-7150284

Just for documentation purposes for other people who are not affected by primefaces/primeng#12945:
One could also use [email protected] in the meantime until the @layer compatible template updates are released, as I currently do with Freya.