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-components?type=design , tokens https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?type=design, and assets https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2C-Logos%2C-Illustrations)?type=design 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/Search, 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_project , 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!
Congratulations team (and the predecessor teams) !
We started talking about needing a new way forward all the way back in 2017, with an RFC started in 2019, we choose Vue in 2020 and the teams have been building new foundations since, so far culminating in Codex !!
I'm sure there is much work left to do as the web and MediaWiki is ever evolving. Just recently the web finally added CSS nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting for instance, and new features like :has() https://developer.mozilla.org/en-US/docs/Web/CSS/:has and :user-valid() https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid selectors. Unfortunately Wikipedia/MediaWiki and specifically user scripts can have problems trying to keep up with so many changes. It is great to see that es6 https://www.mediawiki.org/wiki/ResourceLoader/ES6, less https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#Less, import, require https://www.mediawiki.org/wiki/ResourceLoader/Package_files and recently even source maps https://phabricator.wikimedia.org/T47514 are slowly finding their way into our ecosystem, all while supporting as many older browsers as possible and building one of the fastest websites in the world.
These improvements are only possible because dedicated people work hard to analyze the problems and these changes, devise solutions to slowly introduce them without breaking everything, align peers, fight to get time to work on it. All to shepherd them into existence, laborious and challenging as it may be at times.
Keep up the great work, but lets take a moment and celebrate the official birth of an entire new design system !
DJ
On Wed, Oct 25, 2023 at 6:07 PM Roan Kattouw rkattouw@wikimedia.org wrote:
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-components?type=design , tokens https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?type=design, and assets https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2C-Logos%2C-Illustrations)?type=design 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/Search, 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_project , 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@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
I want to echo what the DJ has said. I managed to write a pretty decent gadget in just a couple of hours thanks to Codex, something that used to take days at least. This is really exciting to see. Thank you to all who have worked on this tirelessly for years. Kudos and congratulations.
Am Mi., 25. Okt. 2023 um 20:28 Uhr schrieb Derk-Jan Hartman < d.j.hartman+wmf_ml@gmail.com>:
Congratulations team (and the predecessor teams) !
We started talking about needing a new way forward all the way back in 2017, with an RFC started in 2019, we choose Vue in 2020 and the teams have been building new foundations since, so far culminating in Codex !!
I'm sure there is much work left to do as the web and MediaWiki is ever evolving. Just recently the web finally added CSS nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting for instance, and new features like :has() https://developer.mozilla.org/en-US/docs/Web/CSS/:has and :user-valid() https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid selectors. Unfortunately Wikipedia/MediaWiki and specifically user scripts can have problems trying to keep up with so many changes. It is great to see that es6 https://www.mediawiki.org/wiki/ResourceLoader/ES6, less https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#Less, import, require https://www.mediawiki.org/wiki/ResourceLoader/Package_files and recently even source maps https://phabricator.wikimedia.org/T47514 are slowly finding their way into our ecosystem, all while supporting as many older browsers as possible and building one of the fastest websites in the world.
These improvements are only possible because dedicated people work hard to analyze the problems and these changes, devise solutions to slowly introduce them without breaking everything, align peers, fight to get time to work on it. All to shepherd them into existence, laborious and challenging as it may be at times.
Keep up the great work, but lets take a moment and celebrate the official birth of an entire new design system !
DJ
On Wed, Oct 25, 2023 at 6:07 PM Roan Kattouw rkattouw@wikimedia.org wrote:
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-components?type=design , tokens https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?type=design, and assets https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2C-Logos%2C-Illustrations)?type=design 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/Search, 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_project , 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@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
Wikitech-l mailing list -- wikitech-l@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
I am so happy. Thank you.
On Wed, Oct 25, 2023 at 17:02 Amir Sarabadani ladsgroup@gmail.com wrote:
I want to echo what the DJ has said. I managed to write a pretty decent gadget in just a couple of hours thanks to Codex, something that used to take days at least. This is really exciting to see. Thank you to all who have worked on this tirelessly for years. Kudos and congratulations.
Am Mi., 25. Okt. 2023 um 20:28 Uhr schrieb Derk-Jan Hartman < d.j.hartman+wmf_ml@gmail.com>:
Congratulations team (and the predecessor teams) !
We started talking about needing a new way forward all the way back in 2017, with an RFC started in 2019, we choose Vue in 2020 and the teams have been building new foundations since, so far culminating in Codex !!
I'm sure there is much work left to do as the web and MediaWiki is ever evolving. Just recently the web finally added CSS nesting https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting for instance, and new features like :has() https://developer.mozilla.org/en-US/docs/Web/CSS/:has and :user-valid() https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid selectors. Unfortunately Wikipedia/MediaWiki and specifically user scripts can have problems trying to keep up with so many changes. It is great to see that es6 https://www.mediawiki.org/wiki/ResourceLoader/ES6, less https://www.mediawiki.org/wiki/Manual:Coding_conventions/CSS#Less, import, require https://www.mediawiki.org/wiki/ResourceLoader/Package_files and recently even source maps https://phabricator.wikimedia.org/T47514 are slowly finding their way into our ecosystem, all while supporting as many older browsers as possible and building one of the fastest websites in the world.
These improvements are only possible because dedicated people work hard to analyze the problems and these changes, devise solutions to slowly introduce them without breaking everything, align peers, fight to get time to work on it. All to shepherd them into existence, laborious and challenging as it may be at times.
Keep up the great work, but lets take a moment and celebrate the official birth of an entire new design system !
DJ
On Wed, Oct 25, 2023 at 6:07 PM Roan Kattouw rkattouw@wikimedia.org wrote:
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-components?type=design , tokens https://www.figma.com/file/mRvSsFD2Kwh8AZNjlx7rIl/%E2%9C%A8-Design-tokens?type=design, and assets https://www.figma.com/file/1lT9LKOK6wiHLnpraMjP3E/%E2%9D%96-Assets-(Icons%2C-Logos%2C-Illustrations)?type=design 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/Search, 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_project , 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@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
Wikitech-l mailing list -- wikitech-l@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org
https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
-- Amir (he/him)
Wikitech-l mailing list -- wikitech-l@lists.wikimedia.org To unsubscribe send an email to wikitech-l-leave@lists.wikimedia.org https://lists.wikimedia.org/postorius/lists/wikitech-l.lists.wikimedia.org/
If someone wants to propose a post about this for the mediawiki mastodon account via mastocollab would be great :)
wikitech-l@lists.wikimedia.org