[go: up one dir, main page]
Page MenuHomePhabricator
Create Task
Maniphest T293127

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

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
Search...

StatusSubtypeAssignedTask
 ResolvedegardnerT287532 [Epic] Resolve key questions for design of shared component library
 ResolvedNoneT287538 Identify Design System hurdles & blockers and resolve open questions
 OpenNoneT113560 Standardize MediaWiki components (tracking)
 OpenNoneT90687 Define a baseline grid and support a responsive grid system
 ResolvedVolker_ET295711 Turn component-specific (SFC) Less variables into Codex design tokens
 ResolvedNoneT314086 Design System Foundation: Define & Implement Critical "Global" Visual Styles
 Duplicate• STHT302348 <Platform Initiative> Release Codex in Beta (Limited Production Release)
 InvalidNoneT302025 Upgrade Codex to Beta version
 ResolvedVolker_ET293127 [EPIC] Design System Foundation: Design and define design tokens
 ResolvedVolker_ET288383 Decide on design tokens architecture for Wikimedia Design System and its shared component library
 ResolvedVolker_ET266688 Evaluate variables aka tokens abstraction
 ResolvedVolker_ET277616 Clarify technical choice with product team needs for design tokens/variables
 ResolvedVolker_ET288110 Codex & WikimediaUI Base design tokens: Provide and clearly mark “legacy” design tokens
ResolvedVolker_ET292255 Where should design tokens live? Separate repository or monorepo with Design System?
 Resolved• DAbadT295605 Documentation: Designing tokens
 Resolved• iamjesskleinT295603 Define and document protocol – for designing future tokens
Resolved• CatropeT294993 NPM packaging strategy for Codex
 ResolvedbmartinezcalvoT295606 Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries
 InvalidVolker_ET295840 Add “WikimediaUI theme” choice (global raw value collection) tokens to Codex package
 Resolved• CatropeT295843 Add design tokens visualization to Codex demo site
 ResolvedVolker_ET296651 Define themes specific tokens and base tokens for the token architecture
 ResolvedVolker_ET297765 Use tokens in Codex components code
 InvalidNoneT300856 Evaluate and settle on design tokens nomenclature
 ResolvedbmartinezcalvoT295991 Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma
 ResolvedVolker_ET296995 Define the system's color palette
 ResolvedVolker_ET297584 [Spike] Design System: Re-evaluate color palette nomenclature and numerals
 ResolvedVolker_ET305236 Create visited red link color token
 ResolvedVolker_ET313502 Tokens: Color subtle features different color than WikimediaUI Base's and evaluate 'accessory'
 Resolvedldelench_wmfT322833 Update Yellow 600 for warning color
 ResolvedVolker_ET324449 Add new colors used in Message component and update border colors to the darkest tone
 Resolved• EUdoh-WMFT322960 Define `accent-color` design token
 Resolved• Sarai-WMDET296998 [Epic] Define the system's typographic styles and scale
 Resolved• DAbadT305920 Define the system's sans, serif and monospace typefaces
 ResolvedVolker_ET305947 Define the system's typographic scale (font sizes and line-heights)
 ResolvedbmartinezcalvoT321470 Use the system's typographic scale tokens (font size and line-heights)
 Resolved• KieranMcCannT303587 Choose typographies (Sans Serif and Serif) for designing our text styles in Figma in different languages
 OpenNoneT331612 Document internationalization limitations of Figma font selection in Typography guidelines
 DuplicateNoneT309158 Update Wikimedia Design Style Guide with typeface choices
 ResolvedVolker_ET313693 Implement system typeface choices in Codex tokens
 Resolved• DAbadT318023 Define the system's typographic styles on text decoration
 ResolvedVolker_ET322707 Provide `tab-size` option and decision token
 Resolved• DAbadT322811 Provide (legacy) font families as Codex tokens
 Resolved• Sarai-WMDET297000 Define the design system's size and spacing scale
 ResolvedVolker_ET297001 Define the system's opacities
 ResolvedVolker_ET305084 Add 0.3 opacity
 ResolvedVolker_ET297003 Define the system's box shadow styles
 ResolvedVolker_ET310409 Button: Simplify focus styles application including `box-shadow`
 Resolved• Sarai-WMDET297007 Define the system's iconography
 ResolvedVolker_ET300562 Define Border tokens
 ResolvedbmartinezcalvoT302181 Define the system's cursors
 Resolved• CatropeT304443 Document Motion tokens (animations and transitions)
