Documentation
ChevronDown

--aura-module

Default background color for modules.

CSS
Copy Copy
*:root {
    --aura-module: var(--aura-accents-0)
}

--aura-module is a CSS custom property that specifies the default background color for modules in a design system. The value of --aura-module is used as the background color for elements with the classes .mod and .mod-detail.

In the CSS file, the classes .mod and .mod-detail can be defined as follows:

CSS
Copy Copy
.mod,
.mod-detail {
    background-color: var(--aura-module);
}

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

HTML
Copy Copy
<div class="mod">
    <!-- content goes here -->
</div>
	
<div class="mod">
    <div class="mod-detail">
        <!-- content goes here -->
    </div>
</div>

By using the --aura-module custom property, the background color for elements with the classes .mod and .mod-detail 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-module will be reflected in the background color for elements with the .mod and .mod-detail classes.