implement Figma design tokens

[sifferhans]

Figma -> Tailwind

I have set up a transformation pipeline for converting Figma design tokens to a Tailwind config, based on what has been done by Laurens in the BCC Design Tokens repo.

By running the pnpm tokens:build command, the tokens in /assets/design-tokens/tokens.json will be transformed and written to separate files in the /tailwind directory.
I only converted colors for now, as the typography tokens are quite difficult to convert to a Tailwind style config.

Changing classes

I also changed every color class to the new BMM classes.
Eg. everywhere we used the bg-slate-100 class is now using the bg-background-2 class.

The names of the classes are derived from the naming in the Figma file:

• Figma -> light/background/2
• Tailwind -> bg-background-2

[SimonSimCity]

By running the pnpm tokens:build command, the tokens in /assets/design-tokens/tokens.json will be transformed and written to separate files in the /tailwind directory.

Wouldn't it then make sense to ignore the folder at least for both prettier, eslint and git? Maybe even turn this into a Nuxt package, where we can have the generated css files in a temporary directory and import them automagically 😎

[kkuepper]

I don't think a nuxt package makes sense (at least if it's similar to a npm package). It would lead to only 1 or 2 people knowing how to update it.
Comment doesn't make much sense, since I misunderstood.

[sifferhans]

@kkuepper I think Simon is thinking about a Nuxt module, which would be local in the repo in this case 😊

[sifferhans]

I haven't had the time to work on this the last week. @SimonSimCity Did you have any ideas on how to improve things? If you have, feel free to try it

[SimonSimCity]

Removed the tailwind directory and instead replace the tailwind.config.ts by a generated file. This has the advantage, that whenever /assets/design-tokens/tokens.json is updated, it triggers a custom module which writes a new tailwind.config.ts. This in turn will autoreload all modules watching on a change on this file.

Having generated imports from within ./tailwind isn't sufficient because it requires a developer to rerun pnpm dev when a style is changed, which defeats the approach of nuxt (run dev and everything will automagically update).