Customize standard LWC components' with SLDS Styling Hooks

If you want to know the basics of SLDS Hooks and CSS variables then please check out my post: SLDS Styling hooks in Lightning web components

1. Go to the SLDS blueprint reference and search for the component,  I will search a button for example.
   
   
   
   
2. Scroll down the result and select the type and variant of the button.
3. I will select the base button and it will take me to this page.
   
4. On that page scroll down and select the Styling Hooks Overview from the bottom right corner.
   
   
   
   
5. In the Styling Hooks Overview section you can see all the CSS properties of the component with its different variants and their respective variable names.
6. For example, I want to change the background color of the brand variant of a button, so I will copy the variable name for that.
   
   
7. Important Note: The variable names mentioned in the styling overview page are a little different from what we need in LWC components.
   
   You need to replace the --slds with --sds at the beginning of the variable names.
   Example: --slds-c-button-brand-color-background will become --sds-c-button-brand-color-background. Basically, we need to remove L from the word slds of the variable name.
   
8. Now go to the .css file of the target component where you want to apply these stylings.
9. Before we paste these variables into the CSS file it's important to note that there are two ways of applying these styles.
1. Apply the styles to all components nested in the current component, basically cascade the stylings to all child components.
2. Apply styles specific components/sections in the current component only and don't cascade down.
10. If you want to go with option A from step 9 then:
1. Create the :host selector in the CSS file like shown below, add the variable values,       and you are done!
   

   :host{
       --sds-c-button-brand-color-background: skyblue;
       --sds-c-button-success-color-background: lightgreen;
       --sds-c-button-destructive-color-background: orange;
   }
   

11. If you want to go with option B from step 9 then:
1. Add a custom class to the components where you want to apply the styles.
   

   <template>
       <h1 class="slds-text-heading_small slds-m-around_xx-small">
           Brand Button Sepcific Stylings
       </h1>
       <lightning-button 
           class="specific-styling-parent slds-m-around_xx-small" 
           variant="brand" 
           label="Brand">
       </lightning-button>
   </template>
   

2. In the CSS file apply the styles to the custom class.
   

   .specific-styling-parent{
       --sds-c-button-brand-color-background: #F652A0;
   }
   

12. Check out the live playground demo here for lightning button.
13. You can follow the above steps for all the base components and all their stylings.

Thanks for visiting, please let me know in the comments if you face any issues.

Related

 SLDS Styling hooks in Lightning web components