Documentation
ChevronDown

--aura-accents-info-bg

Default background color for info.

CSS
Copy Copy
*:root {
    --aura-accents-info-bg: var(--aura-purple);
}

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

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

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

.info-text {
    color: var(--aura-accents-info);
}

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

HTML
Copy Copy
<div class="info">
    <p class="info-text">Information!</p>
</div>

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