Sharing here as well, as representative of the Design Systems Team we're
proud to announce…
---------- Forwarded message ---------
From: Roan Kattouw <rkattouw(a)wikimedia.org>
Date: Wed, Oct 25, 2023 at 9:07 AM
Subject: [Wikitech-l] Announcing Codex 1.0
To: Wikimedia developers <wikitech-l(a)lists.wikimedia.org>
Today the Design Systems Team
<https://www.mediawiki.org/wiki/Design_Systems_Team> is announcing the
release of Codex 1.0!
What is Codex?
Codex <https://doc.wikimedia.org/codex/latest/> is the new design system
for Wikimedia. Over the past 2 years, the Design Systems Team and
contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the
volunteer communities have collaborated to create a centralized design
system to serve Wikimedia projects. Codex provides more equitable
experiences for all Wikimedia movement participants, and makes it easier
and faster to design and build consistent user interfaces. With Codex, we
aim to enable more people to contribute to the mission.
Codex provides a library of design tokens
<https://doc.wikimedia.org/codex/latest/design-tokens/overview.html>, user
interface components
<https://doc.wikimedia.org/codex/latest/components/overview.html>, and
catalog of icons
<https://doc.wikimedia.org/codex/latest/icons/overview.html> to use with
these components. Through the Codex Figma libraries, designers can reuse
these shared components
<https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-component…>
, tokens
<https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?t…>,
and assets
<https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2…>
in
their designs. For developers, Codex provides components built with Vue.js,
as well as some CSS-only components that do not require JavaScript to use.
Codex is already being used for Wikifunctions
<https://www.mediawiki.org/wiki/Extension:WikiLambda>, Vector 2022
<https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/Se…>,
the Growth Mentor Dashboard
<https://www.mediawiki.org/wiki/Growth/Mentor_dashboard> and Impact Module
<https://www.mediawiki.org/wiki/Growth/Positive_reinforcement>, the New
Pages Feed
<https://en.wikipedia.org/wiki/Wikipedia:Page_Curation/2023_Moderator_Tools_…>
, MediaSearch <https://www.mediawiki.org/wiki/Extension:MediaSearch>,
NearbyPages <https://www.mediawiki.org/wiki/Extension:NearbyPages>,
QuickSurveys <https://www.mediawiki.org/wiki/Extension:QuickSurveys>, and
ReadingLists <https://www.mediawiki.org/wiki/Extension:ReadingLists>.
Projects currently under development using Codex include Accessibility for
reading
<https://www.mediawiki.org/wiki/Reading/Web/Accessibility_for_reading> and
the Incident Reporting System
<https://meta.wikimedia.org/wiki/Private_Incident_Reporting_System>.
Codex provides a set of core components
<https://www.mediawiki.org/wiki/Design_Systems_Team/Codex_Planned_Components>
that
cover a wide range of Wikimedia user interface needs, but does not
necessarily provide equivalents of all components in OOUI
<https://www.mediawiki.org/wiki/OOUI>. If you find that a component you
were expecting to use is missing, please talk to the Design Systems Team
<https://www.mediawiki.org/wiki/Design_Systems_Team/Working_with_us> and
we'd be happy to help you. We strongly encourage contribution to Codex
<https://doc.wikimedia.org/codex/latest/contributing/overview.html>, in
line with our vision of being a collaborative project guided by stewardship.
Why 1.0 now?
The Design Systems Team has been working towards this milestone for a
number of months now. Based on early feedback, we’ve already made
improvements to the developer experience of using Codex, like providing
ready-to-go example repos
<https://gitlab.wikimedia.org/repos/design-systems/CodexExample> of using
Codex in a MediaWiki extension and changing our code snippets in the doc
site for easier copy-paste into non-TypeScript and MediaWiki-specific
projects.
We also dedicated significant time and effort ensuring accessibility of
Codex components and assets conform to WCAG 2.1 AA and other standards, and
plan to engage with groups like the American Foundation for the Blind for
further improvements.
We’ve been consolidating various design resources (like the design style
guide <https://design.wikimedia.org/style-guide/>) into Codex so there is a
single source of truth for Wikimedia front-end development and design
standards. This is to clarify Codex’s role not just as a UI library, but as
the design system for Wikimedia.
Who should use Codex?
Everyone! Some foundational elements like design tokens can and should be
used in all Wikimedia software going forward. Most of the MediaWiki code
that uses the older pre-token variables from mediawiki.ui has already been
migrated to use the Codex tokens instead. The Codex wiki documentation
<https://www.mediawiki.org/wiki/Codex#Using_Codex_design_tokens> has more
information about using design tokens (and other elements) in MediaWiki.
At this time, Codex components are most suitable for client-side features
that don't have complex requirements for non-JavaScript support, or for
server-rendered interfaces that don't need much interactivity. Features
requiring both high interactivity and the need to support users without
JavaScript will need to create separate implementations of the feature
using CSS-only components and using Vue components. The Design Systems Team
has explored solutions that would allow a single Vue implementation to
support both non-JavaScript and JavaScript users in the future.
Gadget and user script developers who would like to use JavaScript for
interactivity cannot reliably use Codex at this time. However, this is
something the Design System Team is looking to provide a solution for in
the future. Further details and feedback is welcome on Phabricator
<https://phabricator.wikimedia.org/T313945>.
Eventually, we intend for Codex to mostly replace other user interface
libraries in the Wikimedia ecosystem, like OOUI and jquery.ui. Over time,
we hope this will make the design of features and the developer experience
less fragmented across the projects. We encourage people who want to make
their code more maintainable and use modern tools now and in the future to
consider migrating existing projects to Codex. For new projects, we
strongly recommend building with Codex from the beginning. This will ensure
you get the best and latest in design and engineering resources and tools,
accessibility compliance, and multilingual and internationalization support.
Next steps
The Design Systems Team is here to assist you in evaluating whether Codex
is suitable for your project and can help you put together a migration plan
for existing codebases.
Those who wish to get started with Codex can visit the documentation site
<https://doc.wikimedia.org/codex/latest/>. To get more detailed information
about using Codex in MediaWiki, you can visit the project wiki page
<https://www.mediawiki.org/wiki/Codex>. For a general list of resources,
you can visit our team wiki page
<https://www.mediawiki.org/wiki/Design_Systems_Team/Resources>.
Again, if you have any questions, feedback, or would like assistance from
the Design Systems Team, come talk to us
<https://www.mediawiki.org/wiki/Design_Systems_Team/Working_with_us>!
_______________________________________________
Wikitech-l mailing list -- wikitech-l(a)lists.wikimedia.org
To unsubscribe send an email to wikitech-l-leave(a)lists.wikimedia.org
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/