Standard Design Tokens for Communities

Use a subset of the standard design tokens to make your components compatible with the Branding Editor in Community Builder. The Branding Editor enables administrators to quickly style an entire community using branding properties. Each property in the Branding Editor maps to one or more standard design tokens. When an administrator updates a property in the Branding Editor, the system automatically updates any Lightning components that use the tokens associated with that branding property.

Available Tokens for Communities

For Communities using the Customer Service (Napili) template, the following standard tokens are available when extending from force:base.

The standard token values evolve along with SLDS. Available tokens and their values can change without notice.

Important

These Branding Editor properties...	...map to these standard design tokens
Text Color	`colorTextDefault`
Detail Text Color	`colorTextLabel` `colorTextPlaceholder` `colorTextWeak`
Action Color	`colorBackgroundButtonBrand` `colorBackgroundHighlight` `colorBorderBrand` `colorBorderButtonBrand` `colorBrand` `colorTextBrand`
Link Color	`colorTextLink`
Overlay Text Color	`colorTextButtonBrand` `colorTextButtonBrandHover` `colorTextInverse`
Border Color	`colorBorder` `colorBorderButtonDefault` `colorBorderInput` `colorBorderSeparatorAlt`
Primary Font	`fontFamily`

In addition, the following standard tokens are available for derived branding properties in the Customer Service (Napili) template. You can indirectly access derived branding properties when you update the properties in the Branding Editor. For example, if you change the Action Color property in the Branding Editor, 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` `colorBackgroundButtonBrandHover`
Hover Color (Derived from Action Color)	`colorBackgroundButtonDefaultHover` `colorBackgroundRowHover` `colorBackgroundRowSelected` `colorBackgroundShade`
Link Color Darker (Derived from Link Color)	`colorTextLinkActive` `colorTextLinkHover`

For a complete list of the design tokens available in the SLDS, see Design Tokens on the Lightning Design System site.

Lightning Components Developer Guide

Standard Design Tokens for Communities

Available Tokens for Communities

See Also: