Background

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 https://gerrit.wikimedia.org/r/c/design/codex/+/848519 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 mediawiki.skin.variables, so teams don't have to import separately anymore]

Acceptance criteria

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