Skip to content

Codex is the Design System for Wikimedia. Codex features a toolkit for building user interfaces, containing design tokens, Vue 3 components and VitePress documentation site packages. This is a mirror from https://gerrit.wikimedia.org/g/design/codex/

License

Notifications You must be signed in to change notification settings

wikimedia/design-codex

Repository files navigation

Codex

Codex is the design system for Wikimedia. The Codex repository contains four packages:

Codex features:

  • Wide-ranging support for internationalization and global usage
  • Web accessibility compliant (Web Content Accessibility Guidelines 2.1 level AA)
  • Comprehensive browser and device support

Quick start

Usage

To install:

npm install --save-dev @wikimedia/codex @wikimedia/codex-icons

To use components:

import { CdxButton, CdxTextInput } from '@wikimedia/codex';

To use icons:

import { cdxIconAlert, cdxIconNewWindow } from '@wikimedia/codex-icons';

For more information on how to set up and use the library, see the usage documentation.

Development

Codex development requires the following:

  • Node: the required version is pinned in .nvmrc. To install and use the required version of Node, run nvm install "$(<.nvmrc)" then nvm use in the root of the repository.
  • npm: version 7 or higher is required to support workspaces; it is not included by default in older versions of Node (prior to version 15) and will need to be upgraded manually. You can do this with nvm via nvm install --latest-npm.

Helpful commands:

  • npm install in the root of the repository to install requirements for all workspaces
  • npm run doc:dev to start the docs site
  • npm run dev to start the Vite sandbox
  • npm run test:unit -w @wikimedia/codex to run unit tests for e.g. the codex workspace. Read more about testing.

See the contributing code guidelines for more information.

Contributing

If you'd like to contribute, head over to the contributing docs to learn about our processes and ways you can contribute.

Maintainers

Codex is maintained by the Design System Team of the Wikimedia Foundation. It is designed and developed by contributors from the Wikimedia Foundation, Wikimedia Deutschland, and the Wikimedia volunteer community.

To contact us or to learn more about current and future work, visit our workboard or the Design System Team page on mediawiki.org.

About

Codex is the Design System for Wikimedia. Codex features a toolkit for building user interfaces, containing design tokens, Vue 3 components and VitePress documentation site packages. This is a mirror from https://gerrit.wikimedia.org/g/design/codex/

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks