What is Design Tokens in Salesforce?

In todays world the look and feel of the application and website plays as important role as the functionality. What if the there is a website build with certain branding colors and later point of time there is a slight change in a shade of one of the branding colors then in place of changing it at each and every place if we are using design tokens we need to just change the color at a single place and it will be reflected everywhere.

Introduction

Developers commonly work on pages and applications that have a specific color theme, such as blue. After completing the entire application or website, we were instructed to change the color theme to green because blue did not match the overall theme. I find it impractical to manually modify each component to reflect this change. We can minimize the workload by leveraging design tokens to address this challenge. Essentially, a design token represents the blue color on the page, so if we want to change it to green, we only need to update the token.

Design tokens

Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.

Design tokens are named objects that store the visual design attributes of a design system. We use design tokens instead of fixed values (e.g. hex for color, pixel for spacing) to ensure a consistent and scalable visual system for user interface (UI) development. Design tokens are the atoms that make up the design system.

In the Salesforce context, design tokens are divided into two categories based on their accessibility

• Global Access: Available for use on the Salesforce platform.
• Internal Access: Available for use by internal Salesforce developers.

Why Design Tokens?

Some of the reasons why Salesforce thought of implementing design tokens. They are

• Consistency: It helps ensure consistency in design elements such as colors, typography, spacing, and more across Salesforce products and applications.
• Scalability: Design Tokens make it easier to scale design efforts while keeping design elements in sync.
• Customization: Salesforce serves a diverse customer base with varying branding and design requirements. Design Tokens allow for easy customization and theming, enabling users to adapt the design system to their specific needs.
• Collaboration: Design Tokens facilitate collaboration between designers and developers. Designers can define the design specifications in a way that developers can easily implement, reducing the potential for design discrepancies during the development process.
• Maintainability: With a well-defined set of Design Tokens, making design updates and changes becomes more straightforward. It helps streamline the process of rolling out design updates across Salesforce's ecosystem.
• Versioning and Documentation: Design Tokens often come with documentation, making it easier to understand and use them effectively. Salesforce can also version these tokens, allowing for better tracking and management of design changes over time.

Categories/ Types of Design Tokens in Salesforce

Various categories of design tokens are

• Color
• Background color
• Text Color
• Border color
• Font
• Font size
• Opacity
• Line height
• Spacing
• Radius
• Sizing
• Shadow
• Time
• Touch
• Media Query
• Z-index

Types of Design Tokens

There are two types of design tokens. They are

1. SLDS Design Token: SLDS Tokens are globally available in the salesforce platform.
2. Custom Design Token
   1. Default Tokens: Custom tokens defined in the default tokens bundle.
   2. Custom Tokens: Custom tokens are defined in custom (named) token bundles.

SLDS Design Token

To incorporate globally available SLDS design tokens, which are globally available in Salesforce, you can reference them directly in the CSS file. For instance, if the design token is named '$spacing-small', you can refer to it in the CSS file as follows.

div {
    margin-right: var(--lwc-spacingSmall);
}

Default custom Design Token

Every organization possesses its default token bundles that can be referenced throughout the organization, which is universal across the specific org. If there's a design token intended for use across the entire organization, the process of creating a default design token involves the following steps.

• Navigate to the developer console and select 'New.'
• Create a lightning Token named 'DefaultTokens' with the following content

  <aura:tokens>
      <aura:token name="myTextColor" value="Blue"/>
      <aura:token name="myBackgroundColor" value="white"/>
  </aura:tokens>
  

Here, the term 'name' specifies the design token's reference name, and 'value' denotes the assigned value of the design token.

To reference this token in your project, follow these steps

Create a CSS file with the following content

div {
    background: var(--c-myBackgroundColor);
    color: var(--c-myTextColor);
}

Custom Design Tokens

Custom design tokens are created if you want to create a design token specific to a project of an organization. Suppose I wanted to use a specific background color corresponding to a project in an org and in case we are referencing any other project then across the whole project we want a different background color in that case we use a custom design token.

In default tokens, the naming convention is fixed but in the case of a custom design token, the naming convention is not fixed.

To create a custom design token, we have to create a lightning token. Custom design tokens are generated when a specific design token is needed for a particular project within an organization. For instance, if a distinct background color is required for a project in an organization, and a different background color is desired across the entire project when referencing another project, custom design tokens come into play.

Unlike default tokens, where the name is fixed, custom-design tokens offer flexibility in naming conventions.

To create a custom design token, a lightning token is needed, as shown below.

<aura:tokens>
    <aura:token name="myTextColor" value="Blue"/>
</aura:tokens>

It is best practice to embed only one feature in a design, a single design token, but in that case, how can we reference multiple design elements just by calling a single custom token? For that, we use the extends function. As we cannot extend multiple custom design tokens at the same time, we need to follow a multi-level inheritance approach. While it is generally recommended to embed only one feature in a design token, referencing multiple design tokens can be achieved by employing the extends function. Since multiple custom design tokens cannot be used simultaneously, a multi-level inheritance approach is adopted.

For example

customtokenmargin.tokens

<aura:tokens>
    <aura:token name="myMargin" value="12px"/>
</aura:tokens>

Then, when referencing the customtokenmargin.

// Customtokenbackground.tokens

<aura:tokens extends="c:customtokenmargin">
    <aura:token name="myBackgroundColor" value="white"/>
</aura:tokens>

To utilize this in CSS, it is extended to the default tokens bundle.

// DefaultTokens.tokens

<aura:tokens extends="c:Customtokenbackground">
    <aura:token name="myTextColor" value="Blue"/>
</aura:tokens>

Finally, in the CSS file, reference it as follows.

div {
    background: var(--c-myBackgroundColor);
    color: var(--c-myTextColor);
    margin: var(--c-myMargin);
}

Conclusion

Salesforce's implementation of design tokens is a pivotal advancement, streamlining UI development by addressing challenges like consistency, scalability, customization, and collaboration. The categorization into Global and Internal Access, along with a diverse range of token categories, provides a robust toolkit. SLDS and Custom Design Tokens offer flexibility, simplifying the integration of design specifications into CSS. Overall, design tokens contribute to a more efficient, collaborative, and scalable UI development process, ensuring visually appealing and cohesive applications across Salesforce's evolving ecosystem.