@myxplor/tokens v1.2.5
Design tokens are named entities that store visual design attributes. Stardust manages it's design tokens with a build system called Style Dictionary that allows styles to be defined once, in a way for any platform (e.g., web, iOS, Android) or language to consume.
šāāļø Getting Started
npm install
npm run build
š« Properties
Design tokens, are defined in the properties folder. Style properties are organized into a hierarchical tree structure with 'category' defining the primitive nature of the property. For example, we have the color category and every property underneath is always a color.
{
"color": {
"avatar": {
"brand": {
"background": {
"type": "color",
"value": "{color.hullOrange.1.value}"
}
}
}
}
}
Read more about the Category/Type/Item (CTI) structure here.
š± Builds
When built, design tokens are organised into three platforms - each with their own branded theme. It's this theme that overrides brand specific design decisions, like avatar color.
build
āāā android
āāā home
āāā playground
āāā iOS
āāā home
āāā playground
āāā web
āāā home
āāā playground
Take a look at all the built-in transforms and formats that are used to build the tokens.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago