Documentation
ChevronDown

--aura-accents-success

Default color for success text.

CSS
Copy Copy
*:root {
    --aura-accents-success: #045d3c
}

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

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

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

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

HTML
Copy Copy
<div class="success">
    <p class="success-text">Success!</p>
</div>

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