I'm trying to use Lightning Tokens as described in Developer Guide, but unfortunately, it can't resolve the reference.

I tried wrapping LWC component with Aura component it. Using tokens works in Aura component, but doesn't work in LWC.

Testing scenario:


    <aura:token name="testBgColor" value="#e7e7e7"/>

Aura Wrapper

<aura:component description="auraWrapper" implements="forceCommunity:availableForAllPageTypes, flexipage:availableForAllPageTypes">


   <div class="test">Hello World</div>


.test {
    background-color: var(--lwc-testBgColor, red);

It always shows component in red.

Did someone manage to make it work?



Salesforce finally adding support for LWC design attributes in Spring'20

So we can finally consider this issue resolved 😀

UPDATE Didn't work when I was last testing. But it's possible to define your own variables using standard CSS syntax.


:host {
     --lwc-blue: #101556;


:root {
     --lwc-blue: #101556;

you can't use :root in LWC directly, so you'll need to put it into Static Resource and load with loadStyle.

Since I needed backward compatibility with CSS variables and wanted to work with them I started using SASS for them. My current setup.


@import "vars";

:root {
  @each $property, $value in $vars {
    --lwc-#{$property}: #{$value};


$vars: (
 myBlue: #131355,
 red: #671010,


@import "vars";

@function var1($variable) {
  @return var(--lwc-#{$variable}, map-get($vars, $variable));

LWC component: component.scss

@import "../base";

  border: 1px dotted var1(myBlue);

generated component.css

.container {
  border: 1px dotted var(--lwc-myBlue, #131355);

Hope it was a little bit helpful.

  • Could you try removing extends="forceCommunity:base" from the aura:tokens an see how it behaves?
    – Raul
    Commented May 2, 2019 at 12:10
  • @Raul nah, still doesn't work
    – ytiq
    Commented May 2, 2019 at 12:16
  • 1
    Where are your tokens? They should be in the Aura wrapper, right? Commented May 2, 2019 at 13:11
  • 2
    @ThomasTaylor they are created with a name defaultTokens.tokens. You can't directly put them in aura component, even though it is written so in Developer Guide
    – ytiq
    Commented May 2, 2019 at 13:35
  • 1
    @ytiq It definitely doesn't seem to work as documented, have you tried reaching out to the Salesforce Support?
    – Jayant Das
    Commented May 2, 2019 at 15:48

4 Answers 4


EDIT 12/22/2019: keep an eye on the release notes for spring '20, they're still in preview so this could change, but looks like a fix is coming.


I suspect that it's not working yet. I noticed that in this link

Lighting Web Component Custom Design Token is not getting rendered properly

Diego mentions that

"The problem is quite tricky to fix so it will probably land in Winter (September release)"

and that

"It’s an internal big number, can’t share it here"


Salesforce finally adding support for LWC design attributes in Spring'20


If you get the error: No TOKEN named tokenName found, it's likely that you're using a token that isn't marked Global Access.



To use standard salesforce design tokens in your lwc component, use

background-color : var(--lwc-colorBackgroundButtonBrand);

Where "var" is a CSS function used to access the token, "--lwc-" is a prefix you need to use and "colorBackgroundButtonBrand" is the token name

To get all the supported Community tokens, go here

To get all the base salesforce design tokens, go here

Hope this helps!

You must log in to answer this question.

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