12

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.

6
  • Could you try removing extends="forceCommunity:base" from the aura:tokens an see how it behaves?
    – Raul
    May 2 '19 at 12:10
  • @Raul nah, still doesn't work
    – ytiq
    May 2 '19 at 12:16
  • 1
    Where are your tokens? They should be in the Aura wrapper, right? May 2 '19 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
    May 2 '19 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
    May 2 '19 at 15:48
3

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"

1

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

0

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!

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.