Documentation
ChevronDown

--aura-accents-danger-bg

Default background color for danger.

CSS
Copy Copy
*:root {
    --aura-accents-danger-bg: var(--aura-orange);
}

--aura-accents-danger-bg is a CSS custom property that specifies the background color for info alerts in the design system. The value of --aura-accents-danger-bg is used as the text color for elements with the class .danger. It should be used in conjunction with the class .danger-text, which provides a danger color text, to ensure that the text color and background color meet accessibility standards.

In the CSS file, the classes .warning-text and .danger can be defined as follows:

CSS
Copy Copy
.danger {
    background-color: var(--aura-accents-danger-bg);
}
	
.danger-text {
    color: var(--aura-accents-danger);
}

And in the HTML file, the classes can be applied to an element like this:

HTML
Copy Copy
<div class="danger">
    <p class="danger-text">Warning!</p>
</div>

By using the --aura-accents-danger-bg custom property, the text color for elements with the class .danger can be easily changed and updated in one place, which helps maintain consistency and makes updates more manageable. Additionally, because the text color is specified using a custom property, any changes made to --aura-accents-danger-bg will be reflected in the text color for elements with the .danger-text class. The use of both . danger and .danger-text classes helps ensure that the text color and background color meet accessibility standards.