@sparknz/set-tokens

Detailed documentation;

Spark Experience Toolkit - Tokens

Design tokens are the lowest abstraction of the design system, a token cannot be broken down futher hense the icon is a Quark. A Quark is a subatomic particle with no sub structure, thus not composed of other particles. The same applies to a Design token, they cannot be broken down futher or made up from other things. Design tokens are hard-coded values (such as hex values for color or secound values for animation) in order to maintain a scalable and consisent visual system for UI Development.

Implementation

We use Styled Dictionary and follow the recommend CTI (Category/Type/Item) structure.

Image Source

Categories

Color

• Base color
• Text color
• Border color
• Background color
• Shadow color

Layout

• Breakpoint
• Z-index

Sizing

• Font size
• Line height
• Spacing size
• Border radius

Misc

• Opacity
• Duration