Page MenuHomePhabricator
Create Task
Maniphest T295843

Add design tokens visualization to Codex demo site
Closed, ResolvedPublic
Actions

Description

Goal

As part of T293127 and for better designers and developer experience, the Codex demo site should feature tokens list and visualization.

Prior art

WiKit implemented similar visualization in their Storybook demo.

image.png (1×2 px, 240 KB)

Details

Related Changes in Gerrit:
SubjectRepoBranchLines +/-
vitepress: Add design tokens visualizationdesign/codexmain+1 K -1
tokens: Make "npm run doc:dev" also watch tokens for changesdesign/codexmain+1 K -4
Customize query in gerrit

Related Objects
Search...

Event Timeline

Volker_E created this task.Nov 17 2021, 6:35 AM
Volker_E mentioned this in T293127: [EPIC] Design System Foundation: Design and define design tokens.
wiese added a comment.Nov 17 2021, 10:59 AM

Keep in mind that this is a universe in itself, with complexity only limited by imagination. The beauty of the topic is that it really lends itself to a generic solution. When we touched on this in wikit, design system / token support in storybook was still in its infancy (I was looking at this at the time), but there has been some movement since. Maybe you can find a ready-made building block which works well enough (and potentially contribute to it) to avoid having to create+own a custom one.

gerritbot added a comment.Dec 10 2021, 10:23 PM

Change 745956 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] vitepress: Add design tokens visualization

https://gerrit.wikimedia.org/r/745956

gerritbot added a project: Patch-For-Review.Dec 10 2021, 10:23 PM
gerritbot added a comment.Dec 10 2021, 10:29 PM

Change 745957 had a related patch set uploaded (by Catrope; author: Catrope):

[design/codex@main] design-tokens: Make \"npm run doc:dev\" also watch tokens for changes

https://gerrit.wikimedia.org/r/745957

gerritbot added a comment.Dec 16 2021, 6:26 AM

Change 745956 merged by jenkins-bot:

[design/codex@main] vitepress: Add design tokens visualization

https://gerrit.wikimedia.org/r/745956

Volker_E mentioned this in rDCOD0ebb586acfa2: vitepress: Add design tokens visualization.Dec 16 2021, 6:27 AM
gerritbot added a comment.Dec 16 2021, 7:34 AM

Change 745957 merged by jenkins-bot:

[design/codex@main] tokens: Make \"npm run doc:dev\" also watch tokens for changes

https://gerrit.wikimedia.org/r/745957

Volker_E mentioned this in rDCOD9bd4acd4695d: tokens: Make "npm run doc:dev" also watch tokens for changes.Dec 16 2021, 7:35 AM
Maintenance_bot removed a project: Patch-For-Review.Dec 16 2021, 8:10 AM
Volker_E updated the task description. (Show Details)Dec 17 2021, 12:22 AM
Volker_E mentioned this in T297923: Tokens visualization: Show only decision tokens.Dec 17 2021, 12:28 AM
Volker_E closed this task as Resolved.Dec 22 2021, 3:02 AM
Volker_E reassigned this task from Volker_E to Catrope.
Volker_E mentioned this in T302037: Create design prototype for how to display tokens in Codex documentation.Feb 18 2022, 8:57 PM
Volker_E merged a task: T289727: List/visualize a component's design tokens in Storybook.Mar 4 2022, 4:55 PM
Volker_E added a subscriber: • Sarai-WMDE.
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