CSS/LESS/post-/preprocessor variables definition or JSON for design tokens to use in apps?
2021 with Vue.js UI component library in the making, it's time to revisit the technological choice.
Foundation history to status quo:
In order to unify our web user-interfaces (UI) accordingly to Wikimedia Design Style Guide, WikimediaUI Base variables as CSS and LESS variables were put into place.
We've decided to go with CSS/LESS variables as LESS is supported by ResourceLoader and variables were already used, but not centralized in 2017. CSS variables were the future-facing choice and CSS post-processors were on the rise too. Wikimedia-Portals is an exemplatory user of CSS.
JSON has been chosen in Salesforce design system as it provides design tokens for native platforms as well.
In the past, Wikimedia Foundation product design has not shared a lot of design “tokens” between web and the native apps, iOS, Android. Neither with newest addition KaiOS. We've set out to follow native human-computer-interaction recommendations of the platform.
Questions:
- How is the current usage of something comparable to design tokens in the various platforms?
- Are there foreseeable future changes to the need?
- Is this an issue that is worthwhile tackling on higher level?