Lightning Aura Components Developer Guide
j
No Results
Search Tips:
- Please consider misspellings
- Try different search keywords
Replace Design Tokens with Styling Hooks
Replace Design Tokens with Styling Hooks
Directly replace design tokens with --slds styling hooks in your Aura CSS file.
/* Aura Custom Component CSS */
.THIS .my-custom-container {
background-color: var(--slds-g-color-surface-container-1);
}Most of the customization options provided by design tokens are available with SLDS global styling hooks. For a full list of global styling hooks, see the Global Styling Hooks Reference.
Styling if Styling Hooks are Unavailable
Only Lightning Experience supports the latest global styling hooks. In containers such as Experience Cloud sites, newer styling hooks, such as the --slds-g-color-* styling hooks, aren’t available. To accommodate containers that can’t access these styling hooks, include an --lwc custom property as a fallback. Use this solution only if the component is expected to run in a container that doesn’t support styling hooks.
Convert a design token to an --lwc property by adding --lwc as a prefix to the design token name. For example, instead of t(colorTextBrand), use var(--lwc-colorTextBrand).
Example
This example shows an Aura CSS file for a custom component that uses a design token to override the component’s background color.
/* Aura CSS using an Aura token to override*/
.THIS .my-custom-container {
background-color: t(cardColorBackground);
}The best replacement is the new --slds-g-color-* styling hooks. However, in this case the container can’t access newer styling hooks. So this example replaces the design token by referencing a global color styling hook and also an --lwc property that’s derived from the original design token.
/* Aura Custom Component CSS */
.THIS .my-custom-container {
background-color: var(--slds-g-color-surface-container-1, --lwc-cardColorBackground);
}