@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);
}

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 can't be used inside media query conditions, so this library does not expose any breakpoint tokens.

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"]
}