Calcite-notice background color in Angular

Question

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?

KittyHurley · Answer

@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.