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.
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.
For Experience Builder sites, these standard tokens are available when extending from forceCommunity:base.
The standard token values evolve along with SLDS. Available tokens and their values can change without notice.
Design tokens are not available for navigation branding properties. To add branding to navigation properties, override the navigation bar within the custom components. See CSS Overrides Migration for the Navigation Menu.
| These Branding panel properties… | …map to these standard design tokens |
|---|---|
| Text Color | colorTextDefault |
| Detail Text Color | colorTextActionLabel, colorTextLabel, colorTextPlaceholder, or colorTextWeak |
| Action Color | colorBackgroundButtonBrand, colorBorderBrand, colorBorderButtonBrand, colorBrand, colorTextBrand, colorTextTabLabelSelected, or colorTextActionLabelActive |
| Link Color | colorTextLink |
| Overlay Text Color | colorTextButtonBrand, colorTextButtonBrandHover, or colorTextInverse |
| Border Color | colorBorder, colorBorderButtonDefault, colorBorderInput, or colorBorderSeparatorAlt |
| Company Logo | brandLogoImage |
| Header Image | headerImageUrl |
| Login Pages Background Image | LoginBackgroundImage |
| Primary Font | fontFamily |
| Text Case | textTransform |
As of Summer ’18 colorBackgroundHighlight is no longer mapped to Action Color.
In addition, the following standard tokens are available for derived theme properties in the template. You can indirectly access derived properties when you update the properties in the Theme panel. For example, if you change the Action Color property in the Theme panel, the system automatically recalculates the Action Color Darker value based on the new value.
| These derived branding properties… | …map to these standard design tokens |
|---|---|
| Action Color Darker (Derived from Action Color) | colorBackgroundButtonBrandActive or colorBackgroundButtonBrandHover |
| Hover Color (Derived from Action Color) | colorBackgroundButtonDefaultHover, colorBackgroundRowHover, colorBackgroundRowSelected, or colorBackgroundShade |
| Link Color Darker (Derived from Link Color) | colorTextLinkActive or colorTextLinkHover |
For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.
See Also