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
Overriding Standard Tokens (Developer Preview)
Standard Design Tokens—force:base
Standard Design Tokens for Communities
Using JavaScript
JavaScript Cookbook
Using Apex
Lightning Data Service (Developer Preview)
Lightning Container (Developer Preview)
Controlling Access
Using Object-Oriented Development
Using the AppCache
Distributing Applications and Components
Debugging
Fixing Performance Warnings
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
borderWidthThin 1px
borderWidthThick 2px
borderStrokeWidthThin 1px
borderStrokeWidthThick 2px
spacingNone 0
spacingXxxSmall 0.125rem
spacingXxSmall 0.25rem
spacingXSmall 0.5rem
spacingSmall 0.75rem
spacingMedium 1rem
spacingLarge 1.5rem
spacingXLarge 2rem
spacingXxLarge 3rem
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
squareIconXSmallContent .5rem
squareIconXxSmallBoundary 1rem
squareIconXxSmallContent .875rem
squareIconLarge 3.125rem
heightPill 1.625rem
fillBrand rgb(0, 112, 210)
fillBrandHover rgb(0, 95, 178)
fillBrandActive rgb(22, 50, 92)
fillHeaderButton rgb(159, 170, 181)
fillHeaderButtonHover rgb(0, 95, 178)
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
fontSizeTextXxSmall .625rem
fontSizeTextXSmall .75rem
fontSizeTextSmall .8125rem
fontSizeTextMedium 1rem
fontSizeTextLarge 1.125rem
fontSizeTextXLarge 1.25rem
fontSizeHeadingXxSmall .625rem
fontSizeHeadingXSmall .75rem
fontSizeHeadingSmall .875rem
fontSizeHeadingMedium 1.125rem
fontSizeHeadingLarge 1.5rem
fontSizeHeadingXLarge 2rem
lineHeightHeading 1.25
lineHeightText 1.375
lineHeightReset 1
lineHeightTab 2.5rem
fontFamily 'Salesforce Sans', Arial, sans-serif
fontFamilyText 'Salesforce Sans', Arial, sans-serif
fontFamilyHeading 'Salesforce Sans', Arial, sans-serif
borderRadiusSmall .125rem
borderRadiusMedium .25rem
borderRadiusLarge .5rem
borderRadiusPill 15rem
borderRadiusCircle 50%
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)
colorBorderTabActive rgb(255, 255, 255)
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)
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)
colorBorderToggleChecked rgb(255, 255, 255)
colorStrokeBrand rgb(0, 112, 210)
colorStrokeBrandHover rgb(0, 112, 210)
colorStrokeBrandActive rgb(22, 50, 92)
colorStrokeDisabled rgb(224, 229, 238)
colorStrokeHeaderButton rgb(159, 170, 181)
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)
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)
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 rgba(84, 105, 141, 0.95)
colorBackgroundToastSuccess rgba(4, 132, 75, 0.95)
colorBackgroundToastError rgba(194, 57, 52, 0.95)
colorBackgroundWarning rgb(255, 183, 93)
colorBackgroundButtonSuccess rgb(75, 202, 129)
colorBackgroundButtonSuccessHover rgb(4, 132, 75)
colorBackgroundButtonSuccessActive rgb(4, 132, 75)
shadowActionOverflowFooter 0 -2px 4px #F4F6F9
shadowOverlay 0 -2px 4px rgba(0, 0, 0, 0.07)
shadowDrag 0 2px 4px 0 rgba(0, 0, 0, 0.40)
shadowDropDown 0 2px 3px 0 rgba(0, 0, 0, 0.16)
shadowHeader 0 2px 4px rgba(0, 0, 0, 0.07)
shadowButton 0 1px 1px 0 rgba(0, 0, 0, 0.05)
shadowButtonFocus 0 0 3px #0070D2
shadowButtonFocusInverse 0 0 3px #E0E5EE
shadowInlineEdit 0 2px 4px 4px rgba(0, 0, 0, 0.16)
shadowFocusInset 0 0 2px 2px #1589EE inset
shadowDocked 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
shadowImage 0 1px 1px rgba(0, 0, 0, 0.16)
elevation3Inset -3
elevation0 0
elevation2 2
elevation4 4
elevation8 8
elevation16 16
elevation32 32
elevationShadow3Below 0 3px 3px 0 rgba(0, 0, 0, 0.16) inset
elevationShadow0 none
elevationShadow2 0 2px 2px 0 rgba(0, 0, 0, 0.16)
elevationShadow4 0 4px 4px 0 rgba(0, 0, 0, 0.16)
elevationShadow8 0 8px 8px 0 rgba(0, 0, 0, 0.16)
elevationShadow16 0 16px 16px 0 rgba(0, 0, 0, 0.16)
elevationShadow32 0 32px 32px 0 rgba(0, 0, 0, 0.16)
elevationInverseShadow3Below 0 -3px 3px 0 rgba(0, 0, 0, 0.16) inset
elevationInverseShadow0 none
elevationInverseShadow2 0 -2px 2px 0 rgba(0, 0, 0, 0.16)
elevationInverseShadow4 0 -4px 4px 0 rgba(0, 0, 0, 0.16)
elevationInverseShadow8 0 -8px 8px 0 rgba(0, 0, 0, 0.16)
elevationInverseShadow16 0 -16px 16px 0 rgba(0, 0, 0, 0.16)
elevationInverseShadow32 0 -32px 32px 0 rgba(0, 0, 0, 0.16)
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)
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)
colorTextSuccessInverse rgb(75, 202, 129)
textTransform none
opacity5 0.5
opacity8 0.8
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
zIndexSticky 100
zIndexDefault 1
zIndexDeepdive -99999
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)
lineHeightButton 1.875rem
lineHeightButtonSmall 1.75rem
cardColorBackground rgb(255, 255, 255)
cardSpacingSmall 0.75rem
cardSpacingMedium 1rem
cardSpacingLarge 1.5rem
tableSpacingXSmall 0.5rem
colorBackgroundDockedPanelHeader rgb(247, 249, 251)
heightDockedBar 2.5rem
lineHeightToggle 1.3rem
squareToggleSlider 1.25rem
widthToggle 3rem
heightToggle 1.5rem
squareIconGlobalIdentityIcon 1.25rem
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)
colorBackgroundIconWaffle rgb(84, 105, 141)
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)
heightContextBar 2.5rem
colorTextContextBar rgb(84, 105, 141)
colorTextContextBarInverse rgb(255, 255, 255)
colorTextContextBarActionTrigger rgba(255, 255, 255, 0.4)
colorBackgroundAnchor rgb(244, 246, 249)
colorBackgroundPageHeader rgb(247, 249, 251)
colorBackgroundPathComplete rgb(75, 202, 129)
colorBackgroundPathCompleteHover rgba(4, 132, 75, 0.95)
colorBackgroundPathCurrent rgb(0, 112, 210)
colorBackgroundPathCurrentHover rgb(0, 95, 178)
colorBackgroundPathIncomplete rgb(224, 229, 238)
colorBackgroundPathIncompleteHover rgb(216, 221, 230)
colorBackgroundPathLost rgb(194, 57, 52)
colorBackgroundGuidance rgb(250, 250, 251)
colorBorderPathDivider rgb(255, 255, 255)
lineHeightSalespath 1.5rem
heightSalesPath 2rem
progressColorBackground rgb(255, 255, 255)
progressColorBackgroundShade rgb(244, 246, 249)
progressBarColorBackground rgb(216, 221, 230)
progressBarColorBackgroundFill rgb(94, 180, 255)
progressColorBorder rgb(255, 255, 255)
progressColorBorderShade rgb(244, 246, 249)
progressColorBorderHover rgb(0, 112, 210)
progressColorBorderActive rgb(21, 137, 238)
progressBarHeight 0.125rem
splitViewColorBackground rgb(51, 62, 79)
splitViewColorBackgroundRowHover rgb(65, 76, 94)
splitViewColorBorder rgb(44, 54, 70)

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