@adhese/design-tokens

This package is responsible for generating and exporting css variables based on the variables that are created in Figma with Tokens Studio. The variables are used to style the @adhese/ui library.

How does it work ?

Sync with Figma

The variables that are defined in Figma with Tokens Studio are being pushed to this repository into the packages/design-tokens/tokens folder.

Transforming Tokens

We read the tokenSets created by tokens-studio and use a couple of "transformers" to transform the tokens into useable css variables that work with tailwind. A transformer operates on an individual token and can be used to make changes to the name for instance.

pnpm build # see package.json

Generate Theme Tokens

The themes are also located in the same folder as the "core" tokens. Themes are able to override the default values provided by the core tokens.

NOTE: This package is not responsible for exporting the themes. Why? The theme could possibly expose the name(s) of our clients because the npm package is public.

To generate the themes just call this task from the package.json. And copy the variables you need into your project.

pnpm generate-themes # see package.json

Using the design-tokens

assuming you have a working tailwind4 setup

First you need to install the package in your project.

pnpm i -D @adhese/design-tokens tailwindcss-animate

Then you need to modify your entry css file, this is an example from apps/docs/globals.css.

@import "tailwindcss";
@plugin "tailwindcss-animate";

@import "./shadcn-tokens.css";
@import "@adhese/design-tokens/variables";
@import "@adhese/design-tokens/animations";

@layer base {
  * {
    font-family: "Inter", sans-serif;
    @apply border-border;
  }
  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

@import "./theme.css";

That's it!

Links

• Gambit Design Library The Gambit Design Library Figma.
• Tokens Studio Used to create and sync variables between Figma and code.
• Style Dictionary Used for token transformation.
• TailwindCSS v4.0 The release blog post for TailwindCSS version 4.
• Tokens Studio Configurator Tool Play around with all the possible options.