Resolved• DAbadT303522 Decide on CSS breakpoints for the design system
 ResolvedVolker_ET322712 tokens: Add `background-position` option and decision token with value `center`
 ResolvedbmartinezcalvoT306396 Extend the system's cursors
 InvalidVolker_ET321738 Refine token implementation guidelines to reflect theme option to decision tokens clearer
 ResolvedVolker_ET322388 Lint styles against using non-Codex-tokens or keywords
 ResolvedVolker_ET322705 Refine animation tokens: Add `infinite` as option and decision
 Resolved• CatropeT325237 Enable and document use of Codex design tokens within MediaWiki
 ResolvedVolker_ET326591 Temporarily change or remove two tokens that can't be parsed by MediaWiki Less compiler
 Resolved• CatropeT330694 tokens: Split out deprecated tokens into separate file
 DuplicateNoneT325337 Make it easier to use design tokens in MediaWiki
 DuplicateNoneT325338 Document how to use the design tokens in MediaWiki
 ResolvedVolker_ET313935 Governance & Guidelines: Design System Token Catalog
 Resolved• CatropeT318016 Provide a way to inject Codex tokens into WikimediaUI Base variables, while later are widely used
 Resolved• CatropeT322274 [Epic] Publish the design-tokens package in NPM
 Resolved• CatropeT314441 Install TypeScript in the design-tokens package
 ResolvedVolker_ET309050 Developer experience feedback on Design Tokens
 Resolved• CatropeT321637 Remove 'dist/' from import paths
 Resolved• CatropeT324367 Enable Codex tokens to work with different font sizes
 OpenNoneT326900 Vertical centering issues of text/multiline text and icons in several components
