@colibri-ui/tokens

Design tokens with keys, typings and default values

Usage no npm install needed!

<script type="module">
  import colibriUiTokens from 'https://cdn.skypack.dev/@colibri-ui/tokens';
</script>

README

@colobri-ui/tokens

npm package

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.