equinor / design-system-roadmap

Public roadmap for the Equinor Design System
MIT License
0 stars 0 forks source link

Colour tokens in code #16

Open vnys opened 8 months ago

vnys commented 8 months ago

This spike focuses on investigating the implementation of colour tokens in code, aligning with the colour tokens in Figma. As these colour tokens serve as the foundation for our design system and will be utilised in our EDS component library in Figma, it's important to explore how we can best integrate them into our codebase.

The goal of this exploration is to identify the most effective and efficient way to implement colour tokens in code, ensuring consistency and scalability across our design system and development processes.

torleifhalseth commented 6 months ago

Our current spike consists of a setup where we sync variables from libraries in Figma to code. Modifications to variables can be done in both Figma and code. If we change the variables in code (tokens) we need to sync Figma with the changes. This can be done with the Sync tokens to Figma action defined in the repository. If we change the variables in Figma we need to sync code with the changes. This can be done with the Sync Figma to tokens.

After syncing variables to code we use style-dictionary to generate the output (css,js etc.).

To build the output we defined a script npm run build && rpm run build:css && nam run build:css-min.