ResolvedovasilevaT328053 Verify impact of Design Systems Team's Codex Update on Web properties
 ResolvedBUG REPORTVolker_ET329287 TypeaheadSearch: Search footer icon shrinks at 14px base font size
 Resolved• CatropeT305118 Ensure backwards-compatibility of Codex tokens
 Resolved• DAbadT313933 Governance & Guidelines: Design System Visual Style (Design Token) Guidelines
 DuplicateNoneT305272 docs: Redesign color tokens demo to show color palette
 ResolvedVolker_ET331790 Add `text-overflow` tokens

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)
• STH changed the status of subtask T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries from Open to Stalled.Apr 27 2022, 2:01 PM
• STH changed the status of subtask T305411: Codex demo CSS should use default theme 'WikimediaUI' design tokens from Open to In Progress.May 1 2022, 1:23 PM
• iamjessklein closed subtask T295603: Define and document protocol – for designing future tokens as Resolved.May 2 2022, 4:55 PM
• STH added a parent task: T302025: Upgrade Codex to Beta version.May 20 2022, 4:34 PM
Volker_E updated the task description. (Show Details)May 26 2022, 2:10 AM
• STH changed the status of subtask T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma from Open to In Progress.May 26 2022, 5:03 PM
Volker_E updated the task description. (Show Details)Jul 24 2022, 6:55 PM
• 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 added a subtask: T306396: Extend the system's cursors.Aug 2 2022, 10:23 AM
• Sarai-WMDE changed the status of subtask T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries from Stalled to Open.Aug 3 2022, 5:27 PM
ldelench_wmf moved this task from Quarterly Plan to Design-System-Product-Roadmap on the Design-System-Team board.Aug 12 2022, 1:36 PM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.
ldelench_wmf moved this task from Now to Later on the Design-System-Team (Design-System-Product-Roadmap) board.Aug 12 2022, 2:15 PM
ldelench_wmf closed subtask T306396: Extend the system's cursors as Resolved.Aug 14 2022, 11:18 PM
Volker_E updated the task description. (Show Details)Aug 15 2022, 4:10 PM
bmartinezcalvo changed the status of subtask T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries from Open to Stalled.Aug 16 2022, 2:24 PM
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
Restricted Application edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap). · View Herald TranscriptSep 16 2022, 9:03 PM
Volker_E updated the task description. (Show Details)Sep 22 2022, 5:03 PM
Volker_E updated the task description. (Show Details)Oct 3 2022, 6:40 AM
bmartinezcalvo changed the status of subtask T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma from In Progress to Stalled.Oct 24 2022, 4:30 PM
Volker_E closed subtask T300856: Evaluate and settle on design tokens nomenclature as Invalid.Oct 29 2022, 1:18 AM
Volker_E updated the task description. (Show Details)Nov 4 2022, 4:38 AM
Volker_E closed subtask T321738: Refine token implementation guidelines to reflect theme option to decision tokens clearer as Invalid.Nov 8 2022, 6:18 AM
ldelench_wmf edited projects, added Design-System-Team (Design-System-Product-Roadmap); removed Design-System-Team.Dec 6 2022, 6:05 PM
Volker_E closed subtask T322705: Refine animation tokens: Add `infinite` as option and decision as Resolved.Dec 6 2022, 8:18 PM
Volker_E updated the task description. (Show Details)Dec 7 2022, 7:09 PM
Volker_E closed subtask T322388: Lint styles against using non-Codex-tokens or keywords as Resolved.Dec 7 2022, 11:14 PM
Volker_E updated the task description. (Show Details)Dec 7 2022, 11:33 PM
Volker_E updated the task description. (Show Details)Dec 7 2022, 11:41 PM
Volker_E added a subtask: T322274: [Epic] Publish the design-tokens package in NPM.
Volker_E updated the task description. (Show Details)Dec 8 2022, 4:39 AM
Volker_E closed subtask T295840: Add “WikimediaUI theme” choice (global raw value collection) tokens to Codex package as Invalid.Dec 8 2022, 4:45 AM
Volker_E updated the task description. (Show Details)Dec 8 2022, 5:25 AM
Volker_E updated the task description. (Show Details)Dec 12 2022, 5:34 PM
Volker_E updated the task description. (Show Details)Dec 12 2022, 5:39 PM
• Catrope added a subtask: T324367: Enable Codex tokens to work with different font sizes.Dec 12 2022, 5:47 PM
Volker_E updated the task description. (Show Details)Dec 12 2022, 5:47 PM
bmartinezcalvo closed subtask T295991: Define and document the visual guidelines for styles/design tokens of the Codex design system in Figma as Resolved.Dec 12 2022, 5:50 PM
bmartinezcalvo updated the task description. (Show Details)Dec 12 2022, 5:53 PM
Volker_E updated the task description. (Show Details)Dec 12 2022, 9:40 PM
ldelench_wmf added a subtask: T313935: Governance & Guidelines: Design System Token Catalog.Dec 16 2022, 3:22 PM
Volker_E updated the task description. (Show Details)Dec 19 2022, 6:21 PM
Volker_E updated the task description. (Show Details)Dec 19 2022, 7:53 PM
Restricted Application added a subscriber: Masumrezarock100. · View Herald TranscriptDec 19 2022, 7:53 PM
ldelench_wmf added a subtask: T318016: Provide a way to inject Codex tokens into WikimediaUI Base variables, while later are widely used.Dec 19 2022, 10:32 PM
ldelench_wmf mentioned this in T324688: Publish design tokens as JS variables.Dec 19 2022, 10:34 PM
ldelench_wmf subscribed.EditedDec 19 2022, 10:41 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.

