Paste

Design System

Theme Package

Paste Design System Theme Package which provides support for APIs to theme UIs and components.

Version
3.0.3
Sources
Install
yarn add @twilio-paste/theme

This package allows for straight-forward access to Paste design tokens via a Theme Provider to React components. By using this package, you can express your UIs with each of our supported themes, and get their associated token values.

Theme#

Paste components are built using Emotion and Styled System, and provide a Theme object containing our design tokens. This enables our components to be themed, and also provide styling properties to some of our design primtive components like Box and Text. The theme object is grouped by categories and within each category, a key represents a camelCase formatted design token name. To see our supported themes and their values, check out the Token List page.

For example: If you were looking for token $color-background-success, you would see it listed on key backgroundColors as colorBackgroundSuccess i.e. theme.backgroundColors.colorBackgroundSuccess.

The shape of the Theme object currently looks like this:

Object {
"backgroundColors": Object {},
"borderColors": Object {},
"borderWidths": Object {},
"breakpoints": Object {},
"colors": Object {},
"fontSizes": Object {},
"fontWeights": Object {},
"fonts": Object {},
"heights": Object {},
"iconSizes": Object {},
"lineHeights": Object {},
"maxHeights": Object {},
"maxWidths": Object {},
"minHeights": Object {},
"minWidths": Object {},
"radii": Object {},
"shadows": Object {},
"sizes": Object {},
"space": Object {},
"textColors": Object {},
"widths": Object {},
"zIndices": Object {},
}

Theme Provider#

By design, all Paste Components require you to wrap your application in the Paste Theme provider. This gives all wrapped components the necessary design token values with theme support needed to render correctly.

The Paste Theme Provider is a wrapper around the Emotion Theme Provider and comes with a default theme.

You should place the Theme.Provider around the root of your React application.

import {Theme} from '@twilio-paste/theme';
<Theme.Provider theme="console">
...
</Theme.Provider>

Props#

PropTypeDescriptionDefault
theme?enum'default', 'console', 'sendgrid''default'
customBreakpoints?string[]An optional array of string values for custom screen sizes in the usual CSS width formatstheme.breakpoints

Using Tokens in Custom Components#

While Paste will aim to provide ample coverage of Components for teams to compose UIs, there will be occasions where you may need to build a custom component. This may be because it's in Paste's future roadmap (and it's worthwhile to create a parallel component in the short term for your own product), or something that Paste will explicitly not build. In these cases, it's still critical to ensure that your component looks like a Paste component in order to build a seamless experience. To do so, we recommend the use of Paste Tokens in your styles to access global design properties used across Paste.

By using Theme.Provider while creating a custom component using Emotion CSS, the theme object is available on props via context. You can access it via the Styled-System themeGet utility or accessing the props object directly.

For example:

import styled from '@emotion/styled';
import { themeGet } from '@styled-system/theme-get';
const custom = styled.div`
background-color: ${themeGet('backgrounds.primary')};
padding: ${props => props.theme.spacing.spacing20};
`

Alternatives when not using Emotion#

Careful!

This is not a recommended approach for using Tokens. If you must do so, we strongly recommend reaching out at #help-design-system

If you are not using Emotion Styled Components or want to access the values of tokens in your React components outside of styling, there are three ways this can be achieved.

Paste ThemeConsumer#

Paste Theme provides Theme.Consumer - a React Context Consumer for the theme. It takes a function as a child, which provides the theme object as an argument.

import {Theme} from '@twilio-paste/theme';
<Theme.Consumer>
{({theme}) => {
return <p>What is the default text color {theme.textColors.colorText}</p>;
}}
</Theme.Consumer>

Paste useTheme Hook#

Paste Theme provides a React Hook called useTheme which returns the theme object from the React Context via the Theme Provider.

import React from 'react';
import { useTheme } from '@twilio-paste/theme';
const HookExampleComponent = (): React.ReactElement => {
const theme = useTheme();
return <p>What is the default text color {theme.textColors.colorText}</p>;
};

Higher Order Component#

Paste also provides a HOC Component, which is a wrapper around the Emotion HOC Component to access the theme object.

import React from 'react';
import { withTheme } from '@twilio-paste/theme';
const ExampleComponent = ({theme}) => (
<p>What is the default text color {theme.textColors.colorText}</p>
);
const ExampleComponentwithTheme = withTheme(ExampleComponent);

Give us Feedback on this Page#

As you use Paste, you'll likely encounter things that don't seem right. Please reach out with your feedback! Here's some prompts to consider:

  • Is this page easy for me to consume?
  • Is the information supporting it sufficient / well-described?
  • What information is missing?
  • How approachable is the documentation? Can a new engineer / PM / designer at Twilio get started with it easily?

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

3.0.3 (2020-02-13)

Note: Version bump only for package @twilio-paste/theme

3.0.2 (2020-02-03)

Note: Version bump only for package @twilio-paste/theme

3.0.1 (2020-01-17)

Note: Version bump only for package @twilio-paste/theme

3.0.0 (2019-12-20)

Features#

  • theme: add the console theme and update default theme (3951f82)

BREAKING CHANGES#

  • theme: Theme provider default theme is now DEFAULT, not CONSOLE. If you are not providing a theme prop but want the console theme you must now explicitly set the theme to console

2.0.5 (2019-12-19)

Note: Version bump only for package @twilio-paste/theme

2.0.4 (2019-12-05)

Note: Version bump only for package @twilio-paste/theme

2.0.3 (2019-11-20)

Note: Version bump only for package @twilio-paste/theme

2.0.2 (2019-11-18)

Bug Fixes#

  • design-tokens: change color-text-link token values (#172) (f0a215c)

2.0.1 (2019-11-12)

Note: Version bump only for package @twilio-paste/theme

2.0.0 (2019-11-11)

Bug Fixes#

Features#

  • icons: delete old icons, add new streamline icons (#129) (571791d)
  • enable theme switching on the docsite (#124) (df797e5)

BREAKING CHANGES#

  • icons: removed all the inherited icons since we're moving to a new system

1.0.1 (2019-10-31)

Note: Version bump only for package @twilio-paste/theme

1.0.0 (2019-10-29)

Features#

BREAKING CHANGES#

  • box: many Box API changes

0.4.1 (2019-09-16)

Bug Fixes#

  • design-tokens: fix SendGrid token values (#71) (396fccf)

0.4.0 (2019-08-15)

Bug Fixes#

Features#

  • ComponentHeader component, component overview fixes, more (#20) (875e124)
  • website: [DSYS-1046] website structure and navigation (306586e)