1

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?

2

3 Answers 3

1

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

2
  • This doesn't answer the concern of how to fix the SLDS Validator extension?
    – Paul N
    Jan 27, 2022 at 15:39
  • 1
    @PaulN yes, I ended up putting styles in static resource and then loaded them into lwc using platform resource loader. Jan 27, 2022 at 15:54
0

In addition to the answer by @sfdc07, the height, width of the lightning input can not be changed directly. Even the styling hooks are not provided to update that. So I put my CSS styles into static resource and loaded that with platform resource loader.

Note: Styles loaded from static resources are available throughout the page, so it might overwrite the styles for all components on the page. So you need to apply the styles with specificity, in my case, I have used a custom class and added that custom class to each element where I wanted to override the standard styles.

-1

Adding to the answer:

    .selected-pill {
            --sds-c-pill-color-background: var(--lwc-brandPrimary);
    }
1
  • 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, 2020 at 17:20

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .