Documentation
ChevronDown

--aura-opacity

Default opacity for disabled elementos.

CSS
Copy Copy
*:root {
    --aura-opacity: 0.5;
}

--aura-opacity is a CSS custom property that specifies the default opacity of disabled elements in a design system. The value of --aura-opacity can be applied to elements with the classes .disabled, and :disabled pseudo-classes to set their opacity.

In the CSS file, the custom property can be used as follows:

CSS
Copy Copy
.disabled, 
.button-fill:disabled, 
.button-link:disabled, 
.button-menu:disabled, 
.button-pill:disabled, 
.button:disabled, 
input:not(.default):disabled, 
select:not(.default):disabled, 
textarea:not(.default):disabled {
    opacity: var(--aura-opacity);
}

By using the --aura-opacity custom property, the opacity of elements can be easily changed and updated in one place, which helps maintain consistency and makes updates more manageable. Additionally, because the opacity is specified using a custom property, any changes made to --aura-opacity will be reflected in the opacity of the disable elements with the classes .disabled and :disabled pseudo-classes