Design tokens doesn’t work in LWC?

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

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”

Attribution
Source : Link , Question Author : ytiq , Answer Author : Joe Flowers

Leave a Comment