Documentation
ChevronDown

--aura-accents-danger

Default color for danger text.

CSS
Copy Copy
*:root {
    --aura-accents-danger: #8e3106;
}

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

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

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

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">Danger!</p>
</div>

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