One of the current differences in WVUI and Wikit is the variables (design tokens) abstraction.
== Comparison of design token abstraction 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:
- global (taking WikimediaUI base variables as values)
- component-level tokens
Additionally Wikit relies on JSON format for support of native platforms.
Please check WiKit's documentation to find out more about [[ https://wmde.github.io/wikit/?path=/story/documentation-how-to-create-reusable-components-designing-components--page#2-using-design-tokens | the use of design tokens in the context of the Wikidata/Wikibase design system ]].
Also have a look at the tokens listing https://wmde.github.io/wikit/?path=/story/design-tokens-colors--page
- Technological format choice (CSS/LESS/Sass vs JSON) with our platforms besides web has been resolved in T277616. Stylesheet variable definition is sufficient.
== 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 tokensLayers of abstraction: 1. Direct CSS value, 2. Foundational style (example color value), 3. Base variable/token, 4. Abstracted group token (`@border-color-input-binary--active`), 5. (`@border-color-radio--active`)
- Why is redefinition of base into global necessary?
- How do design tokens “ensure component reusability”?