Guidance for developers on how to install and use the B.C. Design System tokens package.
Developers can access and use tokens by installing the B.C. Design Tokens package as a dependency. The package is available on npm:
Install the B.C. Design Tokens package
Release notes and changelogs for each version of the package are available on npm.
The package is open source, and published under the Apache 2.0 license. The source code is published on GitHub.
Currently, we publish tokens in three formats:
TypeScript declarations are included for both JavaScript implementations.
The design tokens package uses semantic versioning (major.minor.patch). Because design tokens affect the public-facing design of your interface, we recommend:
We may be able to support other formats or languages on request. If you need an alternative implementation for your project, open an issue on GitHub or email designsystem@gov.bc.ca.
Once you've installed the design tokens package, import your preferred version of the variables file into your project.
To find a specific token, search by element (eg. 'border'), state (eg. 'hover' or 'warning') or a specific style (eg. 'H1').
The design tokens library includes almost 200 individual tokens. Tokens are organised by type and intended usage:
To explore the full list of tokens, view the design tokens glossary.
The design tokens package includes 'prefixed' and 'non-prefixed' versions for each supported format.
Prefixed variables include a 'BCDS' namespace value at the start of each variable, to reduce the risk of collision with existing styles or variables.
Non-prefixed variables more closely match code generated by Figma, and may make collaboration and handoff with designers using the B.C. Design Tokens library easier.
There are no other differences between the two formats. Use whichever is best suited for your use-case.