Documentation
ChevronDown

--aura-accents-warning

Default color for warning text.

CSS
Copy Copy
*:root {
    --aura-accents-warning: #5d5104;
}

--aura-accents-warning is a CSS custom property that specifies the text color for warning alerts in a design system. The value of --aura-accents-warning is used as the text color for elements with the class .warning-text. It should be used in conjunction with the class .warning, which provides a success background color, 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-text {
    color: var(--aura-accents-warning);
}
	
.warning {
    background-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 custom property, the text color for elements with the class .warning-text 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 will be reflected in the text color for elements with the .warning-text class. The use of both .warning-text and .warning classes helps ensure that the text color and background color meet accessibility standards.