Page MenuHomePhabricator

[EPIC] Design System Foundation: Design and define design tokens
Closed, ResolvedPublic

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 essentially variables that define the various visual aspects of our design system — specifically, they are entities in a scalable nomenclature, that store smallest visual design values. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to combine them into a scalable and consistent 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.

Acceptance criteria for Done

Design
Development, and dev experience
  • Implement Codex tokens sub-package – continuously updated tokens representing the design Figma components overview definitions.

Tokens capabilities

Codex hygenie

Usage of Codex tokens beyond Vue component repository (in priority)

Documentation
Testing

The workflow for finding and using a token is tested with designers and engineers. Example feedback was provided at T309050.

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

Details

Other Assignee
Volker_E

Related Objects

StatusSubtypeAssignedTask
Resolvedegardner
ResolvedNone
OpenNone
OpenNone
ResolvedVolker_E
ResolvedNone
Duplicate STH
InvalidNone
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolved DAbad
Resolved iamjessklein
Resolved Catrope
Resolvedbmartinezcalvo
InvalidVolker_E
Resolved Catrope
ResolvedVolker_E
ResolvedVolker_E
InvalidNone
Resolvedbmartinezcalvo
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolvedldelench_wmf
ResolvedVolker_E
Resolved EUdoh-WMF
Resolved Sarai-WMDE
Resolved DAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved KieranMcCann
OpenNone
DuplicateNone
ResolvedVolker_E
Resolved DAbad
ResolvedVolker_E
Resolved DAbad
Resolved Sarai-WMDE
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolved Sarai-WMDE
ResolvedVolker_E
Resolvedbmartinezcalvo
Resolved Catrope
Resolved DAbad
ResolvedVolker_E
Resolvedbmartinezcalvo
InvalidVolker_E
ResolvedVolker_E
ResolvedVolker_E
Resolved Catrope
ResolvedVolker_E
Resolved Catrope
DuplicateNone
DuplicateNone
ResolvedVolker_E
Resolved Catrope
Resolved Catrope
Resolved Catrope
ResolvedVolker_E
Resolved Catrope
Resolved Catrope
OpenNone
Resolvedovasileva
ResolvedBUG REPORTVolker_E
Resolved Catrope
Resolved DAbad
DuplicateNone
ResolvedVolker_E

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
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)
DAbad renamed this task from [Epic] Design and define design tokens for the Wikimedia Design System to Design System Foundation: Design and define design tokens.Jul 28 2022, 8:44 PM
DAbad added a project: Epic.
Volker_E renamed this task from Design System Foundation: Design and define design tokens to [EPIC] Design System Foundation: Design and define design tokens.Sep 16 2022, 9:03 PM

Hey @Volker_E, we discussed removing T324688 and T305411 from this epic. OK if I create an epic for "Tokens v2" that we add all of our followup tasks to? Then that "v2" epic becomes a parent to this one, and our mindmap of work is not lost.

CCiufo-WMF subscribed.

I'm going to resolve this task for now. It is a massive task and bulk of the work has been completed. The remaining work is captured in follow up subtasks that are on the Design Systems Product Roadmap board or the team backlog.