- General Info
- Terminology
- Design Token Rule
- Design Token Types
- Design Token Schema
- Technologies
- Setup
This project is a token-style generator and works in synch with Figma token plugin output. In general, it allows to quickly generate tokens style of Figma token's output
Design Token
Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design
Semantic Token
Token aliases let you relate a semantic token to a base token for a specific context or to get a level of abstraction. It helps you communicate the intended purpose of a token independent of the actual/primitive value of the token. For more info : link
The following types of design tokens are the building blocks and design decisions that make up the potato17 design system
Primitive tokens:
- Primitives.json will change only game by game
- These tokens don’t use reference value(semantic value). That means they use basic values and not point another design token.
- Example token of primitive.json:
- Example generated token as css var from primitive.json:
Decision tokens: (Themes token)
- These tokens need to reference from primitives tokens.
- They can use basic tokens, they need to point another design token.
- They are creatable multiple times (in each theme-x.json)
- Example token of themes-{name}.json:
- Example generated token as css var from themes-{name} json:
Creating for token's JSON, follow CTI structure rule. The current token rule:
SENTIMENT:
Sentiment naming related to variations and variants can be extendable.
Example sentiments:
- Success (Green tones)
- Warning (Yellow tones)
- Danger (Red tones)
- Primary
- Secondary
- Tertiary
- Neutral
- Premium
USAGE: Usage naming related to where you wanna use that token.
Example uesages:
- Brand/Background
- Text
- Icon
- Border
- Surface
PROMINENCE: Prominence naming related to emphasis and prominence can be extendable.
Example prominences: (extendable in time):
- Strong/Dark
- Week/Light
- Default
INTERACTION:
Interaction naming related to what actions can be taken by that user.
Example interactions:
- Default
- Hovered
- Disabled
- Focused
- Pressed
STATE: State naming related to what situations it might be and states can be extendable.
- Select
- Default
Example for design token rule:
Use the that basic flowchart when determining the type of token
Project is created with:
- Style Dictionary using to generate token according to cti structure
- Figma Tokens using to extract token on figma
- Figma using to keep our tokens in documents and use plugins to extract/create assets/tokens.
To test without github action:
$ pnpm install
$ pnpm run build
And see outputs in styles/ and src/tokens/
Terminology: https://spectrum.adobe.com/page/design-tokens/
The design system is inspired by Michael Mangialardi's article (https://www.michaelmang.dev/blog/introduction-to-design-tokens)
Cristiano Rastelli's article https://didoo.medium.com/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa
And see more detail for CTI structure: https://amzn.github.io/style-dictionary/#/tokens