0

Trying to utilise standard design tokens within my LWC so that within a community the LWC will adopt the theme colours. I'm unable to successfully reference a global design token. All I get is a '--lwc-colorTextBrand not defined' message when I inspect the page, and the h1 text does not implement the color that I am setting for this token in the community theme. Thus, I am thinking that I am somehow missing import of the standard tokens to my LWC:

<template>
<h1 class="colorTextBrand">Sample of all CMS content components</h1>
<template>

where in css file for the LWC I have the following, where color-text-brand is a globally accessible token (apparently):

.colorTextBrand { color: var(--lwc-colorTextBrand); }

I read about 'extending' force:base which I understand for aura components, but not clear how to get the LWC able to reconcile tokens into my stylesheet. I thought Spring 20 meant didnt have to wrap LWCs in aura component to get token access - am I wrong?

Any insights into how to resolve this would be appreciated. Im now just going around in circles in the documentation.

2
  • The error says colorTextDefault is not defined, but you're trying to use colorTextBrand? What's the actual problem you're observing? Is the brand color not being applied? Are you trying to use a custom design token, or a standard token?
    – sfdcfox
    Jul 1, 2022 at 6:13
  • Apologies - a typo. (was testing other token with no luck either). I am using 'colorTextBrand' which is a standard, globally accessible token according to the docs. The problem I am seeing is that the text colour of my component is not being updated to reflect the token value ie. red. I will update my post to provide more info. Jul 1, 2022 at 6:48

2 Answers 2

0

Ok. So the issue was the community was a 'Build your own (BYO)' theme. I tried the markup above in another template and it worked, so seems that the BYO does not import base tokens like the other theme options.

0

You need to create a lightning token component called defaultTokens. Easiest way, go to developer console. choose new -lightning Tokens. In the create dialog name it 'defaultTokens'. The code simply needs to be

<aura:tokens extends="force:base">  
 // you can add your own here but don't need to
</aura:tokens>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .