SLDS Styling hooks in Lightning web components

Hello Trailblazers! Let us see how we can customize the styling of Standard Lightning Web Components using the SLDS styling hooks. 

If you already know what are styling hooks and how they work, you can jump directly to Steps to override standard Lightning web component styles

What are SLDS Styling Hooks?

Styling hooks are CSS variables from SLDS exposed to developers to which they can set custom values to standard SLDS properties. Just like any programming language you can define CSS variables to store commonly used values like theme color, margin, padding, font size, etc. The var() function is used to insert the values of these variables into the styling sheets.

SLDS Stying hooks enable you to customize the standard lightning web component stylings to match the customer brand. For example, you can change the color of the lightning button brand variant color to match the color of your/client's website.

How do CSS variables work?

Let's see the below code, we have defined two variables --blue and --white that define two colors. Now we can reuse these variables many times. Note that the variables need to start with -- and in the kebab case.

For example --my-css-variable

The syntax is simple just put var(<variable-name>) instead of the absolute values. Apart from that, you can also set the default value if in case the var doesn't return a value. For example: body { background-color: var(--blue, '#ffffff'); }

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body { background-color: var(--blue); }

h2 { border-bottom: 2px solid var(--blue); }

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

There are two advantages of using variables.

• they make the code easier to read (more understandable)
• they make it much easier to change the values, like the color value in the above example.

How to use SLDS styling hooks in Lightning web components?

As you know the most used SLDS buttons come in several versions like Brand, Success, Destructive, etc. But all these variants have predefined colors which is the standard in SLDS. What if you want to overwrite those colors to match the brand color of the company. Like, instead of blue, you want to make it sky-blue. 

Check out a step by step procedure here: Customize standard LWC components' with SLDS Styling Hooks