Page MenuHomePhabricator

[Epic] Publish the design-tokens package in NPM
Closed, ResolvedPublic



Codex is made up of several different modules (icons, design tokens, Vue components, etc). Currently we are publishing the Vue components and the icons as stand-alone packages on NPM; these packages are also embedded in MediaWiki core so that other MW features can use them.

The Codex design tokens are fundamental to the rest of our work in Codex, and we should publish these so that they are available to external users as well. This will make it easy for other teams who are authoring their own styles or components to do so in a way that aligns with the over-arching design system as much as possible.

However, making a package available for external users imposes some additional standards in terms of quality and stability. Some of the tokens must be clarified, renamed, or re-organized before this package is suitable for publication.

Necessary steps

  • Style Dictionary unit transforms (this became part of T297000). It ensures:
    • Accessibility (relative sizes where needed)
    • Themeability (provide simple way to change sizing units)
    • Developer experience (don't have to care about sizing in their Vue code)
  • As we've discovered more complexity in the first iteration of introducing relative sizing in connection with theming, we've decided to unbundle this task from the publishing tokens package to npm task to ensure a first tokens package release before eoy and resolve flexible sizing in a follow-up soon after.
  • Decide if missing font family category is a blocker for publishing first version: T322811 – design team decided it's not a blocker
  • Removing option tokens from token output and T309050 – depends on font-family legacy tokens. Note, that task linked features wider request and is not needed to be resolved for checking off this step.
  • Remove dist/ from the import path, to allow consumers to import the tokens into CSS/Less more easily T321637
  • Publish npm package; from here on teams like Growth can import and use the tokens in their extensions

Following steps after publishing

For clarifying the post-publishing sequence.
[5. Provide package to be consumed within WikimediaUI Base T318016]

[6. Provide package alongside, so teams don't have to import separately anymore]

Acceptance criteria

  • Publish 'codex-design-tokens' package to npm

Related Objects

Event Timeline

ldelench_wmf moved this task from Requests to Needs Refinement on the Design-Systems-Team board.
egardner renamed this task from Publish the design-tokens package in NPM to [Epic] Publish the design-tokens package in NPM.Nov 15 2022, 3:21 AM
egardner updated the task description. (Show Details)

Should we move T297000: Define the design system's size and spacing scale so that it is no longer a sub-task / blocker of this work? Perhaps that task should now be considered the sub-task of an epic around "Enable Codex to support theming" (can't recall if we already have a ticket for that or not).

If so, this task may be ready to close now that is live (and the LESS vars from the tokens are also available within MW core now).

I filed T324367 a few days ago to capture the unit transform work. I've made it a subtask of T297000 (as well as of T296689). I think that's the right structure, because I don't think T297000 is itself directly related to theming, they just have a dependency in common.

Now that we've released the package, I'm going to detach T297000 and T324367 as subtasks of this task, and close this task.