@tokens-studio/types

Tokens Studio Types

This repository is a collection of type definitions relating to Tokens Studio.

It currently exports types for all the available types of Design Tokens, as they exist in the Tokens Studio Figma Plugin. It also includes some type definitions for things like the $themes.json schema, HSLA/RGBA values, color modifier options and composition tokens.

Installation

With NPM:

npm install @tokens-studio/types

Documentation

See our documentation site here

Usage

import { SingleTypographyToken } from '@tokens-studio/types';

function logTypographyToken(token: SingleTypographyToken) {
  // because token is properly typed, we get autocomplete
  // e.g. token.type will be typed as "typography"
  const { value } = token;
  if (typeof value === 'string') {
    console.log(value);
  } else {
    // due to proper type, we get these properties autosuggested properly
    console.log(`${value.fontWeight} ${value.fontSize}/${value.lineHeight} ${value.fontFamily}`);
  }
}

Changelog

0.4.0

Minor Changes

• e994ecc: Add compatibility with W3C DTCG specification for design tokens.