Incorrect order of css vars in text area

[mnunezdm]

(REQUIRED) Include one or more screenshots if applicable, as well as a Codepen with the
reduced test case.

Describe the issue

I think there is a bug in which the CSS vars are being applied to disabled textareas. Currently the order of the vars is

1. --slds-g-color-neutral-base-80
2. --lwc-colorBackgroundInputDisabled
3. rgb(243, 243, 243

Is this issue related to a specific component, variant, and/or state? If so, please detail which.

Textarea disabled

Are any specific browsers impacted by this bug?

All

Which version of the Salesforce Lightning Design System are you using?

Winter '24 but summer I think has the same issue

What steps and/or code are needed to reproduce this issue?

View a disabled textarea

What did you expect to happen?

The order should be

1. --lwc-colorBackgroundInputDisabled
2. --slds-g-color-neutral-base-80
3. rgb(243, 243, 243

So in order to update the background color of the input you should edit the --lwc-colorBackgroundInputDisabled instead of unsetting --slds-g-color-neutral-base-80 or updating --slds-g-color-neutral-base-80

What actually happened?

if you want to edit the background of a input you need to edit the default value of the base neutral color

[Amarnath510]

--slds-g-color-neutral-base-80 (--slds-g-color-*) are the new styling hooks which are introduced in SLDS with the aim of meeting WCAG 2.1 color contrast guidelines.

To learn more about SLDS styling hooks please refer Color Contrast Migration Guide and Global SLDS Color Styling Hooks.