@biom3/design-tokens

@biom3/design-tokens

This package publishes via CICD to the public npm component: @biom3/design-tokens. To read more, see the theming & tokenisation proposal document.

To see an overview of the entire design-tokens taxonomy, see this document.

What's inside?

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

• exported typescript consts, and
• 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 } from '@biom3/design-tokens';

BIOME's default colour scheme is onLight. Therefore, when you import the base, or onLightBase design-tokens, you will get ONLY the onLight colors and gradients.

To use these design-token variables inside bespoke react typescript components:

import {
  onDarkBase,
  onLightBase,
  smartPickTokenValue,
} from '@biom3/design-tokens';
const DemoComponent = () => (
  <div
    style={{
      fontSize: onLightBase.text.body.medium.regular.fontSize,
      color: smartPickTokenValue(onDarkBase, 'base.color.brand.1'),
    }}
  >
    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/text.global.css'; // contains all fonts (@font-face) imports

*@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 see a complete listing of all available design-token css-variables, you can inspect the body element inside your browser's dev tools. For example:

Then, to use these css-variable design-tokens:

/* some custom styles.css file: */
@import '@biom3/design-tokens/css/base-onDark.global.css';
@import '@biom3/design-tokens/css/text.global.css';

/* your bespoke item class styles */
.headingText {
  color: var(--base-color-brand-1);
}