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

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

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

Winter '24 以降、Web コンテンツアクセシビリティのガイドライン (WCAG

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

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

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

関連トピック