You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

design-token-editor

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

design-token-editor

A react component to view/edit design token values


Version published
Maintainers
1
Created

Readme

Source

Design token editor

Build package Build and publish storybook NPM package code style: prettier

Provide insight into design tokens and edit their values.

This package provides React components to work with design tokens emitted by Style Dictionary builds.

Warning - this package is under active development and public API may still change significantly.

Storybook documents the (public) API.

Who is it for?

In short - anyone benefiting from using design tokens!

Design system maintainers

Design systems that make use of design tokens typically do so to allow users to create their own themes. Using the TokensTable component can help you automatically document the available tokens for a given component.

More complex integration could even make it possible for people to interactively alter the values of design tokens and see how the component reacts/looks like in your storybook documentation, for example!

Theme designers

Theme designers often have the hard task of figuring out which components are available, where and how they are used and the figure out how they can change the look and feel.

When all that's done, they have to write JSON to actually implement their theme, get it built with style-dictionary and finally check the results.

By exposing an editor around the tokens table, theme designers can interactively enter the values to play around with components and see the resulting JSON code which only needs to be copy-pasted into their own build pipeline.

Combine this with interactive documentation, and as a theme designer you may get to experiment and settle on your desired colors in a minimum of time!

Applications exposing themeing controls

White-label products/software benefit massively from using components styled through design tokens, making it even possible for run-time theme editing.

Exposing the design-token-editor in a user-friendly interface helps them configure their themes without having to bother your support staff ;)

Usage

Please see the Storybook documentation.

Keywords

FAQs

Package last updated on 12 Feb 2024

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

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc