@biom3/design-tokens

@biom3/design-tokens

This package publishes via CICD to the public npm component: @biom3/design-tokens.

What's inside?

Through this component we expose our complete library of BIOME design tokens. They are made available for use as both:

1. exported typescript consts, and
2. css variable definitions inside of importable css files

Using the ts const design tokens:

To use the typescript design tokens, simply import them from the root of the pacakge. For example:

import { base, ui } from "@biom3/design-tokens";

Using the css variable design tokens:

All the BIOME design tokens can be imported and used as simple css variables, by importing css files from your App code. For example:

import "@biom3/design-tokens/css/base.global.css"; // contains all BASE design tokens which dont involve colour
import "@biom3/design-tokens/css/ui.global.css"; // contains all UI design tokens
import "@biom3/design-tokens/css/theme-light.global.css"; // contains all light theme base tokens
// import "@biom3/design-tokens/css/theme-dark.global.css"; // contains all dark theme base tokens

*@NOTE All css variable declarations are scoped to the body selector and will overwrite each other, so you should only use 1 theme css file at a time. Choose the theme css file based on whether you are planning to display UI in "onDark" or "onLight" (or add your own!).