Documentation
ChevronDown

--aura-accents-info

Default color for info text.

CSS
Copy Copy
*:root {
    --aura-accents-info: #0927ec
}

--aura-accents-info is a CSS custom property that specifies the text color for info alerts in a design system. The value of --aura-accents-info is used as the text color for elements with the class .info-text. It should be used in conjunction with the class .info, which provides a info background color, 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-text {
    color: var(--aura-accents-info);
}
	
.info {
    background-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">Info!</p>
</div>

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