@colobri-ui/tokens

Are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc.

1. installation

yarn add @colibri-ui/tokens

2. demonstration

import { FamilyTypeTokens, ColorsTypeTokens } from "@colibri-ui/tokens";

const fontFamily: FamilyTypeTokens = {
  default: "Open Sans",
  styles: {
    black: "Open Sans Black",
    bold: "Open Sans Medium",
  },
};

const colors: ColorsTypeTokens = {
  gray: {
    "100": "#fafafa",
  },
};

For better understanding, I recommend using @colibri-ui/theme that implements this library in practice.