How to use design tokens in lightning web component
by:

How to use design tokens in lightning web component

Introduction

Design tokens are a powerful tool for creating consistent and engaging web design. They provide a set of pre-defined visual elements, such as colors, typography, and spacing, that can be easily integrated into your web application’s user interface. In this article, we will explore how to use design tokens in Lightning Web Component (LWC) to create accessible and visually appealing web designs.

What are Design Tokens?

Design tokens are a collection of visual elements that define the look and feel of your web application’s user interface. These elements include colors, typography, spacing, iconography, and more. By using design tokens, you can create a consistent and cohesive design language across your entire web application. This not only makes it easier for users to navigate and understand your application, but also helps to establish brand recognition and trust with your audience.

Why Use Design Tokens in LWC?

There are several reasons why you should consider using design tokens in Lightning Web Component (LWC):

  • Consistency: By using design tokens, you can ensure that all visual elements of your web application have a consistent look and feel across all pages and components. This makes it easier for users to navigate and understand your application, and helps to establish brand recognition and trust with your audience.
  • Accessibility: Design tokens can help you create more accessible designs by providing a set of pre-defined color contrasts, font sizes, and other accessibility guidelines. By following these guidelines, you can ensure that all users, including those with disabilities, can easily interact with your web application.
  • Efficiency: Using design tokens can save time and effort when designing your web application. Instead of having to create a custom set of visual elements for each page or component, you can use the pre-defined design tokens provided by LWC. This not only saves time, but also ensures consistency across all pages and components of your application.

Using Design Tokens in LWC

To use design tokens in Lightning Web Component (LWC), you will need to create a set of custom CSS variables that define the visual elements you want to use in your web application. These CSS variables can be used to style various elements, such as text, buttons, and background images, and can be easily modified or extended as needed.

Here are some steps you can follow to get started with using design tokens in LWC:

  1. Choose a set of design tokens that align with your brand and design goals. There are many pre-made sets available online, such as Material Design Tokens by Google and Design System Tokens by Salesforce. Alternatively, you can create your own custom set of design tokens using tools like Sketch or Figma.
  2. Create a new Lightning Web Component project in the Salesforce Developer Console.
  3. Add a new CSS file to your component’s static resources and import the LWC Design Tokens library into your file. You can do this by adding the following line of code at the top of your CSS file: <h2>import { designTokens } from 'lightning/design-system-tokens';</h2>
  4. Define your custom CSS variables based on the pre-defined design tokens you have chosen. You can use the -- prefix to create unique variable names, and assign values to each variable using the var() function. For example: --primary-color: var(--designTokens-primaryColor);
  5. Use your custom CSS variables throughout your component’s HTML and CSS code to style various elements. You can use the var() function to reference your custom variables in your CSS code, just like you would any other variable. For example: button { color: var(--primary-color); }

Creating a Design Token Library

Once you have defined your custom CSS variables and used them throughout your component’s HTML and CSS code, you can create a design token library that contains all of the visual elements you have defined. This library can be shared with other developers on your team or used in future LWC components to ensure consistency across your web application.

  1. Create a new static resource for your design token library by going to the Salesforce Developer Console and clicking on “Static Resources”.
  2. In the “Static Resources” page, click on “Create” and give your resource a name, such as “myDesignTokens”.
  3. In the “Content” section of your resource, add a new file called “design-tokens.css”.
  4. Copy all of the CSS code from your component’s static resources into the “design-tokens.css” file. This includes any custom CSS variables you have defined, as well as any other CSS code that styles your visual elements.
  5. Save the “design-tokens.css” file and share it with other developers on your team or include it in future LWC components.

Case Study: Using Design Tokens in a Salesforce Lightning Web Component

To illustrate how design tokens can be used in a Salesforce Lightning Web Component, let’s take a look at an example of a simple web page that displays a list of products. This page will use the Material Design Tokens set provided by Google to create a consistent and visually appealing user interface.

Custom CSS Variables

css

import { designTokens } from ‘lightning/design-system-tokens’;

:host {
–primary-color: var(–designTokens-primaryColor);
–secondary-color: var(–designTokens-secondaryColor);
–accent-color: var(–designTokens-accentColor);
}

HTML

Product List

CSS

css
:host {
–primary-color: var(–designTokens-primaryColor);
–secondary-color: var(–designTokens-secondaryColor);
–accent-color: var(–designTokens-accentColor);
}

import { designTokens } from 'lightning/design-system-tokens';
button {
background-color: var(–accent-color);
color: white;
}
li {
color: var(–primary-color);
}

Conclusion

In this article, we have learned about the benefits of using design tokens in Salesforce Lightning Web Components and how to create a design token library. By defining custom CSS variables based on pre-made sets of design tokens, we can create a consistent and visually appealing user interface that is easy to use and navigate. Additionally, by creating a design token library, we can ensure that our visual elements are used consistently across our web application and make it easier for other developers on our team to work with our codebase.