この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

コミュニティの標準設計トークン

標準設計トークンのサブセットを使用して、コミュニティビルダーで [テーマ] パネルと互換性のあるコンポーネントを作成します。[テーマ] パネルでは、システム管理者がプロパティを使用してコミュニティ全体のスタイル設定をすばやく行うことができます。[テーマ] パネルの各プロパティは、1 つ以上の標準設計トークンと対応付けられます。システム管理者が [テーマ] パネルのプロパティを更新すると、そのブランドプロパティに関連付けられたトークンを使用する Lightning コンポーネントが自動的に更新されます。

コミュニティに使用できるトークン

カスタマーサービステンプレートを使用するコミュニティには、forceCommunity:base から拡張した場合に次の標準トークンを使用できます。

標準トークン値は SLDS に合わせて変化します。使用可能なトークンとその値は、通知なしで変更される可能性があります。

重要

[ブランド] パネルのプロパティ	対応付けられる標準設計トークン
テキストの色	`colorTextDefault`
詳細テキストの色	`colorTextActionLabel` `colorTextLabel` `colorTextPlaceholder` `colorTextWeak`
アクションの色	`colorBackgroundButtonBrand` `colorBorderBrand` `colorBorderButtonBrand` `colorBrand` `colorTextBrand` `colorTextTabLabelSelected` `colorTextActionLabelActive` Summer '18 以降、`colorBackgroundHighlight` はアクションの色には対応付けられません。メモ
リンクの色	`colorTextLink`
会社のロゴ	`brandLogoImage`
フロート表示テキストの色	`colorTextButtonBrand` `colorTextButtonBrandHover` `colorTextInverse`
境界線の色	`colorBorder` `colorBorderButtonDefault` `colorBorderInput` `colorBorderSeparatorAlt`
主要フォント	`fontFamily`
テキストの大文字/小文字	`textTransform`

また、次の標準トークンはカスタマーサービステンプレートの派生テーマプロパティに使用できます。[テーマ] パネルでプロパティを更新すると、派生テーマプロパティに間接的にアクセスできます。たとえば、[テーマ] パネルで [アクションの色] プロパティを変更した場合、新しい値に基づいて [アクションの濃い色] 値が自動的に再適用されます。

派生ブランドプロパティ	対応付けられる標準設計トークン
アクションの濃い色 ([アクションの色] から派生)	`colorBackgroundButtonBrandActive` `colorBackgroundButtonBrandHover`
フロート表示の色 ([アクションの色] から派生)	`colorBackgroundButtonDefaultHover` `colorBackgroundRowHover` `colorBackgroundRowSelected` `colorBackgroundShade`
リンクの濃い色 ([リンクの色] から派生)	`colorTextLinkActive` `colorTextLinkHover`

SLDS で使用可能な設計トークンの完全なリストについては、Lightning Design System サイトの「Design Tokens」を参照してください。

Lightning Aura Components Developer Guide (Lightning Aura コンポーネント開発者ガイド)

コミュニティの標準設計トークン

コミュニティに使用できるトークン

関連項目: