One of the current differences in WVUI and Wikit is the variables (design tokens) architecture.
== Goals of design tokens
- - **Consistency,t values** in
- single source of truth for design to development handover,- Set of **predefined**, **centralized**, **limited** and **traceable** design decisions as
- in a set of predefined, centralized, limited and traceable design decisions- **Single source of truth for design to development handover**
A nice [[ https://css-tricks.com/what-are-design-tokens/ | write-up on design tokens can be found at CSS-Tricks ]] with feedback of term creator Jina Anne.
== Comparison of current approaches
Wikimedia Vue UI has been relying on [[ https://gerrit.wikimedia.org/r/plugins/gitiles/wikimedia-ui-base/ | WikimediaUI Base ]], which has seen an initial implementation based on OOUI widgets.
It has been following the idea of
- base variables that are applied in as many components as possible to clearly indicate going away from those `-base` variables needs to have a strong cause to add an extra variable
Many of above goals have been captured in WikimediaUI Base.
Wikit applies three type of variable levels:
- base (taking WikimediaUI base)
- global aka general
- alias
- component-level tokens
Additionally Wikit relies on JSON format for support of native platforms.
== Open questions
- Abstraction issues to hunt down source of an issue (which in turn might lead to a lot of unnecessary overrides and less consistency)
- …together with additional level of abstraction in component-level tokens
- Why is redefinition of base into global necessary?
- How do design tokens “ensure component reusability”?
- Technological format choice (CSS/LESS/Sass vs JSON)