1

enter image description here

I am looking for a way to query the colors used by 'brand' classes in Salesforce, like here for example slds-button_brand. Currently I am hardcoding them, but someone has changed these colors so my custom elements don't look the same anymore. I want to refactor this stuff so I don't have to change my code everytime someone changes these. I searched for classes that would apply this and I wasn't successful. Anyone knows how to solve this?

1 Answer 1

2

You can use the design tokens instead of hardcoding color values. Here are all the design tokens for the colors in SLDS. You just need to convert these tokens to camelCase then while using in LWC.

Like $brand-accessible will become var(--lwc-brandAccessible).

Example

.your-class{
     background-color: var(--lwc-brandAccessible);
}

You can also provide the fallback value for design tokens.

.your-class{
     background-color: var(--lwc-brandAccessible, <fallback value>);
}

More details on How to use Design Tokens in LWC

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.