This package contains design tokens from the B.C. Design System.

Questions? Open a GitHub issue or email the design system team/a>.

See main repository: https://github.com/bcgov/design-system

To use, install this package (npm i @bcgov/design-tokens) and import the design tokens for your platform. Reference the design tokens according to your platform's needs.

This package includes tokens in JavaScript (ECMAScript Module and CommonJS), CSS and SCSS formats.

Try this first! Using JavaScript variables can give you a better developer experience with autocomplete.

The js directory contains an index file with the tokens in ESM format: js/index.js

TypeScript definitions are includes at: js/index.d.ts

Example import:

import * as tokens from "@bcgov/design-tokens/js";

To help avoid name collisions, prefixed versions of the ESM variables with bcds added are available: js-prefixed/index.js

Some environments don't support ESM imports. For these situations, a CommonJS module is included.

The cjs directory contains an index file with tokens in CJS format: cjs/index.js

TypeScript definitions are included at: cjs/index.d.ts

Example import:

const tokens = require("@bcgov/design-tokens/cjs");

To help avoid name collisions, prefixed versions of the CJS variables with bcds added are available: cjs-prefixed/index.js

CSS variables are included at: css/variables.css

To help avoid name collisions, prefixed versions of the CSS variables with bcds added are available: css-prefixed/variables.css

SCSS variables are included at: scss/variables.scss

To help avoid name collisions, prefixed versions of the SCSS variables with bcds added are available: scss-prefixed/variables.scss

import * as tokens from "@bcgov/design-tokens/js";

function Button({ children, ...props }) {
  return (
    <button
      style={{
        backgroundColor: tokens.surfaceColorPrimaryButtonDefault,
        color: tokens.typographyColorPrimaryInvert,
      }}
    >
      {children}
    </button>
  );
}

import "@bcgov/design-tokens/css/variables.css";

function Button({ children, ...props }) {
  return (
    <button
      style={{
        backgroundColor: "var(--surface-color-primary-button-default)",
        color: "var(--typography-color-primary-invert)",
      }}
    >
      {children}
    </button>
  );
}