== Background
Coming from {T288383}, we've settled on agreements in the Vue.js designer workshop and the sequential task force for our tokens architecture.
This task is about designing and defining a set of "design tokens" for the Wikimedia Design System.
Design tokens are the smallest pieces of our design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
=== User stories
- As an engineer, I need design tokens defined for our system so that I can build assets, components and patterns at a sustainable scale (without having to manually define this repeated specs) while securing consistency across our platforms.
- As a designer, I need repeatable design elements (such as UI colors and spacing) defined, so that I can use them in my mockups and communicate how they should be implemented to engineers.
=== Requirements
These token definitions are for desktop and mobile web platforms, but are also aimed to be used for mobile apps in future.
=== Testing Instructions
TBD - a protocol should be written for a new engineer and designer who are trying to use tokens for the first time in their respective workflow.
Rough structure:
1. Follow Figma template in tokens definition
2. Ensure that component is applying available tokens and don't define tokens or non-tokenized values in single file components (SFC) itself or use static design values
3. Report back gaps or token overrides to Design System designers
4. Follow further QA component process
== Done
[x] **Decide on design tokens architecture for Wikimedia Design System and Codex** T288383
[] **Define and document the visual guidelines of the design system in Figma** T295991
[ ] **Integrate tokens in Components Overview Figma file **- all of the token names, values and examples per component/pattern T295606
[] **Implement Codex tokens sub-package** – continuously updated tokens representing the design Figma components overview definitions.
[x] Implement tokens in Codex (done via Amazon Style dictionary by @Tonina_Zhelyazkova_WMDE and as workspace package in Codex monorepo). Further Codex packaging discussion at T294993
[x] **Add “WikimediaUI theme” choice (global raw value collection) tokens to Codex package** T296651
[ ] **Provide and clearly mark “legacy” design tokens**, possibly as different theme T288110
[x] **Add base tokens** representing design decisions to Codex token package T296651
[ ] **Move component-specific tokens into the Codex tokens package** and out of the component styles T295711
[x] **Use Codex tokens in Codex components code** T297765
[] Lint against not using tokens in Codex styles, see also https://github.com/AndyOGo/stylelint-declaration-strict-value
[ ] **Protocol for designing future tokens** (after these are shipped) (aka governance model) T295603
[ ] **Documentation for tokens** – for [[ https://doc.wikimedia.org/codex/main/ | designers and engineers ]] on definition and usage T295605
[x] **List/visualize design tokens in Codex's demo site** T295843
[] {T297923}
[] Demo site should also use tokens itself T305411
The workflow for finding and using a token is tested with designers and engineers.