カスタム Aura トークンの使用

Lightning Web コンポーネントの CSS ファイルでは、組織で作成または未管理パッケージからインストールしたカスタム Aura トークンを使用できます。

ビジュアルデザインの重要な値をカスタム Aura トークンに取得します。トークンの値を一度定義すると、Lightning コンポーネントの CSS で再利用できます。トークンを使用することで、設計の一貫性を確保しやすくなり、設計の変化に伴った更新がさらに簡単になります。

Winter ‘24 以降、Web コンテンツアクセシビリティのガイドライン (WCAG:Web Content Accessibility Guidelines) 2.1 の色のコントラスト基準に合わせるために、できるだけカスタム Aura トークンではなく、色のグローバルスタイル設定フックを使用することをお勧めしています。Lightning Design System の「Migration Guide (移行ガイド)」を参照してください。

Tip

開発者コンソールで Lightning Tokens バンドルを作成して、カスタム Aura トークンを作成します。たとえば、このトークンバンドルには、myBackgroundColor というカスタム Aura トークンがあります。

1<aura:tokens>
2  <aura:token name="myBackgroundColor" value="#f4f6f9" />
3</aura:tokens>

カスタム Aura トークンは新しいものではありませんが、標準の var() CSS 関数を使用して、Lightning Web コンポーネントの CSS ファイルで使用できるようになりました。カスタム Aura トークンの先頭に --c- を追加します。

1/* myLightningWebComponent.css */
2color: var(--c-myBackgroundColor);

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。