Design Tokens

Installation

If you're planning to use our components for web:

pnpm add @pleo-io/telescope

If you're only planning to use our tokens:

pnpm add @pleo-io/telescope-tokens

Usage

When using the main @pleo-io/telescope package:

import {tokens} from '@pleo-io/telescope'

const SomeComponent = styled.div`
    color: ${tokens.shade900};
`

When using the @pleo-io/telescope-tokens package:

import * as tokens from '@pleo-io/telescope'

const SomeComponent = styled.div`
    color: ${tokens.shade900};
`

Updates

Changes to our design tokens can be made in the tokens package. We use a tool called Style Dictionary to manage our design tokens in code and output them in various platform formats. Updates are infrequent, so we currently keep code and design in sync manually. That means changes also need to be made in our tokens libraries in Figma.