Using Design Tokens in LWC

How can I use community:base design tokens in LWC? I created a custom defaultTokens bundle which extends force:base.

<aura:tokens extends="force:base">
    
</aura:tokens>

I want to use the brandLogoImage token in an LWC and have tried the following as described in the documentation. https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_design_tokens

.logoContainer {
  background-image: var(--lwc-brandLogoImage);
}

.logoContainer {
  background-image: var(--c-brandLogoImage);
}

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

In order to use community tokens you need to extend forceCommunity:base and should work.

In order to debug your component and check if everything work currently you can open Inspector and check your component in the list of styles you should see something like

:root {
   --lwc-brandLogoImage: url('')
}

this would allow you to verify that CSS tokens are added to your page.

For further information please refer to this page Community Token documentation

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating