Lightning Design System 設計トークンの使用

設計トークンは、余白やスペース設定の値、フォントサイズやフォントファミリ、色の 16 進数値などのビジュアルデザイン属性を保存する名前付きエンティティです。

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

Tip

Lightning Web コンポーネントで CSS 変数を使用して Lightning Design System 設計トークンにアクセスします。Lightning Web コンポーネントでは、グローバルアクセスとしてマークされたあらゆる Lightning Design System 設計トークンを使用できます。

No TOKEN named {tokenName} found というエラーが発生した場合、グローバルアクセスとしてマークされていないトークンを使用している可能性があります。グローバルトークンを使用するか、カスタム Aura 設計トークンを使用してください。

Important

Lightning Web コンポーネントの CSS で設計トークンを参照するには、--lwc- プレフィックスを使用して、camelCase でトークン名を参照します。

1/* myWebComponent.css */
2div {
3  margin-right: var(--lwc-spacingSmall);
4}

変数はコンパイル時に実際の値に置き換えられます。つまり、実行時に変数への参照は機能しません。たとえば、標準 API の CSSStyleDeclaration.getPropertyValue() または CSSStyleDeclaration.setPropertyValue() を変数で使用することはできません。

Note

関連トピック

Lightning Design System: Global Color Styling Hooks (色のグローバルスタイル設定フック)

The Japanese Summer '24 guide is now live

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