Design tokens are the building blocks of your of the design-system to describe the visual appearance of your application. They can describe the colors, spacing, typography, elevation, icons, and other elements part of the design-system.
Design tokens were introduced in 2016 by Jina Bolton and Jon Levine at their Salesforce Lightning Design System talk.
The design-tokens package contains a collection of design tokens components.
yarn add @component-controls/design-tokens --dev
design-tokens comes with multiple design-tokens components that can be used out of the box to document your design system.
The designs of the
design-tokens package components are based on some of the industry-best design systems, as noted in each component's documentation. However, they are not guaranteed to be 100% identical and they are not endorsed in any way by their original creators.
A handy list of design-systems can be found on designsystemsrepo.com.
A collection of components that will display a single color or a palette of colors. The color input can be a HEX, RGB, or HSL string value.