@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";

To use these variables inside bespoke react typescript components:

import { base, ui, pickTokenValue } from "@biom3/design-tokens";
const DemoComponent = () => (
  <div
    style={{
      fontSize: base.text.body.medium.regular.fontSize,
      color: pickTokenValue(ui.text.body.color.primary, base),
    }}
  >
    test component text
  </div>
);

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-onLight.global.css"; // contains all "onLight" BASE design tokens
// import "@biom3/design-tokens/css/base-onDark.global.css"; // contains all "onDark" BASE design tokens
import "@biom3/design-tokens/css/ui.global.css"; // contains all UI design tokens

*@NOTE All css-variable declarations are global styles scoped to the body selector, thus the base design-token files will overwrite each other, so you should only use 1 base design-token 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!).

To use these css variables, the procedure is simple:

@import "@biom3/design-tokens/css/base-onDark.global.css";
@import "@biom3/design-tokens/css/ui.global.css";

/* your bespoke item class styles */
.headingText {
  color: var(--ui-text-heading-color-primary);
}