Engineering Guidelines for Paste

Installation#

The best way to use Paste is by using the core package. Paste Core provides all of the current Paste components which are ready for use.

Paste Core requires external dependencies, and other Paste system packages in order to function properly.

Install the following dependencies using yarn:

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

Core package#

yarn add @twilio-paste/core

Usage#

Once Paste Core and the dependencies are installed, you can import the Paste Theme:

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 the Paste themed and tokenized components anywhere in your app:

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

Using Icons#

The Paste Icons package provides icon components. They can be used to enhance the appearance of a web interface and break up the monotony of text. Icons have to be imported individually.

Install Paste Icons using yarn:

yarn @twilio-paste/icons

Then you can use an icon inside your app:

import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon';
<Button variant="secondary" size="small" onClick={() => {}}>
  <PlusIcon decorative={true} />
  Add to cart
</Button>

For more information about our icon system, checkout our usage guide here.

Global Styles#

Many apps/websites utilize global stylesheets. Even though Paste styles are scoped at the component level, global styles can creep in and cause some havoc. Make sure to thoroughly test Paste components to verify everything looks as they should.

Fonts#

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.

Sandbox#