Documentation
ChevronDown

--aura-accents-success-bg

Default background color for success.

CSS
Copy Copy
*:root {
   --aura-accents-success-bg: var(--aura-teal-green);
}

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