If you’ve ever worked with the Salesforce Lightning Design System (SLDS) and had to update components one by one, you know how time-consuming and frustrating the process can be. Global styling hooks streamline the process of building custom components within SLDS.
These powerful tools help maintain design consistency and simplify development by using CSS custom properties to centralize key design values like colors and fonts. And, with broad browser support, styling hooks ensure a smooth, unified experience across your app. By understanding how to use them, you can create Salesforce experiences that are consistent, visually striking, and future-proof.
What you’ll learn
What are global styling hooks and how do they work?
Benefits of styling hooks for designers and developers
Goodbye, hardcoding
Applying styling hooks
Styling hooks future-proof Salesforce components
Cohesive experiences
What are styling hooks and how do they work?
A styling hook is a CSS custom property (variable) used to define and manage key design values like colors, fonts, and spacing within Salesforce components. These hooks are purposefully namespaced and constructed with specific syntax to ensure visual consistency across different elements. By modifying a single styling hook, developers can quickly update the design across an entire app or component, simplifying maintenance and promoting consistency.
Styling hooks work seamlessly within SLDS, ensuring that custom components align with Salesforce design principles. These hooks are supported by all major browsers like Chrome, Firefox, Edge, and Safari, making them universally compatible.
Their broad applicability allows them to be used across various HTML elements, components, and selectors, creating a cohesive look and feel throughout the application. Think of them as the large brushstrokes in a painting that define key elements, like the sky or rolling hills, and establish the overall aesthetic.
Benefits of styling hooks for designers and developers
Styling hooks make it easy for designers and developers to keep things consistent and flexible across an app. Imagine you define your primary color once in the root styles using a CSS variable like:
Then, anywhere in your stylesheet where that color is needed, you simply call it with the var() function. The best part? If you want to change that color — say, from electric blue to lime green — and there are 30 elements using it throughout your app, you need to update it in only one place.
Plus, syncing global styling hooks with design tools like Figma ensures that your design choices stay consistent. The same decisions reflect in both your mockups and the final product. It’s like having your design and code speak the same language.
Goodbye, hardcoding
With styling hooks, defining and using design properties is easier and more consistent than ever. Take the original code, where we define and use the primary color CSS custom property, and compare it to the styling hook version:
It’s the same approach and effect but with a smoother, more organized way to handle design. When using styling hooks become second nature, making design updates are a breeze.
At the application level, styling hooks take care of color assignments for you, so developers can focus on the fun stuff. No more manually tweaking each element. Now, you apply the right styling hook for settings such as a button’s background color, and it’s all updated in one go. Plus, if you’re working with Salesforce’s standard components or design system blueprints, SLDS classes automatically apply the right system styles.
Let’s break down the magic behind styling hooks:
- The namespace — always “slds”— tells us the hook belongs to the Salesforce Lightning Design System.
- Scope, marked “g” for global, means these hooks can affect the whole application. Categories like color and font help organize the styles by area of visual design.
- Property refers to specific styling aspects like scale, family, or weight, helping you fine-tune typography.
- Role and state add precision and indicate attributes such as accent color or a disabled button.
Categories form the foundation of styling hooks, allowing you to control visual design elements like color, font, radius, shadow, spacing, and sizing using predefined scales. This standardization makes design more consistent and much easier to implement. Instead of reinventing the wheel for every element, you can rely on these proven components to maintain a cohesive look across your app.
Here are a few examples of styling hooks:
–slds-g-spacing-3
–slds-g-font-scale-5
–slds-g-sizing-3
–slds-g-color-surface-1
–slds-g-color-on-surface-2
–slds-g-color-accent-container-1
–slds-g-color-error-1
Now that we’ve got the syntax down, let’s explore a design use case: building a custom Salesforce component for a sales leaderboard.
Applying styling hooks
Imagine you’ve just wrapped up a strong sales quarter and your team is feeling good about their successes. To keep the energy going, leadership decides to add a custom leaderboard component to the Salesforce app to drive some friendly competition.
The challenge: The leaderboard needs to be dynamic, themable, and consistent across multiple devices, seamlessly integrating into the sales dashboard. This is where styling hooks come to the rescue.
Start designing with Figma
Our designer starts by working with the new SLDS_V2 Figma kit, which makes collaboration between designers and developers a snap. With pre-built components and design assets, the designer can quickly assemble the basic layout of the leaderboard. These components are already aligned with Salesforce’s SLDS design principles, which saves time and ensures consistency.
From there, the designer fine-tunes the leaderboard to meet specific needs, like displaying salesperson rankings and progress toward goals, adjusting avatar sizes and progress bar colors using styling hooks. The beauty of this process is that styling hooks allow the designer to make precise visual adjustments while keeping everything unified under a single, reusable system.
Build the component
Once the design is ready, it’s the developer’s turn. They use semantic HTML and proper ARIA roles to build the component, ensuring accessibility from the start. Thanks to SLDS component blueprints, the developer has ready-to-go HTML and SLDS CSS classes to use for elements like the card, avatar, and progress bar.
By applying custom classes, the developer can integrate the styling hooks as specified by the design, ensuring a seamless connection between the design and the final product. Importantly, they prepend each custom class with a unique namespace to avoid any conflicts with existing SLDS classes, which could change with future updates.
Check the styling
After all the hard work, the custom leaderboard component is ready. When placed within the app’s dashboard, it fits naturally with the existing Lightning UI design. Styling hooks ensure that the leaderboard aligns with other components in terms of spacing, typography, and overall layout, making it look like a native part of Salesforce’s ecosystem.
The magic of styling hooks continues with the new dynamic and adaptable design features of Salesforce Cosmos, the new UI theme. Styling hooks act as a bridge, seamlessly switching styles between the existing and new UI without requiring hardcoded adjustments. When the interface switches, global styling hooks update in real time, adjusting colors, fonts, and spacing across the application. This ensures that the design remains polished and consistent, regardless of the UI version in use.
Styling hooks future-proof Salesforce components
Looking ahead, styling hooks also pave the way for future capabilities. For example, transitioning to a dark mode becomes much easier with styling hooks in place. Instead of manually adjusting each component, we can re-assign the global styling hooks to adapt to the dark theme, saving time and reducing complexity. As new theming requirements emerge — whether for high-contrast modes or custom brand schemes — styling hooks make it quick and efficient to implement changes without overhauling the entire codebase.
This example of a dynamic and flexible leaderboard maintains design consistency across devices and also integrates effortlessly into the sales dashboard. The result is a visually cohesive, engaging tool that motivates the team, supports company goals, and stays true to Salesforce design standards.
Cohesive experiences
Global styling hooks are a core feature of SLDS 2 (beta coming soon) and help future-proof your Salesforce components. By centralizing values like colors, fonts, and spacing, styling hooks ensure consistency across updates and make customization as simple as tweaking a variable to have a change ripple across components without rewriting code.
With styling hooks, you’re set for cohesive, adaptable Salesforce experiences.
