@bi-digital/tokens

The @bi-digital/tokens lib contains CSS variables to be used in the BI Design System. We offer tokens in CSS, SASS, and JS format.

In most cases, you do not need to download the token package itself, as @bi-digital/css already offers all tokens as CSS variables.

We recommend using the tokens as CSS variables, as they are a native CSS feature.

All tokens are prefixed with bi.

Usage

In .css-files:

@import '@bi-digital/tokens';

.example {
  color: var(--bi-primary-80);
}

In .scss-files:

@use '@bi-digital/tokens/dist/tokens' as tokens;

.example {
  color: tokens.$bi-primary-80;
}

CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/@bi-digital/tokens@latest/dist/tokens.css"></script>

We recommend replacing latest with a specific version to avoid errors when the library is updated.

Variables in media queries

CSS custom properties do not support the use of variables in media queries, but for users of SCSS, this works. You must import the SCSS variables from @bi-digital/tokens directly:

@use '@bi-digital/tokens/dist/tokens' as tokens;

@media (min-width: tokens.$bi-breakpoints-sm) {
  .example {
    color: tokens.$bi-primary-80;
  }
}

VSCode-extensions

For users of VSCode, you can use the extension "Css Custom Properties" (Tock.vscode-css-custom-properties) for autocomplete of tokens. You need to add the following settings:

{
  "cssCustomProperties.files": ["@bi-digital/**/tokens.css"],
  "cssCustomProperties.languages": ["css", "scss"]
}