Documentation
ChevronDown

--aura-accents-warning-bg

Default background color for warning.

CSS
Copy Copy
*:root {
    --aura-accents-warning-bg: var(--aura-yellow);
}

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

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

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

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

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

By using the --aura-accents-warning-bg custom property, the text color for elements with the class .warning 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-warning-bg will be reflected in the text color for elements with the .warning-text class. The use of both . warning and .warning-text classes helps ensure that the text color and background color meet accessibility standards.