Customize Components with LDS Styling Hooks

Customize Base LWC with SLDS Styling Hooks 

Salesforce introduced Styling hooks as a Beta feature on Winter 21 release. Lightning Design System Styling Hooks provide you with a set of CSS custom properties, so you can customize a base lightning component’s look and feel. For a list of component blueprints that support styling hooks, see the Lightning Design System.

As of now, it does not support all the lightning base LWC components.

Syntax:

:host {

    --sds-c-badge-color-background: orange;

}

--sds: a custom property requires that the name begins with double hyphens (--). sds is a namespace reserved for Salesforce’s design system.

-c: This identifier indicates that the custom property is component-level customization.

-badge: badge refers to the name of the component that is being targeted by the custom property. 

-color: It identifies the category that this CSS custom property falls under.

-background: This is the semantic user interface property being customized. This example is referencing the background property.

Example component to show slds styling hooks for button and badge:

usingStylingHooks.html

<template>
    <lightning-card title="Using SLDS Styling Hooks For Base Lightning Components" icon-name="utility:custom_apps">
        <div class="slds-m-around_medium">
            <div>Base Lightning components</div>
                <lightning-button class="slds-p-around_medium" variant="brand" label="Submit"> </lightning-button>
                <lightning-badge label="Active"></lightning-badge><br/>

                <div>Base Lightning components with Custom Styling</div>
                <lightning-button class="myNewStyleForButton slds-p-around_medium" variant="brand" label="Submit"> </lightning-button>
                <lightning-badge class="myNewStyleForBadge" label="Active"></lightning-badge>
        </div>
    </lightning-card>
</template>

usingStylingHooks.js

import { LightningElement } from 'lwc';

export default class UsingStylingHooks extends LightningElement {}

usingStylingHooks.css

.myNewStyleForButton{
    --sds-c-button-brand-color-background: orange;
    --sds-c-button-brand-color-border: orange;
}
.myNewStyleForBadge{
    --sds-c-badge-color-background: green;
    --sds-c-badge-text-color: white;
}

/* 
 *  We can also add above class to host, but it will apply to all the lightning buttons and badges.
*/
:host {
    /*  
    *    --sds-c-button-brand-color-background: orange;
    *    --sds-c-button-brand-color-border: orange;
    *    --sds-c-badge-color-background: green;
    *    --sds-c-badge-text-color: white;
    */

}

usingStylingHooks.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Also found above code in Tech Shorts Git repo