Lightning Aura Components Developer Guide

Introducing Aura Components
Quick Start
Creating Components
Using Components
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Using the Salesforce Lightning Design System in Apps
Using External CSS
More Readable Styling Markup with the join Expression
Tips for CSS in Components
CSS for RTL Languages
Vendor Prefixes
Styling with Design Tokens
Tokens Bundles
Create a Tokens Bundle
Defining and Using Tokens
Using Expressions in Tokens
Extending Tokens Bundles
Using Standard Design Tokens
Overriding Standard Tokens (Developer Preview)
Standard Design Tokens—force:base
Standard Design Tokens for Experience Builder Sites
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Newer Version Available

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

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.
Experience Builder Theme panel

Available Tokens for Experience Builder Sites

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.

Important

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.

Important

These Branding panel properties... ...map to these standard design tokens
Text Color colorTextDefault
Detail Text Color
  • colorTextActionLabel
  • colorTextLabel
  • colorTextPlaceholder
  • colorTextWeak
Action Color
  • colorBackgroundButtonBrand
  • colorBorderBrand
  • colorBorderButtonBrand
  • colorBrand
  • colorTextBrand
  • colorTextTabLabelSelected
  • colorTextActionLabelActive

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
Company Logo brandLogoImage
Header Image headerImageUrl
Login Pages Background Image LoginBackgroundImage
Primary Font fontFamily
Text Case textTransform

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
  • 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.