Calcite-notice background color in Angular

BikkiGeisler — Tue, 25 Feb 2025 09:35:44 GMT

I'm working on an Angular project and I would like to change the background color of a calcite notice component.

I've tried applying a CSS variable, but it doesn't seem to work:

calcite-notice { --calcite-notice-background-color: red; }

Since this didn't work, I implemented a workaround by wrapping the calcite notice in a div and applying a background color to the wrapper. However, I would prefer to change the actual notice component’s background instead.

Does anyone know a proper way to achieve this? Is there a CSS variable or ::part() selector that can be used for styling the background directly?

Re: Calcite-notice background color in Angular

KittyHurley — Tue, 25 Feb 2025 15:36:58 GMT

@BikkiGeisler Notice's CSS variables were introduced with version 3.0, as long as you've upgraded to version 3 you should be able to use the --calcite-notice-background-color CSS variable. Also be sure to check out the get started page, as there have been some small improvements to get started with version 3.

topic Re: Calcite-notice background color in Angular in Calcite Design System Questions

Calcite-notice background color in Angular

Re: Calcite-notice background color in Angular