Missing CSS Variables in clr/ui@17 with Angular 17 Update
lvasconcellos opened this issue · 5 comments
Hello Clarity Team,
After updating my .NET 8 SPA from Angular 14 to 17, I encountered a compatibility issue with clr/ui@17. Several CSS variables present in clr/ui@16 are missing, causing broken styles:
Some Missing Variables: --clr-font, --clr-header-4-color, --clr-header-font-color
Some Present Variables: --clr-color-neutral-x, --clr-color-danger-x, --clr-color-action-x
Reverting to clr/ui@16 fixes the issue, but it's not viable due to Angular 17 compatibility needs. Is there a workaround or an upcoming fix for this?
Thank you.
The --clr-font and --clr-header-font-color CSS variables are present in v17. There is no variable named --clr-header-4-color in v16. I think you meant --clr-header-4-bg-color which is also present in v17.
Note that v17 requires the cds-theme attribute on the body element to work properly. Without it, the CSS variables are not defined. This is a breaking change in v17. See the themes documentation for more information.
Not sure if you are still running into this issue but be sure that you are importing these styles into your angular.json file:
"node_modules/@cds/core/global.min.css"
"node_modules/@cds/core/styles/theme.dark.min.css"
I came across the same issue when upgrading our application from v16 to v17 and wasn't aware of the breaking changes from the addition of themes.
I've found out after taking a look at the @clr/ui documentation in NPM: https://www.npmjs.com/package/@clr/ui
With that said, the Developing documentation for Angular in the official Clarity Design website is a bit unclear. The upgrade to v17 has these breaking changes but the steps don't reflect it, which led to my confusion to why the styles were broken when I was upgrading our apps. See here: https://core.clarity.design/get-started/developing/angular/#step-2-adding-scripts-and-styles.
It would be great if the team can update the documentation to avoid future confusion for other users.
Thank you and appreciate the work the team does!
Please refer to the documentation on clarity.design, not core.clarity.design, for ng-clarity instructions. The ng-clarity documentation on core.clarity.design is outdated. I'll discuss removing it with my team.
Closing with my comments as resolution. Please reopen if necessary.
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.