Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)
j標準設計トークン — force:base
使用可能な標準トークンは、Salesforce Lightning Design System (SLDS) で提供される設計トークンのサブセットです。次のトークンは、force:base から拡張した場合に使用できます。
使用可能なトークン
| トークン名 | 値の例 |
|---|---|
| borderWidthThin | 1px |
| borderWidthThick | 2px |
| spacingXxxSmall | 0.125rem |
| spacingXxSmall | 0.25rem |
| spacingXSmall | 0.5rem |
| spacingSmall | 0.75rem |
| spacingMedium | 1rem |
| spacingLarge | 1.5rem |
| spacingXLarge | 2rem |
| varSpacingXxSmall | 0.25rem |
| varSpacingXSmall | 0.5rem |
| varSpacingSmall | 0.75rem |
| varSpacingMedium | 1rem |
| varSpacingLarge | 1.5rem |
| varSpacingXLarge | 2rem |
| varSpacingXxLarge | 3rem |
| varSpacingVerticalXxSmall | 0.25rem |
| varSpacingVerticalXSmall | 0.5rem |
| varSpacingVerticalSmall | 0.75rem |
| varSpacingVerticalMedium | 1rem |
| varSpacingVerticalLarge | 1.5rem |
| varSpacingVerticalXLarge | 2rem |
| varSpacingVerticalXxLarge | 3rem |
| varSpacingHorizontalXxSmall | 0.25rem |
| varSpacingHorizontalXSmall | 0.5rem |
| varSpacingHorizontalSmall | 0.75rem |
| varSpacingHorizontalMedium | 1rem |
| varSpacingHorizontalLarge | 1.5rem |
| varSpacingHorizontalXLarge | 2rem |
| varSpacingHorizontalXxLarge | 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 |
| squareIconMediumBoundary | 2rem |
| squareIconMediumBoundaryAlt | 2.25rem |
| squareIconMediumContent | 1rem |
| squareIconSmallBoundary | 1.5rem |
| squareIconSmallContent | .75rem |
| squareIconXSmallBoundary | 1.25rem |
| squareIconXSmallContent | .5rem |
| fontWeightLight | 300 |
| fontWeightRegular | 400 |
| fontWeightBold | 700 |
| lineHeightHeading | 1.25 |
| lineHeightText | 1.375 |
| lineHeightReset | 1 |
| lineHeightTab | 2.5rem |
| fontFamily | '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) |
| colorBorderError | rgb(194, 57, 52) |
| colorBorderSuccess | rgb(75, 202, 129) |
| colorBorderWarning | rgb(255, 183, 93) |
| colorBorderTabSelected | rgb(0, 112, 210) |
| colorBorderSeparator | rgb(244, 246, 249) |
| colorBorderSeparatorAlt | rgb(216, 221, 230) |
| colorBorderSeparatorInverse | rgb(42, 66, 108) |
| colorBorderRowSelected | rgb(0, 112, 210) |
| colorBorderRowSelectedHover | rgb(21, 137, 238) |
| 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) |
| colorBackground | rgb(244, 246, 249) |
| colorBackgroundAlt | rgb(255, 255, 255) |
| 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) |
| colorBackgroundHighlight | rgb(250, 255, 189) |
| 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) |
| colorBackgroundPayload | rgb(244, 246, 249) |
| colorBackgroundShade | rgb(224, 229, 238) |
| colorBackgroundStencil | rgb(238, 241, 246) |
| colorBackgroundStencilAlt | rgb(224, 229, 238) |
| colorBackgroundScrollbar | rgb(224, 229, 238) |
| colorBackgroundScrollbarTrack | rgb(168, 183, 199) |
| colorBrand | rgb(21, 137, 238) |
| colorBrandDark | rgb(0, 112, 210) |
| 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) |
| colorBackgroundPill | rgb(255, 255, 255) |
| colorBackgroundToast | rgba(84, 105, 141, 0.95) |
| colorBackgroundToastSuccess | rgb(4, 132, 75) |
| colorBackgroundToastError | rgba(194, 57, 52, 0.95) |
| 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) |
| shadowButtonFocus | 0 0 3px #0070D2 |
| shadowButtonFocusInverse | 0 0 3px #E0E5EE |
| 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) |
| 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) |
| colorTextWeak | rgb(84, 105, 141) |
| colorTextIconBrand | rgb(0, 112, 210) |
| 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) |
| 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) |
| 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) |
| durationInstantly | 0s |
| durationImmediately | 0.05s |
| durationQuickly | 0.1s |
| durationPromptly | 0.2s |
| durationSlowly | 0.4s |
| durationPaused | 3.2s |
| 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 |
| colorBackgroundAnchor | rgb(244, 246, 249) |
SLDS で使用可能な設計トークンの完全なリストについては、Lightning Design System サイトの「Design Tokens」を参照してください。