Effortless Design Token Management with SvelteKit and Style Dictionary

SvelteKit + Style Dictionary

In today’s world of modern web development, design tokens play a critical role in maintaining consistency across different platforms and devices. They act as a bridge between design and development, ensuring that visual elements are accurately represented throughout a project. SvelteKit, a robust web application framework, has gained popularity due to its impressive performance and user-friendly nature since its development in 2022. However, SvelteKit (or its predecessor Svelte) lacks native support for design tokens. This is where Style Dictionary enters the picture, providing an all-encompassing solution for managing design tokens across multiple platforms.

In this article, we’ll explore how to seamlessly integrate Style Dictionary with SvelteKit, allowing you to maintain a consistent visual language across your application. We’ll walk you through setting up both tools, creating and organizing your design tokens, and finally, implementing them in your Svelte components. By the end of this tutorial, you’ll have a solid foundation for leveraging design tokens in your SvelteKit projects, streamlining your design-to-development workflow and enhancing your overall development experience.

Configuring a SvelteKit Project

If you have previously installed and set up a SvelteKit project, feel free to skip this section.

To establish a new SvelteKit project, simply follow these steps:

Step 1.

Open your terminal and execute the following command:

npm create svelte@latest your-app-name

Step 2.

The terminal will then prompt you to select a Svelte version, language & script options, and any additional features you wish to include.

The project uses configurations displayed above. You can use these options.

Step 3.

After installing the project, you just:

cd your-app-name
npm install
npm run dev

By completing these steps, you’ll have successfully created a new SvelteKit project, ready to be customized and enhanced with Style Dictionary.

Incorporating Style Dictionary into Your SvelteKit Project

Once you have prepared the environment, it’s time to integrate Style Dictionary into your SvelteKit project. Follow these steps to do so:

Step 1.

Install Style Dictionary globally in your project folder using npm:

npm install -g style-dictionary

Step 2.

Generate a new folder named style-dictionary in your project’s root directory. Next, navigate to this folder and initialize some basic starter code to facilitate the creation of a new project:

mkdir style-dictionary
cd style-dictionary
style-dictionary init basic

The style-dictionary init basic command will duplicate the sample files located in the “example” folder of the Style Dictionary repository.

This process will establish the following structures within your project:

Initial style-dictionary folder.

Disclaimer: This guide is designed to provide a solid foundation for beginners who may be unfamiliar with design tokens or Style Dictionary (that is why we use style-dictionary init basic). While the recommended setup is a great starting point, feel free to explore and use other methods to configure your tokens as you gain experience and confidence.

Step 3.

Remove unwanted structures: from both the folder and config.json.

In my personal project, I retained only the SCSS option. My existing project appears as follows:

My style-dictionary folder.

Additionally, my config.json is configured like this:

{
  "source": ["tokens/**/*.json"],
  "platforms": {
    "scss": {
      "transformGroup": "scss",
      "buildPath": "build/scss/",
      "files": [{
        "destination": "_variables.scss",
        "format": "scss/variables"
      }]
    }
  }
}

You may also consider removing the variables from _variables.scss, as you will generate new ones after updating your tokens (which we will discuss in the subsequent step).

Step 4.

It’s time to create variables from the tokens. While in the root of your project, simply execute:

style-dictionary build

This command will automatically generate variables within your _variables.scss file. The file should resemble the following:

Example of what _variables.scss file should look like.

Utilizing SCSS Variables

Well done! You have successfully generated variables from the tokens, and they are now ready for use in your SvelteKit project. Here’s an example of using these variables in a +page.svelte file:

<h1>Using variables</h1>

<button class="my-button">Click me</button>

<style lang="scss">
 @import '../../style-dictionary/build/scss/_variables.scss';

 .my-button {
  background-color: $colors-orange-500;
 }
</style>

Note: If you are utilizing SCSS, remember to install Sass in your project by running the following command in your terminal:

npm install --save-dev sass

In conclusion, successfully managing design tokens can feel like you’ve just tamed a wild unicorn, and SvelteKit and Style Dictionary are the magical saddle that allows you to ride that unicorn with grace and flair. By following this tutorial, you have not only harnessed the power of Style Dictionary to maintain consistency in your SvelteKit projects, but you’ve also gained a newfound appreciation for SCSS variables, which can now be flaunted like a designer cape. So, go forth and conquer your next web development adventure with your trusty design token sidekick, and remember: consistency is king, and unicorns are always in style.