Lighting Web Component Custom Design Token is not getting rendered properly

Question

I have wrapped a LWC in an Aura Component and want to take advantage of defining custom design tokens based on this documentation: https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.interop_components_css_aura

My defaultTokens bundle looks like this:

<aura:tokens extends="force:base">
    <aura:token name="foo" value="#39383F" />
</aura:tokens>

My CSS looks like this:

.foo {
    background: var(--lwc-foo);
}

However, when my component is rendered, the CSS compiles to this:

.foo {
    background: inherit;
}

It is worth noting that referencing the native tokens defined in SLDS (https://www.lightningdesignsystem.com/design-tokens/) works like a charm.

For instance, this:

.bar {
   background: var(--lwc-colorBrand);
}

renders this:

.bar {
    background: rgb(21, 137, 238);
}

Either I am missing a step in defining my custom token or there is a LWC bug. I am leaning toward the latter. This is what I am observing:

During compilation time, native tokens are transpiled to the mapped value in the CSS file. However, CSS files in LWC bundles are stripped of any property value that references a custom property. This behavior is also consistent with defining and implementing custom properties in CSS. In keeping with web standards, I would expect this to work in my LWC:

:host {
    --garishBackground: blue;
}

.garish {
    background: var(--garishBackground);
}

But, again, after compilation, this renders to:

:host {
    --garishBackground: blue;
}

.garish {
    background: inherit;
}

I do know that the custom property defined in :host is coming through because not only do I see it in the CSS from the dev console, but it will also render properly if I implement the variable through inline styling. This works:

<div style="background: var(--garishBackground)">
    <p>Garish.</p>
</div>

I would appreciate any help confirming whether I am doing something wrong or if it is indeed a bug. If it is a bug, I would love the Salesforce LWC team to fix this because it is a great feature to help reduce hard-coded values and promote consistent branding. The ability to define custom properties and use them in LWC would support the move to champion web standards in the Salesforce Community.

Thank you!

Answer 1

Yes this is a known bug.

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

Answer 2

I think inorder to access aura design tokens in lwc component css file you have to use --c- like .foo { background: var(--c-foo); }