Paste

Design System

Theme Package

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

Version
2.0.4
Sources
Storybook
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.Provider>

Props#

PropTypeDescriptionDefault
theme?enum'default', '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.

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

  • chore(icons): update icon list for storybook

  • fix(spinner): use new icon

  • fix(storybook): use new icon for story

  • fix(story): button icons should be 24px

  • fix: adjust icon size tokens

  • feat: add iconSizes as separate key in theme-tokens

  • feat(icons): icons package to use tokens and update icons

  • fix(spinner): update to use tokens and new icons

  • fix(button): use correct spinner size

  • fix(icons): major icons package fixes

  • huge overhaul to build process
  • now uses rollup
  • builds into cjs and esm directories
  • made the package publishable to npm
  • moved svg folder out of src, now src only holds react stuff
  • updated scripts to use new paths and cleaned up the code
  • programmatically generates rollup config from the icon-list command
  • chore: add new icons dist folders to gitignore

  • fix: spinner and button icon usage

  • feat(icons): add rollup icon list cache file

  • fix(core-bundle): sort packages for consistent builds

  • chore: use esm instead of es in rollup for correctness

  • chore: yarn.lock

  • fix(spinner): lint error

  • chore(icons): move rollup icon list

  • chore(spinner): use types package in story

  • fix(spinner): swap out destructured props for explicit props

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

  • fix(theme-tokens): add sizes key for styled-system responsiveness

  • fix(absolute): update to newer Box

  • fix(types): allow for responsive values via array

  • fix(box): update story and light tweaks to OverflowProps

  • chore: update yarn.lock file

  • fix(types): many more types fixes

refactor: moved ValueOf into types package

  • fix(box): eslint error in story

  • fix(box): using the correct BorderProps definition

fix: we shouldn't allow users to pass the border shorthand, it circumvents tokens

  • fix: lint errors

  • fix(website): update box docs

  • fix(storybook): use theme breakpoints

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)