Summary
Add an option to apply !important to utility classes generated by the Bricks, so they can reliably override component-level styles when used across component instances.
Use Case
When building reusable components in Bricks, it’s common to define a default background color at the component level. To customise each instance of that component, utility classes (e.g. .bg-color-secondary) can be applied via Properties to override the background per-instance.
However, because element-level styles carry higher CSS specificity than class-based styles, the utility class is silently ignored.
Proposed Solution
In the Style Manager (Style Manager → Colors → Utility classes), add a toggle such as:
☐ Apply
!importantto generated utility class properties
This would output utility classes like:
.bg-color-secondary {
background-color: var(--secondary) !important;
}