04) Distribute Visual Styles as Less Mixins
Codex is an implementation of the Wikimedia Design System intended for building web-based products and experiences. Each public release of Codex includes the following types of assets:
- Design Tokens (represented in JSON data, and also published as CSS, Less, and Sass variables)
- Icons (SVG files)
- Components (written in Vue.js)
We considered publishing a global CSS stylesheet for Codex that applied appropriate styling to base HTML elements (buttons, links, headings and paragraphs, etc). We also considered providing a stylesheet that targeted certain pre-defined classes (
However, we decided that both options here provided insufficient flexibility for feature teams who will be using these styles. We don't want to introduce new global styles inside of MediaWiki (where there is already a lot going on); similarly, we don't want to make any assumptions about markup or class names on the consumer side.
With Less mixins, we can write styles that tie together all necessary design tokens without making any assumptions about where that style should be applied. All targeting decisions can be made by library consumers in a way that suits their own projects. This approach seems like the best balance between design consistency and flexibility. Less is supported throughout MediaWiki, so this approach will not impose any additional technical requirements on users.
There are two kinds of circumstances where we will consider adding new public Less mixins to Codex:
- When we need to represent some kind of global visual style that doesn't map well onto a single Vue component (ex: typographic styles, grids, dividers).
Decisions on whether to implement a design as a Less mixin will be handled on a case-by-case basis.