Paste

Design System

Installation#

Currently, every package is standalone in the paste project. While this means you only get what you need, it makes it a little more tedious to get started. We hope to address this in the near future, but for now you can run:

External dependencies#

yarn add react react-dom @emotion/core @emotion/styled styled-system @styled-system/theme-get react-uid

System packages#

yarn add @twilio-paste/types @twilio-paste/style-props @twilio-paste/design-tokens @twilio-paste/theme-tokens @twilio-paste/theme @twilio-paste/icons @twilio-paste/core

Setup#

Fonts in Paste

Paste leaves it up to you to load the fonts needed for the theme you've selected. Console uses Whitney ScreenSmart and SendGrid uses Colfax

The Whitney font is loaded by the Typography.com service and is only allowed on *.twilio.com domains as well as localhost. Make sure to serve your app from the correct hostname if you're having issues with font loading

8 minute video walkthrough#

Be gentle :P - this was recorded in one take on zoom.

Usage#

import {Theme} from '@twilio-paste/theme';
// Wrap your root component with the Theme.Provider like so:
<Theme.Provider theme="default">
    // other stuff here
</Theme.Provider>

Now you can use our themed and tokenized components anywhere in your app:

import {Box} from '@twilio-paste/box';
<Box margin="space20" backgroundColor="colorBackground">
    Hello Paste!
</Box>

Our tokens are readily available on our components and typescript typings are provided.

Sandbox#