Design Token suggested by SLDS Validator extension not working in LWC

Question

I have the below CSS in my Lightning web component.

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

As the extension suggested

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?

Answer 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

Answer 2

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.

Answer 3

Adding to the answer:

    .selected-pill {
            --sds-c-pill-color-background: var(--lwc-brandPrimary);
    }