This package holds the Wikit design tokens and tools needed to build them.
We organized the tokens in three categories
Each category serves its own purpose:
Global tokens reflect the elementary visual foundations of the system. They are context agnostic (e.g. "accent-30"). Aliases are abstractions that communicate the intended context of use of a token. They mostly represent styles that are shared among several components (e.g. "border-color-progressive-active"). Finally, component-level tokens are used to represent every value associated with the style of a component (e.g."button-primary-progressive-border-color-active).
There is one notable conceptual addition to this organization. The global tokens have the highest precedence in our Design System, but some of their values are not originally implemented inside this repository here. Instead, they are "cherry-picked" from WMF variables - you can read more about this topic in this ADR.
Looking at the tokens
Demo in storybook
We also added an illustrated version of the tokens to the storybook in the