npm packages

Learn how to use the npm packages within your website or application.

Packages

The use of npm packages allows our team to create, update and release artefacts that are versioned and consistent across all users.

They allow for easy installation, management and upgrades of Ontario Design System styles, fonts and components.

Choose the right package for your project

The Ontario Design System offers 4 types of packages that bundle different parts of the Design System:

• design tokens
• global styles
• complete styles
• component libraries

Design tokens

The design tokens package includes all of the design tokens that are raw values used throughout the design system, such as colours, fonts, and generic elements and layouts.

It forms the base of the Ontario Design System npm packages. It can also be used to access the design tokens directly in projects, if you don’t want to use the global styles package.

Global styles

The global styles package is the shared base package of the Ontario Design System styles.

It includes the Ontario Design System global styles and fonts and other assets for generic elements and layouts, but does not include component-specific styles. It can be used to access the base styles to build additional components.

Most users should be using the complete styles package or one of the component library packages within their applications to have access to all available styles and assets.

Complete styles

The complete styles package is a collection of all the Ontario Design System styles and assets.

It includes the Ontario Design System global styles, fonts, logos and icons, as well as component-specific styles.

If you’re looking to upgrade to the npm packages from the distribution package, start with the complete styles package. This package will give you the fonts, assets and styles for use with existing HTML components from the distribution package.

Web component libraries

The web component libraries contain the Ontario Design System web components. Each of them targets a different JavaScript framework, including regular HTML, React and Angular.

Available component library packages:

• Web Component Library
  • Use this package if you are working with plain HTML or any framework/tooling that does not use React or Angular. It contains our premade web component versions of our Design System components.
• React Web Component Library
  • Use this package if you are working with React for your application, including with toolchains like Gatsby or NextJS.
• Angular Web Component Library
  • Use this package if you are working with Angular for your application.