What is Design Tokens in Salesforce?

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.