Lightning コンポーネント開発者ガイド
j標準設計トークン - force:base
使用可能な標準トークンは、Salesforce Lightning Design System (SLDS) で提供される設計トークンのサブセットです。次のトークンは、force:base から拡張した場合に使用できます。
使用可能なトークン
| トークン名 | 値の例 |
|---|---|
| elevation3Below | -3 |
| elevation0 | 0 |
| elevation2 | 2 |
| elevation4 | 4 |
| elevation8 | 8 |
| elevation16 | 16 |
| elevation32 | 32 |
| 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) |
| 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) |
| colorBackgroundActionbarIconUtility | rgb(84, 105, 141) |
| colorBackgroundIndicatorDot | 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) |
| colorBackgroundNotificationNew | rgb(240, 248, 252) |
| colorBackgroundOrgSwitcherArrow | rgb(6, 28, 63) |
| colorBackgroundPayload | rgb(244, 246, 249) |
| 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) |
| 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) |
| colorBrandToggle | rgb(159, 170, 181) |
| colorBrandToggleDisabled | rgb(159, 170, 181) |
| colorBrandToggleHover | rgb(126, 140, 153) |
| colorBrandToggleActive | rgb(0, 112, 210) |
| colorBrandToggleActiveHover | rgb(0, 0, 0) |
| colorBackgroundContextBar | rgb(22, 50, 92) |
| colorBackgroundContextBarShadow | rgba(0, 0, 0, 0.25) |
| colorBackgroundContextBarHighlight | rgba(255, 255, 255, 0.2) |
| colorBackgroundPageHeader | rgb(247, 249, 251) |
| borderWidthThin | 1px |
| borderWidthThick | 2px |
| 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) |
| 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) |
| 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) |
| 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) |
| 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) |
| colorBorderButtonBrand | rgb(0, 112, 210) |
| colorBorderButtonBrandDisabled | rgba(0, 0, 0, 0) |
| colorBorderButtonDefault | rgb(216, 221, 230) |
| colorBorderButtonInverseDisabled | rgba(255, 255, 255, 0.15) |
| fontFamily | 'Salesforce Sans', Arial, sans-serif |
| fontWeightLight | 300 |
| fontWeightRegular | 400 |
| fontWeightBold | 700 |
| fontSizeXSmall | 0.625rem |
| fontSizeSmall | 0.875rem |
| fontSizeMedium | 1rem |
| fontSizeMediumA | 0.875rem |
| fontSizeLarge | 1.25rem |
| fontSizeXLarge | 1.5rem |
| fontSizeXxLarge | 2rem |
| lineHeightHeading | 1.25 |
| lineHeightText | 1.375 |
| lineHeightReset | 1 |
| lineHeightTab | 2.5rem |
| lineHeightButton | 1.875rem |
| lineHeightButtonSmall | 1.75rem |
| lineHeightToggle | 1.3rem |
| 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) |
| 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) |
| colorBorderInput | rgb(216, 221, 230) |
| colorBorderInputActive | rgb(21, 137, 238) |
| colorBorderInputDisabled | rgb(168, 183, 199) |
| colorBorderInputCheckboxSelectedCheckmark | rgb(255, 255, 255) |
| 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) |
| opacity5 | 0.5 |
| shadowActionOverflowFooter | 0 -2px 4px #F4F6F9 |
| shadowOverlay | 0 -2px 4px rgba(0,0,0,.07) |
| shadowDrag | 0px 2px 4px 0px rgba(0,0,0,.4) |
| shadowButton | 0px 1px 1px 0px rgba(0,0,0,.05) |
| shadowDropDown | 0px 2px 3px 0px rgba(0,0,0,.16) |
| shadowHeader | 0 2px 4px rgba(0,0,0,.07) |
| shadowButtonFocus | 0 0 3px #0070D2 |
| shadowButtonFocusInverse | 0 0 3px #E0E5EE |
| 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 |
| squareIconSmall | 1rem |
| squareIconSmallBoundary | 1.5rem |
| squareIconSmallContent | .75rem |
| squareIconXSmallBoundary | 1.25rem |
| squareIconXSmallContent | .5rem |
| squareIconLarge | 3.125rem |
| squareToggleSlider | 1.25rem |
| widthToggle | 3.375rem |
| heightToggle | 1.5rem |
| heightContextBar | 2.25rem |
| 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) |
| colorTextWeak | rgb(84, 105, 141) |
| colorTextIconBrand | rgb(0, 112, 210) |
| colorTextToggleDisabled | rgb(216, 221, 230) |
| colorTextContextBar | rgb(255, 255, 255) |
| colorTextContextBarTrigger | rgba(255, 255, 255, 0.4) |
| durationInstantly | 0s |
| durationImmediately | 0.05s |
| durationQuickly | 0.1s |
| durationPromptly | 0.2s |
| durationSlowly | 0.4s |
| durationPaused | 3.2s |
| zIndexToast | 10000 |
| zIndexModal | 9000 |
| zIndexOverlay | 8000 |
| zIndexDropdown | 7000 |
| zIndexDialog | 6000 |
| zIndexPopup | 5000 |
| zIndexDefault | 1 |
| zIndexDeepdive | -99999 |
SLDS で使用可能な設計トークンの完全なリストについては、Lightning Design System サイトの「Design Tokens」を参照してください。