Lightning Design System 設計トークンの使用
設計トークンは、余白やスペース設定の値、フォントサイズやフォントファミリ、色の 16 進数値などのビジュアルデザイン属性を保存する名前付きエンティティです。
Winter '24 以降、Web コンテンツアクセシビリティのガイドライン (WCAG
Content Accessibility Guidelines) 2.1 の色のコントラスト基準に合わせるために、できるだけ設計トークンではなく、色のグローバルスタイル設定フックを使用することをお勧めしています。Lightning Design System の「Migration Guide (移行ガイド)」を参照してください。Lightning Web コンポーネントで CSS 変数を使用して Lightning Design System 設計トークンにアクセスします。Lightning Web コンポーネントでは、グローバルアクセスとしてマークされたあらゆる Lightning Design System 設計トークンを使用できます。
No TOKEN named {tokenName} found というエラーが発生した場合、グローバルアクセスとしてマークされていないトークンを使用している可能性があります。グローバルトークンを使用するか、カスタム Aura 設計トークンを使用してください。
Lightning Web コンポーネントの CSS で設計トークンを参照するには、--lwc- プレフィックスを使用して、camelCase でトークン名を参照します。
変数はコンパイル時に実際の値に置き換えられます。つまり、実行時に変数への参照は機能しません。たとえば、標準 API の CSSStyleDeclaration.getPropertyValue() または CSSStyleDeclaration.setPropertyValue() を変数で使用することはできません。
関連トピック