ldelench_wmf mentioned this in T305411: Codex demo CSS should use default theme 'WikimediaUI' design tokens.Dec 19 2022, 10:45 PM
ldelench_wmf removed a subtask: T305411: Codex demo CSS should use default theme 'WikimediaUI' design tokens.
ldelench_wmf mentioned this in T295711: Turn component-specific (SFC) Less variables into Codex design tokens.
ldelench_wmf added a subtask: T313933: Governance & Guidelines: Design System Visual Style (Design Token) Guidelines.Dec 19 2022, 10:49 PM
bmartinezcalvo changed the status of subtask T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries from Stalled to In Progress.Dec 20 2022, 11:35 AM
ldelench_wmf closed subtask T295605: Documentation: Designing tokens as Resolved.Jan 27 2023, 4:08 PM
egardner changed the status of subtask T325237: Enable and document use of Codex design tokens within MediaWiki from Open to In Progress.Feb 6 2023, 5:14 PM
ldelench_wmf closed subtask T313933: Governance & Guidelines: Design System Visual Style (Design Token) Guidelines as Resolved.Feb 13 2023, 3:57 PM
• Catrope closed subtask T324367: Enable Codex tokens to work with different font sizes as Resolved.Feb 13 2023, 5:34 PM
Volker_E updated the task description. (Show Details)Feb 14 2023, 2:36 PM
ldelench_wmf added a subtask: T305272: docs: Redesign color tokens demo to show color palette.Feb 14 2023, 2:45 PM
Volker_E updated the task description. (Show Details)Feb 15 2023, 5:09 PM
Volker_E closed subtask T322712: tokens: Add `background-position` option and decision token with value `center` as Resolved.Feb 17 2023, 8:48 PM
ldelench_wmf updated the task description. (Show Details)Feb 17 2023, 10:49 PM
ldelench_wmf edited projects, added Design-System-Team; removed Design-System-Team (Design-System-Product-Roadmap).Feb 18 2023, 12:41 AM
bmartinezcalvo closed subtask T295606: Create Figma styles based on design tokens and apply them to the Codex and OOUI Figma libraries as Resolved.Feb 22 2023, 10:45 AM
Volker_E updated the task description. (Show Details)Feb 22 2023, 2:20 PM
AnneT moved this task from Inbox to Infrastructure on the Codex board.Mar 1 2023, 4:36 PM
ldelench_wmf moved this task from Inbox to Needs Refinement on the Design-System-Team board.Mar 3 2023, 9:29 PM
Volker_E updated the task description. (Show Details)Mar 7 2023, 2:07 PM
Volker_E updated the task description. (Show Details)Mar 7 2023, 2:14 PM
Volker_E added a subtask: T331790: Add `text-overflow` tokens.Mar 12 2023, 2:32 PM
Volker_E closed subtask T331790: Add `text-overflow` tokens as Resolved.Mar 15 2023, 3:26 PM
Volker_E closed subtask T325237: Enable and document use of Codex design tokens within MediaWiki as Resolved.Apr 3 2023, 9:40 PM
Volker_E updated the task description. (Show Details)Apr 4 2023, 3:33 PM
Volker_E updated the task description. (Show Details)Apr 18 2023, 12:35 PM
ldelench_wmf closed subtask T313935: Governance & Guidelines: Design System Token Catalog as Resolved.Apr 18 2023, 5:07 PM
ldelench_wmf added a subtask: T334934: [EPIC] Replace WikimediaUI Base variables with Codex design tokens (mediawiki.skin.variables).Apr 19 2023, 9:03 PM
Volker_E updated the task description. (Show Details)May 16 2023, 2:54 AM
CCiufo-WMF closed this task as Resolved.Jun 6 2023, 10:01 PM
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.

Volker_E mentioned this in T334934: [EPIC] Replace WikimediaUI Base variables with Codex design tokens (mediawiki.skin.variables).Nov 6 2023, 5:08 AM
Volker_E removed a subtask: T334934: [EPIC] Replace WikimediaUI Base variables with Codex design tokens (mediawiki.skin.variables).
Volker_E closed subtask T318016: Provide a way to inject Codex tokens into WikimediaUI Base variables, while later are widely used as Resolved.Nov 7 2023, 12:28 AM
Volker_E updated the task description. (Show Details)Nov 13 2023, 10:11 AM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL · Credits