Lightning Communities Developer Guide

Get Up to Speed with Lightning Communities
Develop Lightning Communities: The Basics
Customize the Look and Feel of a Lightning Template
Update a Template with the Theme Panel
Override Template Elements with Custom CSS
Use Custom Fonts in Your Community
Customize the Theme Layout of Your Template
Create Custom Content Layout Components for Communities
Configure Swappable Search and Profile Menu Components
Standard Design Tokens for Communities
Example: Build a Condensed Theme Layout Component
Develop Secure Code: Lightning Locker and CSP
Analyze and Improve Community Performance
Use a CMS with Your Community
Report on Deflections: The Deflection Signals Framework
Deploy a Community from Sandbox to Production
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Standard Design Tokens for Communities

Salesforce exposes a set of base tokens that you can access in your component style resources. You can use these standard tokens to mimic the look-and-feel of the Salesforce Lightning Design System (SLDS) in your own custom components. As the SLDS evolves, components that are styled using the standard design tokens evolve along with it. Use a subset of the standard design tokens to make your components compatible with the Theme panel in Experience Builder.

With the Theme panel, administrators can quickly style an entire community using branding 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 updates the Lightning components that use the tokens associated with that property.

Experience Builder Theme panel

Available Tokens for Communities

For Communities using the Customer Service 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 panel properties... ...map to these standard design tokens
Text Color colorTextDefault
Detail Text Color
  • colorTextLabel
  • colorTextPlaceholder
  • colorTextWeak
Action Color
  • colorBackgroundButtonBrand
  • colorBorderBrand
  • colorBorderButtonBrand
  • colorBrand
  • colorTextBrand

As of Summer ‘18 colorBackgroundHighlight is no longer mapped to Action Color.

Note
Link Color colorTextLink
Overlay Text Color
  • colorTextButtonBrand
  • colorTextButtonBrandHover
  • colorTextInverse
Border Color
  • colorBorder
  • colorBorderButtonDefault
  • colorBorderInput
  • colorBorderSeparatorAlt
Primary Font fontFamily
Text Case textTransform

In addition, the following standard tokens are available for derived theme properties in the Customer Service template. You can indirectly access derived branding 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 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.

Several out-of-the-box components don’t use standard design tokens. Therefore, if you use tokens when styling your theme layout, some components might not inherit the styles you define.

Note