Documentation
ChevronDown

--aura-accents-primary

Default color for buttons.

CSS
Copy Copy
*:root {
    --aura-accents-primary: var(--aura-black)
}

--aura-accents-primary is a CSS custom property that specifies the default background color for buttons in a design system. The value of --aura-accents-primary is used as the background color for elements with the classes .button-fill and .button-pill.

In the CSS file, the classes .button-fill and .button-pill can be defined as follows:

CSS
Copy Copy
.button-fill,
.button-pill {
    background-color: var(--aura-accents-primary);
}

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

HTML
Copy Copy
<button class="button-fill">Click me!</button>
	
<button class="button-pill">Click me!</button>

By using the --aura-accents-primary custom property, the background color for elements with the classes .button-fill and .button-pill can be easily changed and updated in one place, which helps maintain consistency and makes updates more manageable. Additionally, because the background color is specified using a custom property, any changes made to --aura-accents-primary will be reflected in the background color for elements with the .button-fill and .button-pill classes.