Lightning コンポーネント開発者ガイド
j標準設計トークン
Salesforce では、コンポーネントスタイルリソースでアクセスできる一連の「基本」トークンが公開されます。これらの標準トークンを使用すると、独自のカスタムコンポーネントで Salesforce Lightning Design System (SLDS) の外観を模倣することができます。SLDS の変化に伴って、標準設計トークンを使用してスタイル設定されたコンポーネントも変化します。
組織に標準トークンを追加するには、次のようにトークンバンドルを基本トークンから拡張します。
1<aura:tokens extends="force:base">
2 <!-- your own tokens here -->
3</aura:tokens>トークンが defaultTokens (または defaultTokens が拡張する別のトークンバンドル) に追加されると、token() 関数およびトークン名を使用して、独自のトークンのように force:base からトークンを参照できます。以下に例を示します。
1.THIS p {
2 font-family: token(fontFamily);
3 font-weight: token(fontWeightRegular);
4}自分のトークンを標準トークンと組み合わせることができます。独自のトークンを標準トークンと簡単に区別できるような命名方法を使用することをお勧めします。トークン名に「my」などの簡単に識別できるプレフィックスを使用することを検討してください。
使用可能なトークン
使用可能な標準トークンは、Salesforce Lightning Design System で提供される設計トークンのサブセットです。トークンは、force:base からの拡張が次のものである場合に使用できます。
| トークン名 | 値の例 |
|---|---|
| mqSmall | only screen and (max-width: 47.9375em) |
| mqSmall | only screen and (max-width: 47.9375em) |
| mqMedium | only screen and (min-width: 48em) |
| mqMediumLandscape | only screen and (min-width: 48em) and (min-aspect-ratio: 4/3) |
| mqLarge | only screen and (min-width: 64.0625em) |
| 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) |
| colorBackgroundAnchor | rgb(244, 246, 249) |
| 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) |
| borderWidthThin | 1px |
| borderWidthThick | 2px |
| 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) |
| 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) |
| 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 |
| lineHeightHeading | 1.25 |
| lineHeightText | 1.375 |
| lineHeightReset | 1 |
| lineHeightTab | 3rem |
| lineHeightButton | 2.125rem |
| lineHeightButtonSmall | 1.75rem |
| 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) |
| 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) |
| colorBackgroundToast | rgb(84, 105, 141) |
| colorBackgroundToastSuccess | rgb(4, 132, 75) |
| colorBackgroundToastError | rgb(194, 57, 52) |
| shadowDrag | 0px 2px 4px 0px rgba(0,0,0,.4) |
| shadowDropDown | 0px 2px 3px 0px rgba(0,0,0,.16) |
| shadowHeader | 0 2px 4px rgba(0,0,0,.07) |
| shadowButtonFocus | 0 0 3px #0070D2 |
| shadowButtonFocusIE11 | 0 0 4px #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 |
| squareIconMediumBoundary | 2rem |
| squareIconMediumBoundaryAlt | 2.25rem |
| squareIconMediumContent | 1rem |
| squareIconSmallBoundary | 1.5rem |
| squareIconSmallContent | .75rem |
| squareIconXSmallBoundary | 1.25rem |
| squareIconXSmallContent | .5rem |
| spacingXxxSmall | 0.125rem |
| spacingXxSmall | 0.25rem |
| spacingXSmall | 0.5rem |
| spacingSmall | 0.75rem |
| spacingMedium | 1rem |
| spacingLarge | 1.5rem |
| spacingXLarge | 2rem |
| 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) |
| durationInstantly | 0s |
| durationImmediately | 0.05s |
| durationQuickly | 0.1s |
| durationPromptly | 0.2s |
| durationSlowly | 0.4s |
| durationPaused | 3.2s |
SLDS で使用可能な設計トークンの完全なリストについては、Lightning Design System サイトの「Design Tokens」を参照してください。