Lightning Components Developer Guide

What is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Communicating with Events
Creating Apps
App Overview
Designing App UI
Creating App Templates
Developing Secure Code
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
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
Standard Design Tokens—force:base
Standard Design Tokens for Communities
Using JavaScript
JavaScript Cookbook
Using Apex
Lightning Data Service (Developer Preview)
Controlling Access
Using Object-Oriented Development
Caching with Storage Service
Using the AppCache
Distributing Applications and Components
Debugging
Reference
PDF

Newer Version Available

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

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.

Available Tokens

The standard token values evolve along with SLDS. Available tokens and their values can change without notice. Token values presented here are for example only.

Important

Token Name Example Value
elevation3Below -3
elevation0 0
elevation2 2
elevation4 4
elevation8 8
elevation16 16
elevation32 32
colorBackground rgb(244, 246, 249)
colorBackgroundAlt rgb(255, 255, 255)
colorBackgroundAlt2 rgb(238, 241, 246)
colorBackgroundAltInverse rgb(22, 50, 92)
colorBackgroundRowHover rgb(244, 246, 249)
colorBackgroundRowActive rgb(238, 241, 246)
colorBackgroundRowSelected rgb(240, 248, 252)
colorBackgroundRowNew rgb(217, 255, 223)
colorBackgroundInverse rgb(6, 28, 63)
colorBackgroundAnchor rgb(244, 246, 249)
colorBackgroundBrowser rgb(84, 105, 141)
colorBackgroundChromeMobile rgb(0, 112, 210)
colorBackgroundChromeDesktop rgb(255, 255, 255)
colorBackgroundCustomer rgb(255, 154, 60)
colorBackgroundHighlight rgb(250, 255, 189)
colorBackgroundHighlightSearch rgb(255, 240, 63)
colorBackgroundSelection rgb(216, 237, 255)
colorBackgroundActionbarIconUtility rgb(84, 105, 141)
colorBackgroundIndicatorDot rgb(22, 50, 92)
colorBackgroundSpinnerDot rgb(159, 170, 181)
colorBackgroundModal rgb(255, 255, 255)
colorBackgroundModalBrand rgb(0, 112, 210)
colorBackgroundNotificationBadge rgb(194, 57, 52)
colorBackgroundNotificationBadgeHover rgb(0, 95, 178)
colorBackgroundNotificationBadgeFocus rgb(0, 95, 178)
colorBackgroundNotificationBadgeActive rgb(0, 57, 107)
colorBackgroundNotification rgb(255, 255, 255)
colorBackgroundNotificationNew rgb(240, 248, 252)
colorBackgroundOrgSwitcherArrow rgb(6, 28, 63)
colorBackgroundPayload rgb(244, 246, 249)
colorBackgroundPost rgb(247, 249, 251)
colorBackgroundUtilityBarHover rgb(224, 229, 238)
colorBackgroundUtilityBarActive rgb(21, 137, 238)
colorBackgroundShade rgb(224, 229, 238)
colorBackgroundShadeDark rgb(216, 221, 230)
colorBackgroundStencil rgb(238, 241, 246)
colorBackgroundStencilAlt rgb(224, 229, 238)
colorBackgroundTempModal rgba(126, 140, 153, 0.8)
colorBackgroundTempModalTint rgba(126, 140, 153, 0.8)
colorBackgroundTempModalTintAlt rgba(255, 255, 255, 0.75)
colorBackgroundBackdrop rgba(255, 255, 255, 0.75)
colorBackgroundBackdropTint rgba(240, 248, 252, 0.75)
colorBackgroundScrollbar rgb(224, 229, 238)
colorBackgroundScrollbarTrack rgb(168, 183, 199)
colorBrand rgb(21, 137, 238)
colorBrandDark rgb(0, 112, 210)
colorBrandDarker rgb(0, 95, 178)
colorBackgroundToggle rgb(159, 170, 181)
colorBackgroundToggleDisabled rgb(159, 170, 181)
colorBackgroundToggleHover rgb(126, 140, 153)
colorBackgroundToggleActive rgb(0, 112, 210)
colorBackgroundToggleActiveHover rgb(0, 95, 178)
colorBackgroundContextBar rgb(255, 255, 255)
colorBackgroundContextBarBrandAccent rgb(0, 161, 223)
colorBackgroundContextBarItemHover rgb(247, 249, 251)
colorBackgroundContextBarItemActive rgb(247, 249, 251)
colorBackgroundContextTabBarItem rgb(255, 255, 255)
colorBackgroundContextBarInverseItemHover rgba(255, 255, 255, 0.2)
colorBackgroundContextBarInverseItemActive rgba(255, 255, 255, 0.4)
colorBackgroundContextBarShadow linear-gradient(to bottom, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0) 100%)
colorBackgroundContextBarActionHighlight rgba(255, 255, 255, 0.2)
colorBackgroundPageHeader rgb(247, 249, 251)
colorBackgroundButtonBrand rgb(0, 112, 210)
colorBackgroundButtonBrandActive rgb(0, 57, 107)
colorBackgroundButtonBrandHover rgb(0, 95, 178)
colorBackgroundButtonBrandDisabled rgb(224, 229, 238)
colorBackgroundButtonDefault rgb(255, 255, 255)
colorBackgroundButtonDefaultHover rgb(244, 246, 249)
colorBackgroundButtonDefaultFocus rgb(244, 246, 249)
colorBackgroundButtonDefaultActive rgb(238, 241, 246)
colorBackgroundButtonDefaultDisabled rgb(255, 255, 255)
colorBackgroundButtonIcon rgba(0, 0, 0, 0)
colorBackgroundButtonIconHover rgb(244, 246, 249)
colorBackgroundButtonIconFocus rgb(244, 246, 249)
colorBackgroundButtonIconActive rgb(238, 241, 246)
colorBackgroundButtonIconDisabled rgb(255, 255, 255)
colorBackgroundButtonInverse rgba(0, 0, 0, 0)
colorBackgroundButtonInverseActive rgba(0, 0, 0, 0.24)
colorBackgroundButtonInverseDisabled rgba(0, 0, 0, 0)
colorBackgroundModalButton rgba(0, 0, 0, 0.07)
colorBackgroundModalButtonActive rgba(0, 0, 0, 0.16)
colorBackgroundInput rgb(255, 255, 255)
colorBackgroundInputActive rgb(255, 255, 255)
colorBackgroundInputCheckbox rgb(255, 255, 255)
colorBackgroundInputCheckboxDisabled rgb(216, 221, 230)
colorBackgroundInputCheckboxSelected rgb(21, 137, 238)
colorBackgroundInputDisabled rgb(224, 229, 238)
colorBackgroundInputError rgb(255, 221, 225)
colorBackgroundInputSearch rgba(0, 0, 0, 0.16)
colorBackgroundPill rgb(255, 255, 255)
colorBackgroundImageOverlay rgba(0, 0, 0, 0.4)
colorBackgroundDestructive rgb(194, 57, 52)
colorBackgroundDestructiveHover rgb(166, 26, 20)
colorBackgroundDestructiveActive rgb(135, 5, 0)
colorBackgroundInfo rgb(84, 105, 141)
colorBackgroundError rgb(212, 80, 76)
colorBackgroundErrorDark rgb(194, 57, 52)
colorBackgroundErrorAlt rgb(234, 130, 136)
colorBackgroundOffline rgb(68, 68, 68)
colorBackgroundSuccess rgb(75, 202, 129)
colorBackgroundSuccessDark rgb(4, 132, 75)
colorBackgroundToast rgb(84, 105, 141)
colorBackgroundToastSuccess rgb(4, 132, 75)
colorBackgroundToastError rgb(194, 57, 52)
colorBackgroundWarning rgb(255, 183, 93)
colorBackgroundIconWaffle rgb(84, 105, 141)
colorBorder rgb(216, 221, 230)
colorBorderBrand rgb(21, 137, 238)
colorBorderBrandDark rgb(0, 112, 210)
colorBorderCustomer rgb(255, 154, 60)
colorBorderDestructive rgb(194, 57, 52)
colorBorderDestructiveHover rgb(166, 26, 20)
colorBorderDestructiveActive rgb(135, 5, 0)
colorBorderInfo rgb(84, 105, 141)
colorBorderError rgb(194, 57, 52)
colorBorderErrorAlt rgb(234, 130, 136)
colorBorderErrorDark rgb(234, 130, 136)
colorBorderOffline rgb(68, 68, 68)
colorBorderSuccess rgb(75, 202, 129)
colorBorderSuccessDark rgb(4, 132, 75)
colorBorderWarning rgb(255, 183, 93)
colorBorderInverse rgb(6, 28, 63)
colorBorderTabSelected rgb(0, 112, 210)
colorBorderSeparator rgb(244, 246, 249)
colorBorderSeparatorAlt rgb(216, 221, 230)
colorBorderSeparatorAlt2 rgb(168, 183, 199)
colorBorderSeparatorInverse rgb(42, 66, 108)
colorBorderRowSelected rgb(0, 112, 210)
colorBorderRowSelectedHover rgb(21, 137, 238)
colorBorderHint rgb(42, 66, 108)
colorBorderSelection rgb(0, 112, 210)
colorBorderSelectionHover rgb(21, 137, 238)
colorBorderSelectionActive rgb(244, 246, 249)
colorBorderCanvasElementSelection rgb(94, 180, 255)
colorBorderCanvasElementSelectionHover rgb(0, 95, 178)
colorBorderContextBarDivider rgba(255, 255, 255, 0.2)
colorBorderContextBarItem rgba(0, 0, 0, 0.2)
colorBorderContextBarInverseItem rgba(255, 255, 255, 0.2)
colorBorderContextBarThemeDefault rgb(0, 161, 223)
colorBorderContextBarThemeDefaultAlt rgb(223, 228, 238)
colorBorderContextBarThemeDefaultHover rgb(11, 35, 153)
colorBorderContextBarThemeDefaultActive rgb(223, 228, 238)
colorBorderIconInverseHint rgba(255, 255, 255, 0.5)
colorBorderIconInverseHintHover rgba(255, 255, 255, 0.75)
colorBorderButtonBrand rgb(0, 112, 210)
colorBorderButtonBrandDisabled rgba(0, 0, 0, 0)
colorBorderButtonDefault rgb(216, 221, 230)
colorBorderButtonInverseDisabled rgba(255, 255, 255, 0.15)
colorBorderInput rgb(216, 221, 230)
colorBorderInputActive rgb(21, 137, 238)
colorBorderInputDisabled rgb(168, 183, 199)
colorBorderInputCheckboxSelectedCheckmark rgb(255, 255, 255)
colorBorderTabActive rgb(255, 255, 255)
colorBorderToggleChecked rgb(255, 255, 255)
borderRadiusSmall .125rem
borderRadiusMedium .25rem
borderRadiusLarge .5rem
borderRadiusPill 15rem
borderRadiusCircle 50%
fontFamily 'Salesforce Sans', Arial, sans-serif
fontWeightLight 300
fontWeightRegular 400
fontWeightBold 700
fontSizeXSmall 0.625rem
fontSizeSmall 0.875rem
fontSizeMedium 1rem
fontSizeMediumA 1.125rem
fontSizeLarge 1.25rem
fontSizeXLarge 1.5rem
fontSizeXLargeA 1.57rem
fontSizeXxLarge 2rem
lineHeightHeading 1.25
lineHeightText 1.375
lineHeightReset 1
lineHeightTab 2.5rem
lineHeightButton 1.875rem
lineHeightButtonSmall 1.75rem
lineHeightToggle 1.3rem
opacity5 0.5
opacity8 0.8
elevationShadow3Below inset 0px 3px 3px 0px rgba(0,0,0,.16)
elevationShadow0 none
elevationShadow2 0px 2px 2px 0px rgba(0,0,0,.16)
elevationShadow4 0px 4px 4px 0px rgba(0,0,0,.16)
elevationShadow8 0px 8px 8px 0px rgba(0,0,0,.16)
elevationShadow16 0px 16px 16px 0px rgba(0,0,0,.16)
elevationShadow32 0px 32px 32px 0px rgba(0,0,0,.16)
elevationInverseShadow3Below inset 0px -3px 3px 0px rgba(0,0,0,.16)
elevationInverseShadow0 none
elevationInverseShadow2 0px -2px 2px 0px rgba(0,0,0,.16)
elevationInverseShadow4 0px -4px 4px 0px rgba(0,0,0,.16)
elevationInverseShadow8 0px -8px 8px 0px rgba(0,0,0,.16)
elevationInverseShadow16 0px -16px 16px 0px rgba(0,0,0,.16)
elevationInverseShadow32 0px -32px 32px 0px rgba(0,0,0,.16)
shadowActionOverflowFooter 0 -2px 4px #F4F6F9
shadowOverlay 0 -2px 4px rgba(0,0,0,.07)
shadowDrag 0px 2px 4px 0px rgba(0,0,0,.40)
shadowDropDown 0px 2px 3px 0px rgba(0,0,0,.16)
shadowHeader 0 2px 4px rgba(0,0,0,.07)
shadowButton 0px 1px 1px 0px rgba(0,0,0,.05)
shadowButtonFocus 0 0 3px #0070D2
shadowButtonFocusInverse 0 0 3px #E0E5EE
shadowInlineEdit 0 2px 4px 4px rgba(0,0,0,.16)
shadowFocusInset 0 0 2px 2px inset #1589EE
shadowDocked 0 -2px 2px 0 rgba(0,0,0,.16)
shadowImage 0 1px 1px rgba(0,0,0,.16)
sizeXxSmall 6rem
sizeXSmall 12rem
sizeSmall 15rem
sizeMedium 20rem
sizeLarge 25rem
sizeXLarge 40rem
sizeXxLarge 60rem
squareIconUtilitySmall 1rem
squareIconUtilityMedium 1.25rem
squareIconUtilityLarge 1.5rem
squareIconLargeBoundary 3rem
squareIconLargeBoundaryAlt 5rem
squareIconLargeContent 2rem
squareIconMedium 2.375rem
squareIconMediumBoundary 2rem
squareIconMediumBoundaryAlt 2.25rem
squareIconMediumContent 1rem
squareIconMediumContentAlt 0.875rem
squareIconSmall 1rem
squareIconSmallBoundary 1.5rem
squareIconSmallContent .75rem
squareIconXSmallBoundary 1.25rem
squareIconXxSmallBoundary 1rem
squareIconXxSmallContent .875rem
squareIconXSmallContent .5rem
squareIconLarge 3.125rem
squareToggleSlider 1.25rem
widthToggle 3rem
heightToggle 1.5rem
heightContextBar 2.5rem
heightPill 1.625rem
borderWidthThin 1px
borderWidthThick 2px
spacingNone 0
spacingXxxSmall 0.125rem
spacingXxSmall 0.25rem
spacingXSmall 0.5rem
spacingSmall 0.75rem
spacingMedium 1rem
spacingLarge 1.5rem
spacingXLarge 2rem
spacingXxLarge 3rem
colorTextActionLabel rgb(84, 105, 141)
colorTextActionLabelActive rgb(22, 50, 92)
colorTextBrand rgb(21, 137, 238)
colorTextBrowser rgb(255, 255, 255)
colorTextBrowserActive rgba(0, 0, 0, 0.4)
colorTextCustomer rgb(255, 154, 60)
colorTextDefault rgb(22, 50, 92)
colorTextError rgb(194, 57, 52)
colorTextInputDisabled rgb(84, 105, 141)
colorTextInputFocusInverse rgb(22, 50, 92)
colorTextInputIcon rgb(159, 170, 181)
colorTextInverse rgb(255, 255, 255)
colorTextInverseWeak rgb(159, 170, 181)
colorTextInverseActive rgb(94, 180, 255)
colorTextInverseHover rgb(159, 170, 181)
colorTextLink rgb(0, 112, 210)
colorTextLinkActive rgb(0, 57, 107)
colorTextLinkDisabled rgb(22, 50, 92)
colorTextLinkFocus rgb(0, 95, 178)
colorTextLinkHover rgb(0, 95, 178)
colorTextLinkInverse rgb(255, 255, 255)
colorTextLinkInverseHover rgba(255, 255, 255, 0.75)
colorTextLinkInverseActive rgba(255, 255, 255, 0.5)
colorTextLinkInverseDisabled rgba(255, 255, 255, 0.15)
colorTextModal rgb(255, 255, 255)
colorTextModalButton rgb(84, 105, 141)
colorTextStageLeft rgb(224, 229, 238)
colorTextTabLabel rgb(22, 50, 92)
colorTextTabLabelSelected rgb(0, 112, 210)
colorTextTabLabelHover rgb(0, 95, 178)
colorTextTabLabelFocus rgb(0, 95, 178)
colorTextTabLabelActive rgb(0, 57, 107)
colorTextTabLabelDisabled rgb(224, 229, 238)
colorTextToast rgb(224, 229, 238)
colorTextWarning rgb(255, 183, 93)
colorTextWarningAlt rgb(132, 72, 0)
colorTextWeak rgb(84, 105, 141)
colorTextIconBrand rgb(0, 112, 210)
colorTextIconUtility rgb(159, 170, 181)
colorTextToggleDisabled rgb(216, 221, 230)
colorTextContextBar rgb(84, 105, 141)
colorTextContextBarInverse rgb(255, 255, 255)
colorTextContextBarActionTrigger rgba(255, 255, 255, 0.4)
colorTextButtonBrand rgb(255, 255, 255)
colorTextButtonBrandHover rgb(255, 255, 255)
colorTextButtonBrandActive rgb(255, 255, 255)
colorTextButtonBrandDisabled rgb(255, 255, 255)
colorTextButtonDefault rgb(0, 112, 210)
colorTextButtonDefaultHover rgb(0, 112, 210)
colorTextButtonDefaultActive rgb(0, 112, 210)
colorTextButtonDefaultDisabled rgb(216, 221, 230)
colorTextButtonDefaultHint rgb(159, 170, 181)
colorTextButtonInverse rgb(224, 229, 238)
colorTextButtonInverseDisabled rgba(255, 255, 255, 0.15)
colorTextIconDefault rgb(84, 105, 141)
colorTextIconDefaultHint rgb(159, 170, 181)
colorTextIconInverseHint rgba(255, 255, 255, 0.5)
colorTextIconDefaultHintBorderless rgb(224, 229, 238)
colorTextIconDefaultHover rgb(0, 112, 210)
colorTextIconDefaultActive rgb(0, 57, 107)
colorTextIconDefaultDisabled rgb(216, 221, 230)
colorTextIconInverse rgb(255, 255, 255)
colorTextIconInverseHover rgb(255, 255, 255)
colorTextIconInverseActive rgb(255, 255, 255)
colorTextIconInverseDisabled rgba(255, 255, 255, 0.15)
colorTextIconInverseHintHover rgba(255, 255, 255, 0.75)
colorTextLabel rgb(84, 105, 141)
colorTextPlaceholder rgb(84, 105, 141)
colorTextPlaceholderInverse rgb(224, 229, 238)
colorTextRequired rgb(194, 57, 52)
colorTextPill rgb(0, 112, 210)
colorTextSuccess rgb(2, 128, 72)
durationInstantly 0s
durationImmediately 0.05s
durationQuickly 0.1s
durationPromptly 0.2s
durationSlowly 0.4s
durationPaused 3.2s
durationToastShort 4.8s
durationToastMedium 9.6s
zIndexToast 10000
zIndexModal 9000
zIndexOverlay 8000
zIndexDropdown 7000
zIndexDialog 6000
zIndexPopup 5000
zIndexDefault 1
zIndexDeepdive -99999

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