Design tokens doesn't work in LWC?

Question

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:

Tokens:

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

Aura Wrapper

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

lwcTest.html

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

lwcTest.css

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

It always shows component in red.

Did someone manage to make it work?

Regards.

UPDATE

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.

local:

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

global:

: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.

root.scss

@import "vars";

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

_vars.scss

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

_base.scss

@import "vars";

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

LWC component: component.scss

@import "../base";

.container{
  border: 1px dotted var1(myBlue);
}

generated component.css

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

Hope it was a little bit helpful.

Answer 1

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.

https://releasenotes.docs.salesforce.com/en-us/spring20/release-notes/rn_lwc_custom_aura_tokens.htm

---

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"

Answer 2

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

Answer 3

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.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_design_tokens

Answer 4

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!