Experience Cloud 開発者ガイド
jエクスペリエンスビルダーサイトの標準デザイントークン
Salesforce では、コンポーネントスタイルリソースでアクセスできる一連の基本トークンが公開されます。これらの標準トークンを使用すると、独自のカスタムコンポーネントで Salesforce Lightning Design System (SLDS) の外観を模倣することができます。SLDS の変化に伴って、標準デザイントークンを使用してスタイル設定されたコンポーネントも変化します。標準デザイントークンのサブセットを使用して、エクスペリエンスビルダーで [テーマ] パネルと互換性のあるコンポーネントを作成します。
[テーマ] パネルでは、システム管理者がブランドプロパティを使用してサイト全体のスタイル設定をすばやく行うことができます。[テーマ] パネルの各プロパティは、1 つ以上の標準デザイントークンと対応付けられます。システム管理者が [テーマ] パネルのプロパティを更新すると、そのプロパティに関連付けられたトークンを使用する Lightning コンポーネントが更新されます。
![エクスペリエンスビルダーの [テーマ] パネル](https://developer.salesforce.com/docs/resources/img/ja-jp/238.0?doc_id=images%2Fcms_builder_theme_panel_menu.png&folder=communities_dev)
エクスペリエンスビルダーサイトで使用可能なトークン
エクスペリエンスビルダーサイトでは、force:base から拡張した場合に次の標準トークンを使用できます。
| [テーマ] パネルのプロパティ | 対応付けられる標準デザイントークン |
|---|---|
| テキストの色 | colorTextDefault |
| 詳細テキストの色 |
|
| アクションの色 |
|
| リンクの色 | colorTextLink |
| 会社のロゴ | brandLogoImage |
| フロート表示テキストの色 |
|
| 境界線の色 |
|
| 主要フォント | fontFamily |
| テキストの大文字/小文字 | textTransform |
また、次の標準トークンはテンプレートの派生テーマプロパティに使用できます。[テーマ] パネルでプロパティを更新すると、派生ブランドプロパティに間接的にアクセスできます。たとえば、[テーマ] パネルで [アクションの色] プロパティを変更した場合、新しい値に基づいて [アクションの濃い色] 値が再適用されます。
| 派生ブランドプロパティ | 対応付けられる標準デザイントークン |
|---|---|
| アクションの濃い色 ([アクションの色] から派生) |
|
| フロート表示の色 ([アクションの色] から派生) |
|
| リンクの濃い色 ([リンクの色] から派生) |
|
SLDS で使用可能なデザイントークンの完全なリストについては、Lightning Design System サイトの「Design Tokens (デザイントークン)」を参照してください。