I have the below CSS in my Lightning web component.

.customBox {
    height: 30px;
    min-width: 30px;

As the extension suggested enter image description here

I updated that to the below design tokens.

.customBox {
    height: var(--lwc-heightInput, 1.875rem);
    min-width: var(--lwc-heightInput, 1.875rem);

Now I tried to save the component but it wouldn't save and gives the below error.

No TOKEN named heightInput found

So what is the problem here? Is the token wrong or it does not work in LWC?


Looks like the Token which you are trying to use is not a Global Token yet that's why it's erroring out https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.create_components_css_design_tokens


Adding to the answer:

    .selected-pill {
            --sds-c-pill-color-background: var(--lwc-brandPrimary);
  • 1
    I would add more clarity to this post, particularly because the accepted answer is just a link that could become a dead-end in the future.
    – nbrown
    Nov 24 '20 at 17:20

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.