Using Standard Design Tokens
Salesforce exposes a set of “base” tokens that you can access in your component style resources. Use these standard tokens to mimic the look-and-feel of the Salesforce Lightning Design System (SLDS) in your own custom components.
Salesforce recommends that you use Styling Hooks instead of design tokens if possible. While existing design tokens still work, styling hooks are the future of customization for Lightning web components and Aura components. See Replace Design Tokens with Styling Hooks.
To add the standard tokens to your org, extend a tokens bundle from the base tokens, like so.
1<aura:tokens extends="force:base">
2 <!-- your own tokens here -->
3</aura:tokens>
Once added to defaultTokens (or another tokens bundle that defaultTokens extends) you can reference tokens from force:base just like your own tokens, using the token() function and token name. For example:
1.THIS p {
2 font-family: token(fontFamily);
3 font-weight: token(fontWeightRegular);
4}
You can mix-and-match your tokens with the standard tokens. It’s a best practice to develop a naming system for your own tokens to make them easily distinguishable from standard tokens. Consider prefixing your token names with “my”, or something else easily identifiable.
-
Overriding Standard Tokens (Deprecated)
If you override design tokens for your custom components, replace them with SLDS styling hooks.
-
Standard Design Tokens— force:base
The standard tokens available are a subset of the design tokens offered in the Salesforce Lightning Design System (SLDS). The following tokens are available when extending from force:base.
-
Standard Design Tokens for Experience Builder Sites
Use a subset of the standard design tokens to make your components compatible with the Theme panel in Experience Builder. The Theme panel enables administrators to quickly style an entire site using these properties. Each property in the Theme panel maps to one or more standard design tokens. When an administrator updates a property in the Theme panel, the system automatically updates any Lightning components that use the tokens associated with that branding property.
See Also
j