Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@nordnet/design-tokens

Package Overview
Dependencies
Maintainers
4
Versions
31
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nordnet/design-tokens

This project turns design tokens into usable formats for our frontends. By using design tokens, we can maintain consistency across all platforms, tools, and products. Currently, we only provide colors for our different themes through design tokens.

  • 2.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
31
decreased by-8.82%
Maintainers
4
Weekly downloads
 
Created
Source

Design Tokens

This project turns design tokens into usable formats for our frontends. By using design tokens, we can maintain consistency across all platforms, tools, and products. Currently, we only provide colors for our different themes through design tokens.

How it works

Design Tokens get exported from Figma using the Design Tokens plugin which sends the data through Githubs repository_dispatch event. A Github action listens to that event and saves the data as JSON and lets Style Dictionary transforms the tokens into the desired formats. The GitHub action then continues to create a PR with all the changes.

flow

Getting started

For local development, follow these steps:

  1. Run npm i to install dependencies.
  2. Run npm run transform-tokens to transform tokens using Style Dictionary.
  3. The converted tokens will be saved in the src/generated directory.

If you only want to use the themes provided by this project then simply import them into your codebase like this:

  1. Run npm install -D @nordnet/design-tokens to install the package.
  2. Import for example the lightTheme import { lightTheme } from '@nordnet/design-tokens'.

Formats

This project generates design tokens for each theme in the following formats:

  • JS: A JavaScript module that exports an object containing the design tokens.
  • JSON: A JSON file containing the design tokens.
  • CSS: A CSS file containing CSS variables for the design tokens.

Limitations

GitHub Actions has a payload limit of 50kB, which prevents exporting all design tokens at once. To circumvent this limitation, we export tokens in chunks by creating a new branch for each chunk. When these new branches are merged, tests run in the master branch to verify that all themes have the same token names. Only then do we release a new version.

Handling pull requests

As mentioned in the Limitations section, updates to tokens will come in chunks (usually one PR per theme). Merge these PRs together until only one PR remains, which can then be merged into the main/master branch. This approach ensures that all information regarding the update (all the chunks) can be found in one place, and in case of a breaking change, we can make a breaking change commit in a single branch. Furthermore, the release GitHub action runs only once.

FAQs

Package last updated on 07 Dec 2023

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc