@beerush/toqin
v0.4.0
Published
Design System Manager
Downloads
64
Readme
Toqin
Tokin is a Design Token Library for UI Development.
Sharing design tokens across platforms and keeping them in sync is a challenge. Toqin is a tool that helps you to manage your design tokens in a single source of truth and generate the code for your favorite platforms.
🎨 Design Token
Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
🖇️ The Problem
In a big company with multiple teams that working on different platforms and frameworks, keeping the design tokens in sync is hard.
It's easy to create a design token for a single platform, but when you want to use a different platform/framework, you need to create a new design token for that platform. It's hard to keep them in sync. You need to update the design token in multiple places.
For example, one project is using pure CSS, and another project is using Tailwind CSS. You need to create a design token for each platform. When you want to change the primary color, you need to update the design token in multiple places. 🤮
💡 The Solution
Toqin is a tool that helps you to manage your design tokens in a single source of truth and generate the code for your favorite platforms. You can create a design token for multiple platforms in a single file and Toqin will generate the code for you.
Example
Design Token
{
"name": "design-system",
"description": "My Design System",
"tokens": [
{
"name": "color",
"type": "color",
"tokens": [
{
"name": "blue",
"value": "#0000ff"
},
{
"name": "black",
"value": "#000000"
},
{
"name": "white",
"value": "#ffffff"
},
{
"name": "text",
"value": {
"@": "@color.black",
"@dark": "@color.white"
}
},
{
"name": "background",
"value": {
"@": "@color.white",
"@dark": "@color.black"
}
}
]
}
],
"designs": [
{
"name": "anchor",
"selectors": ["a"],
"description": "Anchor styles",
"rules": {
"color": {
"@": "@color.blue",
"@dark": "@color.white"
},
"font-size": {
"@": "14px",
"@small": "12px"
}
}
}
]
}
Generate CSS
:root {
--color-blue: #0000ff;
--color-black: #000000;
--color-white: #ffffff;
--color-text: var(--color-black);
--color-background: var(--color-white);
}
a {
color: var(--color-blue);
font-size: 14px;
}
@media (prefers-color-scheme: dark) {
:root {
--color-text: var(--color-white);
--color-background: var(--color-black);
}
a {
color: var(--color-white);
}
}
@media (max-width: 640px) {
a {
font-size: 12px;
}
}
Generated Tailwind CSS
CSS Variable Mode
export default {
theme: {
colors: {
blue: '#0000ff',
black: '#000000',
white: '#ffffff',
text: {
DEFAULT: 'var(--color-black)',
dark: 'var(--color-white)',
},
background: {
DEFAULT: 'var(--color-white)',
dark: 'var(--color-black)',
},
},
},
};
Inline Mode
export default {
theme: {
colors: {
blue: '#0000ff',
black: '#000000',
white: '#ffffff',
text: {
DEFAULT: '#000000',
dark: '#ffffff',
},
background: {
DEFAULT: '#ffffff',
dark: '#000000',
},
},
},
};
Tailwind Classes (WIP)
export const anchor = 'text-blue text-[14px] dark:text-white sm:text-[12px]';