Page MenuHomePhabricator

[Epic] Design and define design tokens for the Wikimedia Design System
Open, In Progress, HighPublic

Description

Background

Coming from T288383: Decide on design tokens architecture for Wikimedia Design System and its shared component library, 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

  • 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.
    • 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
    • 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
    • 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
    • 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 designers and engineers on definition and usage T295605

The workflow for finding and using a token is tested with designers and engineers.

Details

Other Assignee
Volker_E

Related Objects

StatusSubtypeAssignedTask
DuplicateSTH
In ProgressNone
In ProgressVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
OpenNone
ResolvedVolker_E
OpenNone
Resolvediamjessklein
ResolvedCatrope
Stalledbmartinezcalvo
OpenVolker_E
ResolvedCatrope
ResolvedVolker_E
ResolvedVolker_E
OpenNone
In Progressbmartinezcalvo
In ProgressVolker_E
In ProgressVolker_E
Openbmartinezcalvo
OpenSarai-WMDE
ResolvedDAbad
In ProgressSarai-WMDE
In ProgressKieranMcCann
OpenNone
In ProgressSarai-WMDE
ResolvedVolker_E
ResolvedVolker_E
In ProgressVolker_E
OpenVolker_E
OpenNone
In ProgressVolker_E
Resolvedbmartinezcalvo
ResolvedCatrope
In ProgressNone

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
Volker_E updated the task description. (Show Details)
Volker_E renamed this task from [EPIC] Design and define design tokens for the Wikimedia Design System to [Epic] Design and define design tokens for the Wikimedia Design System.Feb 18 2022, 8:53 PM
STH changed the task status from Open to In Progress.Apr 25 2022, 5:05 PM
STH triaged this task as High priority.
STH updated the task description. (Show Details)