Need private packages and team management tools?Check out npm Teams »

@twilio-paste/theme

3.1.1 • Public • Published

Theme Provider

Paste Components require you to wrap your application in the Paste Theme provider to apply the theme tokens to the components you use, and provide a way to access Paste Design Tokens in your custom components.

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>;

Using tokens in custom components

Sometimes you will need to create something custom that is not available in Paste but you need that component to still look like it's from Paste. The use of Paste Tokens in your styles is the way that you can access global design properties used in all Paste Components.

Emotion Styled Component

By using the Theme.Provider, when you create a custom component using Emotion CSS, the theme object is available on props via context. You can access those via the Styled-System themeGet utility or props object directly.

This is the preferred method.

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};
`;

Paste ThemeConsumer

Paste Theme provides a React Context Consumer for the theme called Theme.Consumer. The Theme.Consumer 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 be able 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);

Keywords

none

Install

npm i @twilio-paste/theme

DownloadsWeekly Downloads

529

Version

3.1.1

License

MIT

Unpacked Size

141 kB

Total Files

28

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar
  • avatar